2

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.

Shedokan
  • 1,212
  • 1
  • 10
  • 21

1 Answers1

5

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
Christopher Bradshaw
  • 2,615
  • 4
  • 24
  • 38