Lompat ke konten Lompat ke sidebar Lompat ke footer

Penggunaan Canvas pada HTML

Elemen HTML Canvas digunakan untuk menggambar grafik menggunakan JavaScript. Elemen Canvas hanya merupakan sebuah container untuk kumpulan grafik. Dibutuhkan penggunaan JavaScript untuk dapat menggambar sebuah grafik. Canvas memiliki beberapa method untuk menggambar bentuk, persegi, lingkaran, teks, dan menambahkan gambar.

Sebelum mempelajari materi tentang Penggunaan Canvas pada HTML, terlebih dahulu pelajari materi tentang: Tag Usang Deprecated pada HTML, Daftar URL Encoding pada HTML, dan Fungsi SVG pada HTML.

Elemen <canvas> dalam HTML menyediakan lingkungan untuk membuat grafis dan visualisasi yang dinamis di halaman web. Ini memungkinkan pengembang untuk menggambar grafis secara programatik menggunakan JavaScript, memberikan kebebasan ekspresi yang luas dalam pembuatan elemen visual yang responsif dan interaktif.

Pengenalan Canvas dalam HTML

Elemen <canvas> merupakan wadah kosong yang memungkinkan penggunaan JavaScript untuk menggambar secara dinamis. Dalam elemen ini, grafis dapat dibuat, dimodifikasi, dan diubah secara realtime sesuai kebutuhan aplikasi atau desain halaman web.

Elemen <canvas> pada HTML menawarkan sejumlah keunggulan penting dalam pengembangan web, terutama dalam pembuatan grafis yang dinamis dan interaktif. Berikut adalah beberapa keunggulan utama penggunaan Canvas:
  • Kontrol Penuh dan Kustomisasi Tinggi: Elemen <canvas> memberikan kontrol penuh kepada pengembang untuk menggambar grafis. Dengan menggunakan JavaScript, pengguna dapat membuat dan mengubah grafis sesuai keinginan. Ini memungkinkan kustomisasi tinggi dalam desain dan interaksi dengan grafis.
  • Grafis Interaktif dan Animasi yang Dinamis: Canvas memungkinkan pembuatan grafis interaktif yang bereaksi terhadap input pengguna. Hal ini memungkinkan pembuatan animasi yang halus dan responsif, menghasilkan pengalaman pengguna yang lebih menarik dan dinamis.
  • Performa yang Baik: Dalam hal kinerja, Canvas sering kali lebih unggul daripada beberapa metode grafis lainnya. Penggambaran grafis secara langsung di tingkat piksel memungkinkan kinerja yang lebih baik dalam menghadirkan visual yang kompleks dan dinamis.
  • Grafis 2D dan 3D: Selain menggambar grafis 2D, Canvas juga mendukung rendering 3D dengan teknologi seperti WebGL. Ini memungkinkan pembuatan grafis yang lebih realistis dan kompleks, membuka pintu bagi pengembang untuk mengeksplorasi desain yang lebih canggih.
  • Dukungan Cross-Browser yang Baik: Mayoritas peramban web utama mendukung elemen <canvas>, yang memastikan konsistensi dalam tampilan dan fungsionalitas di berbagai platform. Ini membuat penggunaan Canvas menjadi pilihan yang handal untuk pengembangan web lintas peramban.
  • Fleksibilitas dalam Penggunaan Data: Canvas memungkinkan penggunaan data yang dinamis untuk menghasilkan grafis yang berbeda-beda. Data seperti data sensor, data pengguna, atau data waktu nyata dapat diintegrasikan dengan mudah ke dalam elemen Canvas untuk visualisasi yang tepat.

Contoh: Canvas dapat berupa area persegi panjang pada laman HTML. Secara default, sebuah canvas tidak memiliki border ataupun konten. Atribut id telah ditentukan untuk merujuknya di dalam sebuah script, serta penggunaan panjang dan lebar atribut digunakan untuk mendefinisikan ukuran dari canvas. Atribut style digunakan untuk penambahan border pada Canvas.

Baca Juga:

<!DOCTYPE html>

<html>

 

<body>

 

<canvas 

id="myCanvas" 

width="400" 

height="200"

style="border:2px solid #000000;">

</canvas>

 

</body>

 

</html>


Berikut ini beberapa bentuk yang dapat digambar menggunakna Canvas:

Contoh: Menggambar Sebuah Lingkaran.

<!DOCTYPE html>

<html>

 

<body>

 

<canvas 

id="myCanvas" 

width="400" 

height="200" 

style=

"border:2px solid #d3d3d3;">

 

<script>

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

ctx.beginPath();

ctx.arc(200,100,50,0,2*Math.PI);

ctx.stroke();

</script>

 

</body>

 

</html>


Contoh: Menggambar Teks.

<!DOCTYPE html>

<html>

 

<body>

 

<canvas 

id="myCanvas" 

width="600" 

height="200"

style=

"border:1px solid #d3d3d3;">

 

<script>

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

ctx.font = "30px Arial";

ctx.fillText("ElfanMauludi",170,50);

</script>

 

</body>

 

</html>


Contoh: Menggambar Gradien Linier.

<!DOCTYPE html>

<html>

 

<body>

 

<canvas 

id="myCanvas" 

width="400" 

height="200" 

style=

"border:2px solid #d3d3d3;">

Browser tidak support tag canvas HTML5.

</canvas>

 

<script>

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

var grd = ctx.createLinearGradient(0,0,200,0);

grd.addColorStop(0,"yellow");

grd.addColorStop(1,"grey");

ctx.fillStyle = grd;

ctx.fillRect(50,50,300,80);

</script>

 

</body>

</html>


Contoh: Menggambar Lukisan pada Canvas.

<!DOCTYPE html>

<html>

 

<body>

 

<p>

Image to use:

</p>

 

<img 

id="scream" 

src="http://www.theartstory.org/images20/works/van_gogh_vincent_7.jpg" 

alt="VAN GOGH" 

width="100" 

height="200">

 

<p>

Canvas to fill:

</p>

 

<canvas 

id="myCanvas" 

width="150" 

height="250"

style="border:1px solid #d3d3d3;">

</canvas>

 

<p>

<button onclick="myCanvas()">

Click untuk mencoba

</button>

</p>

 

<script>

function myCanvas() 

{

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

var img = document.getElementById("scream");

ctx.drawImage(img,0,0);}

</script>

 

</body>

 

</html>


Contoh: Properti Blur untuk Menggambar Bayangan Canvas HTML.

<!DOCTYPE html>

<html>

 

<body>

 

<canvas 

id="myCanvas" 

width="500" 

height="250">

 

<script>

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

ctx.shadowBlur = 20;

ctx.shadowColor = "yellow";

ctx.fillStyle = "red";

ctx.fillRect(30, 20, 100, 80);

</script>

 

</body>

 

</html>


Contoh: Method Rotasi pada HTML Canvas.

<!DOCTYPE html>

<html>

 

<body>

 

<canvas 

id="myCanvas" 

width="300" 

height="150;">

 

<script>

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

ctx.rotate(20 * Math.PI / 180);

ctx.fillRect(100, 20, 100, 50);

</script>

 

</body>

 

</html>


HTML Canvas Translasi
Method translate() melakukan pemetaan ulang posisi (0,0) pada canvas.

Contoh:

<!DOCTYPE html>

<html>

 

<body>

 

<canvas 

id="myCanvas" 

width="300" 

height="150;">

 

<script>

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

ctx.fillRect(10, 10, 100, 50);

ctx.translate(80, 90);

ctx.fillRect(10, 10, 100, 50);

</script>

 

</body>

 

</html>


Contoh: Method Transformasi pada Canvas HTML.

<!DOCTYPE html>

<html>

 

<body>

 

<canvas 

id="myCanvas" 

width="300" 

height="150">

 

<script>

 

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

 

ctx.fillStyle = "yellow";

ctx.fillRect(0, 0, 250, 100)

 

ctx.transform(1, 0.5, -0.5, 1, 30, 10);

ctx.fillStyle = "grey";

ctx.fillRect(0, 0, 250, 100);

 

ctx.transform(1, 0.5, -0.5, 1, 30, 10);

ctx.fillStyle = "black";

ctx.fillRect(0, 0, 250, 100);

 

</script>

 

</body>

 

</html>


Membuat Animasi pada HTML Canvas

JavaScript membantu mensimulasikan animasi terbaik pada Canvas HTML5. Dua method penting pada JavaScript yang dapat digunakan untuk mensimulasikan animasi gambar pada canvas:
  1. setInterval(callback, time): Method ini secara berulang mengeksekusi runtutan kode yang diberikatan pada waktu tertentu.
  2. setTimeout(callback, time): Method ini mengeksekusi runtutan kode hanya sekali pada waktu tertentu.

Contoh:

<!DOCTYPE HTML>

<html>

 

<head>

<script type="text/javascript">

var pattern= new Image();

  

function animate()

{

pattern.src =

'https://www.reproduction-gallery.com/catalogue/uploads/1463472974_large-image_pablopicassowomanfacingtotheright1934lg.jpg';

 

setInterval(drawShape, 100);

}

  

function drawShape()

{

var canvas = document.getElementById('mycanvas');

   

var ctx = canvas.getContext('2d');

ctx.fillStyle = 'rgba(20,20,20,20)';

ctx.strokeStyle = 'rgba(0,153,255,0.4)';

ctx.save();

ctx.translate(150,150);

    

var time = new Date();

ctx.rotate( ((2*Math.PI)/6)*time.getSeconds()

+ ( (2*Math.PI)/6000)*time.getMilliseconds() );

ctx.translate(0,28.5);

ctx.drawImage(pattern,-3.5,-3.5);

ctx.restore();

}

</script>

</head>

 

<body 

onload="animate();">

 

<canvas 

id="mycanvas" 

width="400" 

height="400">

</canvas>

 

</body>

 

</html>


Elemen <canvas> dalam HTML adalah alat yang kuat bagi pengembang untuk membuat grafis yang dinamis dan responsif dalam aplikasi web. Dengan kemampuan untuk mengontrol grafis, membuat animasi interaktif, dan mendukung rendering 2D dan 3D, Canvas memberikan kemungkinan yang luas bagi pengembang dalam menciptakan pengalaman visual yang menarik dan responsif bagi pengguna. Pemahaman tentang keunggulan-keunggulan ini memungkinkan pengguna untuk menggunakan Canvas secara optimal dalam pengembangan web.

Canvas adalah elemen pada HTML yang memungkinkan pengembang web untuk membuat grafika interaktif dan visual secara dinamis di dalam halaman web menggunakan JavaScript. Meskipun Canvas menawarkan sejumlah keunggulan, seperti kemampuan untuk membuat grafik yang kompleks dan animasi yang dinamis, namun terdapat beberapa kelemahan yang perlu dipertimbangkan:
  • Tidak Ada Struktur Objek: Canvas pada HTML tidak menyimpan elemen sebagai objek yang dapat dimanipulasi secara independen. Semua elemen yang digambar di atas kanvas merupakan gambar raster (bitmap) dan tidak dapat diubah strukturnya setelah digambar. Ini berarti tidak ada cara bawaan untuk mengakses elemen tertentu secara langsung di atas kanvas untuk memanipulasinya.
  • Tidak Mendukung Retina Display dan Responsif: Canvas menggambar grafik dalam piksel mutlak, bukan dalam vektor. Akibatnya, saat grafik diperbesar pada layar Retina atau perangkat dengan resolusi tinggi, hasilnya mungkin terlihat buram atau kehilangan kualitas. Selain itu, karena sifat piksel mutlak, mengubah ukuran kanvas tidak secara otomatis menyesuaikan konten di dalamnya, sehingga membuatnya sulit untuk membuat elemen canvas responsif.
  • Aksesibilitas Terbatas: Karena konten yang digambar di atas kanvas adalah elemen grafis, teks di dalamnya tidak dapat diakses oleh teknologi pembaca layar dengan mudah. Hal ini dapat menghambat aksesibilitas bagi pengguna dengan kebutuhan khusus, seperti pengguna tunanetra atau pengguna yang mengandalkan bantuan teknologi pembaca layar untuk mengakses konten web.
  • Kinerja Terbatas pada Grafis yang Rumit: Ketika harus menangani gambar atau animasi yang sangat kompleks, performa Canvas bisa menjadi masalah. Pembuatan grafik yang rumit dan pengolahan animasi dalam waktu nyata dapat menuntut sumber daya yang signifikan dari perangkat pengguna, terutama pada perangkat dengan spesifikasi rendah atau keterbatasan daya pemrosesan.
  • Keterbatasan Fungsionalitas Bawaan: Canvas pada dasarnya adalah "kertas kosong" dimana pengembang harus membuat segalanya dari awal. Tidak seperti elemen lain dalam HTML, seperti SVG (Scalable Vector Graphics), yang memiliki elemen bawaan untuk menggambar bentuk geometris, Canvas membutuhkan lebih banyak kode untuk membuat elemen-elemen ini dari nol.

Meskipun Canvas memiliki kekurangan-kekurangan tersebut, penggunaannya masih sangat berguna terutama dalam pembuatan aplikasi web interaktif yang membutuhkan grafika yang dinamis. Namun, perlu pertimbangan dan strategi tersendiri dalam mengatasi kelemahan-kelemahan tersebut untuk memastikan pengalaman pengguna yang lebih baik dan aplikasi yang lebih optimal.

Referensi Tambahan:

Artikel ini didedikasikan kepada: Asti Pangestu, Ayu Putri Kurniasari, Bagas Adi Pamungkas, Delyana Sukahar, dan Dwi Pratiwiningrum.

5 komentar untuk "Penggunaan Canvas pada HTML"

  1. Apa fungsi tag canvas pada html?

    BalasHapus
    Balasan
    1. Tag < canvas > pada html digunakan untuk menggambar grafik, fly, atau script yang umumnya Javascript. Tag < canvas > bersifat transparan, dan hanya merupakan wadah untuk pembuatan grafik. User harus menggunakan skrip tertentu untuk bisa benar-benar membuat sebuah grafik yang bagus.

      Hapus
    2. Canvas merupakan elemen HTMl yang dapat digunakan untuk menggambar grafik melalui skrip, yang biasanya digunakan untuk menggambar grafik, menggabungkan foto, atau membuat animasi sederhana.

      Hapus
  2. Manakah yang lebih baik, antara Canvas dan SVG pada html?

    BalasHapus
    Balasan
    1. SVg merupakan singkatan dari scalable vector graphics, dimana SVG digunakan untuk mendefinisikan grafik seperti kotak, lingkaran, teks, dan lain sebagainya. SVG memberikan performa yang lebih baik dengan jumlah object yang lebih sedikit atau bentuk permukaan yang lebih besar. Sedangkan Canvas pada HTML memberikan kinerja yang lebih baik dengan permukaan yang lebih kecil atau jumlah object yang lebih banyak.

      Hapus

Hubungi admin melalui Wa : +62-896-2414-6106

Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung.

Bantu admin meningkatkan kualitas blog dengan melaporkan berbagai permasalahan seperti typo, link bermasalah, dan lain sebagainya melalui kolom komentar.

- Ikatlah Ilmu dengan Memostingkannya -
- Big things start from small things -