31

I want to create an outer glow effect for arc shapes in my canvas tag. This is what it's supposed to look like: enter image description here

So far I have the circles in white. I tried using a dropShadow that has an Offset of '0', but this doesn't look right.

What do you suggest? Maybe shapes underneath that have a gradient from blue to black? Thanks in advance!

Edit: Finally got it working. Used a for loop to draw circles with different radius and alpha. enter image description here

1
  • 6
    JSFiddle before and after?
    – Ilan Biala
    Sep 7, 2014 at 16:18

5 Answers 5

78

You can create outer glow using shadow like this:

context.shadowBlur = 10;
context.shadowColor = "black";

Take a look at this link for an example: http://www.williammalone.com/articles/html5-canvas-example/

And here's a really basic JSFiddle.

I think this will be faster than "a for loop to draw circles with different radius and alpha."

I hope this can help!

4
  • 1
    yep, using the shadow API is the best way to go here. It will perform much better. Jul 9, 2012 at 17:16
  • JSFiddle/CodePen example?
    – Ilan Biala
    Sep 7, 2014 at 16:17
  • is slow in Firefox. but otherwise a much better answer than the accepted one.
    – quemeful
    Oct 27, 2014 at 13:26
  • Has anyone actually tried this? Against a black background this wouldn't work.
    – PhilT
    Jul 22, 2016 at 16:08
11

A shadow with 0 offset, a big blur radius and a "light" shadow color basically looks like a glow. I needed to put a green "glow" on an arbitrary filled path, and my code looked like this:

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.moveTo(20, 80);
      context.lineTo(80, 20);
      context.lineTo(550, 20);
      context.lineTo(550, 130);
      context.lineTo(490, 190);
      context.lineTo(20, 190);
      context.lineTo(20, 80);

      //context.rect(188, 40, 200, 100);
      context.fillStyle = 'red';
      context.strokeStyle = '#00ff00';
      context.lineWidth = 10;
      context.shadowColor = '#00ff00';
      context.shadowBlur = 40;
      context.shadowOffsetX = 0;
      context.shadowOffsetY = 0;
      context.stroke();
      context.fill();
    </script>
  </body>
</html>

path with glow on html5 canvas

If you just replace my line-y geometry with your circle arcs, you'll be able to create that effect without image files.

1
  • You can also add transparency to the "glow" by using a rgba color for shadowcolor. This will give a more subtle "glow". Dec 24, 2014 at 8:14
9

Are the circles image files? If so, create image files with glow applied to them within photoshop, GIMP, etc. Save them as .PNG to preserve the transparency of the background.

If they are drawn on the screen with canvas drawing functions, then how about redrawing the circle 25 times, each circle getting one pixel thicker in width?

4
  • Those are canvas shapes. Okay, maybe thats a good idea to redraw them and reducing the transparency!
    – tzippy
    Feb 21, 2011 at 15:03
  • 7
    Is there no other way to create a glow more easily?
    – tzippy
    Feb 22, 2011 at 9:56
  • It's very easy with .PNG's. If that is not an acceptable option, it might be difficult. I just did some more looking and found this. It should be pretty easy to set the shadow to your desired glow color, set the x/y offsets to 0, set the shadowblur to 8px or so, and then draw the "shadow." With the color set to something bright, the "shadow" will basically be a glow.
    – TimFoolery
    Feb 22, 2011 at 10:08
  • PS: I see in your OP that you already tried "dropShadow," but I am assuming this was -moz-box-shadow type of shadow... a CSS shadow. If you haven't tried the canvas shadow, let me know how well it works! I am interested in learning new things!
    – TimFoolery
    Feb 22, 2011 at 10:12
4

I was curious to figure out the best solution to this problem as I'm trying to do something similar and it's still the top answer on Google. It turns out that, for canvas on a black background, unless you want a white glow you're better off drawing it manually rather than using shadowBlur as the result is too dark.

So here is the code, result and JSFIddle for the solution I came up with which I imagine is something similar to the accepted answer. It works by using the same alpha value but changing the thickness of the line which has an additive effect. Note the use of lineCap which will also add glow to the ends of the lines.

const canvas = document.getElementById('canvas') 
const c = canvas.getContext('2d')
    canvas.width = 240
    canvas.height = 340
const gradient = c.createLinearGradient(0, 0, 150, 300);
    gradient.addColorStop(0, '#444')
    gradient.addColorStop(1,'#000')
    c.fillStyle = gradient
c.fillRect(0, 0, canvas.width, canvas.height)

const drawC = function (radius, maxWidth, minWidth) {
  const inc = (maxWidth - minWidth) / 5
  for (let width = maxWidth; width >= minWidth; width -= inc) {
    c.lineWidth = width
    if (width > 10) { 
      c.strokeStyle = 'rgba(50, 50, 255, 0.2)'
    } else {
      c.strokeStyle = 'white' 
    }
    c.lineCap = 'square'
    c.beginPath()
    c.arc(0, 0, radius, 2 * Math.PI * 0.04, 2 * Math.PI * 0.96)
    c.stroke()
  }
}

c.translate(120, 170)
drawC(70, 30, 10)
c.rotate(2 * Math.PI * 0.75)
drawC(100, 20, 4)

enter image description here

4

The loop is the solution, indeed, but without playing the radius and the alpha. Simple set the linewidth thick and the shadow with zero offsets and decent blur, then draw the arcs in a loop of... some... like with 10 it will shine.

ctx.fillStyle='black';
ctx.fillRect(0,0,500,500);
ctx.lineWidth=25;
ctx.strokeStyle='white';
ctx.shadowColor='blue';
ctx.shadowOffsetX=0;
ctx.shadowOffsetY=0;
ctx.shadowBlur=25;
for(a=0;a<10;a++) {
    ctx.beginPath();
    ctx.arc(250,250,200,Math.PI/12,23*Math.PI/12);
    ctx.stroke();
    ctx.beginPath();
    ctx.arc(250,250,100,7*Math.PI/12,5*Math.PI/12);
    ctx.stroke();
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.