HTML5 Canvas Tutorials - Adding shadow effect for text on canvas

Adding shadow and bevel effect to text on canvas

You can add shadow and bevel effect to text the same way you would to any image. 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.

shadowBlur = number of pixels to be blured in the x and y direction;

For eg:
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY = 5;
ctx.shadowBlur = 4;
ctx.strokeText("Believe", 0,0);

You can also specify the color of the shadow using the shadowColor attribute.

shadowColor = "colour of the shadow";

You could either directly specify the colour of the shadow or provide values for red, green and blue in hexadecimal or decimal.

For eg:
Provide the color directly:
shadowColor="green";

provide the value of red, green, and blue in hexadecimal:
shadowColor="00FF00";

provide the value of red, green and blue in decimal:
shadowColor="rgb(0,255,0)";

Provide the value of red, green and blue in decimal along with the level of transparency desired:
shadowColor="rgba(0,255,0,0.5)";

HTML Code

<html>
<head>
<script type="application/javascript">
function init() {
var canvas = document.getElementById("canvas");
if (canvas.getContext)
{
var ctx = canvas.getContext("2d");

//Specify the text alignment
ctx.textAlign="start";

// Specify the font colour.
ctx.fillStyle = "red";

// Specify the font size and font type.
ctx.font = "25px verdana";

// Specify the shadow colour.
ctx.shadowColor = "black";

// Specify the shadow offset.
ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 2;

// Display the text with only shadow.
ctx.fillText("Believe Shadow", 100,20);

// Blur the shadow to create a bevel effect.
ctx.shadowBlur = 3;

// Display the text with bevel effect
ctx.fillText("Believe Bevel", 100,60);
}
}
</script>
</head>
<body onload="init();">
<canvas id="canvas" width="900" height="500"></canvas><br>
</body>
</html>

Try Code