Di HTML5 ada elemen CANVAS yang dapat kita gunakan untuk menggambar graphics, kotak, lingkaran, karakter, dan masih banyak lainnya. Namun, secara aktual untuk melakukan semua hal itu tidak hanya CANVAS yang dilibatkan, scripting (umumnya JavaScript) juga wajib disertakan.
Elemen CANVAS didukung oleh IE9 (IE8 dan sebelumnya tidak mendukung), Firefox, Opera, Chrome, dan Safari.
Elemen CANVAS hanya mempunyai dua atribut, yaitu WIDTH dan HEIGHT, dimana masing-masing menetapkan lebar dan tinggi dari canvas yang akan dibuat, dalam satuan piksel.
Untuk CANVAS ini coba didahului dengan penulisan seperti berikut:
Selanjutnya bagaimana menggambar sebuah bentuk pada CANVAS itu, anda bisa mengikuti hal di bawah ini dan ini hanya satu contoh:
Temukan ID elemen CANVAS yang dimaksud, dalam contoh ini adalah
myCanvas.var canvas = document.getElementById("myCanvas");Panggil metode
getContext(), berikan string '2d' untuk parameter metode ini.var context = canvas.getContext("2d");Tetapkan warna penuh ke biru.
context.fillStyle = "rgb(13, 118, 208)";Gambar persegiempat panjang dengan empat sudut.
context.fillRect(30, 30, 150, 150);Dan kode dari no 1 sampai dengan 4 anda tempatkan di dalam fungsi bernama
drawSquare(). Sehingga menjadi:function drawSquare(){ var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); context.fillStyle = "rgb(13, 118, 208)"; context.fillRect(30, 30, 150, 150); }Untuk memanggil fungsi
drawSquare()bisa yang manapun disukai, contoh ini misalnya fungsi itu dipanggil ketika halaman pertama kali dimuat:<BODY ONLOAD="drawSquare()">- Output dari contoh kode di atas:
Tambahan: getContext("2d") adalah objek built-in HTML5, dia mempunyai banyak properti dan metode untuk keperluan menggambar pada CANVAS. Pada contoh di atas hanya properti fillStyle dan metode fillRect() yang digunakan, untuk lainnya mudah-mudahan akan di bahas pada lain artikel.
