Canvas API

HTML5 で導入された <canvas> HTML 要素は、JavaScript によるスクリプティングによって図形などを描画するために使用します。例えば、グラフを描く、写真を合成する、アニメーションを作成する、動画のリアルタイム加工やレンダリングに用いる事が出来ます。

Mozilla アプリケーションは、Gecko 1.8 (すなわち Firefox 1.5) から <canvas> をサポートしています。この要素は Apple によって OS X の Dashboard や Safari のために初めて導入されました。Internet Explorer はバージョン 9 以降で <canvas> をサポートしています。これより前のバージョンの IE では、Google の Explorer Canvas プロジェクトのスクリプトを含めることによって、<canvas> を事実上サポートできます。Google Chrome や Opera 9 も同様に <canvas> をサポートしています。

<canvas> 要素は、web ページ上の 3D グラフィックスのハードウェア・アクセラレーションを行う WebGL によっても使用されます。

例

これは、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);

以下のコードを編集すると、canvas の変更個所をその場で確認できます:

<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
  <input id="edit" type="button" value="編集" />
  <input id="reset" type="button" value="リセット" />
</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);

リファレンス

WebGLRenderingContext に関するインターフェイスは、WebGL に掲載しています。

ガイドとチュートリアル

Canvas チュートリアル

<canvas> の基本的な使いかたと高度な機能の両方をカバーする網羅的なチュートリアル。

Code snippets: Canvas

拡張機能開発者向けの <canvas> に関係するコード断片。

デモ: 簡単な Ray-Caster

キャンバスを用いたレイ・トレーシング・アニメーションのデモ。

canvas に DOM オブジェクトを描画する

HTML 要素などの DOM コンテンツをキャンバスに描画する方法。

canvas を使用して動画を操作する

動画データをリアルタイムに操作するため、<video> と <canvas> を組み合わせます。

リソース

包括的な情報

• HTML5 Canvas Deep Dive
• Canvas Handbook

ライブラリ

• Fabric.js: SVG のパース機能を持つ、オープンソースの canvas ライブラリ
• Kinetic.js: デスクトップおよびモバイルアプリケーションのインタラクティブ性に力を入れた、オープンソースの canvas ライブラリ
• Paper.js: HTML5 Canvas 上で動作する、オープンソースのベクタグラフィックス向けスクリプティングフレームワーク
• libCanvas: 強力かつ軽量な canvas のフレームワーク
• Processing.js: Processing 言語を移植したもの
• PlayCanvas: オープンソースのゲームエンジン
• Pixi.js: オープンソースのゲームエンジン
• PlotKit: 図表やグラフの作成の為のライブラリ
• Rekapi: キャンバス用のアニメーション・キーフレーム API
• PhiloGL: データの可視化、創造的なコーディング、及びゲーム開発の為の WebGL フレームワーク
• JavaScript InfoVis Toolkit: インタラクティブな 2D キャンバス・データ・ビジュアライゼーション作成の為のツールキット
• EaselJS: ゲームや芸術作品向けに canvas を使用することを容易にする、フリーかつオープンソースのライブラリ

仕様

関連情報

• WebGL