Contoh
Menggambar kotak merah, dengan cepat, dan menunjukkan dalam <canvas> elemen:
<canvas id="myCanvas"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 80, 80);
</script>
Cobalah sendiri " Definisi dan Penggunaan
The <canvas> tag digunakan untuk menggambar grafik, dengan cepat, melalui scripting (biasanya JavaScript).
The <canvas> tag hanya wadah untuk grafis, Anda harus menggunakan script untuk benar-benar menarik grafis.
Dukungan Browser
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung elemen.
| Elemen | |||||
|---|---|---|---|---|---|
| <canvas> | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
Perbedaan Antara HTML 4.01 dan HTML5
The <canvas> tag yang baru di HTML5.
Tips dan Catatan
Catatan: Setiap teks dalam <canvas> elemen akan ditampilkan dalam browser yang tidak mendukung <canvas> .
Tip: Pelajari lebih lanjut tentang <canvas> elemen dalam kami HTML Canvas Tutorial .
Tip: Untuk referensi lengkap semua properti dan metode yang dapat digunakan dengan objek kanvas, pergi ke kami HTML Canvas Referensi .
atribut
= Baru di HTML5.
| Atribut | Nilai | Deskripsi |
|---|---|---|
| height | pixels | Menentukan ketinggian kanvas |
| width | pixels | Menentukan lebar kanvas |
Atribut global
The <canvas> tag juga mendukung Atribut Global di HTML .
Atribut acara
The <canvas> tag juga mendukung Acara Atribut di HTML .
Pengaturan Default CSS
Tidak ada.