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.

• Arguments to the function
• An example
• See also

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