In this post, I shall be looking at applying shadows to shapes and text within a Canvas. Shadows can be applied to any shape and can be given a colour, offset from the shape they are applied to and the blur of the shadow controlled.
Drop shadow applied to a square shape
Here, I am going to apply a drop shadow to a square shape.
View demo
The markup
To create a shadow on an object, first of all I set the contexts of shadowOffsetX and shadowOffsetY with numeric values. These values specify where the shadow appears in relation to the shape; if 0 is specified for both, the shadow will be centered on the shape and so will appear around it on all sides. In my example here, both values have been set to 2; which means it is shifted towards the right by 2 pixels (shadowOffsetX) and down two pixels (shadowOffsetY).
Secondly, I set the shadowBlur context with a numerical value also – this specifies how large the blur area of the shadow is (my example is set to 5). Lastly, the context shadowColor is added, with which I’ve added the shadow colour as an rgba value so that the opacity of the shadow could also be set.
Then, all there is to do is to draw the shape which the shadow will be applied to; in my case, this is a 160 x 160 pixel square offset 5 pixels from the left and top of the Canvas (so the shadow does not get cut off for the purposes of this example).
Javascript portion
function draw() {
// Square shadow
var canvas = document.getElementById("shadowSquare");
if (canvas.getContext){
var ctx = canvas.getContext("2d");
ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 2;
ctx.shadowBlur = 5;
ctx.shadowColor = "rgba(0, 0, 0, 0.8)";
ctx.fillRect (5, 5, 160, 160);
}
}
HTML portion
<body onLoad="draw();"> <canvas id="shadowSquare" width="170" height="170"></canvas> </body>
Drop shadow applied to a flower shape made with bezier curves
This next example is identical to the one above, it is just to show that shadows can also be applied to more complex shapes – in this case, a flower shape drawn with bezier curves (view my HTML5 Canvas bezier curve tutorial).
View demo
The markup
Javascript portion
function draw() {
// Flower shape shadow
var canvas = document.getElementById("shadowFlower");
if (canvas.getContext){
var ctx = canvas.getContext("2d");
ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 2;
ctx.shadowBlur = 5;
ctx.shadowColor = "rgba(0, 0, 0, 0.8)";
ctx.beginPath();
ctx.moveTo(130.3, 37.6);
ctx.bezierCurveTo(126.0, -8.3, 56.3, -16.6, 47.4, 37.6);
ctx.bezierCurveTo(-1.4, 33.0, -17.0, 93.7, 21.9, 115.6);
ctx.bezierCurveTo(5.6, 158.7, 55.0, 192.7, 88.8, 162.3);
ctx.bezierCurveTo(119.3, 191.4, 172.3, 162.0, 155.7, 115.7);
ctx.bezierCurveTo(192.0, 98.4, 183.6, 33.7, 130.3, 37.6);
ctx.closePath();
ctx.fill();
}
}
HTML portion
<body onLoad="draw();"> <canvas id="shadowFlower" width="185" height="185"></canvas> </body>
Drop shadow applied to text
Shadows can also be applied to text (view my HTML5 Canvas text tutorial); just made sure the font and fillText contexts are specified after the shadow contexts have been set.
View demo
The markup
Javascript portion
function draw() {
// Text shadow
var canvas = document.getElementById("shadowText");
if (canvas.getContext){
var ctx = canvas.getContext("2d");
ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 2;
ctx.shadowBlur = 5;
ctx.shadowColor = "rgba(0, 0, 0, 0.8)";
ctx.font = "bold 50px Arial";
ctx.fillText("Shadowed text", 5, 50);
}
}
HTML portion
<body onLoad="draw();"> <canvas id="shadowText" width="400" height="70"></canvas> </body>