Draw text using the HTML <canvas> Tag

<canvas id="myCanvas" width="350" height="350">
<p>Fallback content for browsers that don't support the canvas tag.</p> 
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

// Black Text
ctx.fillText('One', 5, 50);

// Orange Text
ctx.font = '20pt Serif';
ctx.fillStyle = 'Orange';
ctx.fillText('Two', 5, 150);

// Green Text
ctx.font = '60pt Cursive';
ctx.strokeStyle = 'Green';
ctx.strokeText('Three', 5, 300);
</script>

Fallback content for browsers that don't support the canvas tag.

The above example demonstrates how to draw text using the HTML <canvas> element.

We use three lines of text; The first uses the default color (black), the second line is drawn in orange (because we specified a fillStyle) and we specify a font to use (using font). The third has its outline painted green and the font properties are different.

The default color of the text is black — if nothing further is specified when the context is created, the text will have a stroke and fill value of #000000 (black).

Style Text

You can change the text's color from the default black. In the above example, we use ctx.fillStyle = 'Orange'; and ctx.strokeStyle = 'Green'; to specify colors.