Canvas API

Ditambahkan di HTML5, elemen HTML <canvas> (en-US) 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.

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

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

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:

The interfaces related to the WebGLRenderingContext are referenced under WebGL.

CanvasCaptureMediaStream (en-US) is related.

Tutorial 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> (en-US) dan <canvas> (en-US) untuk memanipulasi data video secara real time.

• HTML5 Canvas Deep Dive
• Canvas Handbook

• 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.

• WebGL