BEST SITE FOR WEB DEVELOPERS
Graphic. Lessons for beginners

Ua

HTML Canvas Text


Drawing Text on the Canvas

To draw text on a canvas, the most important property 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)

Using fillText()

Example

Set font to 30px "Arial" and write a filled text on the canvas:

Your browser does not support the HTML5 canvas tag.

JavaScript:

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);
Try it Yourself »

Using strokeText()

Example

Set font to 30px "Arial" and write a text, with no fill, on the canvas:

Your browser does not support the HTML5 canvas tag.

JavaScript:

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);
Try it Yourself »

Add Color and Center Text

Example

Set font to 30px "Comic Sans MS" and write a filled red text in the center of the canvas:

Your browser does not support the HTML5 canvas tag.

JavaScript:

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Comic Sans MS";
ctx.fillStyle = "red";
ctx.textAlign = "center";
ctx.fillText("Hello World", canvas.width/2, canvas.height/2);
Try it Yourself »