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

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