Shadows E-mail
Canvas element
Canvas context
Transformations
Compositing
Colours
Context styles
Gradients
Patterns
Line styles
Shadows
Simple shapes
Paths
Text
Images
Pixel manipulation
Example: Webtris

context.shadowColor [ = value ]

  • Returns or sets the shadow colour.
  • value must be a CSS colour string.
  • Invalid values are ignored.

context.shadowOffsetX [ = value ]
context.shadowOffsetY [ = value ]

  • Returns or sets the current shadow offset.
  • value must be a number.
  • Invalid values are ignored.

context.shadowBlur [ = value ]

  • Returns or sets the current level of blur applied to shadows.
  • value must be a number, greater than zero.
  • Invalid values are ignored.

Unfortunately, your browser does not support modern web standards.
Please use one of the supported browsers listed below, they're free to download and use.

Supported browsers: Firefox, Safari, Chrome, Opera, and Konqueror.


Source (click to expand)

var cnv = document.getElementById('canvas');
var ctx = cnv.getContext('2d');
ctx.width = ctx.width; // Clear the context

// A red rectangle demonstrating shadows.
ctx.save();
ctx.shadowColor = "#222222";
ctx.shadowOffsetX = 20;
ctx.shadowOffsetY = 20;
ctx.shadowBlur = 50;
ctx.fillStyle = "#FF0000";
ctx.fillRect(20, 20, 80, 60);
ctx.restore();

// Transparency can also be used when rendering shadows.
ctx.save();
ctx.shadowColor = "rgba(34, 34, 34, 0.75)";
ctx.shadowOffsetX = 20;
ctx.shadowOffsetY = 20;
ctx.shadowBlur = 50;
ctx.fillStyle = "rgba(255, 0, 0, 0.6)";
ctx.fillRect(180, 20, 80, 60);
ctx.restore();