→●

内容表示と操作

Test＝ ／[Edge]

0[object]＝[object HTMLCanvasElement]

1[object]＝[object HTMLSlotElement]

length[number]＝2

item[function]＝function item() { [native code] }

namedItem[function]＝function namedItem() { [native code] }

context = canvas . getContext( contextId [, options ] )→●

キャンバスに描くための API を公開するオブジェクトを返す。
contextId は、欲される API を［ "2d"、"bitmaprenderer"、"webgl"、"webgl2" ］いずれかとして指定する。
options は、その API により取り扱われる。

この仕様は、［ "2d"、"bitmaprenderer" ］文脈を定義する。[WEBGL] 仕様は、［ "webgl"、"webgl2" ］文脈を定義する。

次の場合は null を返す：

contextId はサポートされない場合 ／ 当のキャンバスは すでに別種の文脈で初期化されている場合（例： "webgl" 文脈を取得した後に "2d" 文脈を取得しようと試行した場合）。

url = canvas . toDataURL( [ type [, quality ] ] )→●

このキャンバス内の画像用の data: URL を返す。

type 引数が供された場合、返される画像の型を制御する（例： PNG ／JPEG ）。既定は "image/png" 型とする ― この型は、所与の型がサポートされない場合にも利用される。
quality 引数は、型による画像形式が可変品質をサポートする場合（ "image/jpeg" など ）に適用される、0.0 以上 1.0 以下の数であり、結果の画像に欲される品質レベルを指示する。

作者は、"image/png" 以外の型を利用しようと試行するときは、返された画像が本当に要請した形式であるかどうかを検査できる ― 返された文字列が正確に文字列 ［ "data:image/png," ／ "data:image/png;" ］から開始されているかどうかを見て。そうであれば、画像は PNG であり、要請した型はサポートされないことになる（これに対する唯一の例外は、キャンバスの縦幅または横幅がない場合で、その事例での結果は単純に "data:," になるであろう）。

canvas . toBlob( callback [, type [, quality ] ] )→●

このキャンバス内の画像を包含しているファイルを表現している Blob オブジェクトを作成した上で、そのオブジェクトを渡して callback を呼び出す。

type 引数が供された場合、返される画像の型を制御する（例： PNG ／JPEG ）。既定は "image/png" 型とする ― この型は、所与の型がサポートされない場合にも利用される。
quality 引数は、型による画像形式が可変品質をサポートする場合（ "image/jpeg" など ）に適用される、0.0 以上 1.0 以下の数であり、結果の画像に欲される品質レベルを指示する。

canvas . transferControlToOffscreen()→●

canvas 要素を placeholder として利用するような、新たな OffscreenCanvas オブジェクトを返す。canvas 要素が OffscreenCanvas オブジェクト用の placeholder になって以降は、その内在的サイズは、もはや変更し得なくなり、描画文脈も持ち得なくなる。placeholder キャンバスの内容は、OffscreenCanvas オブジェクトの描画文脈の commit() メソッドを call することにより更新される。

context = canvas . getContext('2d' [, { [ alpha: true ] [, desynchronized: false ] [, colorSpace: 'srgb'] } ] )→●

ある特定の canvas 要素が永続的に束縛している CanvasRenderingContext2D オブジェクトを返す。

alpha メンバが false の場合、当のキャンバスは、常に上透明に強制される。

desynchronized が true の場合、当の文脈の非同期化されるかは true にされ得る。

colorSpace メンバは、当の描画文脈の色空間を指定する。

context . canvas→●

canvas 要素を返す。

attributes = canvas . getContextAttributes()→●

次のようにされたオブジェクトを返す：

• alpha メンバは：
  当の文脈に alpha チャネルがあるならば true ／ 上透明に強制されているならば false
• desynchronized メンバは：
  当の文脈の非同期化されるか
• colorSpace メンバは：
  当の文脈の色空間を指示する文字列

線スタイル

context . save()→●

現在の状態を描法状態スタックにプッシュする。

context . restore()→●

描法状態スタックから状態をポップして、現在の状態をその状態に復旧する。

context . reset()→●

描画文脈を その［ 裏バッファ、描法状態スタック、パス、スタイル ］も含めて設定し直す。

context . lineWidth [ = value ]→●
styles . lineWidth [ = value ]→●

現在の線幅を返す。

設定して、線幅を変更できる。［ 有限でない値／正でない値 ］は、無視される。

context . lineCap [ = value ]→●
styles . lineCap [ = value ]→●

現在の線 cap スタイルを返す。

設定して、線 cap スタイルを変更できる。

線 cap スタイルに可能な値は、"butt"、"round"、"square"。他の値は、無視される。

context . lineJoin [ = value ]→●
styles . lineJoin [ = value ]→●

現在の線継ぎスタイルを返す。

設定して、線継ぎスタイルを変更できる。

継ぎスタイルに可能な値は "bevel"、"round"、"miter"。他の値は、無視される。

context . miterLimit [ = value ]→●
styles . miterLimit [ = value ]→●

現在の miter 限界比を返す。

設定して、miter 限界比を変更できる。［ 有限でない値／正でない値 ］は、無視される。

context . setLineDash( segments )→●
styles . setLineDash( segments )→●

現在の線ダッシュ･パターンを設定する（stroke 時に利用される）。引数は、線の有無が交互に切り替わるような、一連の距離からなるリストである。

segments = context . getLineDash()→●
segments = styles . getLineDash()→●

現在の線ダッシュ･パターンの複製を返す。返される配列内のエントリー数は常に偶数になる（すなわち、パターンは正規化される）。

context . lineDashOffset→●
styles . lineDashOffset→●

位相オフセットを返す（線ダッシュ･パターンと同じ単位による）。

設定して、位相オフセットを変更できる。有限でない値は、無視される。

テキスト･スタイル

context . font [ = value ]→●
styles . font [ = value ]→●

現在のフォント設定群を返す。

設定して、フォントを変更できる。その構文は、CSS font プロパティのそれと同じであり、CSS フォント値として構文解析できない値は、無視される。

相対［ キーワード／長さ ］は、canvas 要素のフォントに相対的に算出される。

context . textAlign [ = value ]→●
styles . textAlign [ = value ]→●

現在のテキスト整列設定群を返す。

設定して、整列法を変更できる。可能な値とその意味は、下に与えられ、他の値は無視される。既定は "start"。

context . textBaseline [ = value ]→●
styles . textBaseline [ = value ]→●

現在の基底線整列 設定群を返す。

設定して、基底線整列を変更できる。可能な値とその意味は、下に与えられ、他の値は無視される。既定は "alphabetic"。

context . direction [ = value ]→●
styles . direction [ = value ]→●

現在の方向性を返す。

設定して、方向性を変更できる。可能な値とその意味は、下に与えられ、他の値は無視される。既定は "inherit"。

context . textLetterSpacing [ = value ]→●
styles . textLetterSpacing [ = value ]→●

テキスト内の文字間の現在のアキを返す。

設定して、文字間のアキを変更できる。［ 正な値／負な値 ］は、文字間を更に［ 広げる／詰める ］。既定は 0 。

context . textWordSpacing [ = value ]→●
styles . textWordSpacing [ = value ]→●

テキスト内の現在の単語間のアキを返す。

設定して、単語間のアキを変更できる。［ 正な値／負な値 ］は、単語間を更に［ 広げる／詰める ］。既定は 0 。

context . fontKerning [ = value ]→●
styles . fontKerning [ = value ]→●

現在のフォント･カーニング設定を返す。

設定してフォント･カーニングを変更できる。可能な値とその意味は、下に与えられ、他の値は無視される。既定は "auto"。

context . fontStretch [ = value ]→●
styles . fontStretch [ = value ]→●

現在のフォント･ストレッチ【字幅】設定を返す。

設定して、フォント･ストレッチを変更できる。可能な値とその意味は、下に与えられ、他の値は無視される。既定は "normal"。

context . fontVariantCaps [ = value ]→●
styles . fontVariantCaps [ = value ]→●

現在のフォント variant caps 設定を返す。

設定して、フォント variant caps を変更できる。可能な値とその意味は、下に与えられ、他の値は無視される。既定は "normal"。

context . textRendering [ = value ]→●
styles . textRendering [ = value ]→●

現在のテキスト描画設定を返す。

設定して、テキスト描画を変更できる。可能な値とその意味は、下に与えられ、他の値は無視される。既定は "auto"。

context.font = value→●

CSSの font プロパティと同じ¶。

パスの築き方

context . moveTo( x, y )→●
path . moveTo( x, y )→●

所与の点を伴う新たな下位パスを作成する。

context . closePath()→●
path . closePath()→●

現在の下位パスを閉じた上で、その始端（すなわち終端）と同じ点から、新たな下位パスを開始する。

context . lineTo( x, y )→●
path . lineTo( x, y )→●

現在の下位パスに、その最後の点から直線で接続するように所与の点を追加する。

context . quadraticCurveTo( cpx, cpy, x, y )→●
path . quadraticCurveTo( cpx, cpy, x, y)→●

現在の下位パスに、その最後の点から［ 所与の制御点を伴う二次ベジェ曲線 ］で接続するように所与の点を追加する。

context . bezierCurveTo( cp1x, cp1y, cp2x, cp2y, x, y)→●
path . bezierCurveTo( cp1x, cp1y, cp2x, cp2y, x, y )→●

現在の下位パスに、その最後の点から［ 所与の制御点を伴う三次ベジェ曲線 ］で接続するように所与の点を追加する。

context . arcTo( x1, y1, x2, y2, radius )→●
path . arcTo( x1, y1, x2, y2, radius )→●

現在の下位パスに、その最後の点から直線、および［ 所与の［ 制御点, 半径 ］を伴う円弧 ］で順に接続するように点を追加する。

radius が負である場合、IndexSizeError 例外が投出される。

¶図を省く

context . arc( x, y, radius, startAngle, endAngle [, counterclockwise ] )→●
path . arc( x, y, radius, startAngle, endAngle [, counterclockwise ] )→●

現在の下位パスに、その最後の点から直線、および［ 真円の周を所与の始端角度から所与の終端角度まで所与の方向へたどる円弧（既定は時計回り）］で順に接続するように点を追加する。

所与の半径が負である場合、IndexSizeError 例外が投出される。

¶図を省く

context . ellipse( x, y, radiusX, radiusY, rotation, startAngle, endAngle [, counterclockwise ] )→●
path . ellipse( x, y, radiusX, radiusY, rotation, startAngle, endAngle [, counterclockwise ] )→●

現在の下位パスに、その最後の点から直線、および［ 楕円の周を所与の始端角度から所与の終端角度まで所与の方向へたどる円弧（既定は時計回り）］で順に接続するように点を追加する。

所与の半径が負である場合、IndexSizeError 例外が投出される。

context . rect( x, y, w, h )→●
path . rect( x, y, w, h )→●

所与の矩形を表現している 新たな閉じた下位パスを、このパスに追加する。

変形

context . scale( x, y )→●

所与の特徴を伴う拡縮変形を適用するように、現在の変形行列を変更する。 context . rotate(angle) 所与の特徴を伴う回転変形を適用するように，現在の変形行列を変更する。 角度 angle はラジアン単位とする。 context . translate(x, y) 所与の特徴を伴う並進変形を適用するように，現在の変形行列を変更する。 context . transform(a, b, c, d, e, f) 現在の変形行列を，一連の引数により与えられる行列（下に述べる）を適用するように変更する。 matrix = context . getTransform() 現在の変形行列の複製を，新たな DOMMatrix オブジェクトとして返す。 context . setTransform(a, b, c, d, e, f) 現在の変形行列を，一連の引数により与えられる行列（下に述べる）に変更する。 context . setTransform(transform) 現在の変形行列を，渡された DOMMatrix2DInit 辞書により表現される行列に変更する。 context . resetTransform() 現在の変形行列を，単位行列に変更する。

¶以下を省く