How to Create a shadow around a canvas drawn shape?

Creating shadows around shapes in HTML5 Canvas can be achieved by setting specific properties of the Canvas 2D rendering context. Specifically, the following properties control the shadow effect:

1. shadowColor: Defines the shadow color.
2. shadowBlur: Defines the blur level of the shadow.
3. shadowOffsetX: Defines the horizontal offset of the shadow.
4. shadowOffsetY: Defines the vertical offset of the shadow.

Here's a simple example demonstrating how to draw a rectangle with a shadow on Canvas:

javascript
// Get the Canvas element and drawing context
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// Set shadow properties
ctx.shadowColor = 'rgba(0, 0, 0, 0.5)'; // semi-transparent black shadow
ctx.shadowBlur = 10; // blur level of the shadow
ctx.shadowOffsetX = 5; // horizontal offset of the shadow
ctx.shadowOffsetY = 5; // vertical offset of the shadow

// Draw rectangle
ctx.fillStyle = 'red'; // fill color of the rectangle
ctx.fillRect(50, 50, 100, 100); // position and dimensions of the rectangle

In this example, we first set the shadow color, blur level, and offsets, then fill a red rectangle. With these shadow properties applied, a shadow effect appears around the rectangle.

This approach applies to any shape drawn on Canvas, including circles and lines, using similar techniques; only the shape-drawing functions differ. By adjusting the shadow properties, you can create various shadow effects to enhance visual appeal.