Menu
I want to create an outer glow effect for arc shapes in my canvas tag. This is what it's supposed to look like: 
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. 
513
To create a custom shape with HTML5 Canvas, we can create a path and then close it using the closePath() method. We can use the lineTo(), arcTo(), quadraticCurveTo(), or bezierCurveTo() methods to construct each subpath which makes up our shape.
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!
63
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> 
If you just replace my line-y geometry with your circle arcs, you'll be able to create that effect without image files.
29
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
