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)
