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