Canvas Cheat Sheet

HTML5 Canvas Cheat Sheet
HTML5 Canvas Text Font, Size, and Style Tutorial

1.8.1 HTML5 Canvas Text Tutorial

Discussion

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>
comments powered by Disqus