Canvas API
jsと<canvas>タグを使用してグラフィックの描画を提供する。アニメーション、ゲームグラフィックス、データ視覚化、写真操作、およびリアルタイムビデオ処理もできる。
主に2Dグラフィックスで使用する。
HTMLCanvasElement
HTMLCanvasElementインターフェースは、<canvas>要素のレイアウトと表示を操作するためのプロパティとメソッドを提供する。
プロパティはwidthとheight。
captureStream
canvasのコンテンツのリアルタイム動画キャプチャーを含むCanvasCaptureMediaStreamTrackのMediaStreamを返す。
カメラで移した際のFPSを設定する。ちらつきとかなくなる。このメソッドの第一引数にFPSを指定する。
getContext
canvas上の描画コンテンツを返す。コンテキスト識別子がサポートされていない、またはcanvasがすでに別のコンテキストモードに設定されている場合はnullを返す。
第一引数にcanvasに関連する描画コンテキストを定義しているコンテキスト識別子を含むDOMString。可能な値は、2d、webgl、webgl2、bitmaprenderer。
2dは2次元のレンダリングコンテキストを表現するCanvasRenderingContext2Dオブジェクトの作成をする。
webgl(もしくはexperimental-webgl)は3次元レンダリングコンテキストを表現するWebGLRenderingContextオブジェクトを作る。このコンテキストはWebGL version 1(OpenGL ES 2.0)を実装するブラウザ上で唯一利用できる。
webgl2は3次元レンダリングコンテキストを表現するWebGL2RenderingContextオブジェクトを作る。このコンテキストはWebGL version 2(OpenGL ES 3.0)を実装するブラウザ上で唯一利用できる。
bitmaprendererは与えられたImageBitmapでcanvasのコンテンツを取り換えるために提供するImageBitmapRenderingContextを作る。
第二引数は第一引数の値によっていくつかのコンテキストを使うことができる。
2dの場合、alphaとdesynchronizedを使える(willReadFrequentlyとstorageがあるが、エンジンによって使用可否があるので書かない)。
alphaは透過にするかしないかを真偽値で設定。(合ってるか不安)
desynchronizedはイベントループからキャンバスペイントサイクルを非同期化することにより、レイテンシーを削減するようにユーザーエージェントにヒントを与える真偽値。(何を言っているかよくわからない)
webglの場合:
alphaは透過効果があるかどうかを示す真偽値。
desynchronizedは2dの時と同様。
antialiasはアンチエイアリスを行うかどうかを示す真偽値。
depthは描画バッファが16bitのdepthバッファをもつことを示す真偽値。
failIfMajorPerformanceCaveatはシステムパフォーマンスが低い場合、またはハードウェアGPUが使用できない場合に、コンテキストが作成されるかどうかを示す真偽値。
powerPreferenceはGPUの設定がWebGLコンテキストに適合できることを示すユーザーエージェントのヒント。
可能な値:
defaultはGPU設定が最も適切であることを決めるユーザーエージェント。
high-performanceは消費電力よりもレンダリングパフォーマンスを優先する。
low-powerはレンダリングパフォーマンスよりも省電力を優先する。
premultipliedAlphaはページコンポジターが、描画バッファに事前に乗算されたアルファの色が含まれていると想定することを示す真偽値。(何言ってるのかわからない)
preserveDrawingBufferはもし値がtrueなら、バッファはクリアされず、クリアもしくは上書きされるまで値を保存する。
stencilは描画バッファが8bitのstencilバッファを持つことを示す真偽値。
toDataURL
type引数(デフォルトはPNG)によって指定したフォーマットでの画像の表現を含んでいるdata URIを返す。返される画像の解像度は96dpi。
もしcanvasのheitoもしくはwidthが0もしくはそれより大きい場合、最大canvasサイズ(文字列"data:")が返される。
もし要求されたtypeがimage/pngでないが返された値がdata:image/pngで始まる場合、要求されたtypeはサポートされない。
Chromeはimage/webpタイプをサポートする。
第一引数は画像フォーマットを示すDOMString。デフォルトのフォーマットはimage/png。
第二引数はimage/webpとimage/jpegのような非可逆圧縮を使う画像フォーマットを使うために画像品質を示す0と1のあいだのNumber。
もしこの引数が他の場合、画像品質のデフォルト値が使かわれる。デフォルト値は0.92。他の引数は無視される。
toBlob
canvasに含まれる画像を表す Blob オブジェクトを生成される。ユーザーエージェントの裁量によって、ディスクにキャッシュされるか、メモリに保存される。type が指定されてない場合、画像の type は、 image/png 。生成された画像の解像度は96dpi 。
callback 第一引数
Blob オブジェクトを受け取るコールバック関数。
mimeType Optional 第二引数
画像フォーマットを示す DOMString。デフォルトは image/png。
qualityArgument Optional 第三引数
要求した type が image/jpeg か image/webp だった場合、画像品質を示す 0 から 1 の Number。type 引数がそのほかの値だった場合、デフォルト値が画質に使用される。ほかの引数は無視される。
transferControlToOffscreen
実験的なもの。メインスレッドとウォーカーのどちらかで、OffscreenCanvasオブジェクトに制御を送る。
CanvasPattern
CanvasPatternインターフェースは、CanvasRenderingContext2D.createPattern() メソッドによって(画像、 canvas 要素、video 要素をもとに)生成される不透明なオブジェクト。
setTransform
このメソッドは、パターンの変換マトリックスとして SVGMatrix もしくは DOMMatrixオブジェクトを使用して、パターンを呼び出す。
matrix
パターンの変換マトリクスを使うための SVGMatrix もしくは DOMMatrix。
CanvasRenderingContext2D
このインターフェースは<canvas>要素の描画表面の2Dレンダリングコンテキストを提供する。図形、テキスト、画像、その他のオブジェクトを描画するために使用される。
clearRect
Canvas 2D APIのclearRectメソッドは透明な黒を設置することで長方形の範囲でピクセルを消去する。
x 第1引数
長方形の開始点のx軸座標
y 第2引数
長方形の開始点のy軸座標
width 第3引数
長方形の幅。正の数は右、負の数は左。
height 第4引数
長方形の高さ。正の数は下、負の数は上。
fillRect
Canvas 2D APIのfillRectメソッドは現在fillStyleについて満たされた長方形を描画する。
このメソッドは現在のパスを編集せずにcanvasに直接描画するので、サブシーケンスfill()もしくはstroke()コールは影響されない。
このメソッドは初めの点が(x, y)でサイズが幅と高さによって指定される塗りつぶされた長方形を描画する。
メソッドはclearRectと同じ。
strokeRect
Canvas 2D APIのstrokeRectメソッドは現在のstrokeStyleと他のコンテキスト設定についてストローク(外線)する長方形を描画する。
あとはfillRectとおなじ。
fillText
このメソッドは、現在のfillStyleの文字をいっぱいにするために、指定した座標でテキストを描画する。オプションの引数は描画されたテキストの最大幅を指定させる。ユーザーエージェントはテキストを凝縮したり、フォントサイズを使うことで達成する。
このメソッドは現在のパスを編集せずにcanvasに直接描画するので、サブシーケンスfill()もしくはstroke()コールは影響されない。
テキストはfont、textAlign、textBaseline、directionプロパティによって定義するフォントとテキストレイアウト設定を使って描画される。
text 第1引数
コンテキスト内で描画するためにテキスト文字列を指定しているDOMString。テキストはfont、textAlign、textBaseline、directionによって指定している設定を使うことで描画する。
x 第2引数
テキストの描画を開始するポイントのx軸座標(ピクセル単位)。
y 第3引数
テキストの描画を開始するポイントのy軸座標(ピクセル単位)。
maxWidth Optional 第4引数
テキストの幅の最大ピクセル数は、一度描画する。もし指定されていない場合、テキストの幅に制限がなくなる。もしこの値が提供されているなら、ユーザーエージェントはカーニングを調整し、(もし利用できたり、質が失われないように生成されるなら)より水平方向に凝縮されたフォントを選択したり、指定された幅でテキストに合わせるためにより小さいフォントサイズにスケールダウンする。
strokeText
このメソッドは指定された座標でテキストの文字(外線を描画する)をストロークする。オプションの引数は描画されたテキストの最大幅を指定させる。ユーザーエージェントはテキストを凝縮したり、フォントサイズを使うことで達成する。
あとはfillTextと同じ。
measureText
このメソッドは測定されたテキストについての情報を含むTextMetricsオブジェクトを返す。
text
測定するためのテキスト文字列
lineWidth
Canvas 2D APIのlineWidthプロパティは線の厚みをセットする。
value
座標空間単位で、線の幅を指定する数字。0、マイナス、Infinity、NaN値は無視される。この値は1.0がデフォルト。
lineCap
このプロパティは線の終点を描画するのに使う形を決める。
"butt"
線の最後は終点を平方にする。デフォルト値。
"round"
線の最後を丸くする。
"square"
線の最後が線の厚さと等しい幅と半分の高さで箱を加えることで四角になる。
lineJoin
このプロパティは二つの線の切片を追加するのに使う形を決定する。
この場合、結合領域が追加されないため、2つの接続された切片が同じ方向を持っている場合は効果がありません。(正確に同じ位置で全ての終点と制御点で)0の長さの縮退切片は無視される。
このプロパティの可能な値が3つある:"round"、"bevel"、"miter"。デフォルトは"miter"。
"round"
つながった切片の共通終点でディスク中心の追加の区切りをいっぱいにすることで形状の角を丸める。丸まった角の半径は線の幅と等しい。
"bevel"
つながった切片の共通の切片の間の追加の三角形の範囲と様々な切片の四角形の角の外側での分割でいっぱいにする。
"miter"
追加のひし形の形の範囲をいっぱいにする効果で、つながった切片は単一の点でつなぐために端の外側に出すことで追加される。この設定はmiterLimitプロパティによって影響される。これがデフォルト値。
miterLimit
このプロパティはマイター制限比をセットする。
value
マイター制限比を座標空間単位で指定する数値。0、負数、infinity、NaN値は無視される。デフォルトは10.0。
getLineDash
Canvas 2D APIのCanvasRenderingContext2Dインターフェースのこのメソッドは現在の線のダッシュパターンを取得する。
(座標空間単位での)線と区切りを交互に描画するための距離を指定する数字の配列。もし(要素を設定しているときに)数字が奇数である場合、配列の要素はコピーと連結を取得する。例えば、配列 5、15、25 の線のダッシュの設定は 5、15、25、5、15、25を返す。
setLineDash
Canvas 2D APIのCanvasRenderingContext2Dインターフェースのこのメソッドは線をストロークしているときに線のダッシュパターンを設定する。パターンを記述する線と区切りの交互の長さを指定する値の配列を使う。
segments 第一引数
getLineDashと同じ。
lineDashOffset
このプロパティは線のダッシュオフセット、もしくは”phase”をセットする。
value
線のダッシュオフセットの量を指定するfloat。デフォルトは0.0。
font
このプロパティはテキストを描画しているときに使うために現在のテキストスタイルを指定する。この文字列はCSS font 仕様と同じ構文を使う。
value
CSS font値としてパースしたDOMString。デフォルトフォントは10px sans-serif。
textAlign
このプロパティはテキストを描画しているときに現在のテキストの配置を指定する。
配置はfillTextメソッドのx値と相対的である。例えば、もしtextAlignが”center”である場合、テキストの左端はx - (textWidth / 2)である。
可能な値は:
"left"
テキストは左に配置される。
"right"
テキストは右に配置される。
"center"
テキストは中心に配置される。
"start"
テキストは線(左から右の付近の場合は左揃え、右から左の付近の場合は右揃え)の普通の初めに配置する。
"end"
テキストは線(左から右の付近の場合は右揃え、右から左の付近の場合は左揃え)の普通の初めに配置する。デフォルト価は"start"。
textBaseline
このプロパティはテキストを描画しているときに使う現在のテキストベースラインを指定する。
可能な値は:
"top"
テキストベースラインはemの正方形の上。
"hanging"
テキストベースラインはぶら下がっているベースライン。(チベット文字やその他のインド文字で使用される)
"middle"
テキストベースラインはemの正方形の中央。
"alphabetic"
テキストベースラインは普通のアルファベットベースライン。デフォルト値。
"ideographic"
テキストベースラインはイデオグラフィックベースライン。もし文字のメインがアルファcエットベースラインの利点を突き出るなら、これは文字のボディの下である。(中国語、日本語、韓国語で使われる。)
"bottom"
テキストベースラインは結合している箱の下。これはイデオグラフィックベースラインが子孫を考えないイデオグラフィックベースラインと違う。
デフォルトは”alphabetic”。
direction
このプロパティはテキストを描画するために使う現在のテキスト距離を指定する。
可能な値:
"ltr"
テキスト距離は左から右まで。
"rtl"
テキスト距離は右から左まで。
"inherit"
テキスト距離は適切なものとして<canvas>要素もしくはDocumentから継承する。これはデフォルト値。
fillStyle
このプロパティは形状の内側で使うための色、傾斜、パターンを指定する。デフォルトスタイルは#000。
color
DOMStringがCSS <color>値としてパースする。
gradient
CanvasGradientオブジェクト(線形もしくは放射状の傾斜)。
pattern
CanvasPatternオブジェクト(画像を繰り返す)。
strokeStyle
このプロパティは形状の周り(外側)のストロークで使うための色、傾斜、パターンを指定する。デフォルトスタイルは#000。
fillStyleと同じ。
createLinearGradient
このメソッドは二つの与えられた座標を繋ぐ線に沿って傾斜を作る。
線形CanvasGradientを返す。形状を適用するために、傾斜はfillStyleもしくはstrokeStyleプロパティにはじめに配置される。
このメソッドは傾線の始点と終点を定義して4つの引数を指定する。
x0 第1引数
始点のx軸座標
y0 第2引数
始点のy軸座標
x1 第3引数
終点のx軸座標
y1 第4引数
終点のy軸座標
createRadialGradient
このメソッドは二つの円のサイズと座標を使って放射状の傾斜を作る。
CanvasGradientを返す。形状を適用するために、傾斜はfillStyleもしくはstrokeStyleプロパティにはじめに配置される。
このメソッドは6つの引数を指定する。傾斜の初めの円を定義する3つ、終点の円を定義する3つ。
x0
初めの円のx軸座標。
y0
初めの円のy軸座標。
r0
初めの円の放射状。非負で有限でなければならない。
x1
終わりの円のx軸座標。
y1
終わりの円のy軸座標。
r1
終わりの円の放射状。非負で有限でなければならない。
createPattern
このメソッドは指定した画像と繰り返しを使うパターンを作る。CanvasPatternを返す。
このメソッドはcanvasに直接描画する。サブシーケンス描画を適用した後に、作るパターンはfillStyleもしくはstrokeStyleを配置するべき。
image
パターンの画像として使うためのCanvasImageSource。可能な値:
HTMLImageElement (<img>)
SVGImageElement (<image>)
HTMLVideoElement (<video>, by using the capture of the video)
HTMLCanvasElement (<canvas>)
ImageBitmap
OffscreenCanvas
repetition
パターンの画像を繰り返すのに示すDOMString。可能な値:
"repeat" (both directions)
"repeat-x" (horizontal only)
"repeat-y" (vertical only)
"no-repeat" (neither direction)
もしrepetitionが空文字列(””)もしくはnull(undefinedではない)が指定されたなら、”repeat”の値が使われる。
shadowBlur
このプロパティは影を適用するぼかしの量を指定する。デフォルトは0(no blur)。
level
影ぼかしのレベルを指定する非負数float。0はぼかしがなく、大きい数はよりぼかしがある。この値はピクセルの数と一致せず、現在の変換行列によって影響されない。デフォルト値は0。マイナス、Infinity、NaN値は無視される。
shadowColor
このプロパティは影の色を指定する。
シャドウのレンダリングされた不透明度は、塗りつぶし時のfillStyleカラーの不透明度、およびストローク時のstrokeStyleカラーの不透明度の影響を受けることに注意すること。
color
CSS <color>値としてパースするDOMString。デフォルト値は完全に透明な黒。
shadowOffsetX
このプロパティは影が水平方向にオフセットされる距離を指定する。
offset
影が水平方向にオフセットする距離を指定するfloat。正数は右、負数は左。デフォルト値は0(水平方向オフセット)。InfinityとNaN値は無視される。
shadowOffsetY
このプロパティは影が垂直方向にオフセットされる距離を指定する。
offset
影が垂直方向にオフセットする距離を指定するfloat。正数は下、負数は上。デフォルト値は0(垂直方向オフセット)。InfinityとNaN値は無視される。
beginPath
このメソッドはサブパスのリストを空にすることで新しいパスを始める。新しいパスを作りたいときこのメソッドを呼ぶ。
closePath
このメソッドは現在の点から現在のサブパスの初めまで真っ直ぐな線を追加しようとする。もし形が閉じるか一つの点を持つ場合、この関数は何もしない。
このメソッドはcanvasに何か描画するわけではない。strokeもしくはfillメソッドを使うパスを描画できる。
moveTo
このメソッドは与えられた(x, y)座標によって指定した点で新しいサブパスを始める。
x
点のx軸座標(水平)座標。
y
点のy軸座標(垂直)座標。
lineTo
このメソッドは指定した(x, y)座標のサブパスの最終点をつなげることで現在のサブパスの真っ直ぐな線を加える。
現在のパスを編集する他のメソッドのように、このメソッドは直接描画しない。canvas上のパスを描画するために、fillもしくはstrokeメソッドを使うことができる。
x
線の最後の点のx軸座標。
y
線の最後の点のy軸座標。
bezierCurveTo
このメソッドは現在のサブパスの立方ベジエ曲線を追加する。3つの点が必要。初めの2つは手を制御し、3つ目は最後の点。初めの点は現在のパスでの最新の点である。ベジエ曲線を作る前にmoveToを作るために変更される。
cp1x
初めの制御点のx軸座標。
cp1y
初めの制御点のy軸座標。
cp2x
2番目の制御点のx軸座標。
cp2y
2番目の制御点のy軸座標。
x
最後の点のx軸座標。
y
最後の点のy軸座標。
quadraticCurveTo
このメソッドは現在のサブパスの二次ベジエ曲線を追加する。二つの点が必要。初めの点は制御点で、2番目は最後の点。初めの点は現在のパスでの最新の点である。二次ベジエ曲線を作る前にmoveToを使うために変更される。
cpx
制御点のx軸座標。
cpy
制御点のy軸座標。
x
最後の点のx軸座標。
y
最後の点のy軸座標。
arc
現在のサブパスの円弧を追加する。
このメソッドはradiusの半径で(x, y)を中心にした円弧を作る。パスはstartAngleで始まり、endAngleで終わり、anticlockwise(デフォルトは時計回り)によって与えた距離で移動する。
x
円弧の中心の水平座標。
y
円弧の中心の垂直座標。
radius
円弧の半径。正数であるべき。
startAngle
円弧が半径を始める角度。正のx軸から測定される。
endAngle
円弧が半径を終わらせる角度。正のx軸から測定される。
anticlockwise Optional
オプションのBoolean。もしtrueなら、初めと終わりの角度の間で反時計回りの弧を描画する。デフォルトはfalse(時計回り)。
arcTo
このメソッドは、与えられた制御点と半径を使うために、現在のサブパスの円弧を追加する。もし指定した引数が必要になるなら、弧は直線のパスの最新の点に自動でつなぐ。
角を丸くするために一般的に使用される。
x1
初めの制御点のx軸座標。
y1
初めの制御点のy軸座標。
x2
2番目の制御点のx軸座標。
y2
2番目の制御点のy軸座標。
radius
弧の半径。非負数。
ellipse
このメソッドは現在のサブパスの楕円形の弧を追加する。
このメソッドは半径radiusXとradiusYの(x, y)を中心にした楕円形の弧を作る。パスはstartAngleで始まり、endAngleで終わる。anticlockwise(時計回りがデフォルト)によって与えた方向に移動する。
x
楕円の中心のx軸(水平)座標。
y
楕円の中心のy軸(垂直)座標。
radiusX
楕円のx軸の半径。非負数。
radiusY
楕円のy軸の半径。非負数。
rotation
ラジアンで表現された、楕円形の回転。
startAngle
正のx軸から時計回りを測定して、ラジアンで表現された、楕円の初めの角度。
endAngle
正のx軸から時計回りを測定して、ラジアンで表現された、楕円の終わりの角度。
anticlockwise Optional
オプションのBoolean。もしtrueなら、楕円形で反時計回りを描画する。デフォルト価はfalse(時計回り)。
rect
このメソッドは現在のパスの長方形を追加する。
現在のパスを編集する他のメソッドのように、このメソッドは直接描画しない。canvas上に長方形を描画するために、fillとstrokeメソッドを使うことができる。
このメソッドは始まりの点が(x, y)でサイズがwidthとheightによって指定された長方形のパスを作る。
x
長方形の初めの点のx軸座標。
y
長方形の初めの点のy軸座標。
width
長方形の幅。正数は右、負数は左。
height
長方形の高さ。正数は下、負数は上。
fill
現在もしくは現在のfillStyleの与えられたパスを塗りつぶす。
fillRule
点が塗りつぶす領域の内側もしくは外側かどうかを決定するアルゴリズム。
可能な値:
"nonzero": ゼロ以外の巻線ルール(non-zero winding rule)。デフォルトルール。
"evenodd": 偶奇巻きのルール(even-odd winding rule)。
path
塗りつぶすためのPath2Dパス。
stroke
このメソッドは現在のストロークスタイルの現在もしくは与えられたパスを(外側で)ストロークする。
ストロークはパスの中心を配置する。別の言葉で、ストロークの半分は内側に描画し、半分は外側に描画される。
ゼロ以外の巻線ルール(non-zero winding rule)を使って描画する。パスの接点が塗り潰される。
path
ストロークのPath2Dパス。
drawFocusIfNeeded
もし指定した要素がフォーカスされたなら、このメソッドは現在もしくは与えられたパスの周りのフォーカスリングを描画する。
element
フォーカスされているかどうかを確認する要素。
path
使うためのPath2Dパス。
scrollPathIntoView
このメソッドはビューの中に現在のもしくは与えられたパスをスクロールする。Element.scrollIntoViewに似ている。
path
使うためのPath2Dパス。
clip
このメソッドは現在のクリッピング領域の中に現在もしくは与えられたパスを曲げる。前のクリッピング領域は新しいクリッピング領域を作るために現在もしくは与えられたパスを交差させる。
fillメソッドと同じ。
isPointInPath
このメソッドは指定された点が現在のパスに含まれるかどうかを出す。
x
コンテキストの現在の変換によって影響をうけず、確認するための点のx軸座標。
y
コンテキストの現在の変換によって影響をうけず、確認するための点のy軸座標。
fillRule
fillとおなじ。
path
再び確認するためのPath2Dパス。もし指定されてないなら、現在のパスが使われる。
isPointInStroke
このメソッドは指定された点がパスのストロークによって半に内に含まれるかどうかを出す。
x
確認のためのパスのx軸座標。
y
確認のためのパスのy軸座標。
path
isPointPathと同じ。
currentTransform
このプロパティは現在の変換マトリクスのDOMMatrix(現在の仕様)もしくはSVGMatrix(古い仕様)を返すかセットする。
value
現在の変換マトリクスとして使うためのDOMMatrixもしくはSVGMatrix。
getTransform
このメソッドはコンテキストを適用させる現在の変換マトリクスを取得する。
rotate
このメソッドは変換マトリクスの回転を使う。
angle
回転角度、半径での時計回り。度数から半径を計算するためにdegree * Math.PI / 180を使うことができる。
回転中心点はcanvasの原点である。中心点を変更するために、translateメソッドを使うことでcanvasを動かす必要がある。
scale
このメソッドは垂直もしくは平行のcanvas単位のスケーリング変換を追加する。
デフォルトで、canvas上の一単位はピクセル。スケーリング変換は子のふるまいを編集する。
x
水平方向でのスケーリング要因。負数は垂直軸を横切ってピクセルを反転する。1の価は水平スケーリングではない結果を出す。
y
垂直方向でのスケーリング要因。負数は水平軸を横切ってピクセルを反転する。1の価は垂直スケーリングではない結果を出す。
translate
このメソッドは現在のマトリクスの移動変換を追加する。
canvasとグリッド上の原点のx水平単位とy垂直単位を動かすことで現在のマトリクスの移動変換を追加する。
x
水平距離で動く距離。正数は右、負数は左。
y
垂直距離で動く距離。正数は下、負数は上。
transform
このメソッドはこのメソッドの引数によって記述されたマトリクスで現在の変換を乗算する。これはコンテキストをスケール、回転、移動、そらさせる。
変換マトリクスは$ \begin{bmatrix}a&c&e \\ b&d&f \\ 0&0&1\end{bmatrix}によって記述される。
a (m11)
水平スケーリング。1の値はスケーリングしない結果を出す。
b (m12)
垂直そらし。
c (m21)
水平そらし。
d (m22)
垂直スケーリング。1の値はスケーリングしない結果を出す。
e (dx)
水平移動。
f (dy)
垂直移動。
setTransform
このメソッドは固有のマトリクスに現在の変換をリセット(上書き)し、このメソッドの引数によって記述した変換を呼び出す。これはコンテキストをスケール、回転、移動、そらさせる。
このメソッドは受け入れることができる引数の二つの型を持つ。いくつかの引数のより古い型は準備するための変換マトリクスの独自のコンポーネントを表す。
引数はtransformと同じ。
より新しい型は準備するため(技術的に、DOMMatrixInitオブジェクト、オブジェクトがプロパティとして上のコンポーネントを含む)に2D変換マトリクスを表すことで、単一の引数、マトリクスを構成する。
resetTransform
このメソッドは固有のマトリクスに現在の変換をリセットする。
globalAlpha
このプロパティはcanvas上に描く形と画像を適用させるアルファ(透明性)価を指定する。
value
0.0(完全に透明)と1.0(完全に不透明)の間の数。デフォルト値は1.0。InfinityとNaNを含むために、範囲の外側の価とglobalAlphaは前の値を保持する。
globalCompositeOperation
このプロパティは新しい形を描画するときに適用するために合成操作の型を準備する。
型は使用するために合成またはブレンドモードの操作を特定するString。
drawImage
このメソッドはcanvas上で画像を描画するための異なる方法を提供する。
image
コンテキスト内で描画するための要素。仕様はcanvasイメージソース(CanvasImageSource)、CSSImageValue、HTMLImageElement、SVGImageElement、HTMLVideoElement,、HTMLCanvasElement、ImageBitmap、OffscreenCanvasを許可する。
sx Optional
先のコンテンツ内に描画するためのイメージソースのサブの長方形の上左角のx軸座標。
sy Optional
先のコンテンツ内に描画するためのイメージソースのサブの長方形の上左角のy軸座標。
sWidth Optional
先のコンテキストの中で描画するためにソースイメージのサブ長方形の幅。もし指定されていないなら、座標から全体の長方形は使用された画像の下右角のsxとsyで指定する。
sHeight Optional
先のコンテキストの中で描画するためにソースイメージのサブ長方形の高さ。
dx
ソースイメージの上左角に位置するための先のcanvasでのx軸座標。
dy
ソースイメージの上左角に位置するための先のcanvasでのy軸座標。
dWidth Optional
先のcanvasでの画像を描画するための幅。これは描画された画像をスケーリングさせる。もし指定されていないなら、画像は描画されたとき幅をスケールしない。
dHeight Optional
先のcanvasでの画像を描画するための高さ。これは描画された画像をスケーリングさせる。もし指定されていないなら、画像は描画されたとき高さをスケールしない。
exception
INDEX_SIZE_ERR
もしcanvasもしくはソースの長方形の幅もしくは高さが0。
INVALID_STATE_ERR
画像がイメージデータを持たない。
TYPE_MISMATCH_ERR
指定されたソース要素がサポートされない。
NS_ERROR_NOT_AVAILABLE
画像がまだロードされていない。準備できているときに決定するためにcomplete === trueと.onloadを使うこと。
createImageData
このメソッドは指定されたサイズで新しい空白のImageDataオブジェクトを作成する。新しいオブジェクトで合うべ手のピクセルは透明な黒。
width
あたらしいImageDataオブジェクトを与えるらめのwidth。負数は垂直軸の周りの長方形をはじく。
height
あたらしいImageDataオブジェクトを与えるらめのheight。負数は水平軸の周りの長方形をはじく。
imagedata
widthとheightをコピーする存在しているImageDataオブジェクト。画像自体はコピーされない。
exception
IndexSizeError
もしwidthもしくはheightのどちらかの引数が0なら投げる。
getImageData
このメソッドはcanvasの指定した部分の底にあるピクセルデータを表しているImageDataオブジェクトを返す。
このメソッドはcanvasの変換マトリクスによって影響を受けない。もし指定した長方形がcanvasの境界の外側に出すなら、canvasの外側のピクセルはImageDataオブジェクトにおいて透明な黒。
getImageDataによるより多くの情報とcanvasのPixel操作でのcanvasコンテンツの一般的な操作ができる。
sx
ImageDataが抽出した長方形の上左角のx軸座標。
sy
ImageDataが抽出した長方形の上左角のy軸座標。
sw
ImageDataが抽出した長方形の幅。正数は右、負数は左。
sh
ImageDataが抽出した長方形の高さ。正数は下、負数は上。
exception
IndexSizeError
もしswもしくはshが0なら投げる。
SecurityError
canvasにはドキュメント自体がロードされたオリジン以外のオリジンからロードされたピクセルが含まれるか、含まれる場合がある。この状況で投げられるSecurityErrorを避けるために、この方法で使うためのソースイメージを許すCORSを設定すること。参照 putImageData
このメソッドはcanvas上の与えられたImageDataオブジェクトからデータをペイントする。もし汚い長方形が提供された場合、長方形からのピクセルはペイントされる。このメソッドはcanvas変換マトリクスによって影響を受けない。
putImageDataによってより多くの情報とcanvasのPixel操作でのcanvasコンテンツの一般的な操作を見つけることができる。
imageData
ピクセル価の配列を含むImageDataオブジェクト。
dx
先のcanvasのイメージデータに位置する水平位置(x座標)。
dy
先のcanvasのイメージデータに位置する垂直位置(y座標)。
dirtyX Optional
イメージデータが抽出される上左角の水平部分(x座標)。デフォルトは0。
dirtyY Optional
イメージデータが抽出される上左角の垂直部分(y座標)。デフォルトは0。
dirtyWidth Optional
ペイントされた長方形の幅。デフォルトはイメージデータの幅。
dirtyHeight Optional
ペイントされた長方形の高さ。デフォルトはイメージデータの高さ。
exception
NotSupportedError
もし引数が無限なら投げられる。
InvalidStateError
もしImageDataオブジェクトのデータが切り離された場合に投げられる。
imageSmoothingEnabled
このプロパティはスケールされた画像が平滑化される(true, デフォルト)かどうかを決定する。imageSmoothingEnabledプロパティを手に入れることで、最後の値は返すためにセットされる。
このプロパティはピクセルアートを使うゲームと他のアプリを使用する。画像を拡大するとき、デフォルトのリサイジングアルゴリズムはピクセルをぼかす。ピクセルのシャープネスを保持するfalseにこのプロパティをセットする。
value
拡大縮小された画像を平滑化するかどうかを示すブール値。 デフォルト値はtrue。
imageSmoothingQuality
このプロパティは画像の平滑化の質をセットする。
可能な値:
"low"
Low quality.
"medium"
Medium quality.
"high"
High quality.
save
このメソッドはスタック上の現在の状態をプッシュすることでcanvasの全体の状態を保つ。
スタック上で保つ描画状態は以下から構成される:
現在の変換マトリクス
現在のクリッピング領域
現在のダッシュリスト
現在の以下の属性の値:strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, lineDashOffset, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation, font, textAlign, textBaseline, direction, imageSmoothingEnabled.
restore
このメソッドは描画状態スタックに入るトップをポップするために最も最新に保たれたcanvas状態を再保存する。もし状態を保っていないなら、メソッドは何もしない。
canvas
このプロパティは与えられたコンテキストと関連するHTMLCanvasElementオブジェクトを読み込み専用で参照する。もし<canvas>要素と関連しないなら、nullになる。
filter
このプロパティはぼかしとグレースケーリングのようなフィルタエフェクトを提供する。CSSフィルタプロパティと似ていて、同じ値を受け入れる。
フィルタプロパティは"none"もしくはDOMStringの一つ以上の以下のフィルタ関数の値を受け入れる。
url()
CSS <url>。SVGフィルタ要素をペイントするIRIを取ってくる。外部のXMLファイル。
blur()
CSS <length>。ガウスぼかしを図面に適用する。 ガウス関数の標準偏差の値、つまり画面上のピクセル数が互いに混ざり合うことを定義する。 したがって、値が大きいほどぼやけが大きくなる。 値が0の場合、入力は変更されない。
brightness()
CSS <percentage>。 線形乗数を図面に適用して、明るくまたは暗く見せる。 100%未満の値は画像を暗くし、100%を超える値は画像を明るくする。 値が0%の場合、完全に黒の画像が作成されるが、値が100%の場合、入力は変更されない。
contrast()
CSS <percentage>。図面のコントラストを調整する。 値が0%の場合、完全に黒の図面が作成される。 値を100%にすると、図面は変更されない。
drop-shadow()
図面にドロップシャドウ効果を適用する。 ドロップシャドウは、事実上、特定の色で描画された図面のアルファマスクのぼやけたオフセットバージョンであり、図面の下に合成される。 この関数は最大5つの引数を取る。
<offset-x>:可能な単位については<length>を参照。 影の水平距離を指定する。
<offset-y>:可能な単位については<length>を参照。 影の垂直距離を指定する。
<blur-radius>:この値が大きいほど、ブラーが大きくなるため、シャドウが大きくなり、明るくなる。 負の値は許可されていない。
<color>: 可能なキーワードと表記については、<color>の値を参照してください。
grayscale()
CSS <percentage>。 図面をグレースケールに変換する。 100%の値は完全にグレースケール。 値が0%の場合、図面は変更されない。
hue-rotate()
CSS <angle>。図面に色相回転を適用する。 値が0degの場合、入力は変更されない。
invert()
CSS <percentage>。図面を反転する。 100%の値は、完全な反転を意味する。 値が0%の場合、図面は変更されない。
opacity()
CSS <percentage>。図面に透明度を適用する。 0%の値は、完全に透過的であることを意味する。 値を100%にすると、図面は変更されない。
saturate()
CSS <percentage>。図面を飽和させる。 0%の値は、完全に飽和していないことを意味する。 値を100%にすると、図面は変更されない。
sepia()
CSS <percentage>。図面をセピアに変換すり。 100%の値は、完全にセピアであることを意味する。 値が0%の場合、図面は変更されない。
none
フィルタは適用されない。 初期値。
CanvasGradient
CanvasGradientインターフェースは勾配を記述する不透明なオブジェクト。CanvasRenderingContext2D.createLinearGradient() もしくはCanvasRenderingContext2D.createRadialGradient()によって返される。
fillStyleもしくはstrokeStyleを使うことができる。
addColorStop
このメソッドは、offsetとcolorによって定義される、与えられたcanvas勾配の新しいカラーストップを追加する。
offset
カラーストップの部分を表すための、0と1の間の数。0は勾配の初めを表し、1は終わりを表す。もし数が範囲の外側なら、INDEX_SIZE_ERRをあげられる。
color
CSS <color>値はストップの色を表している。もし値がCSS <coor>値としてパースできない場合、SYNTAX_ERRはあげられる。
CanvasImageSource
CanvasImageSourceはCanvasDrawImageとCanvasFillStrokeStylesインターフェースのいくつかのメソッドのイメージソースとして使われるための他のインターフェースの機能を提供する。仕様を簡略化するための内部ヘルパータイプである。インターフェースではなく、実装するオブジェクトではない。
イメージソースとして使われるインターフェースは以下の通り:
HTMLImageElement
SVGImageElement
HTMLVideoElement
HTMLCanvasElement
ImageBitmap
OffscreenCanvas
ImageBitmap
ImageBitmapインターフェースは過度なレイテンシーなしで<canvas>に描画できるビットマップイメージを表す。createImageBitmapファクトリーメソッドを使う様々なソースオブジェクトから作ることができる。ImageBitmapは非同期やWebGLでレンダリングのテクスチャを準備するのにリソース効率の良い経路を提供する。
プロパティにheightとwidthがある。(read-only)
close
このメソッドはImageBitmapと関連するすべてのグラフィカルリソースを処分する。
ImageData
ImageDataインターフェースは<canvas>要素の範囲の底にあるピクセルデータを表す。ImageDataコンストラクタとcanvasに関連したCanvasRenderingContext2Dオブジェクト上のクリエイタメソッドを使って作られる:createImageData()とgetImageData()。putImageDataを使うことでcanvasの部分をセットすることにも使われる。
プロパティにdata、width、heightがある。
コンストラクタ
ImageDataコンストラクタは指定された幅と高さを与えられ、持っている型付き配列からビルドする新たにインスタンス化されたImageDataオブジェクトを返す。
このコンストラクタはWorkerでのオブジェクトのように作っている優先された方法である。
array Optional
画像の底にあるピクセル表現を含んでいるUint8ClampedArray。もし配列が与えられていないなら、指定された幅と高さの透明な黒の長方形の画像は作られる。
width
画像のunsigned longの幅。
height
画像のunsigned longの高さ。もし配列が与えられたなら、この値はオプション。高さは配列のサイズと与えられた幅を推測する。
exception
IndexSizeError
もし配列が指定された場合、投げるが、複数の(4 * width)もしくは(4 * width * height)ではない。
RenderingContext
RenderingContextは<canvas>要素内でグラフィックスレンダリングコンテキストを表すインターフェースの1つを参照できるWebIDL typedefである:CanvasRenderingContext2D, WebGLRenderingContext, or WebGL2RenderingContext。
省略形のRenderingContextを使うことで、インターフェースの使用できるメソッドとプロパティは指定して、より簡単に書くことができる。なので、<canvas>はいくつかのレンダリングシステムをサポートする。”インターフェースの一つ”を意味する省略形を持つために仕様とブラウザ実装視点から助ける。
RenderingContextは実装詳細であり、web開発者が直接使うわけではない。RenderingContextインターフェースはなく、型RenderingContextを実装するオブジェクトはない。
この型の主な使用は他の<canvas>要素のHTMLCanvasElement.getContext()メソッドの定義である。(レンダリングコンテキストタイプの1つを返すという意味)RenderingContextを返す。
TextMetrics
TextMetricsインターフェースはcanvasでのテキストの一部の次元を表現する:textMetricsインスタンスはCanvasRenderingContext2D.measureTextメソッドを使うために取ってくることができる。
プロパティは以下の通り:
TextMetrics.width Read only
CSSピクセルのインラインテキストのセグメントの計算された幅を与えるdouble。コンテキストの現在のフォントを考慮する。
TextMetrics.actualBoundingBoxLeft Read only
CSSピクセルで、与えられたテキストの結んでいる長方形の左側のCanvasRenderingContext2D.textAlignプロパティによって与えられた引数ポイントから距離を与えるdouble。距離はベースラインに平行に測定する。
TextMetrics.actualBoundingBoxRight Read only
CanvasRenderingContext2D.textAlignプロパティで指定された配置ポイントから指定されたテキストの外接する四角形の右側までの距離をCSSピクセルで表すdouble。 距離はベースラインと平行に測定される。
TextMetrics.fontBoundingBoxAscent Read only
CanvasRenderingContext2D.textBaseline属性で示される水平線から、テキストのレンダリングに使用されるすべてのフォントの最も高い境界の長方形の上部までの距離をCSSピクセルで表すdouble。
TextMetrics.fontBoundingBoxDescent Read only
CanvasRenderingContext2D.textBaseline属性で示される水平線から、テキストのレンダリングに使用されるすべてのフォントの外接する四角形の下部までの距離をCSSピクセルで表すdouble。
TextMetrics.actualBoundingBoxAscent Read only
CanvasRenderingContext2D.textBaseline属性で示される水平線から、テキストのレンダリングに使用される外接する四角形の上部までの距離をCSSピクセルで表すdouble。
TextMetrics.actualBoundingBoxDescent Read only
CanvasRenderingContext2D.textBaseline属性で示される水平線から、テキストのレンダリングに使用される外接する四角形の下部までの距離をCSSピクセルで表すdouble。
TextMetrics.emHeightAscent Read only
CanvasRenderingContext2D.textBaselineプロパティで示される水平線からラインボックスのem正方形の上部までの距離を、CSSピクセルで表すdouble。
TextMetrics.emHeightDescent Read only
CanvasRenderingContext2D.textBaselineプロパティで示される水平線からラインボックスのem正方形の下部までの距離を、CSSピクセルで表すdouble。
TextMetrics.hangingBaseline Read only
CanvasRenderingContext2D.textBaselineプロパティで示される水平線からラインボックスのぶら下がっているベースラインまでの距離をCSSピクセルで表すdouble。
TextMetrics.alphabeticBaseline Read only
CanvasRenderingContext2D.textBaselineプロパティで示される水平線からラインボックスのアルファベットのベースラインまでの距離をCSSピクセルで表すdouble。
TextMetrics.ideographicBaseline Read only
CanvasRenderingContext2D.textBaselineプロパティで示される水平線からラインボックスの表意文字ベースラインまでの距離をCSSピクセルで表すdouble。
OffscreenCanvas
OffscreenCanvasインターフェースはスクリーンを描画できるcanvasを提供する。ウィンドウとworkerコンテキストの両方を利用できる。
コンストラクタ
OffscreenCanvasコンストラクタはOffscreenCanvasオブジェクトを新しいインスタンス化を返す。
プロパティにwidthとheightがある。
getContext
このメソッドは、offscreen canvasの描画しているコンテキストもしくはもしコンテキスト修飾子がサポートされていないならnullを返す。
contextType
canvasと関連する描画コンテキストを定義してるコンテキスト識別子を含むDOMString。可能な値は:
"2d" 2次元レンダリングコンテキストを表すCanvasRenderingContext2Dオブジェクトを作る。
"webgl" 3次元レンダリングコンテキストを表すWebGLRenderingContextオブジェクトを作る。このコンテキストはWebGLバージョン1(OpenGL ES 2.0)を実装するブラウザ上で利用できる。
"webgl2" 3次元レンダリングコンテキストを表すWebGL2RenderingContextオブジェクトを作る。このコンテキストはWebGLバージョン2(OpenGL ES 3.0)を実装するブラウザ上で利用できる。
"bitmaprenderer" 与えられたImageBitmapのcanvasのコンテンツを取り換えるために機能性を提供するImageBitmapRenderingContextを作る。
contextAttributes
自分のレンダリングコンテキストを作るときにいくつかのコンテキスト属性を使うことができる。例えば:
code:js
offscreen.getContext("webgl",{ antialias: false, depth: false });
2d context attributes:
alpha: canvasがアルファチャンネルを構成する場合に示すBoolean。もしfalseなら、ブラウザはバックドロップがいつも透明であることを知る。透明なコンテンツと画像の描画の速度を上げることができる。
WebGL context attributes:
alpha: canvasがアルファバッファを構成する場合に示すBoolean。
depth: 描画バッファが少なくとも16 bitの深さを持つバッファであることを示すBoolean。
stencil: stencilバッファが少なくとも8 bitの深さを持つバッファであることを示すBoolean。
antialias: アンチエイリアシングを行うかどうかを示すBoolean。
premultipliedAlpha: ページコンポジターが事前に乗算されたアルファの色を含む描画バッファを仮定することを示すBoolean。
preserveDrawingBuffer: もし価がtrueなら、バッファはクリアもしくは上書きされるまで明らかにせず価を保証する。
failIfMajorPerformanceCaveat: システムパフォーマンスが低い場合にコンテキストが作成されるかどうかを示すBoolean。
convertToBlob
このメソッドはcanvasを含んだ画像を表すBlobオブジェクトを作る。
optionsOptional
Blobオブジェクト内でOffscreenCanvasオブジェクトを変換するときたくさんのオプションを指定できる。例えば、
code:js
const blob = offscreenCanvas.convertToBlob({
type: "image/jpeg",
quality: 0.95
});
options:
type: 画像フォーマットを示せるDOMString。デフォルトタイプはimage/png。
quality: もしタイプオプションがimage/jpegもしくはimage/webpである場合、画像クオリティを示す0と1の間のNumber。もし引数が他なら、画像クオリティのデフォルト値は使うことができる。他の引数は無視される。
transferToImageBitmap
このメソッドはOffscreenCanvasの最も最近の描画された画像からImageBitmapオブジェクトを作る。
Path2D
Path2DインターフェースはCanvasRenderingContext2Dオブジェクト上で使うことができるパスを宣言するのに使われる。CanvasRenderingContext2Dインターフェースのパスメソッドはこのインターフェース上で渡す。どんなときでも望ましいパスを保持して、再利用することができるのに便利。
コンストラクタ
引数(コピーを作る)としての他のパス、もしくはSVGパスデータを構成する文字列によって、Path2Dコンストラクタは新しくインスタンス化されたPath2Dオブジェクトを返す。
path Optional
他のPath2Dオブジェクトを呼び出すとき、path引数のコピーは作られる。
d Optional
他のPath2Dオブジェクトを呼び出すとき、新しいパスはでつめいから作られる。
addPath
このメソッドはその他のPath2Dオブジェクトの1つのPath2Dオブジェクトを加える。
path
加えるためのPath2Dパス。
transform Optional
加えられたパスの変換マトリクスとして使われるためのDOMMatrix。(技術的なDOMMatrixInitオブジェクト)
ImageBitmapRenderingContext
ImageBitmapRenderingContextインターフェースは与えられたImageBitmapのcanvasのコンテンツを取り換える機能性を提供するcanvasレンダリングコンテキストである。コンテキストid(HTMLCanvasElement.getContext()もしくはOffscreenCanvas.getContext()の初めの引数)は"bitmaprenderer"。
このインターフェースはウィンドウとworkerコンテキストの両方で利用できる。
transferFromImageBitmap
このメソッドはレンダリングコンテキストと関連するcanvasで与えられたImageBitmapを表示する。ImageBitmapの所有はcanvasに送る。
このメソッドはtransferImageBitmapを名付けられるが、スペック変更を再名付けする。古い名前はコード破損を避けるためにエイリアスとして保持される。
bitmap
移送するためのImageBitmapオブジェクト。