HTML5 Canvas: Text in canvas using fillText

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