html canvas shape blur filter

javascript html filter canvas blur
Justin Bull picture Justin Bull · Aug 12, 2010 · Viewed 27k times · Source

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

Jarrod picture Jarrod · Feb 11, 2013

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.

Related questions

How do I check whether a checkbox is checked in jQuery?

I need to check the checked property of a checkbox and perform an action based on the checked property using jQuery. For example, if the age checkbox is checked, then I need to show a textbox to enter age, else …

Read More
How can I change an element's class with JavaScript?

How can I change the class of an HTML element in response to an onclick or any other events using JavaScript?

Read More
Which "href" value should I use for JavaScript links, "#" or "javascript:void(0)"?

The following are two methods of building a link that has the sole purpose of running JavaScript code. Which is better, in terms of functionality, page load speed, validation purposes, etc.? or function myJsFunc() { alert("myJsFunc"); } <a href="javascript:…

Read More