How to draw a blurry circle on HTML5 canvas?

Question

I'm able to draw a simple circle on HTML5 canvas, but I'd like to add some blur around it.

What I found was this website which explains the shadowBlur property which can come in handy here.

However, I cannot manage to make the circle itself blurry. What the shadowBlur property basically does is painting some blur effect after the regular circle has been drawn. What I've tried so far I've put on jsFiddle.

As can be seen, it's a solid filled circle with some blur effect around it - the two parts do not blend into each other at all. What I actually would like to achieve is that the circle itself is fully blurred like this:

blurred circle

Is there any way to draw a blurred circle like this, i.e. that the circle itself also has a blur effect?

score 55 · Accepted Answer · answered Mar 29 '11 at 17:36

55

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/

answered Mar 29 '11 at 17:36

Simon Sarris

62,212
13
141
171

3

+1 for using RGBA to get proper transparency in the blur region. Nice work. – Phrogz Mar 29 '11 at 17:44
2

But remember, this is not a real (gaussian) blur! This blur is made by a "cone" with straight edge, real (gaussian) blur will look much softer. You can approximate it by adding more colorStops. – Ivan Kuckir Oct 25 '13 at 23:32
This is perfectly fine. But in my case, I need to work with imageData directly instead of context. Any way to add blur circle by modifying imageData directly ?? – Niranth Reddy Dec 05 '19 at 09:55

score 5 · Answer 2 · answered Apr 27 '17 at 01:25

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>

Note as of April 2017, IE, Opera and Safari don't support this

still unsupported on safari as of july 2020 – Crashalot Jul 19 '20 at 08:17 — Crashalot, Jul 19 '20 at 08:17

score 4 · Answer 3 · answered Mar 29 '11 at 16:48

4

You probably can obtain the bitmap pixel array and apply some blurring algorithm on top of it. For example: http://www.jhlabs.com/ip/blurring.html

answered Mar 29 '11 at 16:48

Ricardo Ferreira

766
5
15

Very interesting. However, as I'm using it a renderer (20fps) I guess it will become a little overcomplicated and slow... But I'll give it a shot, thanks. – pimvdb Mar 29 '11 at 16:51
@pimvdb Blur it once to an offscreen canvas and then blit the result to your canvas using `drawImage()`. – Phrogz Mar 29 '11 at 17:29
8

Here's a better, very fast blur written for HTML5 Canvas: [StackBlur](http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html) – Phrogz Mar 29 '11 at 17:31

score 1 · Answer 4 · answered Jul 04 '12 at 16:45

1

You can draw a blurred circle with the following function:

function drawblurrycircle(context, x, y, radius, blur)
{
     context.shadowBlur = blur;
     context.shadowOffsetX = 0;
     context.shadowOffsetY = 0;

     context.fillStyle="#FF0000";
     context.shadowColor="#FF0000"; //set the shadow colour to that of the fill

     context.beginPath();
     context.arc(x,y,radius,0,Math.PI*2,true);
     context.fill();
     context.stroke();
}

answered Jul 04 '12 at 16:45

starbeamrainbowlabs

5,692
8
42
73

I'm sorry but I already posted that I tried `shadowBlur`, and that the problem is that the shadow does not blend into the cicle. Your solution suffers from that very same issue, unfortunately. http://jsfiddle.net/r8Kqy/410/ – pimvdb Jul 04 '12 at 16:48
Sorry! I did not read your post thoroughly. To make it look better, you could use a `for` loop to blur it multiple times – starbeamrainbowlabs Jul 04 '12 at 16:51

score 0 · Answer 5 · answered Apr 26 '13 at 03:11

0

If you are still interested in seeing this effect done with EaselJS, this might help JSFiddle EaselJS blur

var stage = new createjs.Stage("test");
var s = new createjs.Shape();
var g = s.graphics;
g.f("#FF0000").dc(0, 0, 75);
s.x = 100;
s.y = 100;
s.filters = [new createjs.BoxBlurFilter(5, 5, 3)];
stage.addChild(s);
s.cache(-100, -100, 200, 200);
s.alpha = 0.5;
stage.update();

answered Apr 26 '13 at 03:11

sebastian.derossi

275
2
5

Maybe it's because it's 6 years later, but the above JSFiddle doesn't seem to do anything. – Graham Lea Aug 15 '19 at 05:48
1

@GrahamLea Yikes! you're correct, have a looks at this http://jsfiddle.net/s0c9wndh/ Seems like BoxBlurFilter is no longer used in the latest version, use BlurFilter instead [code] var stage = new createjs.Stage("test"); var s = new createjs.Shape(); var g = s.graphics; g.f("#FF0000").dc(0, 0, 75); s.x = 100; s.y = 100; s.filters = [new createjs.BlurFilter(5, 5, 3)]; stage.addChild(s); s.cache(-100, -100, 200, 200); s.alpha = 0.5; stage.update(); [/code] – sebastian.derossi Aug 15 '19 at 14:44

How to draw a blurry circle on HTML5 canvas?

5 Answers5

Linked