Question

I am using the canvas and HTML5. I have an icon in my canvas and a text and when I am trying to add shadow in my Text with this code:

    ctx.shadowColor = textShadowColor;
    ctx.shadowBlur = 1;
    ctx.shadowOffsetX = 1;
    ctx.shadowOffsetY = 1;

the shadow goes also to my image. What could be the problem. As I see this shadowColor goes on the canvas and not really on the text. Should a have different canvas for the text and the image?

Thanks in advance

Answer 1

Are you drawing the text or image first?

If you’re drawing the image first there should be no problem:

http://jsfiddle.net/NAanu/

If you’re drawing the text first you need to clear the shadow so the picture doesn’t get drawn with it also. Here’s an example of drawing the text with a shadow first:

http://jsfiddle.net/NAanu/1/

I use save and restore to save and clear the shadow state from the context. You could just set them all to their default values instead, though.

---

When you set properties on the context you need to think of it like loading up a paintbrush with paint.

Setting any context property, like the shadowColor to red is like loading red paint onto the edge of your paintbrush. Anything you paint from then on will have red on it.

The only way to stop that is to clean your paintbrush (set the color and shadowOffset back to their defaults) or to use save() and restore(), which is saying “remember that my paintbrush was once clear, so later I can recall this clear paintbrush to use again”.