HTML5 Canvas: More effect methods

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

  • 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'>
<head>
    <meta charset='utf-8'>
    <title>Codecrawl.com: Styling a square</title>
    <style>
        canvas {
            border: 1px solid #000;
        }
    </style>
</head>
<body>
<canvas id='canvas' width='200' height='200'></canvas>
<script>
    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);
</script>
</body>
</html>

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 >>