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
- strokeText(text,x,y) - Draws text on the canvas
- fillText(text,x,y) - Draws "filled" text on the canvas
Drawing with strokeText()
Example
Write a 30px high text on the canvas, using the font "Arial":
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World",10,50);
Try it Yourself »
Drawing with fillText()
Example
Write a 30px high filled text on the canvas, using the font "Arial":
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World",10,50);
Try it Yourself »
Another Hello World
Example
Write a 60px high filled text on the canvas, using the font "Comic Sans MS":
canvas = document.getElementById("myCanvas");
context =
canvas.getContext("2d");
context.font = "60px Comic Sans MS";
context.fillStyle = "red";
context.textAlign = "center";
context.fillText("Hello World", canvas.width/2, canvas.height/2);
Try it Yourself »
Color Picker
