CODEWITHSUNDEEP
javascriptcsshtmlcanvas
Troy Payne
Troy Payne

Reputation: 363

HTML5 canvas text-shadow equivalent?

I'm attempting to create the same effect I can create in css's text-shadow, with HTML5's canvas.

I can do this with CSS:

font: 36px Impact;
text-shadow: 2px 2px 2px #000,
            -2px -2px 2px #000,
             2px -2px 2px #000,
            -2px 2px 2px #000,
             2px -2px 2px #000,
             2px 2px 2px #000,
            -2px -2px 0 #000,
             2px -2px 0 #000,
            -2px 2px 0 #000,
             2px -2px 0 #000;

Which creates characters that look like this:

http://i.imgur.com/LBZKxL9.png

But with HTML5's canvas, the stroke is too thin, and the shadows don't allow me to specify more than one, unlike text-shadow.

Has anyone figured out how to accomplish this?

Upvotes: 17

Views: 17375

Answers (2)

markE
markE

Reputation: 105035

The html canvas command to apply shadows to text (or any drawing) is context.shadowBlur

enter image description here

Here's a starting spot towards your shadowed text effect:

Make sure you fill the text after stroking it or else the shadow will intrude into the fill.

ctx.font="75px verdana";
ctx.shadowColor="black";
ctx.shadowBlur=7;
ctx.lineWidth=5;
ctx.strokeText("HELLO",25,100);
ctx.shadowBlur=0;
ctx.fillStyle="white";
ctx.fillText("HELLO",25,100);

Upvotes: 32

Alexander O'Mara
Alexander O'Mara

Reputation: 60577

You said the stroke is too thin, have you tried increasing the context's lineWidth property? I think a value of 4 with a shadow would be an appropriate value to match your image.

To draw multiple shadows in an HTML5 canvas, you could draw the element multiple times in the same place, with a different shadow each time.

Upvotes: 1

Related Questions