Previous
Next

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:

Canvas Text

Previous
Next