HTML5 Canvas: Creating effects

This entry is part 6 of 17 in the series HTML5 Canvas

With the tools such as rectangle or line, you can also add some effects to the canvas.

  • Fill: Controls the fill parameters of a shape
  • Stroke: Controls the stroke of lines used in shapes
  • Gradient: Allows for the use of either linear or radial fill patterns in shapes
  • Transparency: Defines the opacity level to either all shapes on the canvas or through fill RGBa values to specific shapes
  • Shadow: Provides an easy-to-use shadow for applying to individual shapes
  • Compositing: Masks or clips off areas of the canvas and controls the overall orderof the building of shapes on the canvas

Below, we put some shadow effects to a square on the canvas.

<!DOCTYPE html>
<html lang='en'>
    <meta charset='utf-8'>
    <title> Styling a square</title>
        canvas {
            border: 1px solid #000;
<canvas id='canvas' width='300' height='300'></canvas>
    var canvas = document.getElementById('canvas').getContext('2d');
    canvas.shadowOffsetX = 20;
    canvas.shadowOffsetY = 20;
    canvas.shadowBlur = 20;
    canvas.shadowColor = 'rgba(200, 0, 200, .3)';
    canvas.fillStyle = 'rgba(200, 0, 200, 1)';
    canvas.fillRect(0, 0, 100, 100);
Series Navigation<< HTML5 Canvas: Line tool and coordinates
HTML5 Canvas: shadowBlur level >>

Leave a comment

Leave a Reply