html canvas shape blur filter

Question

There must be a way to do this. I have drawn a shape with the html5 canvas and I would like to blur it. As far as I know there is no native method so I assume a js library is needed. The problem is most libraries only blur images like this one for example. Is this possible?

Answer 1

you can use CSS to blur the canvas. If it's just the shape you want to blur then the shape will need to be on its own separate layer (canvas), which you could create on the fly.

Example:

canvas.style.webkitFilter = "blur(3px)";

You can un-blur the canvas again with:

canvas.style.webkitFilter = "blur(0px)";

This is probably the fastest (and simplest) way to blur a canvas - especially for mobile devices.

Answer 2

https://github.com/nodeca/glur - it implements gaussian blur via IIR filter. See demos.