HTML5 Canvas: Text in canvas using fillText

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

The Canvas API provides two methods for adding text to the canvas.  We look at the first method, fillText.

fillText(text, x, y);

fillText takes a string to display along with the X,Y coordinate to display the text.

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>Codecrawl.com: Text in canvas</title>
    <style>
        canvas {
            border: 1px solid #000;
        }
    </style>
</head>
<body>
<canvas id='canvas' width='600' height='300'></canvas>
<script>
    var canvas = document.getElementById('canvas').getContext('2d');
    canvas.font = 'bold 80px Tahoma';
    canvas.fillStyle = '#000';
    canvas.fillText('Codecrawl', 10, 100);
</script>
</body>
</html>

In this example, the font height is 80px and the (x, y) coordinate is (10,100).

Codecrawl.com: Text in canvas

HTML5 Canvas: Drawing a circle

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

Using the same arc() method, we can draw a circle.

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

Now we need to start the angle with 0, and end it with 2*Math.PI:

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, 60, 0, 2 * Math.PI, false);
    canvas.fillStyle = '#000';
    canvas.fill();
    canvas.strokeStyle = '#000';
    canvas.lineWidth = 2;
</script>
</body>
</html>

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

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