UNBLUR BACKGROUND (PART 2)

Start to draw

The basic idea is to draw lines with blurring effect from the last coordinate to the current coordinate whenever mouse moved and make it fade over time to zero. Here I want to draw line with brash effect and blur effect. And then to make it fade, I simply manipulate the opacity a bit. So let's see what comes out.

var ctx = $('canvas')[0].getContext('2d');
ctx.lineCap = "round";
ctx.shadowColor = "#000";
ctx.lineWidth = 30;
ctx.shadowBlur = 30;
for(var i=0; i<=10;i++){
 ctx.strokeStyle = "rgba(0,0,0,"+(1-i/10)+")";
 ctx.beginPath();
 ctx.moveTo(i*70+50, 20);
 ctx.lineTo(i*70+50, 100);
 ctx.stroke();
}

Well, to draw lines with a single color is easy. What about copy some photo parts and fill them to those lines? There are two options, compositing and clipping. Initially I thought clipping was more promising because it was simpler and more straightforward. Soon after that I began to have problems with implementing blurring and fading effects. And most importantly the browser started to lag when those was added. So I decided to try the other approach.

Global Composite Operation

By definition, the canvas 2D rendering context globalCompositeOperation property of the Canvas 2D API sets the type of compositing operation to apply when drawing new shapes. And the type "destination-in" keeps the existing canvas content where both the new shape and existing canvas content overlap. Everything else is made transparent. So I can draw a line and paste the image to achieve the goal. See the effect.

But wait, it can only draw something in the overlap zone. to make trace of mouse move I'm definitely going to draw lots of lines not just in a narrowing area. Ideally, it would be great I can draw whole trace in somewhere else and paste it into canvas. It took me a while to figure out that it could actually copy the drawing from one canvas and paste it to another one. So the idea came out. Draw the whole trace in a temporary canvas and then paste the drawing to the main canvas. And I found out that this temp canvas doesn't have to be inside the body. It just needs to be instantiate properly with exactly same width and height.

var painter = $('<canvas>').attr('width', $(window).width()).attr('height', $(window).height())[0], 
    pctx = painter.getContext('2d');

pctx.lineCap = "round";
pctx.shadowColor = "#000";
pctx.lineWidth = 30;
pctx.shadowBlur = 30;

for(var i = 0; i <= 10; i++){
 pctx.strokeStyle = "rgba(0,0,0," + (1 - i / 10) + ")";
 pctx.beginPath();
 pctx.moveTo(i * 70 + 50, 20);
 pctx.lineTo(i * 70 + 50, 100);
 pctx.stroke();
}

var ctx = $('canvas')[0].getContext('2d'), img= $('#imgtarget')[0];

ctx.drawImage(img, 0, 0, img.width, img.height);
ctx.globalCompositeOperation = "destination-in";
ctx.drawImage(painter, 0, 0);
ctx.globalCompositeOperation = "source-over";

So I've got the method to draw. The next step would be to use it to handle the mousemove event. But handling the event was far more complicated than I thought. I will break it down next time.

UNBLUR BACKGROUND (PART 1)

UNBLUR BACKGROUND (PART 3)