Abstract
ブログなどでcanvas APIの仕様を誤解し、ハマっている人々をちらほら見かけたので、ここにcanvas使用上の簡単な注意を記す。
※この記事ではcanvas API周りの概念の説明を旨としており、実際の使い方やコード、例などは記さない。
canvas APIは、HTML、JavaScriptによりアクセスする
canvas APIとは、drawing contextを取得して、動的な描画を実現するJavaScript用のAPIである。
drawing contextとは、getContext()メソッドにより返される、描画をするためのオブジェクトである。
canvas要素が、「キャンバスそのもの（＋額縁が混ざったもの）」に相当し、
drawing contextが「キャンバスに設置された画用紙（＋筆や絵の具などの絵を描くための道具オブジェクト）」に相当する、と考えるとよい。
canvas APIは、HTML、JavaScriptによりアクセスする。
canvas要素のプロパティ(canvasのサイズや縁など)の設定をHTMLで、
canvasに描画するというメインの仕事をJavaScriptで、
それぞれ行う。
ちらほら見かけた失敗話
「CSSでcanvas要素のサイズを変えるようにスタイルを指定したら、canvasの中に描かれた中身の画像や絵そのものが引き延ばされてしまった」
といったケースがちらほら見られた。
「CSSの役割は、あくまでHTML要素の装飾であり、canvas APIの機能にアクセスすることはできない」
という点に注意すべきである。
CSSは、「canvas要素というHTML要素の静的な操作」はできても、
canvas APIへのアクセス手段はないのである。
これが、スクリプトが上記のような期待しない挙動を示してしまった要因である。
また、このような勘違いを減らすためには、
「公式・準公式のマニュアルやチュートリアルを確認する」
のが大切である。
以下canvas APIについて書かれた、有用なマニュアルやチュートリアルのサイト（公式・準公式混在）を記す：
【公式】
https://www.w3.org/TR/2dcontext/
W3C公式文書
【準公式】
http://bucephalus.org/text/CanvasHandbook/CanvasHandbook.html#official-standards
仕様についてもわかりやすく解説している優秀なcanvasチュートリアルサイト
https://html.spec.whatwg.org/multipage/canvas.html#implementation-notes
canvas API説明サイト
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API
簡単な使用法の説明はここで
訂正
不適切な説明があったため、記事を大幅に改変した