1. HTML5 Canvas Tutorial
2. HTML5 Canvas Overview
3. HTML5 Canvas: Stroke and Fill
4. HTML5 Canvas: Rectangles
5. HTML5 Canvas: clearRect()
6. HTML5 Canvas: Paths
7. HTML5 Canvas: Gradients
8. HTML5 Canvas: Shadows
9. HTML5 Canvas: Text
10. HTML5 Canvas: Images
11. HTML5 Canvas: Composition
12. HTML5 Canvas: Transformations
13. HTML5 Canvas: State + State Stack
14. HTML5 Canvas: toDataURL()
15. HTML5 Canvas: Pixel Manipulation
16. HTML5 Canvas: Animation

Jakob Jenkov Last update: 2014-06-15

It is possible to add shadows automatically to shapes drawn on an HTML5 canvas. Here are a few examples:

HTML5 Canvas not supported

The shadow is controlled via these four 2D Context properties:

1. shadowOffsetX
2. shadowOffsetY
3. shadowBlur
4. shadowColor

shadowOffsetX and shadowOffsetY sets how far from the drawn shape the shadow is to be drawn. Positive values means that the shadow is drawn to the right of (x), and below (y) the shape. Negative values means that the shadow is drawn to the left of (x) and above (y) the shape.

shadowBlur sets how much the shadow should be blurred. The higher this number is, the more blurred the shape becomes. The lower the number is, the sharper the shadow becomes. A value of 0 means that the shadow is not blurred at all.

shadowColor simply sets the color of the shadow.

Here is the code for the example above:

var canvas  = document.getElementById("ex1");
var context = canvas.getContext("2d");

context.shadowOffsetX = 10;
context.shadowOffsetY = 10;
context.shadowBlur    = 4;
context.shadowColor   = "#666666";  //or use rgb(red, green, blue)

context.fillStyle = "#000000";
context.fillRect(10,10, 50, 50);

context.fillStyle = "#000066";
context.font = "30px Arial";
context.fillText("HTML5 Canvas Shadow", 10,120);

Featured Videos

Close TOC