Ditambahkan di HTML5, elemen HTML {{HTMLElement("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 {{domxref("CanvasRenderingContext2D.fillRect()")}}.

HTML

JavaScript

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

Playable code

<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
  <input id="edit" type="button" value="Edit" />
  <input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code">
ctx.fillStyle = 'green';
ctx.fillRect(10, 10, 100, 100);</textarea>

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext("2d");
var textarea = document.getElementById('code');
var reset = document.getElementById('reset');
var edit = document.getElementById('edit');
var code = textarea.value;

function drawCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  eval(textarea.value);
}

reset.addEventListener('click', function() {
  textarea.value = code;
  drawCanvas();
});

edit.addEventListener('click', function() {
  textarea.focus();
})

textarea.addEventListener('input', drawCanvas);
window.addEventListener('load', drawCanvas);

Reference

{{domxref("HTMLCanvasElement")}}
{{domxref("CanvasRenderingContext2D")}}
{{domxref("CanvasGradient")}}
{{domxref("CanvasImageSource")}}
{{domxref("CanvasPattern")}}
{{domxref("ImageBitmap")}}
{{domxref("ImageData")}}
{{domxref("RenderingContext")}}
{{domxref("TextMetrics")}}
{{domxref("OffscreenCanvas")}}{{experimental_inline}}
{{domxref("Path2D")}} {{experimental_inline}}{{domxref("ImageBitmapRenderingContext")}}{{experimental_inline}}

The interfaces related to the WebGLRenderingContext are referenced under WebGL.

Petunjuk dan tutorial

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 {{HTMLElement("video")}} dan {{HTMLElement("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	Status	Komentar
{{SpecName('HTML WHATWG', 'scripting.html#the-canvas-element', '<canvas>')}}	{{Spec2('HTML WHATWG')}}

Spesifikasi

Status

Komentar

{{SpecName('HTML WHATWG', 'scripting.html#the-canvas-element', '<canvas>')}}