In this second part of our HTML5 Canvas Development Tutorials, we’ll be looking at working with shadows and patterns within a canvas.
If you’re completely new to the Canvas element, I highly suggest you check out the first part of this series: Canvas Development Part 1 which provides an introduction to the element as well as some basic operations.
Creating Shadows with Canvas
When defining shadows, we have the following 4 properties within the canvas context to work with:
shadowColor – defines the colour of the shadow, can be a named colour, hex value, rgb() value or rgba() value
shadowBlur – blur amount, 0 is no blur
shadowOffsetX – horizontal spacing in pixels between object and shadow
shadowOffsetY – vertical spacing in pixels between object and shadow