HTML5 Canvas: More effect methods

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

The following are some of the more common effect methods that are available for

  • strokeStyle: Specifies the color or style for lines around shapes
  • fillStyle: Specifies the color or style used inside shapes
  • shadowOffsetX/shadowOffsetY: Specifies the distance of the shadow
  • shadowBlur: Specifies the level of the blurring effect
  • shadowColor: Specifies the color of the shadow
  • createLinearGradient: Creates a linear gradient inside the shape
  • createRadialGradient: Creates a radial gradient inside the shape
<!DOCTYPE html>
<html lang='en'>
    <meta charset='utf-8'>
    <title> Styling a square</title>
        canvas {
            border: 1px solid #000;
<canvas id='canvas' width='200' height='200'></canvas>
    var canvas = document.getElementById('canvas').getContext('2d');
    canvas.shadowOffsetX = 10;
    canvas.shadowOffsetY = 10;
    canvas.shadowBlur = 10;
    canvas.shadowColor = 'rgba(200, 0, 200, .3)';
    canvas.fillStyle = 'rgba(200, 0, 200, 1)';
    canvas.strokeStyle = '#09c';
    canvas.lineWidth = 5;
    canvas.fillRect(0, 0, 100, 100);
    canvas.clearRect(25, 25, 50, 50);
    canvas.strokeRect(25, 25, 50, 50);

The inner square is created by strokeStyle, lineWidth and strokeRect.  Its color is #09c.
Effect Methods Output

Series Navigation<< HTML5 Canvas: shadowBlur level
HTML5 Canvas: Adding gradients to shape >>

Leave a comment

Leave a Reply