javascript - A glow effect on html5 canvas? - Stack Overflow

admin管理员组

文章数量:1304785

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

Share Improve this question Follow edited Jun 4, 2012 at 23:50 Shedokan asked Oct 18, 2011 at 22:13 ShedokanShedokan 1,20211 gold badge1010 silver badges2121 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

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

本文标签： javascriptA glow effect on html5 canvasStack Overflow