Objek Canvas DOM HTML

Elemen <canvas> menentukan area bitmap di halaman HTML.

API Canvas memungkinkan JavaScript untuk menggambar grafik di atas kanvas.

API Canvas dapat menggambar bentuk, garis, garis lurus, 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 dengan tag <canvas>:

Contoh

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

Coba sendiri

Bagaimana mengakses elemen Canvas

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

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

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

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

Catatan

Elemen HTML <canvas> sendiri tidak memiliki fungsi pengerjaan gambar.

Anda harus menggunakan JavaScript untuk menggambar grafik.

Metode getContext() mengembalikan objek yang memiliki alat pengerjaan (metode)绘图。

Menggambar di kanvas

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

Metode fillRect() di bawah ini menggambar lingkaran hitam, yang posisinya di pojok kiri atas 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 menetapkan warna pengisian objek pengerjaan.

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 kanvas adalah:

1. Mulai jalur - beginPath()
2. Pindah ke titik - moveTo()
3. Menarik di jalur - lineTo()
4. Menarik 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