Canvas API

Canvas API は JavaScript と HTML の <canvas> 要素によってグラフィックを描く方法を提供します。他にも、アニメーション、ゲームのグラフィック、データの可視化、写真加工、リアルタイム動画処理などに使用することができます。

Canvas API は全体的に 2D グラフィックを対象としています。 WebGL API は、こちらも <canvas> 要素を使用して、ハードウェアで高速化された 2D および 3D グラフィックを描きます。

基本的な例

この単純な例は、キャンバス上に緑の四角形を描きます。

HTML

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

JavaScript

Document.getElementById() メソッドで、 HTML の <canvas> 要素への参照を取得します。次に、 HTMLCanvasElement.getContext() メソッドで要素のコンテキストを取得します。 — ここに描画されたものが表示されます。

実際の描画は CanvasRenderingContext2D インターフェイスを用いて行われます。 fillStyle プロパティは四角形を緑にします。 fillRect() メソッドはこれを左上から (10, 10) の位置で、幅を150単位、高さを100単位の寸法を与えます。

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

ctx.fillStyle = 'green';
ctx.fillRect(10, 10, 150, 100);

結果

リファレンス

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

CanvasCaptureMediaStream は関連するインターフェイスです。

ガイドとチュートリアル

Canvas チュートリアル
<canvas> の基本的な使いかたと高度な機能の両方をカバーする網羅的なチュートリアル。
HTML5 Canvas Deep Dive
Canvas API および WebGL の実践的な書籍規模の入門です。
Canvas Handbook
Canvas API の手軽なリファレンス。
デモ: 簡単な ray-caster
キャンバスを用いたレイトレーシングアニメーションのデモ。
canvas を使用した動画の操作
<video> と <canvas> を組み合わせて、動画データをリアルタイムに操作します。

ライブラリ

Canvas API は非常に強力ですが、利用するのは単純とは限りません。以下に挙げたライブラリは、キャンバスベースのプロジェクトの作成をより速くより手軽にできるようにします。

  • EaselJS: ゲームやアート作品、その他の高度なグラフィック操作を容易にする、オープンソースのキャンバスライブラリ
  • Fabric.js: SVG のパース機能を持つ、オープンソースのキャンバスライブラリ
  • heatmap.js: キャンバスベースのデータヒートマップを生成するためのオープンソースライブラリ
  • JavaScript InfoVis Toolkit: 対話的なデータの可視化を実現
  • Konva.js: デスクトップおよびモバイルアプリケーション向けの 2D キャンバスライブラリ
  • p5.js: アーティスト、デザイナー、教育者、初心者のためのフル機能を持ったキャンバス描画機能
  • Paper.js: HTML5 Canvas 上で動作する、オープンソースのベクタグラフィックス向けスクリプティングフレームワーク
  • Phaser: ブラウザーゲームを強力にするキャンバスと WebGL の軽量、フリーで楽しいオープンソースフレームワーク
  • Pts.js: キャンバスと SVG の創造的なコーディングや視覚化のためのライブラリ
  • Rekapi: キャンバス用のアニメーション・キーフレーム API
  • Scrawl-canvas: 2D キャンバス要素を作成したり操作したりするためのオープンソースの JavaScript ライブラリです。
  • ZIM: 便利でキャンバス上のコンポーネントとコーディングの創造性の制御を提供し、アクセシビリティと数百のカラフルなチュートリアルがあります。

メモ: WebGL を使用する 2D および 3D のライブラリについては WebGL API を参照してください。

仕様書

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

ブラウザーの互換性

Mozilla アプリケーションは <canvas> の対応を Gecko 1.8 (Firefox 1.5) から始めました。この要素はもともと Apple が OS X Dashboard や Safari のために導入したものでした。 Internet Explorer は <canvas> をバージョン9から対応しており、それ以前のバージョンの IE では、ページに効率的に <canvas> の対応を追加するために Google の Explorer Canvas プロジェクトによるスクリプトを利用することができます。 Google Chrome や Opera 9 も <canvas> に対応しています。

関連情報