Drawing Text on the Canvas

HTML5 canvas context has two methods for drawing text: strokeText() and fillText().

The difference is that:

In the example below, we see 2 different texts:

Notice the difference in how the texts are written (drawn)!

Also notice how we define the font before we draw the text
The canvas context font property specifies the current text style and size being used when drawing text.

Inside the fillText ( ) method, the first parameter is the text to be rendered. The next two parameters are the x and y coordinates of the text starting point.
Also inside the strokeText ( ) method, the first parameter is the text to be rendered. The next two parameters are the x and y coordinates of the text starting point.

Task Activity:

Create a new project and write your full name using Canvas. Use both the fillText( ) and the strokeText( ) methods!

Canvas Texts