Canvas API とは｜Web のページに、プログラムから絵を描くための仕組み

言葉の意味

Canvas API（キャンバス・エーピーアイ）は、Web のページの中に置いた四角い描画の場へ、プログラムから絵を描くための決まりです。名前の後半にある API は、ソフトどうしがやりとりするための決まりを指す言葉です。

置く場所になるのは、canvas（キャンバス。Web のページに置く、絵を描くための四角い枠）という名前の要素です。何も描かなければ、ただの空いた四角です。そこへ、線や四角や文字や画像を、JavaScript（Web のページを動かすためのプログラミング言語）の命令で1つずつ描き込んでいきます。

MDN（Web の技術についての公式の資料。ブラウザを作っている団体が運営しています）は、この仕組みで作れるものとして、動き・ゲームの絵・数の見せ方・写真の加工・その場での映像の処理を挙げています。扱うのは主に平面の絵です。

必要になる理由

Web のページは、ふつうは文書の形で作ります。見出しや段落や画像を並べる形で、1つ1つの点を自分で決めて塗るようにはできていません。

Canvas API は、その一枚の面を、プログラムから自由に塗れるようにします。1コマずつ描き直せば、そのまま動く絵になります。

実際の使われ方

canvas 要素そのものを定めているのは、WHATWG（Web の標準を決める団体）が出している HTML Standard（Web の文書を作るための言葉の標準を決めている文書）です。この要素が扱える描画の場（コンテキスト）は4種類あり、平面の絵のための CanvasRenderingContext2D、画像を貼るための ImageBitmapRenderingContext、3次元のための WebGLRenderingContext と WebGL2RenderingContext、そして GPUCanvasContext です。

MDN の資料は、最初に getElementById() で要素を取り出し、次に getContext() でその描画の場を受け取り、CanvasRenderingContext2D の命令で実際に描く、という順を示しています。

MDN の資料は、この仕組みが多くのブラウザで2015年7月から使えるようになっていることも書いています。

関係する決まり

canvas の要素には、横幅と高さを指定する属性があります。

MDN の資料は、読み上げの補助との関わりについて注意を書いています。canvas は点の並びでしかなく、そこに描かれた物の情報を外へ出しません。中に書いた文字は、画面を拡大して読んでいる人には読みにくくなります。点そのものが大きくなるだけで、文字の形として拡大されないためです。中身は、意味づけのある文書のようには補助のツールへ伝わらないので、画像と同じように扱い、意味のある内容をこれだけで見せることは避けるべきだとされています。

混同されやすい言葉

WebGL も同じ canvas 要素を使いますが、こちらは GPU（画像の計算を専門に行う部品）の力を借りて、平面と立体の両方を描きます。MDN の資料は、Canvas API が主に平面を扱うのに対して、WebGL は機械の力を使った描画を行うと書いて、両者を分けています。

情報源

• The canvas element — WHATWG HTML Standardhttps://html.spec.whatwg.org/multipage/canvas.html確認日 2026-09-18
• Canvas API — MDN Web Docshttps://developer.mozilla.org/en-US/docs/Web/API/Canvas_API確認日 2026-09-18