Blog

HTML5 Canvas - Mengenal Elemen Canvas pada HTML 5

 

HTML5 Canvas - Mengenal Elemen Canvas pada HTML 5

HTML 5     2 bulan yang lalu


Elemen Canvas pada HTML5 adalah tag HTML yang mirip dengan tag <div>, <a>, atau <table>, dengan pengecualian bahwa kontennya dirender dengan JavaScript.

Untuk memanfaatkan Canvas HTML5, kita perlu menempatkan tag kanvas di suatu tempat di dalam dokumen HTML, mengakses tag kanvas dengan JavaScript, membuat context, dan kemudian memanfaatkan HTML5 Canvas API untuk menggambar sesuatu.

Saat menggunakan Canvas, penting untuk memahami perbedaan antara elemen Canvas dan context Canvas, karena sering kali banyak yang bingung tentang keduanya.

Elemen Canvas adalah DOM node yang sebenarnya yang disematkan di halaman HTML. Context canvas adalah objek dengan properti dan metode yang dapat Anda gunakan untuk merender grafik di dalam elemen canvas. Context-nya bisa 2d atau webgl (3d).

Setiap elemen canvas hanya dapat memiliki satu context. Jika kita menggunakan metode getContext () beberapa kali, itu akan mengembalikan referensi ke objek context yang sama.

Berikut contoh sederhana dalam menggunakan canvas pada HTML 5.

<style>
  body {
    margin: 0px;
    padding: 0px;
  }
</style>
<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');
  context.font = '40pt Calibri';
  context.fillStyle = 'blue';
  context.fillText('Hello World!', 150, 100);
</script>