Canvas API

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:

<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

The interfaces related to the WebGLRenderingContext are referenced under WebGL.

CanvasCaptureMediaStream is related.

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 <video> dan <canvas> untuk memanipulasi data video secara real time.

Sumber

Generik

• HTML5 Canvas Deep Dive
• Canvas Handbook

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

Lihat juga

• WebGL