Better Canvas Motion Blur

It's been asked before, but the accepted solution doesn't work for me (literally, nothing is blurring for me in the linked demo), and it's a bit of a kludge involving two canvas el

Solution 1:

Just set the globalAlpha property of the context before drawing your image repeatedly:

Demo: http://jsfiddle.net/qfEUt/

var img = newImage,
    ctx = document.querySelector('canvas').getContext('2d');
    ctx.globalAlpha = 0.1;

img.onload=function(){
  for (var y=0;y<10;++y) ctx.drawImage(img,0,y);
}
img.src = 'http://phrogz.net/tmp/gkhead-small.png';​

Solution 2:

Have you tried EaselJS and its BlurFilter - try changing/animating blur in one direction (x or y).