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'>
    <meta charset='utf-8'>
    <title> Text in canvas</title>
        canvas {
            border: 1px solid #000;
<canvas id='canvas' width='600' height='300'></canvas>
    var canvas = document.getElementById('canvas').getContext('2d');
    canvas.font = 'bold 80px Tahoma';
    canvas.fillStyle = '#000';
    canvas.fillText('Codecrawl', 10, 100);

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

Series Navigation<< HTML5 Canvas: Drawing a circle
HTML5 Canvas: Text using strokeText >>

Leave a comment

Leave a Reply