Canvas Shadows
Set shadowColor, shadowBlur, shadowOffsetX, and shadowOffsetY before drawing to add shadows to shapes and text.
HTML
Intermediate
4 min read
Drop Shadows in Canvas
Example
const ctx = canvas.getContext("2d");
ctx.shadowColor = "rgba(0, 0, 0, 0.4)";
ctx.shadowBlur = 15;
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY = 5;
ctx.fillStyle = "#007bff";
ctx.fillRect(50, 50, 200, 100);
// Reset shadow for next drawing
ctx.shadowColor = "transparent";
ctx.shadowBlur = 0; Pro Tip
Shadows are expensive to render — reset them to transparent after use and avoid them in tight animation loops.