|
|
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
|
|
|