Referensi Belajar HTML canvas tag. Tutorial dan panduan mengenai element <canvas>...</canvas> yang digunakan untuk menggambar bitmap image dengan script. Mencakup penjelasan yang disertai contoh kode penggunaan sebagai rujukan untuk materi belajar HTML elemen <canvas>.


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

HTML
<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

Contoh source code lengkap disertai dengan link "editor" untuk mencoba (try it) dan melihat hasil (preview) kode.

SOURCE
<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <title>Contoh HTML Canvas tag</title>
    <style>
      canvas {
        background: #555;
      }
    </style>
  </head>
  <body>
    <h3>Contoh HTML5 Canvas</h3>
    <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>

    <p>
    <strong>Keterangan:</strong> blok kotak hitam (diberi style CSS) adalah area kanvas yang merupakan HTML element <code>canvas</code>, sedangkan kotak merah-putih dibuat dengan script (javascript) yang berkaitan dengan HTML5 canvas (Canvas API).
    </p>
  </body>
</html>



Comments