Canvas reference: The fillText() function

Summary: The canvas fillText() function allows you to add text to your canvas. This is the function you'll want to use more often than not for adding text to your canvas.

The fillText() function can be used to add text (not just the outline of text) to your canvas. You give three arguments to the function - the text, the X and Y coordinates. But remember that by default the text is left and bottom aligned - so if you give coordinates of [0,0] without changing the alignment you might not see the text because it will be drawn off-canvas.

Arguments to the function

• The text to display
• The X coordinate
• The Y coordinate

An example

<script>
    window.onload = function ()
    {
        var canvas  = document.getElementById("cvs");
        var context = canvas.getContext('2d');

        context.font = '36pt Arial';
        context.fillText('Some example text', 50,  50);
    }
</script>

See also

• The strokeText() function