HTML5 Canvas Motion Blur effect?

Question

I\'m trying to use HTML5 canvas to make something like a motion blur effect and no success.

Basically what I\'m trying to do is to take a photo and make it look like

Answer 1

There are several libraries for canvas that have implemented various blurring algorithms. EaselJS has implemented x- and y-axis blurring independently, as you can see in this sample.

All you might want is a x-axis blur from their libray.

Answer 2

I got here with the opposite problem. I was trying to get rid of blur when scaling images. Fortunately, my problem leads to a simple solution for your problem. Also, the heavy lifting is performed by the API, so it's efficient.

If you draw your image to a smaller resolution canvas and then scale it up, you will get blurry images. I have tried this in a number of browsers, and it seems to work about the same. This question explores when and why browsers will use this blur behavior if you are concerned about the consistency of this technique across browsers and in future versions.

The image argument to canvas.drawImage accepts another canvas. When you draw the image to the intermediate canvas you could try using a small resolution along one axis. Then, scale it back to the original size and the blur effect should be primarily along one axis.

I'm not an image expert so I don't know how to optimally use motion blur(whether it should be along one axis etc), but with some fiddling and research, you may be able to use this technique to get the effects you want.

Hope this helps