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

tzippy
  • 6,458
  • 30
  • 82
  • 151

5 Answers5

76

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!

Celeo
  • 5,583
  • 8
  • 39
  • 41
Renan Santos
  • 937
  • 6
  • 7
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.

pseudopeach
  • 1,475
  • 14
  • 29
  • You can also add transparency to the "glow" by using a rgba color for shadowcolor. This will give a more subtle "glow". – Niek Nijland Dec 24 '14 at 08: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?

CLF
  • 155
  • 6
TimFoolery
  • 1,895
  • 1
  • 19
  • 29
  • Those are canvas shapes. Okay, maybe thats a good idea to redraw them and reducing the transparency! – tzippy Feb 21 '11 at 15:03
  • 7
    Is there no other way to create a glow more easily? – tzippy Feb 22 '11 at 09: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](http://flashcanvas.net/examples/uupaa-js-spinoff.googlecode.com/svn/trunk/uuCanvas.js/demo/9_1_canvas_text_shadow_direction.html). 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 '11 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 '11 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

PhilT
  • 4,166
  • 1
  • 36
  • 26
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();
}
Áron
  • 49
  • 4