HTML5 canvas blur effect?

Question

I am trying to use HTML5 canvas to make something like motion blur effect and success.

Basically, what I'm trying to do is take a picture and make it look like “fast forward,” for example, when you take a picture and the person moves.

Answer 1

There are several canvas libraries that have implemented various blur algorithms. EaselJS implemented the x-axis and y-axis blur independently, as you can see in this example.

All you may need is the x-axis blur from their libray.

Answer 2

I came up with the opposite problem. I am trying to get rid of blur when scaling images. Fortunately, my problem leads to a simple solution to your problem. In addition, heavy lifting is performed by the API, which is why it is efficient.

If you draw your image on a canvas of lower resolution, and then increase it, you will get blurry images. I tried this in several 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 method in browsers and in future versions.

The canvas.drawImage image argument takes another canvas. When you draw an image on an intermediate canvas, you can try to use a small resolution along one axis. Then scale it to its original size, and the blur effect should be mostly along the same axis.

I am not an expert on image, so I don’t know how to optimally use motion blur (be it along one axis, etc.), but with some attempts and research you can use this technique to get the effects you want.

Hope this helps