Question

I just created a fancy canvas effect using cheap motion blur

ctx.fillStyle = "rgba(255,255,255,0.2)";
ctx.fillRect(0,0,canvas.width,canvas.height);

Now i want to do the same, but with transparent background. Is there any way to do something like that? I’m playing with globalAlpha, but this is probably a wrong way.

PS: Google really don’t like me today

Answer 1

You can create an effect like this by using globalAlpha and two different canvas objects: one for the foreground, and one for the background. For example, with the following canvas elements:

<canvas id="bg" width="256" height="256"></canvas>
<canvas id="fg" width="256" height="256"></canvas>

You could copy draw both a background texture and a motion blurred copied of foreground like so:

bg.globalAlpha = 0.1;
bg.fillStyle = bgPattern;
bg.fillRect(0, 0, bgCanvas.width, bgCanvas.height);

bg.globalAlpha = 0.3;
bg.drawImage(fgCanvas, 0, 0);

Here is a jsFiddle example of this.

OP asked how to do this with an HTML background. Since you can’t keep a copy of the background, you have to hold onto copies of previous frames, and draw all of them at various alphas each frame. Nostalgia: the old 3dfx Voodoo 5 video card had a hardware feature called a “t-buffer”, which basically let you do this technique with hardware acceleration.

Here is a jsFiddle example of that style. This is nowhere near as performant as the previous method, though.