HTML5 Canvas - Tekst

Na obiekcie Canvas można "rysować" tekst. Służą do tego metody:

context.fillText(tekst,x,y);

Oznaczenia:

tekst - treść do wyświetlenia na płótnie;
x,y - współrzędne punktu, od którego zostanie narysowany tekst;

Mamy tu możliwość używania różnych stylów czcionek i ich rozmiarów dzięki metodzie context.font = "rozmiar styl".

Za kolor czcionki odpowiada metoda context.fillStyle = "kolor".

Metoda context.strokeText(tekst,x,y) odpowiada za wypełnienie zajmowanego obszaru przez tekst.

Poniżej przykład:

<html>
<head>
<script>
	window.onload = function(){
		var canvas = document.getElementById("myCanvas");
		var context = canvas.getContext("2d");
		context.font = "50pt Calibri"; // styl tekstu
		context.fillStyle = "gray"; // ustawienie koloru tekstu
		context.fillText("JavaScript",15,100); // narysowanie tekstu
		context.strokeText("JavaScript",15,160); // wyświetlenie tekstu
	};
</script>
</head>
<body>
<canvas id="myCanvas" width="300" height="300" style="border:1px solid black;">
</canvas>
</body>
</html>