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'>
<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='300' height='300'></canvas>
<script>
    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);
</script>
</body>
</html>

HTML5 Canvas: shadowBlur level

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

We make a slight change to the earlier example and reduce the shadowBlur level.

Codecrawl.com: Styling a square

<!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 = 20;
    canvas.shadowOffsetY = 20;
    canvas.shadowBlur = 5;
    canvas.shadowColor = 'rgba(200, 0, 200, .3)';
    canvas.fillStyle = 'rgba(200, 0, 200, 1)';
    canvas.fillRect(0, 0, 100, 100);
</script>
</body>
</html>

Here we use shadowBlur level of 5 instead of 20 as compared to the earlier example.

In line 19, we set the shadow color to be rgba(200,0,200,0.3).  The 0.3 is the opacity of the color.

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

HTML5 Canvas: Adding gradients to shape

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

Another effect you can use with canvas shapes is a gradient.

Gradient fills in the canvas can be created either through a linear (createLinearGradient) or radial (createRadialGradient) gradient.

To add colors to the gradient, use the addColorStop property.

<!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='400' height='400'></canvas>
<script>
    var canvas = document.getElementById('canvas').getContext('2d');
    var grd = canvas.createLinearGradient(0, 200, 200, 0);
    grd.addColorStop(0, '#000');  // light blue
    grd.addColorStop(.5, '#ccc');  // dark blue
    grd.addColorStop(1, '#000');
    canvas.fillStyle = grd;
    canvas.strokeStyle = '#09c';
    canvas.lineWidth = 5;
    canvas.fillRect(0, 0, 200, 200);
    canvas.closePath();
    var grd = canvas.createRadialGradient(300, 250, 2, 200, 200, 250);
    grd.addColorStop(0, '#000');
    grd.addColorStop(1, '#ccc');
    canvas.fillStyle = grd;
    canvas.fillRect(200, 200, 200, 200);
    canvas.closePath();
</script>
</body>
</html>

Both gradient methods employ different parameters to control the behavior of the gradient, as shown here:

createLinearGradient(startX, startY, endX, endY)
createRadialGradient(startX, startY, startRadius, endX, endY, endRadius)

The radial gradient method can get a little complicated, so it is worth playing around with this; try adding various addColorStop to see what happens.

HTML5 Canvas: Drawing arcs or circles

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

Just like any graphics program, we can draw arcs or circles.  This example illustrate how can draw an arcs.

We start with the arc method, which accepts the following values:

canvas.arc(x, y, radius, startAngle, endAngle, antiClockwise(Boolean));

Codecrawl.com: Arcs or circles

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>Codecrawl.com: Arcs or circles</title>
    <style>
        canvas {
            border: 1px solid #000;
        }
    </style>
</head>
<body>
<canvas id='canvas' width='250' height='250'></canvas>
<script>
    var canvas = document.getElementById('canvas').getContext('2d');
    canvas.arc(100, 100, 40, 5, 1, true);
    canvas.strokeStyle = '#000';
    canvas.lineWidth = 5;
    canvas.stroke();
</script>
</body>
</html>
If we set the boolean to false, this is what we get:
 
Codecrawl.com: Arcs or circles