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 i

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.