Terjemahan ini belum lengkap. Mohon bantu menerjemahkan artikel ini dari Bahasa Inggris.

Ditambahkan di HTML5, elemen HTML <canvas> dapat digunakan untuk menggambar grafik melalui skrip di JavaScript. Sebagai contoh, dapat digunakan untuk menggambar graf, membuat komposisi foto, mencipta animasi, atau bahkan melakukan pemrosesan atau rendering video secara waktu-nyata .

Aplikasi Mozilla mendapat dukungan untuk <canvas> sejak Gecko 1.8 (i.e. Firefox 1.5). Elemen tersebut semula dikenalkan oleh Apple untuk Dashboard OS X dan Safari. Internet Explorer mendukung <canvas> sejak versi 9 dan seterusnya; untuk versi awal IE, sebuah halaman dapat secara efektif mendukung <canvas> dengan memasukkan skrip dari proyek Explorer Canvas Google. Google Chrome dan Opera 9 juga mendukung <canvas>.

Elemen <canvas> juga digunakan oleh WebGL untuk menggambar grafik hardware-accelerated 3D di halaman web.

Contoh

Ini hanya cuplikan kode sederhana yang menggunakan metode  CanvasRenderingContext2D.fillRect().

HTML

<canvas id="canvas"></canvas>

JavaScript

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

ctx.fillStyle = 'green';
ctx.fillRect(10, 10, 100, 100);

Edit kode di bawah dan lihat perbaruan perubahannya di kanvas secara waktu-nyata:

Reference

The interfaces related to the WebGLRenderingContext are referenced under WebGL.

CanvasCaptureMediaStream is related.

Petunjuk dan tutorial

Tutoriak canvas
Tutorial komprehensif mengcakup penggunaan sederhana  <canvas> dan fitur lanjutannya.
Cuplikan kode: Canvas
Beberapa cuplikan kode pengembang berorientasi ekstensi yang melibatkan <canvas>.
Demo: ray-caster sederhana
Demo animasi ray-tracing menggunakan canvas.
Menggambar DOM objects ke canvas
Bagaimana menggambar konten DOM, seperti elemen HTML, pada canvas.
Memanipulasi video dengan canvas
Menggabungkan <video> dan <canvas> untuk memanipulasi data video secara real time.

Sumber

Generik

Librari

  • Fabric.js is an open-source canvas library with SVG parsing capabilities.
  • Kinetic.js is an open-source canvas library focused on interactivity for desktop and mobile applications.
  • Paper.js is an open source vector graphics scripting framework that runs on top of the HTML5 Canvas.
  • Origami.js is an open source lightweight canvas library.
  • libCanvas is powerful and lightweight canvas framework.
  • p5.js has a full set of canvas drawing functionality for artists, designers, educators and beginners.
  • Processing.js is a port of the Processing visualization language.
  • PlayCanvas is an open source game engine.
  • Pixi.js adalah enjine permainan open source.
  • PlotKit adalah librari charting dan grafik.
  • Rekapi is an animation key-framing API for Canvas.
  • PhiloGL is a WebGL framework for data visualization, creative coding and game development.
  • JavaScript InfoVis Toolkit creates interactive 2D Canvas data visualizations for the Web.
  • EaselJS is a free/open source library to make it easier to use canvas for games and art
  • Scrawl-canvas is another open-source javascript library for creating and manipulating 2d canvas elements
  • heatmap.js is an open source library to create canvas based heatmaps
  • The ZIM framework provides conveniences, components and controls for coding creativity on the canvas — includes accessibility and hundreds of colorful tutorials.

Spesifikasi

Spesifikasi Status Komentar
HTML Living Standard
The definition of '<canvas>' in that specification.
Living Standard  

Lihat juga

Tag Dokumen dan Kontributor

Kontributor untuk laman ini: her82man
Terakhir diperbarui oleh: her82man,