Circle Shadow Experiment
Don't Reinvent the Wheel

In your "STEP 1", you are manually setting each pixel of the background to black. This is expensive and unnecessary. You can simply draw a black rectangle the size of the canvas:

ctx.fillStyle = "rgb(0, 0, 0)";
ctx.fillRect(0, 0, Width, Height);


Next, in "STEP 2" why are you using your own line drawing routines? You could simply call the built-in routines, like:

ctx.beginPath();
ctx.moveTo(x0, y0);
ctx.lineTo(x1, y1);
ctx.stroke();


And to draw circles, you can use the arc() method:

ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, 2.0 * Math.PI, false);
ctx.fillStyle = "rgb (1, 1, 1);"
ctx.fill();


This will likely be much faster than rolling your own.

Naming

I find your variable names hard to read and understand. Names like xCL, yCL and xMP, yMP are not very descriptive. Maybe centerX, centerY and midPointX and midPointY instead?

Also, iCL seems to be unused. It can be removed.

Abuse of Lambdas

Your entire drawing function (the main purpose of your program) is an anonymous function passed as an argument to another function. It's difficult to follow the flow of it all, and it's odd that the most important thing in your code is a single argument to a function that merely collects stats.

And then you mix in stats collection in the actual function that does the drawing. I'd separate it all out, like this:

function draw()
{
... all the drawing code...
}

function collectDrawStats()
{
    stats.begin();
    draw();
    stats.end();
}

setInterval(collectDrawStats(), 1000 / 60);


Avoid Magic Numbers

What is the 1000 / 60 in the call to setInterval()? Does that have something to do with the refresh rate being 60 fps? You should create a named constant that tells a reader what it means. Is it milliseconds per 60th of a second? If so, what's the significance of that?