Deskripsi HTML5 <canvas> tag digunakan untuk menggambar grafik, dengan cepat, melalui scripting (biasanya JavaScript).
Namun, <canvas> elemen tidak memiliki kemampuan menggambar sendiri (hanya wadah untuk grafis) - Anda harus menggunakan script untuk benar-benar menarik grafis.
The getContext() metode mengembalikan sebuah objek yang menyediakan metode dan properti untuk menggambar di kanvas.
Referensi ini akan mencakup properti dan metode dari getContext("2d") objek, yang dapat digunakan untuk menggambar teks, garis, kotak, lingkaran, dan banyak lagi - di kanvas.
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
Internet Explorer 9, Firefox, Opera, Chrome, dan dukungan Safari <canvas> dan sifat-sifatnya dan metode.
Catatan: Internet Explorer 8 dan versi sebelumnya, tidak mendukung <canvas> elemen.
Warna, Styles, dan Shadows Milik Deskripsi fillStyle Set atau mengembalikan warna, gradien, atau pola yang digunakan untuk mengisi gambar strokeStyle Set atau mengembalikan warna, gradien, atau pola yang digunakan untuk stroke shadowColor Menetapkan atau mengembalikan warna yang akan digunakan untuk bayangan shadowBlur Menetapkan atau mengembalikan tingkat blur untuk bayangan shadowOffsetX Menetapkan atau mengembalikan jarak horizontal bayangan dari bentuk shadowOffsetY Menetapkan atau mengembalikan jarak vertikal dari bayangan dari bentuk
Styles baris Milik Deskripsi lineCap Menetapkan atau mengembalikan gaya topi akhir untuk garis lineJoin Set atau mengembalikan jenis sudut dibuat, ketika dua garis bertemu lineWidth Menetapkan atau mengembalikan garis lebar saat miterLimit Menetapkan atau mengembalikan panjang mitra maksimum
persegi panjang metode Deskripsi rect() Menciptakan sebuah persegi panjang fillRect() Menggambar "diisi" persegi panjang strokeRect() Menggambar persegi panjang (tanpa isi) clearRect() Membersihkan piksel tertentu dalam sebuah persegi panjang yang diberikan
jalur metode Deskripsi fill() Mengisi gambar saat (jalan) stroke() Sebenarnya menarik jalur yang telah Anda tetapkan beginPath() Dimulai jalan, atau me-reset jalan saat moveTo() Bergerak jalan ke titik yang ditentukan dalam kanvas, tanpa menciptakan garis closePath() Menciptakan jalan dari titik saat kembali ke titik awal lineTo() Menambahkan titik baru dan menciptakan garis ke titik itu dari titik yang ditentukan terakhir di kanvas clip() Klip daerah dari setiap bentuk dan ukuran dari kanvas asli quadraticCurveTo() Menciptakan kurva Bezier kuadrat bezierCurveTo() Menciptakan kurva Bezier kubik arc() Menciptakan busur / kurva (digunakan untuk membuat lingkaran, atau bagian dari lingkaran) arcTo() Menciptakan busur / kurva antara dua garis singgung isPointInPath() Mengembalikan true jika titik tertentu di jalan saat ini, dinyatakan palsu
transformasi Teks Milik Deskripsi font Menetapkan atau mengembalikan properti font saat ini untuk konten teks textAlign Menetapkan atau mengembalikan keselarasan saat ini untuk konten teks textBaseline Set atau kembali teks dasar saat ini digunakan ketika menggambar teks
metode Deskripsi fillText() Menarik teks "diisi" di kanvas strokeText() Menarik teks pada kanvas (tanpa isi) measureText() Mengembalikan sebuah objek yang berisi lebar teks tertentu
gambar Menggambar metode Deskripsi drawImage() Menarik gambar, kanvas, atau video ke kanvas
pixel Manipulasi Milik Deskripsi width Mengembalikan lebar obyek imageData height Mengembalikan ketinggian obyek imageData data Mengembalikan sebuah objek yang berisi data gambar dari objek imageData ditentukan
metode Deskripsi createImageData() Membuat baru, kosong objek imageData getImageData() Mengembalikan sebuah objek imageData yang salinan data pixel untuk persegi panjang yang ditentukan di atas kanvas putImageData() Menempatkan data gambar (dari benda imageData tertentu) kembali ke kanvas
compositing Milik Deskripsi globalAlpha Menetapkan atau mengembalikan alpha atau transparansi nilai saat ini dari gambar globalCompositeOperation Set atau kembali bagaimana gambar baru ditarik ke gambar yang ada
Lain metode Deskripsi save() Menyimpan keadaan konteks saat ini restore() Pengembalian negara path disimpan sebelumnya dan atribut createEvent() getContext() toDataURL()