English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
HTMLキャンバスが提供する機能はより原始的で、ピクセル処理、動的レンダリング、大量のデータ描画に適しています。
HTML5 <canvas> タグは、スクリプト（通常はJavaScript）を使用して動的にグラフィックを描画するために使用されます。
しかし、<canvas> 要素には独自の描画機能がありません（それはグラフィックのコンテナに過ぎません）-実際にグラフィックを描画するにはスクリプトを使用する必要があります。
getContext() メソッドは、キャンバス上に描画するためのメソッドと属性を提供するオブジェクトを返します。
このリファレンスは getContext("2d) オブジェクトの属性とメソッド、これらの属性とメソッドはキャンバス上にテキスト、ライン、ボックス、円などを描画するために使用できます。
IEFirefoxOperaChromeSafari
Internet Explorer 9、Firefox、Opera、Chrome そして Safari は <canvas> タグの属性及びメソッドをサポートしています。
注意:Internet Explorer 8 及び以前のIEバージョンでは <canvas> 要素をサポートしていません。
| 属性 | 説明 |
| fillStyle | 塗りつぶしの色、グラデーションまたはパターンを設定または返します。 |
| strokeStyle | 筆跡の色、グラデーションまたはパターンを設定または返します。 |
| shadowColor | 影の色を設定または返します。 |
| shadowBlur | 影のぼかしレベルを設定または返します。 |
| shadowOffsetX | 影と形状の水平距離を設定または返します。 |
| shadowOffsetY | 影と形状の垂直距離を設定または返します。 |
| メソッド | 説明 |
| createLinearGradient() | 線形の徐々に変化する色（キャンバスの内容に使用）。 |
| createPattern() | 指定された方向で指定された要素を繰り返します。 |
| createRadialGradient() | 放射状の作成/環形の徐々に変化する色（キャンバスの内容に使用）。 |
| addColorStop() | addColorStop() |
| 属性 | 説明 |
| 線のスタイル | lineCap |
| 線の終端のスタイルを設定または返します。 | lineJoin |
| 線が交差する際に作成される角の種類を設定または返します。 | lineWidth |
| 現在の線の幅を設定または返します。 | miterLimit |
| メソッド | 説明 |
| 矩形 | rect() |
| 矩形を創ります。 | fillRect() |
| 「塗りつぶされた」矩形を描画します。 | 塗りつぶしなしの矩形を描画します。 |
| clearRect() | 指定された矩形内の指定されたピクセルをクリアします。 |
| メソッド | 説明 |
| fill() | 現在の描画（パス）を塗りつぶします。 |
| stroke() | 定義されたパスを描画します。 |
| beginPath() | 新しいパスを開始するか、現在のパスをリセットします。 |
| moveTo() | パスをキャンバスの指定されたポイントに移動しますが、線は創りません。 |
| closePath() | 現在のポイントから始点に戻るパスを創ります。 |
| lineTo() | 新しいポイントを追加し、キャンバスで最終指定ポイントに至る線を創ります。 |
| clip() | 元のキャンバスから任意の形状とサイズの領域を切り取ります。 |
| quadraticCurveTo() | 二次ベセル曲線を創ります。 |
| bezierCurveTo() | 三次ベ塞尔曲線を創ります。 |
| arc() | 弧を創ります。/曲線（円または円の一部の作成に使用）。 |
| arcTo() | 二つの切線間の弧を創ります。/曲線 |
| isPointInPath() | 指定されたポイントが現在のパス内にある場合、true を返し、そうでない場合、false を返します。 |
| メソッド | 説明 |
| scale() | 現在の描画を大きくしたり小さくしたりします。 |
| rotate() | 現在の描画を回転します。 |
| translate() | キャンバス上の (0,0) 位置を再マッピングします。 |
| transform() | 現在の描画の変換マトリックスを置き換えます。 |
| setTransform() | 現在の変換をユニットマトリックスにリセットし、その後 transform() を実行します。 |
| 属性 | 説明 |
| font | テキスト内容の現在のフォント属性を設定または返します。 |
| textAlign | テキスト内容の現在のアライメントを設定または返します。 |
| textBaseline | 描画するテキストの現在のベースラインを設定または返します。 |
| メソッド | 説明 |
| fillText() | キャンバスに「塗りつぶされた」テキストを描画します。 |
| strokeText() | キャンバスにテキストを描画します（塗りつぶしなし）。 |
| measureText() | 指定されたテキストの幅を含むオブジェクトを返します。 |
| メソッド | 説明 |
| drawImage() | キャンバスに画像、キャンバス、またはビデオを描画します。 |
| 属性 | 説明 |
| width | ImageData オブジェクトの幅を返します。 |
| height | ImageData オブジェクトの高さを返します。 |
| data | 指定された ImageData オブジェクトの画像データを含むオブジェクトを返します。 |
| メソッド | 説明 |
| createImageData() | 新しい、空の ImageData オブジェクトを作成します。 |
| getImageData() | キャンバス上の指定された矩形のピクセルデータをコピーする ImageData オブジェクトを返します。 |
| putImageData() | 指定された ImageData オブジェクトから画像データをキャンバスに戻します。 |
| 属性 | 説明 |
| globalAlpha | 描画の現在のアルファ値または透明度を設定または返します。 |
| globalCompositeOperation | 既存の画像に新たな画像をどのように描画するかを設定または返します。 |
| メソッド | 説明 |
| save() | 現在の環境の状態を保存します。 |
| restore() | 前に保存したパスの状態と属性を返します。 |
| createEvent() | |
| getContext() | |
| toDataURL() |