Submodule 15.1: Canvas HTML element

Canvas Text

We will start by learning how to draw text on a canvas.

Some of the most important properties and methods are:

• font - defines the font properties for the text
• fillText(text,x,y) - draws "filled" text on the canvas
• strokeText(text,x,y) - draws text on the canvas (no fill)
• fillStyle - Sets or returns the color, gradient, or pattern used to fill the drawing

The JavaScript code :

context0.fillStyle = "blue";
context0.font = "3em Calibri";
context0.fillText("My TEXT!", 30, 110); /*use strokeText instead of fillText to see the difference*/

the above, will create a canvas displayed as: