Search within TutorialsPark

HTML5 Canvas Text


Use Canvas methods to drawn Basic text on the canvas.


Text Drawing Method:fillText("text", x, y, width)

1.The first way to Draw text on canvas is with method fillText("text", x, y, width).

Here "text": Denotes the text to be drawn on Canvas.

( x, y ): denote the co-ordinates where text drawing starts.

width: Specifies the max-width of the text in px ,but optional.

Example:Draw Text using fillText()

Give it a TRY! » Note - The parameter width is optional.


Text Drawing Method:strokeText("text", x, y, width) .

1.Another method to draw text on the canvas is method strokeText("text", x, y, width) .

2.This method strokes the outline of the text, method parameters have usual meaning.

Example: Text Drawing using method strokeText().

Give it a TRY! » Note - The parameter width is optional.


Text Dimensions Measure: measureText(text).

1.The width of span that the text occupies can be calculated using method measureText(text)

2.The text string that is to be measured is taken as a parameter by the method, it measures the length and returns the value which can be displayed on the canvas .

Example: measureText() method.

Give it a TRY! » Exercise- Change the textAlign property to left| right| start| end. Notice the change in alignment.




Related Examples

Related Tags