Detailed Canvas 04-Drawing Text

draw text

canvas provides two ways to render text:

fillText(text, x, y [, maxWidth])

Fills the specified text at the specified (x,y) position, the maximum width drawn is optional.

strokeText(text, x, y [, maxWidth])

Draws a text border at the specified (x,y) position, with an optional maximum width.

# An example of padding text

The text is filled with the current padding:

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  ctx.font = "48px serif";
  ctx.fillText("Hello world", 10, 50);
}