HTML5 で導入された HTML の <canvas> 要素は、 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> 要素は、ウェブページ上の 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 の変更個所をその場で確認できます:

リファレンス

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

CanvasCaptureMediaStream が関連しています。

ガイドとチュートリアル

Canvas チュートリアル
<canvas> の基本的な使いかたと高度な機能の両方をカバーする網羅的なチュートリアル。
Code snippets: Canvas
拡張機能開発者向けの <canvas> に関係するコード断片。
デモ: 簡単な Ray-Caster
キャンバスを用いたレイトレーシングアニメーションのデモ。
canvas を使用した動画の操作
動画データをリアルタイムに操作するため、<video><canvas> を組み合わせます。
キャンバスでのピクセル操作
ImageBitmap を使用して、キャンバスのビットマップで直接ピクセルを検査したり変更したりする方法です。
canvas への DOM オブジェクトの描画
HTML 要素などの DOM コンテンツをキャンバスに描画する方法。

リソース

全般的な情報

ライブラリ

  • Fabric.js: SVG のパース機能を持つ、オープンソースの canvas ライブラリ
  • Kinetic.js: デスクトップおよびモバイルアプリケーションのインタラクティブ性に力を入れた、オープンソースの canvas ライブラリ
  • Paper.js: HTML5 Canvas 上で動作する、オープンソースのベクタグラフィックス向けスクリプティングフレームワーク
  • Origami.js: オープンソースの軽量なキャンバスライブラリです。
  • libCanvas: 強力かつ軽量な canvas のフレームワーク
  • p5.js: アーティスト、デザイナー、教育者、初心者のためのフル機能を持ったキャンバス描画機能です。
  • Processing.js: Processing 言語を移植したもの
  • PlayCanvas: オープンソースのゲームエンジン
  • Pixi.js: オープンソースのゲームエンジン
  • PlotKit: 図表やグラフの作成の為のライブラリ
  • Rekapi: キャンバス用のアニメーション・キーフレーム API
  • PhiloGL: データの可視化、創造的なコーディング、及びゲーム開発の為の WebGL フレームワーク
  • JavaScript InfoVis Toolkit: インタラクティブな 2D キャンバス・データ・ビジュアライゼーション作成の為のツールキット
  • EaselJS: ゲームや芸術作品向けに canvas を使用することを容易にする、フリーかつオープンソースのライブラリ
  • Scrawl-canvas: 2D キャンバス要素を作成したり操作したりするためのオープンソースの JavaScript ライブラリです。
  • heatmap.js: ヒートマップをもとにしたきゃバスを作成するためのオープンソースのライブラリです。
  • ZIM: 便利でキャンバス上のコンポーネントとコーディングの創造性の制御を提供し、アクセシビリティと数百のカラフルなチュートリアルがあります。

仕様書

仕様書 状態 備考
HTML Living Standard
the 2D rendering context の定義
現行の標準  

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, yyss, ethertank, dextra, Yukoba, happysadman, Mgjbot, Cai, Taken
最終更新者: mfuji09,