API Canvas

Elemen <canvas> mendefinisikan area bitmap di halaman HTML.

API Canvas memungkinkan JavaScript untuk menggambar grafik di atas kanvas.

API Canvas dapat menggambar bentuk, garis, kurva, kotak, teks, dan gambar, serta warna, putar, kecerahan, dan operasi pixel lainnya.

Menambahkan Canvas ke HTML

Anda dapat menambah elemen canvas di lokasi mana saja di halaman HTML yang menggunakan tag <canvas>:

Contoh

<canvas id="myCanvas" width="300" height="150"></canvas>

Coba sendiri

Bagaimana mengakses elemen Canvas

Anda dapat mengakses elemen <canvas> menggunakan metode HTML DOM getElementById():

const myCanvas = document.getElementById("myCanvas");

Untuk menggambar di atas kanvas, Anda perlu membuat objek konteks 2D:

const ctx = myCanvas.getContext("2d");

Catatan

Elemen HTML <canvas> sendiri tidak memiliki fungsi gambar.

Anda harus menggunakan JavaScript untuk menggambar grafik apapun.

Metode getContext() mengembalikan objek yang memiliki alat gambar (metode).

Menggambar di atas kanvas

Setelah membuat objek konteks 2D, Anda dapat menggambar di atas kanvas.

Metode fillRect() di bawah ini menggambar lingkaran hitam, titik kiri atasnya berada di posisi 20,20. Lingkaran ini lebar 150 piksel dan tinggi 100 piksel:

Contoh

const myCanvas = document.getElementById("myCanvas");
const ctx = myCanvas.getContext("2d");
ctx.fillRect(20, 20, 150, 100);

Coba sendiri

Dengan warna

Properti fillStyle mengatur warna pengisi objek gambar.

Contoh

const myCanvas = document.getElementById("myCanvas");
const ctx = myCanvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 150, 100);

Coba sendiri

Anda juga dapat menggunakan metode document.createElement() untuk membuat elemen <canvas> baru dan menambahkannya ke halaman HTML yang ada:

Contoh

const myCanvas = document.createElement("canvas");
document.body.appendChild(myCanvas);
const ctx = myCanvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 150, 100);

Coba sendiri

Jalur

Metode yang biasa digunakan untuk menggambar di atas kanvas adalah:

1. Mulai jalur - beginPath()
2. Pindah ke titik - moveTo()
3. Menggambar di jalur - lineTo()
4. Menggambar jalur - stroke()

Contoh

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(20, 100);
ctx.lineTo(70, 100);
ctx.stroke();

Coba sendiri