Menggunakan Canvas pada HTML5

Repost dari artikel saya di PC Mild 25/2010

Meskipun belum diluncurkan secara resmi, banyak website sudah menggunakan standart HTML5 dalam tampilannya. Salah satu elemen baru dalam html5 yang cukup menarik adalah canvas. Canvas dapat berfungsi sebagai media gambar dalam halaman website dengan dikombinasikan bersama javascript.

Canvas merupakan media gambar bitmap berbentuk segi empat yang bisa digunakan untuk me-render grafis game, animasi, dan gambar visual lainnya di halaman website secara client-side. Canvas berbentuk segi empat tanpa garis tepi dan untuk memanfaatkannya bisa menggunakan JavaScript.

Berikut ini contoh cara penggunaan canvas.

  1. Canvas didefinisikan dengan elemen <canvas>, yang harus memiliki ukuran panjang dan lebar. Selain itu, untuk memastikan bahwa browser akan menampilkannya secara benar, maka doctype html5 juga harus disertakan. Sebagai langkah awal, buatlah file index.html dengan isi sebagai berikut.
    <!DOCTYPE html>
    <html>
      <head>
        <title>Test Canvas</title>
        <!--[if IE]>
        <script src="excanvas.js" type="text/javascript"></script>
        <![endif]-->
        <script src="thecanvas.js" type="text/javascript"></script>
      </head>
      <body>
        <h1>Program test canvas</h1>
        <canvas id="can" width="400" height="300" style="border: 1px dotted black"></canvas>
        <br /><a onclick="draw_canvas()" href="#can">Klik disini untuk menggambar</a>
    </body>
    </html>
    

    Anda bisa melihat di bawah tag title ada sebuah html comment. Ketiga baris tersebut digunakan untuk membedakan browser Internet Explorer (IE) dengan lainnya. Perlu diketahui bahwa IE sampai dengan versi 8 masih belum support canvas. Namun IE memiliki teknologi khusus Microsoft bernama VML, yang bisa berfungsi seperti canvas. Namun untuk menggunakannya perlu menambahkan library Javascript excanvas.js. Tentu saja canvas pada IE akan memiliki banyak kekurangan dibandingkan pada browser lainnya. File thecanvas.js adalah file percobaan yang digunakan dalam artikel ini.

  2. Untuk menampilkan gambar pertama, buatlah sebuah fungsi dalam file thecanvas.js untuk menjalankan event click pada tombol yang telah disediakan. Sesuaikan fungsi yang dipanggil dengan property onclick pada tombol. Berikut salah satu contoh menggambar sebuah persegi panjang pada canvas.
    function draw_canvas() {
      var canvas = document.getElementById("can");
      var context = canvas.getContext("2d");
      context.fillRect(50, 25, 150, 100);
    }
    

    Object canvas didapatkan dengan id elemennya. Setiap canvas memiliki drawing context masing-masing, yang digunakan untuk menggambar. Anda harus memasukkan string “2d” sebagai parameter dalam mengambil context dari canvas. Pertanyaannya, apakah ada context 3d untuk canvas? Sayangnya saat ini masih belum. Namun pada catatan spesifikasi html5, dikatakan bahwa versi berikutnya mungkin akan mendukung context 3d.

    Method fillRect(x, y, width, height) digunakan untuk menggambar segi empat berwarna pada canvas. Selain itu, ada juga method strokeRect(x, y, width, height) untuk menggambar garis segi empat saja.

  3. Canvas dapat direset cukup dengan mengatur ulang salah satu property ukurannya. Anda tidak perlu mengubah ukurannya, cukup lakukan seperti baris di bawah ini menggunakan javascript.
    function reset_canvas() {
      var canvas = document.getElementById("can");
      canvas.width = canvas.width;
    }
    
  4. Titik origin koordinat canvas dimulai dari sudut kiri atas, dengan sumbu x ke kanan semakin besar, dan sumbu y ke bawah semakin besar pula.

    Koordinat pada canvas

  5. Untuk menggambar garis, Anda bisa menggunakan method moveTo(x,y) untuk menentukan titik awal penggambaran, kemudian diikuti dengan lineTo(x,y) untuk menggambar rute. Perlu kedua method tersebut masih belum menampilkan garis yang sebenarnya, namun hanya sketsa saja. Untuk menambahkan garis, perlu dipanggil method stroke(). Berikut contoh menggambar sebuah grid dalam canvas.
    function draw_grid() {
      var canvas = document.getElementById("can");
      var context = canvas.getContext("2d");
      // menggambar garis vertikal
      for (var x = 0.5; x < canvas.width; x += 10) {
        context.moveTo(x, 0);
        context.lineTo(x, canvas.height);
      }
      // menggambar garis horizontal
      for (var y = 0.5; y <canvas.height; y += 10) {
        context.moveTo(0, y);
        context.lineTo(canvas.width, y);
      }
      // menampilkan gambar
      context.strokeStyle = "#555";
      context.stroke();
    }
    

    Menggambar grid pada canvas

  6. Canvas juga bisa digunakan untuk menggambar teks. Beberapa property yang bisa diatur adalah font (dengan format css), textAlign (start, end, left, right, center), dan textBaseline (top, hanging, middle, alphabetic, ideographic, bottom). Text baseline digunakan untuk menentukan garis bawah penggambaran text. Anda bisa melihat perbedaannya pada gambar.

    Baseline text pada canvas

    Untuk menggambar, Anda harus memanggil method fillText(text, x, y).

    function draw_text() {
      var canvas = document.getElementById("can");
      var context = canvas.getContext("2d");
      context.font = "bold 12px sans-serif";
      context.fillText("Text 1", 248, 43);
      context.fillText("Text 2", 58, 165);
    }
    
  7. Menggambar gradient juga bukan hal yang sulit. Canvas telah menyediakannya untuk Anda. Berikut ini contoh menggambar gradient dari ujung kiri atas ke kanan bawah secara diagonal.
    function draw_gradient() {
      var canvas = document.getElementById("can");
      var context = canvas.getContext("2d");
      var my_gradient = context.createLinearGradient(0, 0, canvas.width, canvas.height);
      my_gradient.addColorStop(0, "blue");
      my_gradient.addColorStop(1, "white");
      context.fillStyle = my_gradient;
      context.fillRect(0, 0, canvas.width, canvas.height);
    }
    

    Hasil gradient pada canvas

  8. Kemampuan canvas lainnya adalah merender sebuah image. Ada beberapa cara untuk mendapatkan image yang diinginkan, yaitu dengan mengambil elemen <img> pada halaman html, atau dengan menggunakan object Image() sehingga tidak perlu meletakkan image pada html. Method yang digunakan adalah drawImage(). Method tersebut memiliki beberapa jenis parameter yang bisa digunakan. Berikut salah satu contoh penampilan gambar pada canvas.
    function draw_img() {
      var canvas = document.getElementById("can");
      var context = canvas.getContext("2d");
      var cat = new Image();
      cat.src = "logo.png";
      cat.onload = function() {
        context.drawImage(cat, 30, 30);
      };
    }
    

    Hasil tampilan gambar ke canvas

  9. Untuk lebih lengkapnya, Anda bisa membacanya pada dokumentasi working draft pada alamat http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html. Anda juga bisa mengkombinasikannya dengan library lain seperti jQuery atau MooTools. Selamat mencoba.

Selamat mencoba.

Download source code keseluruhan.Artikel ini telah dipublikasikan di media cetak tabloid PC Mild edisi 21 tahun 2010 lalu.

3 Comments

Leave a Comment.