canvas 要素

4.8.10 canvas 要素

Status: Last call for comments. ISSUE-74 (canvas-accessibility) blocks progress to Last Call

カテゴリー
フロー・コンテンツ
フレージング・コンテンツ
エンベッディッド・コンテンツ
この要素を使うことができるコンテキスト：
エンベッディッド・コンテンツが期待される場所
コンテンツモデル
トランスペアレント
コンテンツ属性：
グローバル属性
width
height
DOMインタフェース：
interface HTMLCanvasElement : HTMLElement {
           attribute unsigned long width;
           attribute unsigned long height;

  DOMString toDataURL(optional in DOMString type, in any... args);

  Object getContext(in DOMString contextId);
};

canvas 要素は、スクリプトに解像度依存のビットマップ・キャンバスを提供し、グラフ、ゲームグラフィックス、そのほか、ビジュアルイメージを、オンザフライでレンダリングするために使うことができます。

ウェブ制作者は、もっと適切な要素が利用できるなら、そのドキュメントで canvas 要素を使うべきではありません。例えば、ページの見出しをレンダリングするために canvas 要素を使うのは不適切です。もし、その見出しをグラフィックに重点をおいてた表現にしたいなら、適切な要素（通常は h1）を使ってマークアップし、それから、CSS や XBL のようなサポート・テクノロジーを使ってスタイリングするべきです。

ウェブ制作者が canvas 要素を使うときは、コンテンツも提供しなければいけません。そのコンテンツとは、それがユーザーに提供されるとき、ビットマップ・キャンバスと同じ目的や役割を本質的に伝達するものです。このコンテンツは、canvas 要素のコンテンツとして入れることができます。canvas 要素のコンテンツは、もしあれば、その要素のフォールバック・コンテンツとなります。

インタラクティブなビジュアル・メディアでは、canvas 要素に対してスクリプティングが有効なら、そして、canvas 要素のサポートが有効であれば、その canvas 要素は、動的に生成されたイメージを伴った組込要素を表します。

非インタラクティブで静的なビジュアル・メディアでは、canvas 要素が以前に描画されたなら（例えば、もしページがインタラクティブなビジュアル・メディアで見られ、今、表示されているなら、または、ページレイアウト処理の途中で実行していたいくつかのスクリプトが、その要素上に描画していたなら）、その canvas 要素は現在のイメージとサイズを持ったエンベッディッド・コンテンツを表します。そうでなければ、この要素は代わりにフォールバック・コンテンツを表します。

非ビジュアルメディア、そして、canvas 要素に対してスクリプティングが無効となっている、または、canvas 要素のサポートが無効になっているビジュアル・メディアでは、canvas 要素は代わりにフォールバック・コンテンツを表します。

canvas 要素がエンベッディッド・コンテンツを表すときでも、ユーザーはその canvas 要素の子孫（フォールバック・コンテンツ）にフォーカスすることができます。これによって、ウェブ制作者は、インタラクティブな canvas を、キーボードからフォーカスできるようにすることができます。ウェブ制作者は、フォールバック・コンテンツにあるフォーカス可能な要素に、インタラクティブ領域を 1 対 1 に対応付けするべきです。

canvas 要素は、座標空間のサイズをコントロールする2つの属性を持ちます： width と height です。これらの属性は、指定するとき、妥当な非負整数でなければいけません。それらの数値を取得するために、非負整数パース規則を使わなければいけません。属性が指定されなかった、または、その値をパースしたらエラーになったら、代わりにデフォルト値を使わなければいけません。width 属性のデフォルトは 300 で、height 属性のデフォルトは 150 です。

canvas 要素の本来の寸法は、座標空間のサイズと等しくなります。その数字はCSSピクセルで解釈されます。しかし、この要素はスタイルシートを使って自由にサイズを変更することができます。レンダリング中に、そのイメージはこのレイアウトサイズにフィットするよう伸縮されます。

座標空間のサイズは、必ずしも、ユーザーエージェントが初期またはレンダリング中に使うであろう実際のビットマップのサイズを表すとは限りません。高解像度ディスプレーでは、例えば、ユーザーエージェントは内部的に座標空間内の一単位を 2 デバイスピクセルにしたビットマップを使うことができます。こうすることで、レンダリングは全体を通してハイクオリティに維持されます。

canvas 要素が生成され、それに続き、width と height 属性が（新しい値に、または、以前の値に）セットされたらいつでも、そのビットマップと関連コンテンツは初期状態にクリアされ、新たに指定された座標空間の寸法で再び初期化されなければいけません。

canvas が初期化されると、そのビットマップは透明な黒としてクリアされなければいけません。

width と height IDL 属性は、同じ名前の対応するコンテンツ属性を反映しなければいけません。

次の例では、ひとつの四角形だけが描かれ現れます：

  // canvas is a reference to a <canvas> element
  var context = canvas.getContext('2d');
  context.fillRect(0,0,50,50);
  canvas.setAttribute('width', '300'); // clears the canvas
  context.fillRect(0,100,50,50);
  canvas.width = canvas.width; // clears the canvas
  context.fillRect(100,0,50,50); // only this square remains

canvas に描画するために、ウェブ制作者は、まずはじめに、canvas 要素の getContext(contextId) メソッドを使って、コンテキストのリファレンスを取得しなければいけません。

context = canvas . getContext(contextId)

canvas に描画するための API を使うことができるオブジェクトを返します。

指定の context ID がサポートされていないものなら、null を返します。

コンテキストは、別の仕様で定義されています。

ベンダーは、例えば、moz-3d のように、vendorname-context の構文を使って、実験的なコンテキストを定義することもできます。

空文字列や、未サポートのコンテキストを表す文字列が引数に指定されたら、ユーザーエージェントは、null を返さなければいけません。文字列比較をする際、大文字と小文字を区別しなければいけません。

url = canvas . toDataURL( [ type, ... ])

canvas のイメージを表す data: URL を返します。

第 1 引数が指定されたら、それは返されるイメージのタイプを制御するものとなります（例： PNG や JPEG）。デフォルトは image/png です。このタイプは、未サポートのタイプが指定されたときにも使われることになります。これ以降の引数は、タイプごとに固有なものとなり、イメージが生成される方法を制御するものとなります。これについては下表を参照してください。

toDataURL() メソッドは、引数なしで呼び出された場合は、イメージを PNG ファイルとして表したものを含んだ data: URL を返さなければいけません。 [PNG]

canvas に何もピクセルが存在しないなら（つまり、横幅も縦幅も 0）、このメソッドは文字列 "data:," を返さなければいけません。（これは、最短の data: URL です。text/plain リソースの空文字列を表します。）

toDataURL(type) メソッドが 1 個以上の引数を伴って呼び出されたら、type に指定されたフォーマットでイメージを表したものを含んだ data: URL を返さなければいけません。指定可能な値は、パラメータ無しの MIME タイプです。例えば、image/png, image/jpeg です。実装で、確実に canvas から SVG イメージをレンダリングするための情報が十分に保持できるのであれば、image/svg+xml ですら使うことができるかもしれません。

アルファー・チャネルをサポートしないイメージ・タイプの場合、そのイメージは source-over 演算子を使って背景を無地の黒で合成されなければいけません。そして、その結果となるイメージを使って、data: URL を生成しなければいけません。

image/png のサポートだけが必須です。ユーザーエージェントは他のタイプをサポートすることができます。ユーザーエージェントが要求されたタイプをサポートしていないなら、PNG フォーマットを使ってイメージを返さなければいけません。

ユーザーエージェントは、そのタイプをサポートしているかを確立する前、そして、data: URL を生成する前に、指定されたタイプを ASCII 小文字に変換しなければいけません。

image/png 以外のタイプを使おうとするとき、ウェブ制作者は、返ってきた値が、正確に "data:image/png," か "data:image/png;" で始まる文字列かどうかをチェックして、リクエストしたフォーマットで本当に返ってきたかをチェックすることができます。もしそうなら、そのイメージは PNG です。ゆえに、リクエストしたタイプはサポートされていなかったことになります。（これには例外がひとつだけあります。canvas が縦幅も横幅もない場合で、結果が単に "data:," だけとなる場合です。）

もしこのメソッドが、第 1 引数に、次の表の最初の列にあるタイプのいずれかに対応するタイプが指定されて呼び出され、ユーザーエージェントがそのタイプをサポートしているなら、それ以降の引数があれば、それは、その行の 2 番目の列に説明された通りに扱わなれなければいけません。

タイプ 以降の引数
image/jpeg 第 2 引数が、0.0 ～ 1.0 の数値なら、その値は要求品質レベルとして扱われなければいけません。それが数値ではない、または、範囲害の数値だったなら、ユーザーエージェントは、その引数が省略されたのと同じように、そのデフォルト値を使わなければいけません。

他の引数は無視されなければいけません。ユーザーエージェントは例外を発生させてはいけません。この仕様の将来のバージョンでは、ウェブ制作者がさらに入念に圧縮セッティングやイメージのメタデータなどを制御できるよう、toDataURL()に引き渡せるパラメータをさらに定義するかもしれません。

4.8.10.1 色空間と色補整

Status: Last call for comments

canvas API の色補正は 2 箇所だけで実行されます：まず、canvas 自身が持つガンマ補整と canvas 上の色空間情報を使ってイメージをレンダリングするときです。こえｒは、その canvas で使われている色空間にイメージを変換するためです（例えば、HTMLImageElement オブジェクトを使って、2D コンテキストの drawImage() メソッドを使うなどして）。もうひとつは、出力デバイスに実際の canvas ビットマップをレンダリングするときです。

ゆえに、2D コンテキストでは、canvas 上に図形を描くために使われる色は、getImageData() メソッドを通して得られた色に正確に一致します。

toDataURL()メソッドは、返ってきたリソース内の色空間情報を含めてはいけません。出力フォーマットがそれを許す場合、toDataURL() によって生成されたリソース内のピクセルの色は、getImageData()メソッドによって返されるリソースに一致しなければいけません。

CSS をサポートするユーザーエージェントでは、canvas 要素で使う色空間は、その要素に対して CSS で扱う色を処理するために使われる色空間に一致しなければいけません。

イメージのガンマ補整と色空間情報は、img 要素を使って直接的にレンダリングされるイメージが、canvas 要素上に描画されるものと同じ色を使う、といった方法で扱われなければいけません。さらに、色補正情報を持たないイメージのレンダリング（toDataURL()メソッドによって返される情報など）は、色補正なしにレンダリングされなければいけません。

ゆえに、2D コンテキストでは、drawImage()メソッドを呼び出して、toDataURL()メソッドの出力を canvas にレンダリングしても、適切な寸法を与えれば、ビジュアル効果は一切発生しません。

4.8.10.2 canvas 要素のセキュリティー

Status: Last call for comments

あるオリジンのスクリプトが、他のオリジン（同一でないオリジン）のイメージの情報にアクセス（例：ピクセルを読み取る）することができてしまうと、情報漏洩が発生する可能性が出てきてしまいます。

これを低減するために、canvas 要素は、それらが origin-clean かどうかを表すフラグを持つよう定義されています。すべての canvas 要素は origin-clean を true にセットして開始します。このフラグは、次のアクションのいずれかが発生したら、false にセットされなければいけません：

  • 該当の要素の 2D コンテキストの drawImage()メソッドが、その canvas 要素を持つ Document オブジェクトのオリジンと同じでない HTMLImageElement や HTMLVideoElement を使って呼び出された。

  • 該当の要素の 2D コンテキストの drawImage() メソッドが、origin-clean フラグが false となる HTMLCanvasElement を使って呼び出された。

  • 該当の要素の 2D コンテキストの fillStyle 属性に CanvasPattern オブジェクトがセットされた。ただし、そのオブジェクトが、パターン生成時に、該当の canvas 要素を持つ Document オブジェクトのオリジンと同じでない HTMLImageElement や HTMLVideoElement から生成された場合。

  • 該当の要素の 2D コンテキストの fillStyle 属性に CanvasPattern オブジェクトがセットされた。ただし、そのオブジェクトが、パターン生成時に、origin-clean フラグが false だった HTMLCanvasElement から生成された場合。

  • 該当の要素の 2D コンテキストの strokeStyle 属性に CanvasPattern オブジェクトがセットされた。ただし、そのオブジェクトが、パターン生成時に、該当の canvas 要素を持つ Document オブジェクトのオリジンと同じでない HTMLImageElement や HTMLVideoElement から生成された場合。

  • 該当の要素の 2D コンテキストの strokeStyle 属性に CanvasPattern オブジェクトがセットされた。ただし、そのオブジェクトが、パターン生成時に、origin-clean フラグが false だった HTMLCanvasElement から生成された場合。

origin-clean フラグが false にセットされた canvas 要素の toDataURL()メソッドが呼び出されたら、このメソッドは SECURITY_ERR 例外を発生させなければいけません。

origin-clean フラグが false にセットされた canvas 要素の getImageData()メソッドが不適切な引数を使って呼び出されたら、このメソッドは SECURITY_ERR 例外を発生させなければいけません。

たとえ、width と height を変更して canvas をリセットしたとしても、origin-clean フラグはリセットされません。

※ 原文：http://www.w3.org/TR/2010/WD-html5-20100304/the-canvas-element.html#the-canvas-element

※ canvas 要素の詳細につきましては、当サイトの「Canvas」コーナーをご覧ください。