Is it possible to add a glow effect to an already drawn canvas without having to calculate it myself? (Using gradients, shadow or something...)

I have tried adding a glow by drawing the canvas as an image to a different canvas and drawing it back with a shadow added. The problem with it is that it depends on the amount of pixels around the shadow - because it blurs the image - so that is not good enough.

Is it possible to add a glow effect to an already drawn canvas without having to calculate it myself? (Using gradients, shadow or something...)

I have tried adding a glow by drawing the canvas as an image to a different canvas and drawing it back with a shadow added. The problem with it is that it depends on the amount of pixels around the shadow - because it blurs the image - so that is not good enough.

• javascript
• html5-canvas
• glow

1 Answer 1

There is a website that goes over the glow effect along with other typographic effects for canvas text here.

Here's the gist of the glow effect:

// Assuming your canvas element is ctx

// Color of the shadow;  RGB, RGBA, HSL, HEX, and other inputs are valid.
ctx.shadowColor = "red"; // string

// Horizontal distance of the shadow, in relation to the text.
ctx.shadowOffsetX = 0; // integer

// Vertical distance of the shadow, in relation to the text.
ctx.shadowOffsetY = 0; // integer

// Blurring effect to the shadow, the larger the value, the greater the blur.
ctx.shadowBlur = 10; // integer