HTML Canvas Text
HTML Canvas Text
To draw text on the canvas, the most important property and methods are:
-
font- defines the font properties for the text -
fillText()- draws "filled" text -
strokeText()- draws "outlined" text (no fill)
The font Property
The font property defines the font to be
used and the size of the font.
The default value for this property is "10px sans serif".
The fillText() Method
The fillText() method is used to draw "filled" text.
The fillText() method has the following parameters:
| Parameter | Description |
|---|---|
| text | Required. The text-string to be drawn |
| x | Required. The x-coordinate of the start of the string |
| y | Required. The y-coordinate of the start of the string |
| maxwidth | Optional. The maximum width of the text-string |
Example
Set font to 50px "Arial" and write the filled text on the canvas. Start in position (10,80):
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.font = "50px Arial";
ctx.fillText("Hello World",10,80);
</script>
Try it Yourself »
The strokeText() Method
The strokeText() method is used to draw "outlined" text.
The strokeText() method has the following parameters:
| Parameter | Description |
|---|---|
| text | Required. The text-string to be drawn |
| x | Required. The x-coordinate of the start of the string |
| y | Required. The y-coordinate of the start of the string |
| maxwidth | Optional. The maximum width of the text-string |
Example
Set font to 50px "Arial" and write the outlined text on the canvas. Start in position (10,80):
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.font = "50px Arial";
ctx.strokeText("Hello World",10,80);
</script>
Try it Yourself »
Example
Add bold and italic to font:
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.font = "bold italic 50px Arial";
ctx.strokeText("Hello World",10,80);
</script>
Try it Yourself »
