1.8.1 HTML5 Canvas Text Tutorial

To create text with HTML5 Canvas, we can use the fillText() method. Text is defined with a string value and a position. 
1

context.fillText("Hello World!", x, y);

HTML5 Canvas Text Example


Open in new window 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<!DOCTYPE HTML>
<html>
<head>
<script>
 
function init() {
	var canvas=document.getElementById("myCanvas");
	var context=canvas.getContext("2d");
 
	var x = 250;
	var y = 200;
	context.fillText("Hello World!", x, y);
}
 
</script>
</head>
<body onload="init()">
	<canvas id="myCanvas" width="578" height="200"></canvas>
</body>
</html>
Next Section >>
Modified on February 2nd, 2011 by Eric Rowell
comments powered by Disqus