Untuk menggambar teks pada CANVAS, ada satu properti dan dua metode yang harus digunakan. Mereka itu font, fillText(text,x,y), dan strokeText(text,x,y).
Ilustrasi 1:
Ilustrasi 2:
font
Properti font menetapkan properti-properti FONT untuk teks, nilai defaultnya '10px sans-serif'.
Contoh kode berikut menggambar teks dengan FONT-STYLE-nya 'italic', FONT-SIZE-nya '30 piksel' dan FONT-FAMILY-nya 'arial':
Kode untuk output di atas:
<canvas id='myCanvas' height='60'>Browser anda tidak mendukung CANVAS!</canvas>
<script>
var oCanvas = document.getElementById("myCanvas");
var oContext = oCanvas.getContext("2d");
oContext.font = "italic 30px arial";
oContext.fillText("Hello World",10,50);
</script>
fillText()
Metode fillText() digunakan untuk menggambar teks pada CANVAS, tetapi dengan warna penuh. Untuk tampilannya anda bisa lihat pada Ilustrasi 1.
Contoh:
<canvas id='myCanvas' height='60'>Browser anda tidak mendukung CANVAS!</canvas>
<script>
var oCanvas = document.getElementById("myCanvas");
var oContext = oCanvas.getContext("2d");
oContext.font = "30px arial";
oContext.fillText("Hello World",10,50);
</script>
strokeText()
Jika ingin menggambar teks dengan tidak warna penuh bisa gunakan metode strokeText() dan metode ini mempunyai cara kebalikannya metode fillText() dalam tampilannya. Untuk tampilannya anda bisa lihat pada Ilustrasi 2.
Contoh:
<canvas id='myCanvas' height='60'>Browser anda tidak mendukung CANVAS!</canvas>
<script>
var oCanvas = document.getElementById("myCanvas");
var oContext = oCanvas.getContext("2d");
oContext.font = "30px arial";
oContext.strokeText("Hello World",10,50);
</script>
