Gambar Kanvas HTML
Menggambar di Kanvas Dengan JavaScript
Semua gambar di kanvas HTML harus dilakukan dengan JavaScript:
Contoh
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 150, 75);
</script>
Langkah 1: Temukan Elemen Kanvas
Pertama-tama, Anda harus menemukan elemen <canvas>.
Ini dilakukan dengan menggunakan metode DOM HTML getElementById():
var canvas = document.getElementById("myCanvas");
Langkah 2: Buat Objek Gambar
Kedua, Anda memerlukan objek gambar untuk kanvas.
getContext() adalah objek HTML bawaan, dengan properti dan metode untuk menggambar:
var ctx = canvas.getContext("2d");
Langkah 3: Gambar di Kanvas
Akhirnya, Anda bisa menggambar di kanvas.
Atur gaya isian objek gambar ke warna merah:
ctx.fillStyle = "#FF0000";
Properti fillStyle dapat berupa warna CSS, gradien, atau pola. FillStyle default adalah hitam.
Metode fillRect( x,y,width,height ) menggambar persegi panjang, diisi dengan gaya isian, di kanvas:
ctx.fillRect(0, 0, 150, 75);