HTML5 Canvas ile yazı yazabilmek için font özelliğini ve fillText() methodunu kullanacağız.
Fontu ayarlamak için stili,font boyutu ve font boşluklar halinde yazıyoruz.
Örnek : "italic 45px sans-serif";
stiller normal, italic, yada bold olabilir.
sonra fillText metoduna yazi içeriği ve x ve y koordinatlarını gireriz.
Örnek: fillText("Merhaba Dünya", 50, 80);
strokeText yazının içini doldurmaz fillText doldurur.
Renk vermek için fillStyle metodu kullanılır.
<!DOCTYPE html>
<html>
<body>
<h1>Canvas Yazı Örneği</h1>
<canvas id="canvas" width="600" height="500"> Tarayıcı canvas özeliğini desteklemiyor.</canvas>
<script type="text/javascript">
var canvas = document.getElementById('canvas');
var canvas1 = canvas.getContext('2d');
canvas1.font = "italic 45px sans-serif";
canvas1.strokeText("Merhaba", 30, 40);
canvas1.fillStyle = "rgba(255, 0, 0, 0.9)";
canvas1.font = "italic 45px sans-serif";
canvas1.fillText("Dünya", 50, 80);
</script>
</body>
</html>
Şimdi tarayıcıda nasıl göründüne bakalım:
