Cara menggunakan canvas image editor javascript

Question

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.

Table of Contents Show

AttributesAtribut HTML Tag <canvas>
Global AttributesAtribut Secara Global (Keseluruhan)
Event AttributesAtribut event (Peristiwa)
ExampleContoh HTML <canvas> element
Contoh Lengkap

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

AttributesAtribut HTML Tag <canvas>

height

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

Value: pixels

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

0

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

Value: pixels

Global AttributesAtribut 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.

Silahkan, lihat referensi mengenai HTML Global Attribute

Event AttributesAtribut 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.

Silahkan, lihat referensi mengenai HTML Events Attribute

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