Teks Kanvas HTML
Menggambar Teks di Kanvas
Untuk menggambar teks pada kanvas, properti dan metode yang paling penting adalah:
- font - mendefinisikan properti font untuk teks
- fillText( text,x,y ) - menggambar teks "terisi" di kanvas
- strokeText( text,x,y ) - menggambar teks di kanvas (tanpa isian)
Menggunakan fillText()
Contoh
Atur font menjadi 30px "Arial" dan tulis teks yang terisi di kanvas:
JavaScript:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);
Menggunakan strokeText()
Contoh
Atur font menjadi 30px "Arial" dan tulis teks, tanpa isian, di kanvas:
JavaScript:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);
Tambahkan Warna dan Teks Tengah
Contoh
Atur font menjadi 30px "Comic Sans MS" dan tulis teks merah yang diisi di tengah kanvas:
JavaScript:
var
canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Comic Sans MS";
ctx.fillStyle = "red";
ctx.textAlign = "center";
ctx.fillText("Hello World", canvas.width/2, canvas.height/2);