Menggambar pada kanvas Dengan JavaScript
Semua menggambar pada 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>
Cobalah sendiri " Langkah 1: Cari kanvas Element
Pertama-tama, Anda harus menemukan <canvas> elemen.
Hal ini dilakukan dengan menggunakan metode HTML DOM getElementById() :
var canvas = document.getElementById("myCanvas");
Langkah 2: Buat objek Drawing
Kedua, Anda perlu objek gambar untuk kanvas.
The getContext() adalah built-in objek HTML, dengan sifat dan metode untuk menggambar:
var ctx = canvas.getContext("2d");
Langkah 3: Menggambar di Canvas
Akhirnya, Anda dapat menarik pada kanvas.
Mengatur gaya mengisi dari objek gambar untuk warna merah:
ctx.fillStyle = "#FF0000";Properti fillStyle bisa menjadi warna CSS, gradien, atau pola. Default fillStyle hitam.
The fillRect( x,y,width,height ) metode menarik persegi panjang, penuh dengan gaya mengisi, di kanvas:
ctx.fillRect(0,0,150,75);