Deskripsi
Penjelasan HTML canvas

HTML element <canvas> digunakan untuk menggambar grafik / bitmap secara interaktif menggunakan script (javascript). Contohnya, digunakan untuk menggambar grafik permainan, animasi, komposisi foto dan efek gambar visual lainnya.

<canvas> element hanya sebagai container (penampung) untuk gambar, sedangkan gambarnya dibuat oleh script secara terpisah.

Didalam element canvas, dapat disisipkan teks apa saja sebagai fallback untuk browser yang tidak mendukung HTML canvas, teks ini akan muncul apabila browser tidak mendukung canvas element.

HTML <canvas> merupakan tag yang baru diperkenalkan pada HTML5.

Attributes
Atribut HTML Tag <canvas>

height

Digunakan untuk menentukkan tinggi dari element canvas yang dijadikan container (penampung) gambar.

width

Digunakan untuk menentukkan lebar dari element canvas yang dijadikan container (penampung) gambar.


Global Attributes
Atribut Secara Global (Keseluruhan)

<canvas> tag mencakup global attributes, yang artinya tag tersebut dapat disisipkan semua attributes yang termasuk dalam global attributes yang secara umum berlaku untuk semua HTML tags.

Event Attributes
Atribut event (Peristiwa)

<canvas> tag mencakup event attributes, yang artinya attribute tersebut dijalankan ketika ada interaksi dari user atau dalam suatu peristiwa (kejadian). Contoh: menjalankan script (JavaScript) ketika halaman web pada jendela browser hendak ditutup, dan lain sebagainya.

Example
Contoh HTML <canvas> element

<canvas id="kanvasGambar" height="200" width="300">
  <!-- Teks ini muncul apabila browser tidak mendukung HTML5 canvas -->
  <p>Browser Anda tidak mendukung HTML5 Canvas</p>
</canvas>

<script>
  var kanvas = document.getElementById("kanvasGambar");
  var konteks = kanvas.getContext("2d");
  konteks.fillStyle = "rgb(255,0,0)";
  konteks.fillRect(10,50,150,50);
  konteks.fillStyle = "rgb(255,255,255)";
  konteks.fillRect(10,100,150,50);
</script>

Contoh Lengkap
Demo dengan Source Code Editor

Demo Editor
Demo HTML5 <canvas>
Code Editor