fillText method

The fillText method draws the given text on the canvas. The first parameter it takes is the text itself, and the second and third are the coordinates of the point where this text should be placed. The font size and type are set using the font property.

Syntax

javascriptcontext.strokeRect(text, x, y);

Example

Let's draw some text on canvas with fillText, size of 30px and Arial type:

html<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>
javascriptlet canvas = document.querySelector('#canvas');
let ctx = canvas.getContext('2d');

ctx.font = '30px Arial';
ctx.fillText('Hello world', 30, 50);

Результат:

See also

  • the strokeText method
    that draws on the canvas the stroke of a given text
  • the font property
    that sets the font size and type