How to draw a blurry circle on HTML5 canvas? How to draw a blurry circle on HTML5 canvas? javascript javascript

How to draw a blurry circle on HTML5 canvas?


javascript html canvas geometry blur

I'd strongly suggest against blur algorithms unless you are blurring some already-existing drawing that is complex.

For your case, just draw a rect with a radial gradient.

  var radgrad = ctx.createRadialGradient(60,60,0,60,60,60);  radgrad.addColorStop(0, 'rgba(255,0,0,1)');  radgrad.addColorStop(0.8, 'rgba(228,0,0,.9)');  radgrad.addColorStop(1, 'rgba(228,0,0,0)');  // draw shape  ctx.fillStyle = radgrad;  ctx.fillRect(0,0,150,150);

Example:

http://jsfiddle.net/r8Kqy/48/

javascript html canvas geometry blur

You may find the context.filter property useful

var canvas = document.getElementById('canvas');var context = canvas.getContext('2d');context.filter = "blur(16px)";context.fillStyle = "#f00";context.beginPath();context.arc(100, 100, 50, 0, Math.PI * 2, true);context.fill();
<!DOCTYPE html><html><head>  <meta charset="utf-8">  <meta name="viewport" content="width=device-width"></head><body>  <canvas width=200 height=200 id='canvas'></canvas></body></html>
Expand snippet