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:
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?
The text-shadow CSS property adds shadows to text. It accepts a comma-separated list of shadows to be applied to the text and any of its decorations . Each shadow is described by some combination of X and Y offsets from the element, blur radius, and color.
To add shadow to text, use the shadowOffsetX and shadowOffsetY attributes. shadowOffsetX = number of pixels offset in the x direction; shadowOffsetY = number of pixels offset in the y direction; A blur effect added to the shadows will make the text beveled.
The html canvas command to apply shadows to text (or any drawing) is context.shadowBlur
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);
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With