キャンバス API

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

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);

• HTMLCanvasElement
• CanvasRenderingContext2D
• CanvasGradient
• CanvasPattern
• ImageBitmap
• ImageData
• TextMetrics
• OffscreenCanvas
• Path2D Experimental
• ImageBitmapRenderingContext Experimental

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

キャンバスのチュートリアル

キャンバス API の基本的な使いかたと高度な機能の両方をカバーする網羅的なチュートリアル。

HTML5 Canvas Deep Dive

キャンバス API および WebGL の実践的な書籍規模の入門です。

Canvas Handbook

キャンバス API の手軽なリファレンス。

キャンバスを使用した動画の操作

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

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

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

• WebGL