HTML — canvas 要素

`restore()@2d ~method手続きは：

1. %状態 ~LET コレの`描法~状態~stack$から~popする
2. ~IF［ %状態 ~EQ ε ］ ⇒ ~RET
3. コレの現在の描法~状態を %状態 が述べる描法~状態に設定し直す

`描画~文脈を既定の状態に設定し直す@ ときは、所与の ( 描画~文脈 %文脈 ) に対し： ◎ To reset the rendering context to its default state:

1. ~canvas†の~bitmapを成す全~画素を`透明な黒$にする 【† %文脈 を束縛している `canvas$e 要素／ `OffscreenCanvas$I ~obj】 ◎ Clear canvas's bitmap to transparent black.
2. %文脈 の`現在の既定の~path$を成す下位path~listを空にする ◎ Empty the list of subpaths in context's current default path.
3. %文脈 の`描法~状態~stack$を空にする ◎ Clear the context's drawing state stack.
4. %文脈 の現在の`描法~状態$を成すものすべてを初期~値に設定し直す ◎ Reset everything that drawing state consists of to their initial values.

`setLineDash(segments)@2d ~method手続きは： ◎ The setLineDash(segments) method, when invoked, must run these steps:

1. ~IF［ %segments 内に［ `有限$でない値／負な値 ］がある ］ ⇒ ~RET （例外は投出しないが、 ~UAは，開発者~consoleに~debug用~messageを示すこともできる。） ◎ If any value in segments is not finite (e.g. an Infinity or a NaN value), or if any value is negative (less than zero), then return (without throwing an exception; user agents could show a message on a developer console, though, as that would be helpful for debugging).
2. ~IF［ %segments の長さは奇数である ］ ⇒ %segments ~SET %segments と %segments の複製を連結した結果 ◎ If the number of elements in segments is odd, then let segments be the concatenation of two copies of segments.
3. コレの`~dash~list$ ~SET %segments ◎ Let the object's dash list be segments.

`~pathをナゾる@ ときは、所与の ( `~path$ %~path, `CanvasPathDrawingStyles$I ~obj %style ) に対し，次を走らせた結果の新たな`~path$を返すモノトスル： ◎ When a user agent is to trace a path, given an object style that implements the CanvasPathDrawingStyles interface, it must run the following algorithm. This algorithm returns a new path.

【 以下、 この~algoの内容は未訳。 これは、 ~SVGに定義される`~stroke図形$と概ね一致する結果を返すことになる — %style の［ `lineWidth$2d, `lineCap$2d, `lineJoin$2d, `miterLimit$2d, `lineDashOffset$2d ］属性, および`~dash~list$を，順に~SVGの［ `stroke-width^p, `stroke-linecap^p, `stroke-linejoin^p, `stroke-miterlimit^p, `stroke-dashoffset^p, `stroke-dasharray^p ］~propに対応付ける下で。 】

`~font~style~source$用の~font解決には、 `~font~source$ `CSSFONTLOAD$r が要求される。 これは、所与の ( `CanvasTextDrawingStyles$I を実装する %~obj ) に対し，次の手続きで決定される： ◎ Font resolution for the font style source object requires a font source. This is determined for a given object implementing CanvasTextDrawingStyles by the following steps: [CSSFONTLOAD]

1. %F ~LET %~obj の`~font~style~source$ ◎ ↓
2. ~IF［ %F は `canvas$e 要素である ］ ⇒ ~RET %F の`~node文書$ ◎ If object's font style source object is a canvas element, return the element's node document.
3. ~Assert： %F は `OffscreenCanvas$I ~objである。 ◎ Otherwise, object's font style source object is an OffscreenCanvas object:
4. %大域 ~LET %~obj に`関連な大域~obj$ ◎ Let global be object's relevant global object.
5. ~Assert： %大域 は［ `WorkerGlobalScope$I ／ `Window$I ］~objである ◎ ↓
6. ~RET %大域 に応じて ⇒＃ `Window$I ~objであるならば %大域 に`結付けられた文書$ `WorkerGlobalScope$I ~objであるならば %大域 ◎ If global is a Window object, then return global's associated Document. ◎ Assert: global implements WorkerGlobalScope. ◎ Return global.

`letterSpacing@2d 取得子~手続きは ⇒ ~RET `~CSS値を直列化する$( コレの`字l間のアキ$2D ) ◎ The letterSpacing getter steps are to return the serialized form of this's letter spacing.

`letterSpacing$2d 設定子~手続きは： ◎ The letterSpacing setter steps are:

1. %構文解析した結果 ~LET 所与の値を~CSS `length$t の`文法に則って構文解析-$した結果 ◎ Let parsed be the result of parsing the given value as a CSS <length>.
2. ~IF［ %構文解析した結果 ~EQ `失敗^i ］ ⇒ ~RET ◎ If parsed is failure, then return.
3. コレの`字l間のアキ$2D ~SET %構文解析した結果 ◎ Set this's letter spacing to parsed.

`wordSpacing@2d 取得子~手続きは ⇒ ~RET `~CSS値を直列化する$( コレの`単語~間のアキ$2D ) ◎ The wordSpacing getter steps are to return the serialized form of this's word spacing.

`wordSpacing$2d 設定子~手続きは： ◎ The wordSpacing setter steps are:

1. %構文解析した結果 ~LET 所与の値を~CSS `length$t の`文法に則って構文解析-$した結果 ◎ Let parsed be the result of parsing the given value as a CSS <length>.
2. ~IF［ %構文解析した結果 ~EQ `失敗^i ］ ⇒ ~RET ◎ If parsed is failure, then return.
3. コレの`単語~間のアキ$2D ~SET %構文解析した結果 ◎ Set this's word spacing to parsed.

`~textを準備する@ ~algoは、 所与の入力 ( 文字列 %text, `CanvasTextDrawingStyles$I ~obj %target, %最大-横幅 ) に対し， ( 図形~list, 物理的~整列, `行内~box$ ) が成す組を返す — ここで： ◎ The text preparation algorithm is as follows. It takes as input a string text, a CanvasTextDrawingStyles object target, and an optional length maxWidth. It returns＼

1. ~Assert： %最大-横幅 は［ `有限$または `無限大^i ］である 【この段は、この訳による補完】
2. ~IF［ %最大-横幅 ~NEQ `無限大^i ］~AND［ %最大-横幅 ~LT 0 【！or equal to NaN は不要】 ］ ⇒ ~RET ( 空~list【, “利用されない任意の物理的~整列”, “利用されない任意の行内~box” 】 ) ◎ If maxWidth was provided but is less than or equal to zero or equal to NaN, then return an empty array.
3. %text 内の各 `~ASCII空白$すべてを `0020^U SPACE 文字に置換する ◎ Replace all ASCII whitespace in text with U+0020 SPACE characters.
4. %font ~LET %target の `font$2d 属性で与えられる現在の~font ◎ Let font be the current font of target, as given by that object's font attribute.
5. %方向 ~LET %target の `direction$2d 属性の値に応じて ⇒＃ `ltr$l ならば`~ltr$／ `rtl$l ならば`~rtl$／ ~ELSE_ ε ◎ Apply the appropriate step from the following list to determine the value of direction: ◎ If the target object's direction attribute has the value "ltr" • Let direction be 'ltr'. ◎ If the target object's direction attribute has the value "rtl" • Let direction be 'rtl'.

6. ~IF［ %方向 ~EQ ε ］：

   1. %~font~style~source ~LET %target の`~font~style~source$
   2. ~IF［ %~font~style~source は`文書$である ］ ⇒ %~font~style~source ~SET その`文書~要素$ （ ~NULL になり得る）
   3. %方向 ~SET ［ %~font~style~source は要素であるならば %~font~style~source の`方向性$／ ~ELSE_ `~ltr$ ］
   ◎ If the target object's font style source object is an element • Let direction be the directionality of the target object's font style source object. ◎ If the target object's font style source object is a Document with a non-null document element • Let direction be the directionality of the target object's font style source object's document element. ◎ Otherwise • Let direction be 'ltr'.
7. %行内~box ~LET ~textとして %text を包含している新たな`行内~box$ `CSS$r ◎ Form a hypothetical infinitely-wide CSS line box containing a single inline box containing the text text,＼

8. %行内~box の各~propを次の表tに従って設定する：

   ~prop	~source
   `direction$p	%方向
   `font$p	%~font
   `font-kerning$p	%target の `fontKerning$2d
   `font-width$p	%target の `fontStretch$2d
   `font-variant-caps$p	%target の `fontVariantCaps$2d
   `letter-spacing$p	%target の`字l間のアキ$2D
   ~SVG `text-rendering$p	%target の `textRendering$2d
   `white-space$p	`pre^v
   `word-spacing$p	%target の`単語~間のアキ$2D
   他のすべての~prop	各自の初期~値

   ◎ with its CSS properties set as follows: ◎ Property Source 'direction' direction 'font' font 'font-kerning' target's fontKerning 'font-stretch' target's fontStretch 'font-variant-caps' target's fontVariantCaps 'letter-spacing' target's letter spacing SVG text-rendering target's textRendering 'white-space' 'pre' 'word-spacing' target's word spacing ◎ and with all other properties set to their initial values.

9. ~WHILE 無条件：

   1. %行内~box の `font$p ~prop ~SET %font
   2. ~IF［ %最大-横幅 ~EQ `無限大^i ］~OR［［ %行内~box を無限に長い仮の~CSS`行l~box$内に~~配置したときの， `px$css 単位による横幅 ］ ~LTE %最大-横幅 ］ ⇒ ~BREAK
   3. %font ~SET ［ %font より~condensedな~fontが可用なら それ／ ~ELSE_ ［ %font に横方向の拡縮-係数を適用することにより，適度に読易い~fontを合成できる ］ならば それ ／ ~ELSE_ %font より小さい~font ］
   ◎ If maxWidth was provided and the hypothetical width of the inline box in the hypothetical line box is greater than maxWidth CSS pixels, then change font to have a more condensed font (if one is available or if a reasonably readable one can be synthesized by applying a horizontal scale factor to the font) or a smaller font, and return to the previous step.

10. %起点 は %行内~box 上の点 であり， %物理的~整列 は［ `左端^i, `右端^i, `中央^i ］いずれかを値にとる。 これらの変数は、 次に従って決定される： ◎ The anchor point is a point on the inline box, and the physical alignment is one of the values left, right, and center. These variables are determined by the textAlign and textBaseline values as follows:

    • ( %起点 の横~位置, %物理的~整列 ) ~SET 次の表tの 1, 2 列目に与える ( `textAlign$2d, %方向 ) に応じて，同じ行の ( 3 列目, 4 列目 ) に与えられる値： ◎ Horizontal position:

      `textAlign^2d	%方向	横~位置	%物理的~整列
      `left$l	任意	%行内~box の左端~辺	`左端^i
      `start$l	~ltr
      `end$l	~rtl
      `right$l	任意	%行内~box の右端~辺	`右端^i
      `end$l	~ltr
      `start$l	~rtl
      `center$l	任意	%行内~box の左端~辺と右端~辺の中点	`中央^i

      ◎ If textAlign is left If textAlign is start and direction is 'ltr' If textAlign is end and direction is 'rtl' • Let the anchor point's horizontal position be the left edge of the inline box, and let physical alignment be left. ◎ If textAlign is right If textAlign is end and direction is 'ltr' If textAlign is start and direction is 'rtl' • Let the anchor point's horizontal position be the right edge of the inline box, and let physical alignment be right. ◎ If textAlign is center • Let the anchor point's horizontal position be half way between the left and right edges of the inline box, and let physical alignment be center.

    • %起点 の縦~位置 ~SET 次の表tの 1 列目に与える `textBaseline$2d 値に応じて，同じ行の 2 列目に与えられる値 — 表t内の %font は、 %行内~box にて`可用な最初の~font$を表すとする： ◎ Vertical position:

      `textBaseline^2d	縦~位置
      `top$l ◎ If textBaseline is top	%font の~em~boxの上端 ◎ Let the anchor point's vertical position be the top of the em box of the first available font of the inline box.
      `hanging$l ◎ If textBaseline is hanging	%font の `hanging$bL 基底線 ◎ Let the anchor point's vertical position be the hanging baseline of the first available font of the inline box.
      `middle$l ◎ If textBaseline is middle	%font の~em~boxの下端と上端の中点 ◎ Let the anchor point's vertical position be half way between the bottom and the top of the em box of the first available font of the inline box.
      `alphabetic$l ◎ If textBaseline is alphabetic	%font の `alphabetic$bL 基底線 ◎ Let the anchor point's vertical position be the alphabetic baseline of the first available font of the inline box.
      `ideographic$l ◎ If textBaseline is ideographic	%font の `ideographic-under$bL 基底線 ◎ Let the anchor point's vertical position be the ideographic-under baseline of the first available font of the inline box.
      `bottom$l ◎ If textBaseline is bottom	%font の~em~boxの下端 ◎ Let the anchor point's vertical position be the bottom of the em box of the first available font of the inline box.

11. %図形~list ~LET 次のような一連の図形からなる~list：

    • 各~図形は、 左端から右端の順に， %行内~box 内の各~glyphに対応する
    • 各~図形は、 対応する~glyphが %行内~box 内に~~描かれるときの図形を与える
    • すべての図形は、［ `px$css を利用し, %起点 を原点とする，ある座標~空間 ］内に位置される
    ◎ Let result be an array constructed by iterating over each glyph in the inline box from left to right (if any), adding to the array, for each glyph, the shape of the glyph as it is in the inline box, positioned on a coordinate space using CSS pixels with its origin is at the anchor point.
12. ~RET ( %図形~list, %物理的~整列, %行内~box ) ◎ Return result, physical alignment, and the inline box.

`moveTo(x, y)@2d ~method手続きは： ◎ The moveTo(x, y) method, when invoked, must run these steps:

1. ~IF［ いずれかの引数は`有限$でない ］ ⇒ ~RET ◎ If either of the arguments are infinite or NaN, then return.
2. コレの`~path$に［ 点 ( %x, %y ) のみからなる新たな下位path ］を追加する【！Create a】 ◎ Create a new subpath with the specified point as its first (and only) point.

`下位pathありを確保する@ ときは、所与の ( `~path$ %~path, 座標 %P ) に対し，次を行うモノトスル： ◎ When the user agent is to ensure there is a subpath for a coordinate (x, y) on a path, the user agent must＼

1. ~IF［ %~path の`新たな下位pathは必要か$ ~EQ ~F ］ ⇒ ~RET ◎ check to see if the path has its need new subpath flag set.＼
2. %~path に［ 点 %P のみからなる新たな下位path ］を追加する【！create a】 （ `moveTo()$2d ~methodが~callされたかのように） ◎ If it does, then the user agent must create a new subpath with the point (x, y) as its first (and only) point, as if the moveTo() method had been called, and＼
3. %~path の`新たな下位pathは必要か$ ~SET ~F ◎ must then unset the path's need new subpath flag.

`closePath()@2d ~method手続きは： ◎ The closePath() method, when invoked, must＼

1. %~path ~LET コレの`~path$ ◎ ↓
2. ~IF［ %~path は空である ］ ⇒ ~RET ◎ do nothing if the object's path has no subpaths.＼
3. %~path を成す最後の下位pathを閉じる ◎ Otherwise, it must mark the last subpath as closed,＼
4. %~path に［ %~path を成す最後の下位pathの最初の点に一致する点 ］のみからなる，新たな下位pathを追加する ◎ create a new subpath whose first point is the same as the previous subpath's first point, and＼ finally add this new subpath to the path.

`lineTo(x, y)@2d ~method手続きは： ◎ The lineTo(x, y) method, when invoked, must run these steps:

1. ~IF［ いずれかの引数は`有限$でない ］ ⇒ ~RET ◎ If either of the arguments are infinite or NaN, then return.
2. %P ~LET 点 ( %x, %y ) ◎ ↓
3. ~IF［ コレの`~path$は空である ］ ⇒＃ `下位pathありを確保する$( コレの`~path$, %P )； ~RET ◎ If the object's path has no subpaths, then ensure there is a subpath for (x, y).
4. コレの`~path$を成す最後の下位pathに — 下位pathの最後の点から %P へ直線で接続するように — %P を追加する ◎ Otherwise, connect the last point in the subpath to the given point (x, y) using a straight line, and then add the given point (x, y) to the subpath.

`quadraticCurveTo(cpx, cpy, x, y)@2d ~method手続きは： ◎ The quadraticCurveTo(cpx, cpy, x, y) method, when invoked, must run these steps:

1. ~IF［ いずれかの引数は`有限$でない ］ ⇒ ~RET ◎ If any of the arguments are infinite or NaN, then return.
2. %CP ~LET 点 ( %cpx, %cpy ) ◎ ↓
3. %P ~LET 点 ( %x, %y ) ◎ ↓
4. `下位pathありを確保する$( コレの`~path$, %CP ) ◎ Ensure there is a subpath for (cpx, cpy)
5. コレの`~path$を成す最後の下位pathに — その最後の点から［ 制御~点 %CP を伴う二次ベジェ曲線 ］で接続するように — %P を追加する `BEZIER$r ◎ Connect the last point in the subpath to the given point (x, y) using a quadratic Bézier curve with control point (cpx, cpy). [BEZIER] ◎ Add the given point (x, y) to the subpath.

`bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)@2d ~method手続きは： ◎ The bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) method, when invoked, must run these steps:

1. ~IF［ いずれかの引数は`有限$でない ］ ⇒ ~RET ◎ If any of the arguments are infinite or NaN, then return.
2. %P ~LET 点 ( %x, %y ) ◎ ↓
3. %CP1 ~LET 点 ( %cp1x, %cp1y ) ◎ ↓
4. %CP2 ~LET 点 ( %cp2x, %cp2y ) ◎ ↓
5. `下位pathありを確保する$( コレの`~path$, %CP1 ) ◎ Ensure there is a subpath for (cp1x, cp1y).
6. コレの`~path$を成す最後の下位pathに — その最後の点から［ 制御~点 %CP1, %CP2 を伴う三次ベジェ曲線 ］で接続するように — %P を追加する `BEZIER$r ◎ Connect the last point in the subpath to the given point (x, y) using a cubic Bézier curve with control points (cp1x, cp1y) and (cp2x, cp2y). [BEZIER] ◎ Add the point (x, y) to the subpath.

`arcTo(x1, y1, x2, y2, radius)@2d ~method手続きは： ◎ The arcTo(x1, y1, x2, y2, radius) method, when invoked, must run these steps:

1. ~IF［ いずれかの引数は`有限$でない ］ ⇒ ~RET ◎ If any of the arguments are infinite or NaN, then return.
2. %P1 ~LET 点( %x1, %y1 ) ◎ ↓
3. %P2 ~LET 点( %x2, %y2 ) ◎ ↓
4. `下位pathありを確保する$( コレの`~path$, %P1 ) ◎ Ensure there is a subpath for (x1, y1).
5. %下位path ~LET コレの`~path$を成す最後の下位path 【この段はこの訳による補完】 ◎ ↓
6. ~IF［ %radius ~LT 0 ］ ⇒ ~THROW `IndexSizeError$E ◎ If radius is negative, then throw an "IndexSizeError" DOMException.
7. %P0 ~LET %下位path 内の最後の点を （この~methodに渡された点と同じ座標系~内にあるように） `変形n行列$の逆行列により変形した結果 ◎ Let the point (x0, y0) be the last point in the subpath, transformed by the inverse of the current transformation matrix (so that it is in the same coordinate system as the points passed to the method).

8. ~IF［ ~OR↓ ］…

   • %P0 ~EQ %P1
   • %P1 ~EQ %P2
   • %radius ~EQ 0
   • ［ %P0, %P1, %P2 ］は、 同じ直線~上にある

   …ならば ⇒ %下位path に %P1 を追加した上で， %P0 から %P1 へ直線で接続する

   ◎ If the point (x0, y0) is equal to the point (x1, y1), or if the point (x1, y1) is equal to the point (x2, y2), or if radius is zero, then add the point (x1, y1) to the subpath, and connect that point to the previous point (x0, y0) by a straight line. ◎ Otherwise, if the points (x0, y0), (x1, y1), and (x2, y2) all lie on a single straight line, then add the point (x1, y1) to the subpath, and connect that point to the previous point (x0, y0) by a straight line.

9. ~ELSE：

   1. %L0 ~LET %P0 に交叉し, %P1 で終端する半直線
   2. %L2 ~LET %P2 に交叉し, %P1 で終端する半直線
   3. %真円 ~LET 半径 ~EQ %radius, かつ %L0, %L2 に接する真円
   4. %Q0 ~LET %真円 と %L0 が接する点
   5. %Q2 ~LET %真円 と %L2 が接する点
   6. %下位path に %Q0 を追加した上で、 %P0 から %Q0 へ直線で接続する
   7. %下位path に %Q2 を追加した上で、 %Q0 から %Q2 へ［ %真円 を成す短い方の円弧 ］で接続する
   ◎ Otherwise, let The Arc be the shortest arc given by circumference of the circle that has radius radius, and that has one point tangent to the half-infinite line that crosses the point (x0, y0) and ends at the point (x1, y1), and that has a different point tangent to the half-infinite line that ends at the point (x1, y1) and crosses the point (x2, y2). The points at which this circle touches these two lines are called the start and end tangent points respectively. Connect the point (x0, y0) to the start tangent point by a straight line, adding the start tangent point to the subpath, and then connect the start tangent point to the end tangent point by The Arc, adding the end tangent point to the subpath.

`arc(x, y, radius, startAngle, endAngle, counterclockwise)@2d ~method手続きは ⇒ `~ellipse~method手続き$( コレの`~path$, %x, %y, %radius, %radius, 0, %startAngle, %endAngle, %counterclockwise ) ◎ The arc(x, y, radius, startAngle, endAngle, counterclockwise) method, when invoked, must run the ellipse method steps with this, x, y, radius, radius, 0, startAngle, endAngle, and counterclockwise.

注記： これは、 次を渡して `ellipse()$2d を呼出すことに等価になる ⇒＃ %radiusX には %radius, %radiusY には %radius, %rotation には 0, 他は同じ ◎ This makes it equivalent to ellipse() except that both radii are equal and rotation is 0.

`~ellipse~method手続き@ は、所与の ( `~path$ %~path, %~x, %~y, %~x半径, %~y半径, %回転, %始端~角度, %終端~角度, %反時計回りか ) に対し，次を走らす： ◎ ↓↓ The determine the point on an ellipse steps, given ellipse, and angle, are: • Let eccentricCircle be the circle that shares its origin with ellipse, with a radius equal to the semi-major axis of ellipse. • Let outerPoint be the point on eccentricCircle's circumference at angle measured in radians clockwise from ellipse's semi-major axis. • Let chord be the line perpendicular to ellipse's major axis between this axis and outerPoint. • Return the point on chord that crosses ellipse's circumference. ◎ The ellipse method steps, given canvasPath, x, y, radiusX, radiusY, rotation, startAngle, endAngle, and counterclockwise, are:

1. ~IF［［ %~path, %反時計回りか ］以外の引数に`有限$でないものがある ］ ⇒ ~RET ◎ If any of the arguments are infinite or NaN, then return.
2. ~IF［ %~x半径 ~LT 0 ］~OR［ %~y半径 ~LT 0 ］ ⇒ ~THROW `IndexSizeError$E ◎ If either radiusX or radiusY are negative, then throw an "IndexSizeError" DOMException.
3. ( %円弧, %始点, %終点 ) ~LET 下に従って決定される円弧と，その始点, 終点 ◎ ↓
4. ~IF［ %~path は空である ］ ⇒ `下位pathありを確保する$( %~path, %始点 ) ◎ ↓
5. ~ELSE ⇒ %~path を成す最後の下位pathに — その最後の点から直線で接続するように — %始点 を追加する ◎ If canvasPath's path has any subpaths, then add a straight line from the last point in the subpath to the start point of the arc.
6. %~path を成す最後の下位pathに — その最後の点から %円弧 で接続するように — %終点 を追加する ◎ Add the start and end points of the arc to the subpath, and connect them with an arc.＼

注記： 結果の円弧が楕円の全~周-を覆っていて，下位path内に他の点はない場合でも、 `closePath()$2d ~methodが適切に呼出されない限り，~pathは閉じられない。 ◎ Even if the arc covers the entire circumference of the ellipse and there are no other points in the subpath, the path is not closed unless the closePath() method is appropriately invoked.

`rect(x, y, w, h)@2d ~method手続きは： ◎ The rect(x, y, w, h) method, when invoked, must run these steps:

1. ~IF［ いずれかの引数は`有限$でない ］ ⇒ ~RET ◎ If any of the arguments are infinite or NaN, then return.
2. コレの`~path$に［ 次の 4 個の点を順に直線で接続した上で閉じる，新たな下位path ］を追加する【！Create a】 ⇒ ( %x, %y ), ( %x ~PLUS %w, %y ), ( %x ~PLUS %w, %y ~PLUS %h ), ( %x, %y ~PLUS %h ) ◎ Create a new subpath containing just the four points (x, y), (x+w, y), (x+w, y+h), (x, y+h), in that order, with those four points connected by straight lines. ◎ Mark the subpath as closed.
3. コレの`~path$に［ 点 ( %x, %y ) のみからなる新たな下位path ］を追加する【！Create a】 ◎ Create a new subpath with the point (x, y) as the only point in the subpath.

`roundRect(x, y, w, h, radii)@2d ~method手続きは： ◎ The roundRect(x, y, w, h, radii) method steps are:

1. ~IF［ %x, %y, %w, %h いずれかは`有限$でない ］ ⇒ ~RET ◎ If any of x, y, w, or h are infinite or NaN, then return.
2. ~IF［ %radii は［ `~urdb^c ／ `DOMPointInit$I ］である ］ ⇒ %radii ~SET « %radii » ◎ If radii is an unrestricted double or DOMPointInit, then set radii to « radii ».
3. ~IF［ %radii の`~size$ ~NIN { 1, 2, 3, 4 } ］ ⇒ ~THROW `RangeError$E ◎ If radii is not a list of size one, two, three, or four, then throw a RangeError.
4. %正規化した半径~群 ~LET 空~list ◎ Let normalizedRadii be an empty list.

5. %radii を成す ~EACH( %半径 ) に対し： ◎ For each radius of radii:

   1. ~IF［ %半径 は `DOMPointInit$I である ］： ◎ If radius is a DOMPointInit:

      1. ~IF［ %半径[ "`x$mb" ] は`有限$でない ］~OR［ %半径[ "`y$mb" ] は`有限$でない ］ ⇒ ~RET ◎ If radius["x"] or radius["y"] is infinite or NaN, then return.
      2. ~IF［ %半径[ "`x$mb" ] ~LT 0 ］~OR［ %半径[ "`y$mb" ] ~LT 0 ］ ⇒ ~THROW `RangeError$E ◎ If radius["x"] or radius["y"] is negative, then throw a RangeError.
      3. %正規化した半径~群 に %半径 を`付加する$ ◎ Otherwise, append radius to normalizedRadii.

   2. ~IF［ %半径 は `unrestricted double$c である ］： ◎ If radius is a unrestricted double:

      1. ~IF［ %半径 は`有限$でない ］ ⇒ ~RET ◎ If radius is infinite or NaN, then return.
      2. ~IF［ %半径 ~LT 0 ］ ⇒ ~THROW `RangeError$E ◎ If radius is negative, then throw a RangeError.
      3. %正規化した半径~群 に «[ "`x$mb" → %半径, "`x$mb" → %半径 ]» を`付加する$ ◎ Otherwise append «[ "x" → radius, "y" → radius ]» to normalizedRadii.
6. ~WHILE［ %正規化した半径~群 の`~size$ ~LT 4 ］ ⇒ %正規化した半径~群 に ε を`付加する$ ◎ ↓
7. ( %左上, %右上, %右下, %左下 ) ~LET ( %正規化した半径~群[ 0 ], %正規化した半径~群[ 1 ], %正規化した半径~群[ 2 ], %正規化した半径~群[ 3 ] ) ◎ ↓

8. （~~欠落している半径を次に従って拡充する）：

   1. ~IF［ %右上 ~EQ ε ］ ⇒ %右上 ~SET %左上
   2. ~IF［ %右下 ~EQ ε ］ ⇒ %右下 ~SET %左上
   3. ~IF［ %左下 ~EQ ε ］ ⇒ %左下 ~SET %右上
   ◎ Let upperLeft, upperRight, lowerRight, and lowerLeft be null. ◎ If normalizedRadii's size is 4, then set upperLeft to normalizedRadii[0], set upperRight to normalizedRadii[1], set lowerRight to normalizedRadii[2], and set lowerLeft to normalizedRadii[3]. ◎ If normalizedRadii's size is 3, then set upperLeft to normalizedRadii[0], set upperRight and lowerLeft to normalizedRadii[1], and set lowerRight to normalizedRadii[2]. ◎ If normalizedRadii's size is 2, then set upperLeft and lowerRight to normalizedRadii[0] and set upperRight and lowerLeft to normalizedRadii[1]. ◎ If normalizedRadii's size is 1, then set upperLeft, upperRight, lowerRight, and lowerLeft to normalizedRadii[0].

9. （隅~曲線が重合しないよう，すべての半径を拡縮する）： ◎ Corner curves must not overlap. Scale all radii to prevent this:

   1. %拡縮率 ~LET 次に挙げる値の最小：

      • %w ~DIV ( %左上[ "`x$mb" ] ~PLUS %右上[ "`x$mb" ] )
      • %h ~DIV ( %右上[ "`y$mb" ] ~PLUS %右下[ "`y$mb" ] )
      • %w ~DIV ( %右下[ "`x$mb" ] ~PLUS %左下[ "`x$mb" ] )
      • %h ~DIV ( %左下[ "`y$mb" ] ~PLUS %左上[ "`y$mb" ] )
      ◎ Let top be upperLeft["x"] + upperRight["x"]. ◎ Let right be upperRight["y"] + lowerRight["y"]. ◎ Let bottom be lowerRight["x"] + lowerLeft["x"]. ◎ Let left be upperLeft["y"] + lowerLeft["y"]. ◎ Let scale be the minimum value of the ratios w / top, h / right, w / bottom, h / left.
   2. ~IF［ %拡縮率 ~LT 1 ］ ⇒ 集合 { %左上, %右上, %左下, %右下 } （重複は除外する）を成す ~EACH( %半径 ) に対し ⇒＃ %半径[ "`x$mb" ] ~SET %半径[ "`x$mb" ] ~MUL %拡縮率； %半径[ "`y$mb" ] ~SET %半径[ "`y$mb" ] ~MUL %拡縮率 ◎ If scale is less than 1, then set the x and y members of upperLeft, upperRight, lowerLeft, and lowerRight to their current values multiplied by scale.

10. %下位path ~LET 次に従って描かれる新たな下位path： ◎ Create a new subpath:

    1. 点 ( %x ~PLUS %左上[ "`x$mb" ], %y ) へ移動する ◎ Move to the point (x + upperLeft["x"], y).
    2. 点 ( %x ~PLUS %w ~MINUS %右上[ "`x$mb" ], %y ) へ直線を描く ◎ Draw a straight line to the point (x + w − upperRight["x"], y).
    3. 点 ( %x ~PLUS %w, %y ~PLUS %右上[ "`y$mb" ] ) へ円弧を描く ◎ Draw an arc to the point (x + w, y + upperRight["y"]).
    4. 点 ( %x ~PLUS %w, %y ~PLUS %h ~MINUS %右下[ "`y$mb" ] ) へ直線を描く ◎ Draw a straight line to the point (x + w, y + h − lowerRight["y"]).
    5. 点 ( %x ~PLUS %w ~MINUS %右下[ "`x$mb" ], %y ~PLUS %h ) へ円弧を描く ◎ Draw an arc to the point (x + w − lowerRight["x"], y + h).
    6. 点 ( %x ~PLUS %左下[ "`x$mb" ], %y ~PLUS %h ) へ直線を描く ◎ Draw a straight line to the point (x + lowerLeft["x"], y + h).
    7. 点 ( %x, %y ~PLUS %h ~MINUS %左下[ "`y$mb" ] ) へ円弧を描く ◎ Draw an arc to the point (x, y + h − lowerLeft["y"]).
    8. 点 ( %x, %y ~PLUS %左上[ "`y$mb" ] ) へ直線を描く ◎ Draw a straight line to the point (x, y + upperLeft["y"]).
    9. 点 ( %x ~PLUS %左上[ "`x$mb" ], %y ) へ円弧を描く ◎ Draw an arc to the point (x + upperLeft["x"], y).
11. %下位path を閉じる ◎ Mark the subpath as closed.
12. コレの`~path$に %下位path を追加する 【この段は、この訳による補完。】
13. コレの`~path$に［ 点 ( %x, %y ) のみからなる新たな下位path ］を追加する【！Create a】 ◎ Create a new subpath with the point (x, y) as the only point in the subpath.

注記： これは、 ~CSS `border-radius$p ~propと類似に挙動するよう設計されている。 ◎ This is designed to behave similarly to the CSS 'border-radius' property.

`new Path2D(path)@m 構築子~手続きは： ◎ The Path2D(path) constructor, when invoked, must run these steps: • Let output be a new Path2D object.

1. ~IF［ %path ~EQ ε ］ ⇒ ~RET ◎ If path is not given, then return output.
2. ~IF［ %path は `Path2D$I ~objである ］ ⇒＃ コレに %path を成すすべての下位pathを追加する； ~RET （言い換えれば、 構築した結果は引数の複製になる） ◎ If path is a Path2D object, then add all subpaths of path to output and return output. (In other words, it returns a copy of the argument.)

3. %~SVG~path ~LET `SVG 2^cite の~path~dataの規則に則って， %path を~SVG~pathとして構文解析した結果 `SVG$r ◎ Let svgPath be the result of parsing and interpreting path according to SVG 2's rules for path data. [SVG]

   注記： 結果の~pathは空にもなり得る。 ~path~dataを構文解析する際の~error取扱い規則, および ~path~dataを適用するための規則は、 ~SVGが定義する。 【参照：`~path~data用の文法＠~SVGpaths#PathDataBNF$／ `~path~data内の~errorの取扱い＠~SVGpaths#PathDataErrorHandling$】 ◎ The resulting path could be empty. SVG defines error handling rules for parsing and applying path data.

4. ~IF［ %~SVG~path は空である ］ ⇒ ~RET 【この段は、この訳による補完（さもなければ、次の段の %P を定義し得ない）】
5. %P ~LET %~SVG~path 内の最後の点 ◎ Let (x, y) be the last point in svgPath.
6. コレに %~SVG~path を成すすべての下位pathを追加する （もしあれば） ◎ Add all the subpaths, if any, from svgPath to output.
7. コレに［ 点 %P のみからなる新たな下位path ］を追加する【！create a】 ◎ Create a new subpath in output with (x, y) as the only point in the subpath. ◎ Return output.

`addPath(path, transform)@m ~method手続きは： ◎ The addPath(path, transform) method, when invoked on a Path2D object a, must run these steps:

1. ( %a, %b ) ~LET ( コレが表現する~path, %path が表現する~path ) ◎ ↓
2. ~IF［ %b は下位pathを有さない ］ ⇒ ~RET ◎ If the Path2D object path has no subpaths, then return.
3. %行列 ~LET `新たな$ `DOMMatrix$I ~obj ◎ ↓
4. `行列を~2D辞書で初期化する$( %行列, %transform ) ◎ Let matrix be the result of creating a DOMMatrix from the 2D dictionary transform.
5. ~IF［ %行列 の［ `m11$, `m12$, `m21$, `m22$, `m41$, `m42$ ］成分のいずれかは`有限$でない ］ ⇒ ~RET ◎ If one or more of matrix's m11 element, m12 element, m21 element, m22 element, m41 element, or m42 element are infinite or NaN, then return.
6. %b ~SET %b 内のすべての［ 座標, 線 ］を %行列 で変形して得られる新たな~path ◎ Create a copy of all the subpaths in path. Let this copy be known as c. ◎ Transform all the coordinates and lines in c by the transform matrix matrix.
7. %P ~LET %b の最後の下位path内の最後の点 ◎ Let (x, y) be the last point in the last subpath of c.
8. %a に［ %b 内の すべての下位path ］を追加する ◎ Add all the subpaths in c to a.
9. %a に［ 点 %P のみからなる新たな下位path ］を追加する【！create a】 ◎ Create a new subpath in a with (x, y) as the only point in the subpath.

`~2D行列@ [ %a, %b, %c, %d, %e, %f ] という表記は、 次の結果が表現する行列を表すとする：

1. %行列 ~LET `新たな$ `DOMMatrix$I
2. `行列を~2D行列に初期化する$( %行列, « %a, %b, %c, %d, %e, %f » )
3. ~RET %行列

`scale(x, y)@2d ~method手続きは： ◎ The scale(x, y) method, when invoked, must run these steps:

1. ~IF［ いずれかの引数は`有限$でない ］ ⇒ ~RET ◎ If either of the arguments are infinite or NaN, then return.
2. コレの`現在の変形n行列$に次の行列を`右から乗算する$ ⇒ `~2D行列$ [ %x, 0, 0, %y, 0, 0 ] （横 %x 倍, 縦 %y 倍に拡縮する変形nを表す） ◎ Add the scaling transformation described by the arguments to the current transformation matrix. The x argument represents the scale factor in the horizontal direction and the y argument represents the scale factor in the vertical direction. The factors are multiples.

`rotate(angle)@2d ~method手続きは： ◎ The rotate(angle) method, when invoked, must run these steps:

1. ~IF［ %angle は`有限$でない ］ ⇒ ~RET ◎ If angle is infinite or NaN, then return.
2. コレの`現在の変形n行列$に次の行列を`右から乗算する$ ⇒ `~2D行列$ [ `cos^op( %angle ), `sin^op( %angle ), −`sin^op( %angle ), `cos^op( %angle ), 0, 0 ] （角度 %angle ~radianだけ時計回りに回転する変形nを表す） ◎ Add the rotation transformation described by the argument to the current transformation matrix. The angle argument represents a clockwise rotation angle expressed in radians.

`translate(x, y)@2d ~method手続きは： ◎ The translate(x, y) method, when invoked, must run these steps:

1. ~IF［ いずれかの引数は`有限$でない ］ ⇒ ~RET ◎ If either of the arguments are infinite or NaN, then return.
2. コレの`現在の変形n行列$に次の行列を`右から乗算する$ ⇒ `~2D行列$ [ 1, 0, 0, 1, %x, %y ] （横に %x, 縦に %y だけ並進する変形nを表す） 【！The arguments are in coordinate space units.】 ◎ Add the translation transformation described by the arguments to the current transformation matrix. The x argument represents the translation distance in the horizontal direction and the y argument represents the translation distance in the vertical direction. The arguments are in coordinate space units.

`transform(a, b, c, d, e, f)@2d ~method手続きは： ◎ The transform(a, b, c, d, e, f) method, when invoked, must run these steps:

1. ~IF［ いずれかの引数は`有限$でない ］ ⇒ ~RET ◎ If any of the arguments are infinite or NaN, then return.
2. コレの`現在の変形n行列$に次の行列を`右から乗算する$ ⇒ `~2D行列$ [ %a, %b, %c, %d, %e, %f ] ◎ Replace the current transformation matrix with the result of multiplying the current transformation matrix with the matrix described by: a c e b d f 0 0 1

注記： 引数［ %a, %b, %c, %d, %e, %f ］は、 あるときは［ %m11, %m12, %m21, %m22, %dx, %dy ］, 別のときは［ %m11, %m21, %m12, %m22, %dx, %dy ］と呼ばれることもある。 特に， ［ %b, %c ］の順序には要注意 — それらは~APIごとに変わり、 対応する位置に，あるときは［ %m12, %m21 ］による表記, 別のときは［ %m21, %m12 ］による表記を利用することもあるので。 ◎ The arguments a, b, c, d, e, and f are sometimes called m11, m12, m21, m22, dx, and dy or m11, m21, m12, m22, dx, and dy. Care ought to be taken in particular with the order of the second and third arguments (b and c) as their order varies from API to API and APIs sometimes use the notation m12/m21 and sometimes m21/m12 for those positions.

`getTransform()@2d ~method手続きは ⇒ ~RET コレの`現在の変形n行列$の複製を表現している，`新たな$ `DOMMatrix$I ◎ The getTransform() method, when invoked, must return a newly created DOMMatrix representing a copy of the current transformation matrix matrix of the context.

注記： 返される~objは~liveではないので、 更新しても`現在の変形n行列$には影響せず，逆も同様になる。 ◎ This returned object is not live, so updating it will not affect the current transformation matrix, and updating the current transformation matrix will not affect an already returned DOMMatrix.

`setTransform(a, b, c, d, e, f)@2d ~method手続きは： ◎ The setTransform(a, b, c, d, e, f) method, when invoked, must run these steps:

1. ~IF［ いずれかの引数は`有限$でない ］ ⇒ ~RET ◎ If any of the arguments are infinite or NaN, then return.
2. コレの`現在の変形n行列$ ~SET `~2D行列$ [ %a, %b, %c, %d, %e, %f ] ◎ Reset the current transformation matrix to the matrix described by: ◎ a c e b d f 0 0 1

`setTransform(transform)@2d1 ~method手続きは： ◎ The setTransform(transform) method, when invoked, must run these steps:

1. %行列 ~LET `新たな$ `DOMMatrix$I ◎ ↓
2. `行列を~2D辞書で初期化する$( %行列, %transform ) ◎ Let matrix be the result of creating a DOMMatrix from the 2D dictionary transform.
3. ~IF［ %行列 の［ `m11$, `m12$, `m21$, `m22$, `m41$, `m42$ ］成分のいずれかは`有限$でない ］ ⇒ ~RET ◎ If one or more of matrix's m11 element, m12 element, m21 element, m22 element, m41 element, or m42 element are infinite or NaN, then return.
4. コレの`現在の変形n行列$ ~SET %行列 ◎ Reset the current transformation matrix to matrix.

`画像~引数は利用-可能か検査する@ ときは、所与の ( `CanvasImageSource$I ~obj %image ) に対し，次を走らすモノトスル： ◎ To check the usability of the image argument, where image is a CanvasImageSource object, run these steps:

1. %image に応じて： ◎ Switch on image:

   `HTMLOrSVGImageElement$I

   1. ~IF［ %image の`現在の要請$の`状態$imG ~EQ `壊れている$ ］ ⇒ ~THROW `InvalidStateError$E ◎ If image's current request's state is broken, then throw an "InvalidStateError" DOMException.
   2. ~IF［ %image は`全部的に復号-可能$でない ］ ⇒ ~RET `不良^i ◎ If image is not fully decodable, then return bad.
   3. ~IF［ %image の`生来な横幅$ ~EQ 0 ］~OR［ %image の`生来な縦幅$ ~EQ 0 ］ ⇒ ~RET `不良^i ◎ If image has a natural width or natural height (or both) equal to zero, then return bad.

   `HTMLVideoElement$I

   ~IF［ %image の `readyState$m 属性の値 ~IN { `HAVE_NOTHING$m, `HAVE_METADATA$m } ］ ⇒ ~RET `不良^i ◎ If image's readyState attribute is either HAVE_NOTHING or HAVE_METADATA, then return bad.

   `HTMLCanvasElement$I

   `OffscreenCanvas$I

   ~IF［ %image の横~寸法 ~EQ 0 ］~OR［ %image の縦~寸法 ~EQ 0 ］ ⇒ ~THROW `InvalidStateError$E ◎ If image has either a horizontal dimension or a vertical dimension equal to zero, then throw an "InvalidStateError" DOMException.

   `ImageBitmap$I

   `VideoFrame$I

   ~IF［ %image.`Detached$sl ~EQ ~T ］ ⇒ ~THROW `InvalidStateError$E ◎ If image's [[Detached]] internal slot value is set to true, then throw an "InvalidStateError" DOMException.

2. ~RET `優良^i ◎ Return good.

`fillStyle@2d 取得子~手続きは： ◎ The fillStyle getter steps are:

1. %~fill ~LET コレの`~fill~style$2D ◎ ↓
2. ~IF［ %~fill は~CSS色である ］ ⇒ ~RET `色を直列化する$( %~fill ) ◎ If this's fill style is a CSS color, then return the serialization of that color.
3. ~RET %~fill ◎ Return this's fill style.

`fillStyle$2d 設定子~手続きは： ◎ The fillStyle setter steps are:

1. %値 ~LET 所与の値 ◎ ↓

2. ~IF［ %値 は文字列である ］： ◎ If the given value is a string, then:

   1. %構文解析した値 ~LET `~CSS色~値を構文解析する$( %値, コレの `canvas$2d 属性の値 ) ◎ Let parsedValue be the result of parsing the given value with this's canvas attribute's value.
   2. ~IF［ %構文解析した値 ~EQ `失敗^i ］ ⇒ ~RET ◎ If parsedValue is failure, then return.
   3. コレの`~fill~style$2D ~SET %構文解析した値 ◎ Set this's fill style to parsedValue.
   4. ~RET ◎ Return.
3. ~IF［ %値 は `CanvasPattern$I ~objである ］~AND［ %値 の`生成元cleanか$paT ~EQ ~F ］ ⇒ コレの`生成元cleanか$ ~SET ~F ◎ If the given value is a CanvasPattern object that is marked as not origin-clean, then set this's origin-clean flag to false.
4. コレの`~fill~style$2D ~SET %値 ◎ Set this's fill style to the given value.

`strokeStyle@2d 取得子~手続きは： ◎ The strokeStyle getter steps are:

1. %~stroke ~LET コレの`~stroke~style$2D ◎ ↓
2. ~IF［ %~stroke は~CSS色である ］ ⇒ ~RET `色を直列化する$( %~stroke ) ◎ If this's stroke style is a CSS color, then return the serialization of that color.
3. ~RET %~stroke ◎ Return this's stroke style.

`strokeStyle$2d 設定子~手続きは： ◎ The strokeStyle setter steps are:

1. %値 ~LET 所与の値 ◎ ↓

2. ~IF［ %値 は文字列である ］： ◎ If the given value is a string, then:

   1. %構文解析した値 ~LET `~CSS色~値を構文解析する$( %値, コレの `canvas$2d 属性の値 ) ◎ Let parsedValue be the result of parsing the given value with this's canvas attribute's value.
   2. ~IF［ %構文解析した値 ~EQ `失敗^i ］ ⇒ ~RET ◎ If parsedValue is failure, then return.
   3. コレの`~stroke~style$2D ~SET %構文解析した値 ◎ Set this's stroke style to parsedValue.
   4. ~RET ◎ Return.
3. ~IF［ %値 は `CanvasPattern$I ~objである ］~AND［ %値 の`生成元cleanか$paT ~EQ ~F ］ ⇒ コレの`生成元cleanか$ ~SET ~F ◎ If the given value is a CanvasPattern object that is marked as not origin-clean, then set this's origin-clean flag to false.
4. コレの`~stroke~style$2D ~SET %値 ◎ Set this's stroke style to the given value.

`色を直列化する@ ときは、所与の ( 色~値 %色 ) に対し，次に従って算出される文字列を返す： ◎ The serialization of a color for a color value is a string, computed as follows:＼

1. ( %r, %g, %b ) ~LET %色 の ( ~red, ~green, ~blue ) 成分を範囲 { 0 〜 255 } に入る整数で表した値 ◎ ↓
2. %a ~LET %色 の~alpha成分を 0 以上 1 以下の実数で表した値 ◎ ↓

3. ~IF［ %a ~EQ 1.0 ］：

   1. ( %R, %G, %B ) ~SET 順に， ( %r, %g, %b ) を表現する`~ASCII~hex数字（小文字）$による 2 桁の~hex数字
   2. ~RET 次を順に連結した結果 ⇒＃ `#^l, %R, %G, %B
   ◎ if it has alpha equal to 1.0, then the string is a lowercase six-digit hex value, prefixed with a "#" character (U+0023 NUMBER SIGN), with the first two digits representing the red component, the next two digits representing the green component, and the last two digits representing the blue component, the digits being ASCII lower hex digits.＼

4. ~ELSE：

   1. ( %R, %G, %B ) ~SET 順に ( %r, %g, %b ) を表現する，アリな限り最短な`~ASCII数字$列
   2. %A ~SET %a に応じて［ 0 ならば `0^l ／ ~ELSE_ ［ `0.^l, 次を満たす文字列 ］を順に連結した結果 ］ ⇒ ［ `~ASCII数字$のみからなる ］~AND［ 空でない ］~AND［ %a の小数部を表現する ］~AND［ 再度~構文解析されたとき，同じ~alpha値に解釈される精度を表出する ］
   3. %分離子 ~LET `, ^l
   4. ~RET 次を順に連結した結果 （これは、~CSS `rgba()^v 関数-記法を与える） ⇒＃ `rgba(^l, %R, %分離子, %G, %分離子, %B, %分離子, %A, `)^l
   ◎ Otherwise, the color value has alpha less than 1.0, and the string is the color value in the CSS rgba() functional-notation format: "rgba" (U+0072 U+0067 U+0062 U+0061) followed by a U+0028 LEFT PARENTHESIS, a base-ten integer in the range 0-255 representing the red component (using ASCII digits in the shortest form possible), a literal U+002C COMMA and U+0020 SPACE, an integer for the green component, a comma and a space, an integer for the blue component, another comma and space, a U+0030 DIGIT ZERO, if the alpha value is greater than zero then a U+002E FULL STOP (representing the decimal point), if the alpha value is greater than zero then one or more ASCII digits representing the fractional part of the alpha, and finally a U+0029 RIGHT PARENTHESIS.＼ User agents must express the fractional part of the alpha value, if any, with the level of precision necessary for the alpha value, when reparsed, to be interpreted as the same alpha value.

`addColorStop(offset, color)@m ~method手続きは： ◎ The addColorStop(offset, color) method on the CanvasGradient, when invoked, must run these steps:

1. ~IF［ %offset ~LT 0 ］~OR［ %offset ~GT 1 ］ ⇒ ~THROW `IndexSizeError$E ◎ If the offset is less than 0 or greater than 1, then throw an "IndexSizeError" DOMException.

2. %構文解析した色 ~LET `~CSS色~値を構文解析する$( %color ) ◎ Let parsed color be the result of parsing color.

   注記： 構文解析するときに要素は渡されない。 `CanvasGradient$I ~objは `canvas$e に中立的であり、 ある `canvas$e により作成されたそれは，別のそれにも利用され得るため、 色が指定された時点では “当の要素” を知る仕方がないので。 ◎ No element is passed to the parser because CanvasGradient objects are canvas-neutral — a CanvasGradient object created by one canvas can be used by another, and there is therefore no way to know which is the "element in question" at the time that the color is specified.

3. ~IF［ %構文解析した色 ~EQ `失敗^i ］ ⇒ ~THROW `SyntaxError$E ◎ If parsed color is failure, throw a "SyntaxError" DOMException.

4. コレの~gradientに 次のようにされた新たな色停を加える ⇒＃ その色 ~SET %構文解析した色, それを配置する［ ~gradient全体に相対的な~offset ］ ~SET %offset ◎ Place a new stop on the gradient, at offset offset relative to the whole gradient, and with the color parsed color.

   ~gradient上の同じ~offsetに複数の色停が追加された場合、 それらは，追加された順序で配置するモノトスル — 最初のものが~gradientの始端に最も近く，後続な各~色停は 無限小に終点に近づくように （その結果、 それらのうち最初と最後の色停~以外は，すべて無視される）。 ◎ If multiple stops are added at the same offset on a gradient, then they must be placed in the order added, with the first one closest to the start of the gradient, and each subsequent one infinitesimally further along towards the end point (in effect causing all but the first and last stop added at each point to be ignored).

`createLinearGradient(x0, y0, x1, y1)@2d ~method手続きは ⇒ ~RET 次を伴うように初期化された線型~gradientを表現する，`新たな$ `CanvasGradient$I ~obj ⇒＃ ~gradientの始点 ~SET ( %x0, %y0 ), ~gradientの終点 ~SET ( %x1, %y1 ) ◎ The createLinearGradient(x0, y0, x1, y1) method takes four arguments that represent the start point (x0, y0) and end point (x1, y1) of the gradient. The method, when invoked, must return a linear CanvasGradient initialized with the specified line.

線型~gradientは、 次に従って描画するモノトスル： ◎ Linear gradients＼

• ［ 始点, 終点に交叉する線 %l に垂直な線 %m ］上にある すべての点を［ %l 上の %m との交点の色 （上に述べた`補間と外挿$による色） ］で描画する。 ◎ must be rendered such that all points on a line perpendicular to the line that crosses the start and end points have the color at the point where those two lines cross (with the colors coming from the interpolation and extrapolation described above).＼
• ~gradient内の点は、 描画-時には，`変形n行列$により変形する。 ◎ The points in the linear gradient must be transformed as described by the current transformation matrix when rendering.
• ［ %x0 ~EQ %x1 ］~AND［ %y0 ~EQ %y1 ］の場合、 何も塗らない。 ◎ If x0 = x1 and y0 = y1, then the linear gradient must paint nothing.

放射型~gradientは、 次の手続きに従って描画するモノトスル： ◎ Radial gradients must be rendered by following these steps:

1. ( %dx, %dy, %dr ) ~LET ( %x1 ~MINUS %x0, %y1 ~MINUS %y0, %r1 ~MINUS %r0 ) ◎ ↓
2. ~IF［ %dx ~EQ 0 ］~AND［ %dy ~EQ 0 ］~AND［ %dr ~EQ 0 ］ ⇒ ~RET — この放射型~gradientは何も塗らないモノトスル。 ◎ If x0 = x1 and y0 = y1 and r0 = r1, then the radial gradient must paint nothing. Return.
3. `真円^op( ~omega ) ~LET 所与の実数 ~omega に対し，次で定義される真円を返す関数 ⇒＃ 半径 ~EQ %r0 ~PLUS ( %dr ~MUL ~omega ), 中心 ~EQ ( %x0 ~PLUS ( %dx ~MUL ~omega ), %y0 ~PLUS ( %dy ~MUL ~omega ) ) ◎ Let x(ω) = (x1-x0)ω + x0 ◎ Let y(ω) = (y1-y0)ω + y0 ◎ Let r(ω) = (r1-r0)ω + r0
4. `色^op( ~omega ) ~LET 所与の実数 ~omega に対し， （上で述べた`補間と外挿$による）~gradient上の位置 ~omega における色を返す関数 ◎ Let the color at ω be the color at that position on the gradient (with the colors coming from the interpolation and extrapolation described above).

5. すべての実数 ~omega のうち［ `真円^op( ~omega ) の半径 ~GT 0 ］になるものに対し， ~omega の降順に† ⇒ `真円^op( ~omega ) の周-を `色^op( ~omega ) で描く — ただし、 より大きい ~omega に対しすでに塗られた部分には塗らない†

   【 ~omega の範囲は無限になるが、 当然ながら，描画~結果に影響する範囲に限られる。 】【† この塗り順序が影響するのは、 具体的には，~vector ( %dx, %dy ) の長さが %dr の絶対値を超える場合になる — その場合、 より小さい ~omega による周-は，より大きい ~omega による周-で部分的に隠される。 】

   ◎ For all values of ω where r(ω) > 0, starting with the value of ω nearest to positive infinity and ending with the value of ω nearest to negative infinity, draw the circumference of the circle with radius r(ω) at position (x(ω), y(ω)), with the color at ω, but only painting on the parts of the bitmap that have not yet been painted on by earlier circles in this step for this rendering of the gradient.

注記： これは実質的に、 ~gradientの作成-時に定義された 2 個の真円に接する円錐を作成する （円錐の 始端~真円（ ~omega ~EQ 0.0 ）より前の部位には，最初の~offsetの色を利用し、 終端~真円（ ~omega ~EQ 1.0 ）より後の部位には，最後の~offsetの色を利用して）。 ~gradientは、 円錐の外側の区画には触れない （`透明な黒$）。 ◎ This effectively creates a cone, touched by the two circles defined in the creation of the gradient, with the part of the cone before the start circle (0.0) using the color of the first offset, the part of the cone after the end circle (1.0) using the color of the last offset, and areas outside the cone untouched by the gradient (transparent black).

描画-時には、 結果の放射型~gradientは，`変形n行列$で変形するモノトスル。 ◎ The resulting radial gradient must then be transformed as described by the current transformation matrix when rendering.

`createConicGradient(startAngle, x, y)@2d ~method手続きは ⇒ ~RET 次を伴うように初期化された円錐型~gradientを表現する，`新たな$ `CanvasGradient$I ~obj ⇒＃ ~gradientが始まる角度 ~SET %startAngle ~radian, ~gradientの中心 ~SET ( %x `px$css, %y `px$css ) ◎ The createConicGradient(startAngle, x, y) method takes three arguments, the first argument, startAngle, represents the angle in radians at which the gradient begins, and the last two arguments, (x, y), represent the center of the gradient in CSS pixels. The method, when invoked, must return a conic CanvasGradient initialized with the specified center and angle.

円錐型~gradientは、 ~CSSの `conic-gradient()$v と同じ描画~規則に従い，次の~CSS値と等価になる ⇒ conic-gradient(from %A`rad^css at %x`px^css %y`px^css, %L) — ここで： ◎ It follows the same rendering rule as CSS 'conic-gradient' and it is equivalent to CSS 'conic-gradient(from adjustedStartAnglerad at xpx ypx, angularColorStopList)'. Here:

• %A は ⇒ %startAngle ~PLUS ( π ~DIV 2 ) ◎ adjustedStartAngle is given by startAngle + π/2;
• %L は ⇒ `addColorStop()$m を利用して `CanvasGradient$I に追加された色停たちが成す~list — 各 色停の~offset（ %offset 引数）は、 百分率として解釈する。 ◎ angularColorStopList is given by the color stops that have been added to the CanvasGradient using addColorStop(), with the color stop offsets interpreted as percentages.

`createPattern(image, repetition)@2d ~method手続きは： ◎ The createPattern(image, repetition) method, when invoked, must run these steps:

1. ~IF［ `画像~引数は利用-可能か検査する$( %image ) ~EQ `不良^i ］ ⇒ ~RET ~NULL ◎ Let usability be the result of checking the usability of image. ◎ If usability is bad, then return null. ◎ Assert: usability is good.
2. ~IF［ %repetition ~EQ 空~文字列 ］ ⇒ %repetition ~SET `repeat^l ◎ If repetition is the empty string, then set it to "repeat".
3. ~IF［ %repetition ~NIN【！identical】 { `repeat^l , `repeat-x^l , `repeat-y^l , `no-repeat^l } ］ ⇒ ~THROW `SyntaxError$E ◎ If repetition is not identical to one of "repeat", "repeat-x", "repeat-y", or "no-repeat", then throw a "SyntaxError" DOMException.
4. %pattern ~LET 次を伴う，`新たな$ `CanvasPattern$I ~obj ⇒＃ `画像$paT ~SET %image, `繰返しの挙動$paT ~SET %repetition ◎ Let pattern be a new CanvasPattern object with the image image and the repetition behavior given by repetition.
5. ~IF［ %image `引数は生成元cleanでない$ ］ ⇒ %pattern の`生成元cleanか$paT ~SET ~F ◎ If image is not origin-clean, then mark pattern as not origin-clean.
6. ~RET %pattern ◎ Return pattern.

%pattern を作成するために利用した %image が，この~methodの~call後に改変されても、 %pattern により描画される~patternには影響しないモノトスル。 ◎ Modifying the image used when creating a CanvasPattern object after calling the createPattern() method must not affect the pattern(s) rendered by the CanvasPattern object.

`setTransform(transform)@m ~method手続きは： ◎ （上の “変形n行列” へ移動） Patterns have a transformation matrix, which controls how the pattern is used when it is painted. Initially, a pattern's transformation matrix must be the identity matrix. ◎ The setTransform(transform) method, when invoked, must run these steps:

1. %行列 ~LET `新たな$ `DOMMatrix$I ◎ ↓
2. `行列を~2D辞書で初期化する$( %行列, %transform ) ◎ Let matrix be the result of creating a DOMMatrix from the 2D dictionary transform.
3. ~IF［ %行列 の［ `m11$, `m12$, `m21$, `m22$, `m41$, `m42$ ］成分のいずれかは`有限$でない ］ ⇒ ~RET ◎ If one or more of matrix's m11 element, m12 element, m21 element, m22 element, m41 element, or m42 element are infinite or NaN, then return.
4. コレの`変形n行列$paT 【！現在の変形n行列】 ~SET %行列 ◎ Reset the pattern's transformation matrix to matrix.

ある区画の中に~pattern %~pattern を描画するときは、 次の手続きを走らせて何が描画されるかを決定するモノトスル： ◎ When a pattern is to be rendered within an area, the user agent must run the following steps to determine what is rendered:

1. %~bitmap ~LET 無限に広い, `透明な黒$にされた，新たな~bitmap ◎ Create an infinite transparent black bitmap.
2. %画像 ~LET %~pattern の`画像$paT ◎ ↓

3. 次に従って， %~bitmap に %画像 の複製を配置する — 以下では、［ %画像 の~sizeにおける 1 `px$css は %~bitmap の 1 座標~空間~単位を成す ］と解釈する： ◎ ↓

   1. まず、 %画像 の左上~隅が %~bitmap の座標~空間の原点に一致するように%画像 を配置する ◎ Place a copy of the image on the bitmap, anchored such that its top left corner is at the origin of the coordinate space, with one coordinate space unit per CSS pixel of the image,＼
   2. %~pattern の`繰返しの挙動$paTに応じて， %画像 の複製を次に与える方向に繰返すように配置する ⇒＃ `repeat-x^l ならば 左右方向 ／ `repeat-y^l ならば 上下方向／ `repeat^l ならば上下左右方向すべて ／ ~ELSE_ 繰返さない ◎ then place repeated copies of this image horizontally to the left and right, if the repetition behavior is "repeat-x", or vertically up and down, if the repetition behavior is "repeat-y", or in all four directions all over the bitmap, if the repetition behavior is "repeat".

   %画像 の元の~dataが~bitmap画像である場合、 繰返しの区画~内の点に塗られる値は，元の画像~dataを次のように~filterして算出される： ◎ If the original image data is a bitmap image, then the value painted at a point in the area of the repetitions is computed by filtering the original image data.＼

   • %画像 を拡大するときは、 ~UAは， `imageSmoothingEnabled$2d 属性の値に応じて：

     • ~F ならば、 最近傍~補間を利用して描画するモノトスル。
     • ~T ならば、 数ある~filter法のうち，どの~algoを利用してもヨイ （例えば、双線型~補間や最近傍~補間）。
     ◎ When scaling up, if the imageSmoothingEnabled attribute is set to false, then the image must be rendered using nearest-neighbor interpolation. Otherwise, the user agent may use any filtering algorithm (for example bilinear interpolation or nearest-neighbor).＼
   • 複数の~filter法を~supportする~UAは、 `imageSmoothingQuality$2d 属性の値を目安に~filter法を選んでもヨイ。 ◎ User agents which support multiple filtering algorithms may use the value of the imageSmoothingQuality attribute to guide the choice of filtering algorithm.＼
   • そのような~filter法において［ 元の画像~dataの外側にある画素の値 ］が要求される場合、 代わりに，［ 各~画素の座標を元の画像の寸法で折返して得られる値 ］を利用するモノトスル （すなわち，この~filterは、 %~pattern の`繰返しの挙動$paTに関わらず， `repeat^v による挙動を利用する）。 ◎ When such a filtering algorithm requires a pixel value from outside the original image data, it must instead use the value from wrapping the pixel's coordinates to the original image's dimensions. (That is, the filter uses 'repeat' behavior, regardless of the value of the pattern's repetition behavior.)
4. %~bitmap を %~pattern の`変形n行列$paTで変形する ◎ Transform the resulting bitmap according to the pattern's transformation matrix.
5. %~bitmap を【！＊】`変形n行列$で変形する ◎ Transform the resulting bitmap again, this time according to the current transformation matrix.
6. %画像 の一部を成していて，［ %~pattern が描画されることになる区画の外側 ］にあるものは、 `透明な黒$に置換する 【これは何を意味する？】 ◎ Replace any part of the image outside the area in which the pattern is to be rendered with transparent black.
7. ~RET %~bitmap （これが、同じ原点, 同じ縮尺で描画されるものになる。） ◎ The resulting bitmap is what is to be rendered, with the same origin and same scale.

`clearRect(x, y, w, h)@2d ~method手続きは： ◎ The clearRect(x, y, w, h) method, when invoked, must run these steps:

1. ~IF［ いずれかの引数は`有限$でない ］ ⇒ ~RET ◎ If any of the arguments are infinite or NaN, then return.
2. ［ 引数に指定された矩形と 現在の`切抜き領域$との交差域 ］内にある全~画素を`透明な黒$にする ◎ Let pixels be the set of pixels in the specified rectangle that also intersect the current clipping region. ◎ Clear the pixels in pixels to a transparent black, erasing any previous image.

注記： %w, %h のいずれかが 0 の場合、 交差域は空になるので，この~methodの効果はない。 ◎ If either height or width are zero, this method has no effect, since the set of pixels would be empty.

`fillRect(x, y, w, h)@2d ~method手続きは： ◎ The fillRect(x, y, w, h) method, when invoked, must run these steps:

1. ~IF［ いずれかの引数は`有限$でない ］ ⇒ ~RET ◎ If any of the arguments are infinite or NaN, then return.
2. ~IF［ %w ~EQ 0 ］~OR［ %h ~EQ 0 ］ ⇒ ~RET ◎ If either w or h are zero, then return.
3. コレの`~fill~style$2Dを利用して，指定された矩形な区画を塗る ◎ Paint the specified rectangular area using this's fill style.

`strokeRect(x, y, w, h)@2d ~method手続きは： ◎ The strokeRect(x, y, w, h) method, when invoked, must run these steps:

1. ~IF［ いずれかの引数は`有限$でない ］ ⇒ ~RET ◎ If any of the arguments are infinite or NaN, then return.
2. ~IF［ %w ~EQ 0 ］~AND［ %h ~EQ 0 ］ ⇒ ~RET ◎ Take the result of tracing the path described below, using the CanvasPathDrawingStyles interface's line styles, and fill it with this's stroke style. • If both w and h are zero, the path has a single subpath with just one point (x, y), and no lines, and this method thus has no effect (the trace a path algorithm returns an empty path in that case). ◎ ↓↓
3. %~path ~LET 新たな空~path ◎ ↓
4. ~IF［ %w ~EQ 0 ］~OR［ %h ~EQ 0 ］ ⇒ %~path に［ 次の 2 個の点を直線で接続する下位path ］を追加する ⇒＃ ( %x, %y ), ( %x ~PLUS %w, %y ~PLUS %h ) ◎ If just one of either w or h is zero, then the path has a single subpath consisting of two points, with coordinates (x, y) and (x+w, y+h), in that order, connected by a single straight line.
5. ~ELSE ⇒ %~path に［ 次の 4 個の点を順に直線で接続する下位path ］を追加する ⇒＃ ( %x, %y ), ( %x ~PLUS %w, %y ), ( %x ~PLUS %w, %y ~PLUS %h ), ( %x, %y ~PLUS %h ) ◎ Otherwise, the path has a single subpath consisting of four points, with coordinates (x, y), (x+w, y), (x+w, y+h), and (x, y+h), connected to each other in that order by straight lines.
6. %~path ~SET `~pathをナゾる$( %~path, コレ＜`CanvasPathDrawingStyles$I＞ ) ◎ ↑
7. %~path をコレ＜`CanvasFillStrokeStyles$I＞の`~stroke~style$2Dで~fillする ◎ ↑

［ `fillText(text, x, y, maxWidth)@2d ／ `strokeText(text, x, y, maxWidth)@2d ］~methodは、 現在の［ `font$2d, `textAlign$2d, `textBaseline$2d ］値を利用して， 所与の %text を座標 ( %x, %y ) に描画する。 加えて， %maxWidth が指定されている場合は、 %text が それより幅広に描画されないように確保する。 ◎ The fillText(text, x, y, maxWidth) and strokeText(text, x, y, maxWidth) methods render the given text at the given (x, y) coordinates ensuring that the text isn't wider than maxWidth if specified, using the current font, textAlign, and textBaseline values.＼

これらの~method手続きは： ◎ Specifically, when the methods are invoked, the user agent must run these steps:

1. ~IF［ いずれかの引数は`有限$でない ］ ⇒ ~RET ◎ If any of the arguments are infinite or NaN, then return.
2. %最大-横幅 ~LET ［ %maxWidth ~NEQ ε ならば %maxWidth ／ ~ELSE_ `無限大^i ］ ◎ ↓
3. %~glyph列 ~LET 次の結果を成す図形~list ⇒ `~textを準備する$( %text, コレ＜`CanvasPathDrawingStyles$I＞, %最大-横幅 ) ◎ Run the text preparation algorithm, passing it text, the object implementing the CanvasText interface, and, if the maxWidth argument was provided, that argument. Let glyphs be the result.

4. %~glyph列 を成す すべての~glyphの図形を塗る — その際の各~図形に対しては： ◎ ↓

   • その~size 1 `px$css は、 座標~空間における 1 単位を成すとする ◎ ↓
   • ( %x, %y ) だけ ( 右へ, 下へ ) へ移動した上で，`変形n行列$で変形する ◎ Move all the shapes in glyphs to the right by x CSS pixels and down by y CSS pixels. ◎ Paint the shapes given in glyphs, as transformed by the current transformation matrix, with each CSS pixel in the coordinate space of glyphs mapped to one coordinate space unit.
   • `fillText()$2d の下では、 コレの`~fill~style$2Dを適用する一方で， コレの`~stroke~style$2Dは無視する ◎ For fillText(), this's fill style must be applied to the shapes and this's stroke style must be ignored.＼
   • `strokeText()$2d の下では，逆に、 コレの`~fill~style$2Dは無視する一方で， 次の結果にコレの`~stroke~style$2Dを適用する ⇒ `~pathをナゾる$( 図形, コレ＜`CanvasPathDrawingStyles$I＞ ~obj ) ◎ For strokeText(), the reverse holds: this's stroke style must be applied to the result of tracing the shapes using the object implementing the CanvasText interface for the line styles, and this's fill style must be ignored.
   • 現在の~pathには影響しない ◎ These shapes are painted without affecting the current path, and＼
   • ［ `影~効果$ ／ `大域~alpha$2D ／ `切抜き領域$ ／ `現在の組成~混色~演算子$2D ］の~subjectになる ◎ are subject to shadow effects, global alpha, the clipping region, and the current compositing and blending operator.

◎追跡路 `measureText(text)@2d ~method手続きは： ◎ (This is a tracking vector.) The measureText(text) method steps are to＼

1. %行内~box ~LET 次の結果を成す`行内~box$ ⇒ `~textを準備する$( %text, コレ＜`CanvasPathDrawingStyles$I＞, `無限大^i ) ◎ run the text preparation algorithm, passing it text and the object implementing the CanvasText interface, and then＼
2. ~RET `新たな$ `TextMetrics$I ~obj ⇒ その各~memberは、 ( %text, %行内~box ) を利用して下に述べるように挙動するとする `CSS$r ◎ using the returned inline box must return a new TextMetrics object with members behaving as described in the following list: [CSS]

上で返す `TextMetrics$I ~objの各~memberは、 以下に従う — 以下に現れる “距離” （その語義に反して，負な値もとり得る）は、 すべて `px$css 単位で測定される数を表すとする： ◎ ↑↓

`width@tM

%行内~box の横幅（ %text の送幅）を測定した距離を返す。 ◎ The width of that inline box, in CSS pixels. (The text's advance width.)

`actualBoundingBoxLeft@tM

基底線に平行な，［ `textAlign$2d 属性により与えられる整列~点 ］から［ %text の限界~矩形の左端 ］までの距離を返す — 正な距離は所与の整列~点から左へ向かうことを指示する。 ◎ The distance parallel to the baseline from the alignment point given by the textAlign attribute to the left side of the bounding rectangle of the given text, in CSS pixels; positive numbers indicating a distance going left from the given alignment point.

注記： この値と `actualBoundingBoxRight$tM 値の総和は、 %行内~box の横幅（ `width$tM ）より幅広になり得る — 特に，傾いた~fontにおいて，各~文字がその送幅より張り出す所では。 ◎ The sum of this value and the next (actualBoundingBoxRight) can be wider than the width of the inline box (width), in particular with slanted fonts where characters overhang their advance width.

`actualBoundingBoxRight@tM

基底線に平行な，［ `textAlign$2d 属性により与えられる整列~点 ］から［ %text の限界~矩形の右端 ］までの距離を返す — 正な距離は、 所与の整列~点から右へ向かうことを指示する。 ◎ The distance parallel to the baseline from the alignment point given by the textAlign attribute to the right side of the bounding rectangle of the given text, in CSS pixels; positive numbers indicating a distance going right from the given alignment point.

`fontBoundingBoxAscent@tM

［ `textBaseline$2d 属性により指示される水平線 ］から［ `可用な最初の~font$の`~ascent計量$ ］までの距離を返す — 正な距離は、 所与の基底線から上へ向かうことを指示する。 ◎ The distance from the horizontal line indicated by the textBaseline attribute to the ascent metric of the first available font, in CSS pixels; positive numbers indicating a distance going up from the given baseline.

注記： この値と その次の値は、［ 描画される正確な~textが変化しても，縦幅は一貫する必要がある背景 ］の描画-時に有用になる。 また，［ `actualBoundingBoxAscent$tM ／ `actualBoundingBoxDescent$tM ］属性は、 特定の~textの周りに限界~boxを描くときに有用になる。 ◎ This value and the next are useful when rendering a background that have to have a consistent height even if the exact text being rendered changes. The actualBoundingBoxAscent attribute (and its corresponding attribute for the descent) are useful when drawing a bounding box around specific text.

`fontBoundingBoxDescent@tM

［ `textBaseline$2d 属性により指示される水平線 ］から［ `可用な最初の~font$の`~ascent計量$ ］までの距離を返す — 正な距離は、 所与の基底線から下へ向かうことを指示する。 ◎ The distance from the horizontal line indicated by the textBaseline attribute to the descent metric of the first available font, in CSS pixels; positive numbers indicating a distance going down from the given baseline.

`actualBoundingBoxAscent@tM

［ `textBaseline$2d 属性により指示される水平線 ］から［ %text の限界~矩形の上端 ］までの距離を返す — 正な距離は、 所与の基底線から上へ向かうことを指示する。 ◎ The distance from the horizontal line indicated by the textBaseline attribute to the top of the bounding rectangle of the given text, in CSS pixels; positive numbers indicating a distance going up from the given baseline.

注記： この数は、 入力~textに基づいて著しく変わり得る — 指定された最初の~fontが入力を成すすべての文字を受持つ場合でも。 例えば，小文字 "o" の `alphabetic$bL 基底線からの `actualBoundingBoxAscent$tM は、 大文字 "F" のそれより小さくなる。 この値は容易に負にもなり得る — 例えば、 %text は~comma `,^l 1 個だけのときの［ ~em~boxの上端（ `textBaseline$2d 値 `top$l ） ］から［ 限界~矩形の上端 ］までの距離は， （ ~fontがよほど異例のものでない限り）負になる見込みが高い。 ◎ This number can vary greatly based on the input text, even if the first font specified covers all the characters in the input. For example, the actualBoundingBoxAscent of a lowercase "o" from an alphabetic baseline would be less than that of an uppercase "F". The value can easily be negative; for example, the distance from the top of the em box (textBaseline value "top") to the top of the bounding rectangle when the given text is just a single comma "," would likely (unless the font is quite unusual) be negative.

`actualBoundingBoxDescent@tM

［ `textBaseline$2d 属性により指示される水平線 ］から［ %text の限界~矩形の下端 ］までの距離を返す — 正な距離は、 所与の基底線から下へ向かうことを指示する。 ◎ The distance from the horizontal line indicated by the textBaseline attribute to the bottom of the bounding rectangle of the given text, in CSS pixels; positive numbers indicating a distance going down from the given baseline.

`emHeightAscent@tM

［ `textBaseline$2d 属性により指示される水平線 ］から［ `行内~box$内の~em平方の最も高い上端 ］までの距離を返す — 正な数は、 所与の基底線が［ その~em平方の上端 ］より下にあることを指示する （なので、この値は通例的に正になる）。 所与の基底線がその~em平方の［ 上端／真中 ］にあるならば、［ 0 ／ ~font~sizeの半分 ］になる。 ◎ The distance from the horizontal line indicated by the textBaseline attribute to the highest top of the em squares in the inline box, in CSS pixels; positive numbers indicating that the given baseline is below the top of that em square (so this value will usually be positive). Zero if the given baseline is the top of that em square; half the font size if the given baseline is the middle of that em square.

`emHeightDescent@tM

［ `textBaseline$2d 属性により指示される水平線 ］から［ `行内~box$内の~em平方の最も低い下端 ］までの距離を返す — 正な数は、 所与の基底線が~em平方の下端より上にあることを指示する （所与の基底線が~em平方の下端にあるならば、 0 になる）。 ◎ The distance from the horizontal line indicated by the textBaseline attribute to the lowest bottom of the em squares in the inline box, in CSS pixels; positive numbers indicating that the given baseline is above the bottom of that em square. (Zero if the given baseline is the bottom of that em square.)

`hangingBaseline@tM

［ `textBaseline$2d 属性により指示される水平線 ］から［ `行内~box$の `hanging$bL 基底線 ］までの距離を返す — 正な数は、 所与の基底線が `hanging$bL 基底線より下にあることを指示する。 （所与の基底線がその~em平方の `hanging$bL 基底線ならば、 0 になる。） ◎ The distance from the horizontal line indicated by the textBaseline attribute to the hanging baseline of the inline box, in CSS pixels; positive numbers indicating that the given baseline is below the hanging baseline. (Zero if the given baseline is the hanging baseline.)

`alphabeticBaseline@tM

`hanging$bL を `alphabetic$bL に読み替える下で、 `hangingBaseline$tM と同じ。 ◎ The distance from the horizontal line indicated by the textBaseline attribute to the alphabetic baseline of the inline box, in CSS pixels; positive numbers indicating that the given baseline is below the alphabetic baseline. (Zero if the given baseline is the alphabetic baseline.)

`ideographicBaseline@tM

`hanging$bL を `ideographic-under$bL に読み替える下で、 `hangingBaseline$tM と同じ。 ◎ The distance from the horizontal line indicated by the textBaseline attribute to the ideographic-under baseline of the inline box, in CSS pixels; positive numbers indicating that the given baseline is below the ideographic-under baseline. (Zero if the given baseline is the ideographic-under baseline.)

注記： `fillText()$2d ／ `strokeText()$2d を利用して描画された~glyphたちは、 ~font~sizeにより与えられる~box（~em平方~size）や, `measureText()$2d （ ~text横幅 ）から返される横幅をはみ出し得る。 作者には、 これが課題になる場合には，上に述べた限界~box値を利用することが奨励される。 ◎ Glyphs rendered using fillText() and strokeText() can spill out of the box given by the font size (the em square size) and the width returned by measureText() (the text width). Authors are encouraged to use the bounding box values described above if this is an issue.

注記： ~2D文脈~APIの将来~versionは、 ~CSSを利用して描画された［ 文書の断片 ］を~canvasに~~直に描画する仕方を供するかもしれない。 これは、［ 複数行~layoutを行うときに選好される専用の仕方 ］として供されることになるであろう。 ◎ A future version of the 2D context API might provide a way to render fragments of documents, rendered using CSS, straight to the canvas. This would be provided in preference to a dedicated way of doing multiline layout.

`fill(fillRule)@2d ~method手続きは ⇒ `~fill手続き$( コレ, ~NULL, %fillRule ) ◎ The fill(fillRule) method steps are to run the fill steps given this, null, and fillRule.

`fill(path, fillRule)@2d1 ~method手続きは ⇒ `~fill手続き$( コレ, %path, %fillRule ) ◎ The fill(path, fillRule) method steps are to run the fill steps given this, path, and fillRule.

`~fill手続き@ は、所与の ( `CanvasDrawPath$I %文脈, ［ `Path2D$I ／ ~NULL ］ %path, %fillRule ) に対し ⇒ ［ %文脈＜`CanvasFillStrokeStyles$I＞ の`~fill~style$2D, %fillRule に指示された`~fill規則$ ］を利用して，［ %path に`意図された~path$を成すすべての下位path ］を~fillする — ~fill時には、 開な下位pathは暗黙的に閉じるとする （実際の下位pathに影響することなく） ◎ The fill steps, given a CanvasDrawPath context, a Path2D-or-null path, and a fill rule fillRule, are to fill all the subpaths of the intended path for path, using context's fill style, and using the fill rule indicated by fillRule. Open subpaths must be implicitly closed when being filled (without affecting the actual subpaths).

`~stroke手続き@ は、所与の ( `CanvasDrawPath$I %文脈, ［ `Path2D$I ／ ~NULL ］ %path ) に対し：

1. %~path図形 ~LET `~pathをナゾる$( %path に`意図された~path$, %文脈＜`CanvasPathDrawingStyles$I＞ )
2. ［ %文脈＜`CanvasFillStrokeStyles$I＞ の`~fill~style$2D, `nonzero$l 巻数~規則 ］を利用して， %~path図形 を~fillする

`~clip手続き@ は、所与の ( `CanvasDrawPath$I %文脈, ［ `Path2D$I ／ ~NULL ］ %path, %fillRule ) に対し：

1. 現在の `切抜き領域@ を［ 次に与える新たな`切抜き領域$ ］に置換する ⇒ %fillRule に指示された`~fill規則$を利用して，［ 現在の切抜き領域, %path に`意図された~path$が述べる区画 ］の交差域を計算した結果 — 区画を算出する際には、 `意図された~path$を成す開な下位pathは，実際の下位pathに影響することなく暗黙的に閉じるとする ◎ The clip steps, given a CanvasDrawPath context, a Path2D-or-null path, and a fill rule fillRule, are to create a new clipping region by calculating the intersection of context's current clipping region and the area described by the intended path for path, using the fill rule indicated by fillRule. Open subpaths must be implicitly closed when computing the clipping region, without affecting the actual subpaths. The new clipping region replaces the current clipping region.

%文脈 の初期化-時には、 その現在の`切抜き領域$を無限に広い面に設定するモノトスル （すなわち、 既定では，切抜きは生じない）。 ◎ When the context is initialized, its current clipping region must be set to the largest infinite surface (i.e. by default, no clipping occurs).

`点は~path内か？手続き@ は、所与の ( `CanvasDrawPath$I %文脈, ［ `Path2D$I ／ ~NULL ］ %path, %x, %y, %fillRule ) に対し： ◎ The is point in path steps, given a CanvasDrawPath context, a Path2D-or-null path, two numbers x and y, and a fill rule fillRule, are:

1. ~IF［ %x, %y いずれかは`有限$でない ］ ⇒ ~RET ~F ◎ If x or y are infinite or NaN, then return false.

2. ~RET ~IS［ 点 ( %x, %y ) は %path に`意図された~path$の内側にある ］

   内側にあるかどうかは、 次に従って決定する：

   • 点は、 現在の変形nに影響されない，~canvas座標~空間~内の座標として扱う
   • %fillRule に指示された`~fill規則$に従う
   • 区画の内側を与える~pathの算出-時には、 開な下位pathは，実際~下位pathに影響することなく暗黙的に閉じる。
   • ~path上の点は内側にあると見なす
   ◎ If the point given by the x and y coordinates, when treated as coordinates in the canvas coordinate space unaffected by the current transformation, is inside the intended path for path as determined by the fill rule indicated by fillRule, then return true. Open subpaths must be implicitly closed when computing the area inside the path, without affecting the actual subpaths. Points on the path itself must be considered to be inside the path. ◎ Return false.

`点は~stroke内か？手続き@ は、所与の ( `CanvasDrawPath$I %文脈, ［ `Path2D$I ／ ~NULL ］ %path, %x, %y ) に対し： ◎ The is point in stroke steps, given a CanvasDrawPath context, a Path2D-or-null path, and two numbers x and y, are:

1. ~IF［ %x, %y いずれかは`有限$でない ］ ⇒ ~RET ~F ◎ If x or y are infinite or NaN, then return false.
2. %~path図形 ~LET `~pathをナゾる$( %path に`意図された~path$, %文脈＜`CanvasPathDrawingStyles$I＞ )

3. ~RET ~IS［ 点 ( %x, %y ) は %~path図形 の内側にある ］

   内側にあるかどうかは、 次に従って決定する：

   • `nonzero$l 巻数~規則を利用する
   • 点は、 現在の変形nに影響されない，~canvas座標~空間~内の座標として扱う
   • ~path上の点は内側にあると見なす
   ◎ If the point given by the x and y coordinates, when treated as coordinates in the canvas coordinate space unaffected by the current transformation, is inside the path that results from tracing the intended path for path, using the nonzero winding rule, and using context's line styles as set by its CanvasPathDrawingStyles mixin, then return true. Points on the resulting path must be considered to be inside the path. ◎ Return false.

`drawFocusIfNeeded(element)@2d ~method手続きは： ◎ The drawFocusIfNeeded(element) method, when invoked, must run these steps:

1. ~IF［ %element は`~focusされて$いない ］~OR［ %element はコレ＜`~2D描画~文脈$＞を束縛している `canvas$e 要素の子孫でない ］ ⇒ ~RET ◎ If element is not focused or is not a descendant of the element with whose context the method is associated, then return.

2. ~platform規約に従って、 ~focus環を，適切な~styleで`意図された~path$に沿うように描く ◎ Draw a focus ring of the appropriate style along the intended path, following platform conventions.

   注記： 一部の~platformでは、 ~keyboardから~focusされた要素に限り，その周りに~focus環を描く — ~mouseから~focusされた場合には描かない。 他の~platformは、 一部の要素の周りには — 関連な~accessibility特能が可能化されていない限り — 単純に，~focus環をまったく描かない。 この~APIは、 これらの規約に従うものと意図されている。 要素が~focusされた方式に基づく区別を実装する~UAは、 `focus()$m ~methodにより駆動された~focusを — その~callを誘発した利用者~対話~eventがあれば — ~eventの種類に基づいて，類別することが奨励される。 ◎ Some platforms only draw focus rings around elements that have been focused from the keyboard, and not those focused from the mouse. Other platforms simply don't draw focus rings around some elements at all unless relevant accessibility features are enabled. This API is intended to follow these conventions. User agents that implement distinctions based on the manner in which the element was focused are encouraged to classify focus driven by the focus() method based on the kind of user interaction event from which the call was triggered (if any).

   ~focus環は、［ `影~効果$／ `大域~alpha$2D／ `現在の組成~混色~演算子$2D／ `~fill~style$2D／ `~stroke~style$2D／ `CanvasPathDrawingStyles$I ~interfaceの各~member／ `CanvasTextDrawingStyles$I ~interfaceの各~member ］の~subjectにされるべきでないが、 `切抜き領域$の~subjectにされるべきである。 （上に述べた変形nの効果は、 どの~pathが利用されているかに基づいて変わる。） ◎ The focus ring should not be subject to the shadow effects, the global alpha, the current compositing and blending operator, the fill style, the stroke style, or any of the members in the CanvasPathDrawingStyles, CanvasTextDrawingStyles interfaces, but should be subject to the clipping region. (The effect of transformations is described above and varies based on which path is being used.)

3. `~event~loop$が次回に`描画を更新する$ 段に達するまでに，［ `意図された~path$の所在に~focusがあること ］を`利用者に伝える$ようにしておく ◎ Inform the user that the focus is at the location given by the intended path. User agents may wait until the next time the event loop reaches its update the rendering step to optionally inform the user.

~focus環を描くときは、 ~UAは，`意図された~path$を成す開な下位pathを暗黙的に閉じるべきでない。 ◎ User agents should not implicitly close open subpaths in the intended path when drawing the focus ring.

注記： しかしながら、 これは無為な要件かもしれない。 例えば，当の~focus環が［ `意図された~path$の周りに，軸に整列された限界~矩形 ］として描かれる場合、 下位pathが閉じられるかどうかによる効果はない。 この仕様は、［ ~focus環がどう描かれるか ］を意図的に精確に指定しない。 ~UAには、 各自の~platformに~nativeな規約を尊守することが期待される。 ◎ This might be a moot point, however. For example, if the focus ring is drawn as an axis-aligned bounding rectangle around the points in the intended path, then whether the subpaths are closed or not has no effect. This specification intentionally does not specify precisely how focus rings are to be drawn: user agents are expected to honor their platform's native conventions.

`scrollPathIntoView(path)@2d ~method手続きは： ◎ The scrollPathIntoView() method, when invoked, must run these steps:

1. %指定された矩形 ~LET `意図された~path$の限界~boxが成す矩形 ◎ Let specifiedRectangle be the rectangle of the bounding box of the intended path.
2. %観念上の子 ~LET ［ コレ＜`~2D描画~文脈$＞を束縛している `canvas$e 要素の描画される子を成し， %指定された矩形 に等しい寸法で描画される ］ような、 ある仮の要素 ◎ Let notionalChild be a hypothetical element that is a rendered child of the canvas element whose dimensions are those of specifiedRectangle.
3. %観念上の子 を`~viewの中へ~scrollする$( `auto^l, `start^l, `nearest^l ) ◎ Scroll notionalChild into view with behavior set to "auto", block set to "start", and inline set to "nearest".
4. 任意選択で ⇒ `~event~loop$が次回に`描画を更新する$段に達するまでに，［ ~caretや選択（両者もあり）は、 当の~canvasの %指定された矩形 を覆っている ］ことを`利用者に伝える$ようにしておく ◎ Optionally, inform the user that the caret or selection (or both) cover specifiedRectangle of the canvas. The user agent may wait until the next time the event loop reaches its update the rendering step to optionally inform the user.

1. ~IF［ %image 以外の引数に`有限$でないものがある ］ ⇒ ~RET ◎ If any of the arguments are infinite or NaN, then return.
2. ~IF［ `画像~引数は利用-可能か検査する$( %image ) ~EQ `不良^i ］ ⇒ ~RET （何も描かない。） ◎ Let usability be the result of checking the usability of image. ◎ If usability is bad, then return (without drawing anything).
3. %出力~bitmap ~LET コレ＜`~2D描画~文脈$＞の［ `出力~bitmap$2D／`出力~bitmap$iBM ］ 【！https://github.com/whatwg/html/issues/3364】 ◎ ↓↓
4. %画像 ~LET %image の~source画像 ◎ ↓↓

5. （この段は、与えられなかった引数を拡充する） — この段においては、［ %画像 の~sizeにおける 1 `px$css は %出力~bitmap の 1 画素の~sizeを成す ］ものと解釈する：

   1. ~IF［ (A) ／ (B) による引数で呼出されている ］：

      1. ( %sx, %sy, %sw, %sh ) ~LET ( 0, 0, 0, 0 )
      2. ~IF［ %画像 には`生来な寸法$は在る ］ ⇒ ( %sw, %sh ) ~SET ( %画像 の`生来な横幅$, %画像 の`生来な縦幅$ )
      3. ~ELSE ⇒ ( %sw, %sh ) ~SET 次を与える下で，`既定の~sizing~algo$【！具象-~obj~size解決】 `CSSIMAGES$r を利用して決定される`具象-~obj~size$ ⇒＃ `指定d~size$は横幅, 縦幅とも拘束なし, ~objの`生来な~size$【！~prop】 ~SET %image 引数のそれ, `既定の~obj~size$ ~SET %出力~bitmap の~size
   2. ~IF［ %sw ~EQ 0 ］~OR［ %sh ~EQ 0 ］ ⇒ ~RET （何も塗られない。）
   3. ~IF［ (A) による引数で呼出されている ］ ⇒ ( %dw, %dh ) ~LET ( %sw, %sh )
   ◎ ↓↓ Establish the source and destination rectangles as follows: ◎ If not specified, the dw and dh arguments must default to the values of sw and sh, interpreted such that one CSS pixel in the image is treated as one unit in the output bitmap's coordinate space.＼ If the sx, sy, sw, and sh arguments are omitted, then they must default to 0, 0, the image's natural width in image pixels, and the image's natural height in image pixels, respectively.＼ If the image has no natural dimensions, then the concrete object size must be used instead, as determined using the CSS "Concrete Object Size Resolution" algorithm, with the specified size having neither a definite width nor height, nor any additional constraints, the object's natural properties being those of the image argument, and the default object size being the size of the output bitmap. [CSSIMAGES]
6. %~source矩形 ~LET 各~隅が次の 4 個の点で与えられる矩形 ⇒ ( %sx, %sy ), ( %sx ~PLUS %sw, %sy ), ( %sx ~PLUS %sw, %sy ~PLUS %sh ), ( %sx, %sy ~PLUS %sh ) ◎ The source rectangle is the rectangle whose corners are the four points (sx, sy), (sx+sw, sy), (sx+sw, sy+sh), (sx, sy+sh).
7. %行先~矩形 ~LET 各~隅が次の 4 個の点で与えられる矩形 ⇒ ( %dx, %dy ), ( %dx ~PLUS %dw, %dy ), ( %dx ~PLUS %dw, %dy ~PLUS %dh ), ( %dx, %dy ~PLUS %dh ) ◎ The destination rectangle is the rectangle whose corners are the four points (dx, dy), (dx+dw, dy), (dx+dw, dy+dh), (dx, dy+dh).

8. ~IF［ %~source矩形 は %画像 の外側にはみ出ている ］ ⇒＃ %~source矩形 のはみ出た部分を切取る； %行先~矩形 も %~source矩形 と同じ~~縦横比になるよう切取る ◎ When the source rectangle is outside the source image, the source rectangle must be clipped to the source image and the destination rectangle must be clipped in the same proportion.

   注記： %行先~矩形 が %出力~bitmap の外側にはみ出る場合、 はみ出る画素は破棄される — 行先は無限~canvasで その描画は %出力~bitmap の寸法に切取られたかのように。 ◎ When the destination rectangle is outside the destination image (the output bitmap), the pixels that land outside the output bitmap are discarded, as if the destination was an infinite canvas whose rendering was clipped to the dimensions of the output bitmap.

9. 以下に従って，［ %画像 内の %~source矩形 が占める領域 ］を［ %出力~bitmap 内の %行先~矩形 に`変形n行列$を適用した結果の領域 ］に塗る： ◎ ↑↑ If one of the sw or sh arguments is zero, then return. Nothing is painted. ◎ Paint the region of the image argument specified by the source rectangle on the region of the rendering context's output bitmap specified by the destination rectangle, after applying the current transformation matrix to the destination rectangle.

   • 所与の寸法が負な場合でも、 画像~dataは 元の方向で処理すること。 ◎ The image data must be processed in the original direction, even if the dimensions given are negative.

   • 拡大-時には、 `imageSmoothingEnabled$2d 属性に応じて：

     ~T

     %画像 を成す~dataに，滑化する~algoを適用しようと試みるべきである。 ~algoとして複数の~filter法を~supportする~UAは、 `imageSmoothingQuality$2d 属性の値を目安に~filter法を選んでもヨイ。

     注記： この仕様は、 この場合に画像の拡縮-時に利用する精確な~algoは定義しない。

     ~F

     最近傍~補間を利用して，画像を描画する

     ◎ When scaling up, if the imageSmoothingEnabled attribute is set to true, the user agent should attempt to apply a smoothing algorithm to the image data when it is scaled. User agents which support multiple filtering algorithms may use the value of the imageSmoothingQuality attribute to guide the choice of filtering algorithm when the imageSmoothingEnabled attribute is set to true.＼ Otherwise, the image must be rendered using nearest-neighbor interpolation. ◎ This specification does not define the precise algorithm to use when scaling an image down, or when scaling an image up when the imageSmoothingEnabled attribute is set to true.

   • 注記： `canvas$e 要素を自身の上に描くときは、［ 要素を成す各部を自身に重合している各部に複製する ］のをアリにするため，［ 描く前に~sourceを複製する ］ことが`描法~model$に要求される。 ◎ When a canvas element is drawn onto itself, the drawing model requires the source to be copied before the image is drawn, so it is possible to copy parts of a canvas element onto overlapping parts of itself.

   • 元の画像~dataは~bitmap画像である場合、 %行先~矩形 内の点に塗られる値は， 元の画像~dataを~filterして算出される。 ~UAは、 数ある~filter法のうち，どの~algoを利用してもヨイ （例えば、双線型~補間や最近傍）。 ~filter法から元の画像~dataの外側にある画素の値が要求されるときは、 最も近傍の辺にある画素の値をそれに利用すること （すなわち、 ~filterには “辺に切詰める” 挙動を利用する）。 ~filter法から［ %~source矩形 の外側にあって，元の画像~dataの内側にある画素 ］の値が要求されるときは、 その画素の値を利用すること。 ◎ If the original image data is a bitmap image, then the value painted at a point in the destination rectangle is computed by filtering the original image data. The user agent may use any filtering algorithm (for example bilinear interpolation or nearest-neighbor). When the filtering algorithm requires a pixel value from outside the original image data, it must instead use the value from the nearest edge pixel. (That is, the filter uses 'clamp-to-edge' behavior.) When the filtering algorithm requires a pixel value from outside the source rectangle but inside the original image data, then the value from the original image data must be used.

     注記： したがって，部分, 全体どちらを成す画像に対しても、 拡縮-時の効果は同じになる。 これは、［ 1 枚の~sprite~sheetから来ている~spriteが拡縮される ］とき［ ~sprite~sheet内で隣接する画像が干渉し得る ］ことを意味する。 これは、 次のいずれかにより避けれる ⇒＃ 当の~sheet内の各~spriteの周りを`透明な黒$の~borderで囲うようにする／ 拡縮される~spriteを一時的な `canvas$e 要素の中に複製して，そこから拡縮された~spriteを描く ◎ Thus, scaling an image in parts or in whole will have the same effect. This does mean that when sprites coming from a single sprite sheet are to be scaled, adjacent images in the sprite sheet can interfere. This can be avoided by ensuring each sprite in the sheet is surrounded by a border of transparent black, or by copying sprites to be scaled into temporary canvas elements and drawing the scaled sprites from there.

   • 画像は、 現在の~pathに影響することなく塗られ，［ `影~効果$ ／ `大域~alpha$2D ／ `切抜き領域$ ／ `現在の組成~混色~演算子$2D ］の~subjectになる。 ◎ Images are painted without affecting the current path, and are subject to shadow effects, global alpha, the clipping region, and the current compositing and blending operator.
10. ~IF［ %image `引数は生成元cleanでない$ ］ ⇒ 【！the CanvasRenderingContext2D 】 %出力~bitmap の`生成元cleanか$ ~SET ~F ◎ If image is not origin-clean, then set the CanvasRenderingContext2D's origin-clean flag to false.

`new ImageData(sw, sh, settings)@iD 構築子~手続きは： ◎ The new ImageData(sw, sh, settings) constructor steps are:

1. ~IF［ %sw ~EQ 0 ］~OR［ %sh ~EQ 0 ］ ⇒ ~THROW `IndexSizeError$E ◎ If one or both of sw and sh are zero, then throw an "IndexSizeError" DOMException.
2. `画像~dataを初期化する$( ↓ ) ⇒＃ コレ, %sw, %sh, %settings ◎ Initialize this given sw, sh, and settings set to settings.
3. コレの全~画素を`透明な黒$に初期化する ◎ Initialize the image data of this to transparent black.

`new ImageData(data, sw, sh, settings)@iD1 構築子~手続きは： ◎ The new ImageData(data, sw, sh, settings) constructor steps are:

1. %長さ ~LET %data 内の~byte数 ◎ Let length be the number of bytes in data.
2. ~IF［ %長さ ~EQ 0 ］~OR［ %長さ は 4 の整数倍でない ］ ⇒ ~THROW `InvalidStateError$E ◎ If length is not a nonzero integral multiple of four, then throw an "InvalidStateError" DOMException.
3. %長さ ~SET %長さ ~DIV 4 ◎ Let length be length divided by four.

4. ~IF［ %長さ は %sw の整数倍でない ］ ⇒ ~THROW `IndexSizeError$E ◎ If length is not an integral multiple of sw, then throw an "IndexSizeError" DOMException.

   注記： この時点では［ %長さ ~GT 0 ］が保証されるので、［ %sw ~EQ 0 ］の場合も，この段で例外が投出されることになる。 ◎ At this step, the length is guaranteed to be greater than zero (otherwise the second step above would have aborted the steps), so if sw is zero, this step will throw the exception and return.

5. ~IF［ %sh ~EQ ε ］ ⇒ %sh ~SET %長さ ~DIV %sw ◎ Let height be length divided by sw.
6. ~ELIF［ %sh ~MUL %sw ~NEQ %長さ ］ ⇒ ~THROW `IndexSizeError$E ◎ If sh was given and its value is not equal to height, then throw an "IndexSizeError" DOMException.

7. `画像~dataを初期化する$( ↓ ) ⇒＃ コレ, %sw, %sh, %settings, %data ◎ Initialize this given sw, sh, settings set to settings, and source set to data.

   注記： この段は、 コレの `data$iD を %data の複製に設定しない — それは、 構築子に %data として渡された実際の `Uint8ClampedArray$I ~objに設定される。 ◎ This step does not set this's data to a copy of data. It sets it to the actual Uint8ClampedArray object passed as data.

`createImageData(sw, sh, settings)@2d ~method手続きは： ◎ The createImageData(sw, sh, settings) method steps are:

1. ~IF［ %sw ~EQ 0 ］~OR［ %sh ~EQ 0 ］ ⇒ ~THROW `IndexSizeError$E ◎ If one or both of sw and sh are zero, then throw an "IndexSizeError" DOMException.
2. %画像~data ~LET `新たな$ `ImageData$I ~obj ◎ Let newImageData be a new ImageData object.
3. `画像~dataを初期化する$( ↓ ) ⇒＃ %画像~data, %sw の絶対値, %sh の絶対値, %settings, ε, コレの`色~空間$2D ◎ Initialize newImageData given the absolute magnitude of sw, the absolute magnitude of sh, settings set to settings, and defaultColorSpace set to this's color space.
4. %画像~data の全~画素を`透明な黒$に初期化する ◎ Initialize the image data of newImageData to transparent black.
5. ~RET %画像~data ◎ Return newImageData.

`createImageData(imagedata)@2d1 ~method手続きは： ◎ The createImageData(imagedata) method steps are:

1. %画像~data ~LET `新たな$ `ImageData$I ~obj ◎ Let newImageData be a new ImageData object.
2. `画像~dataを初期化する$( ↓ ) ⇒＃ %画像~data, %imagedata の `width$iD 属性の値, %imagedata の `height$iD 属性の値, ε, ε, %imagedata の `colorSpace$iD 属性の値 ◎ Initialize newImageData given the value of imagedata's width attribute, the value of imagedata's height attribute, and defaultColorSpace set to the value of imagedata's colorSpace attribute.
3. %画像~data の全~画素を`透明な黒$に初期化する ◎ Initialize the image data of newImageData to transparent black.
4. ~RET %画像~data ◎ Return newImageData.

`getImageData(sx, sy, sw, sh, settings)@2d ~method手続きは： ◎ The getImageData(sx, sy, sw, sh, settings) method steps are:

1. ~IF［ %sw ~EQ 0 ］~OR［ %sh ~EQ 0 ］ ⇒ ~THROW `IndexSizeError$E ◎ If either the sw or sh arguments are zero, then throw an "IndexSizeError" DOMException.
2. ~IF［ コレの`生成元cleanか$ ~EQ ~F ］ ⇒ ~THROW `SecurityError$E ◎ If the CanvasRenderingContext2D's origin-clean flag is set to false, then throw a "SecurityError" DOMException.
3. %画像~data ~LET `新たな$ `ImageData$I ~obj ◎ Let imageData be a new ImageData object.
4. `画像~dataを初期化する$( ↓ ) ⇒＃ %画像~data, %sw 【負な場合は？】, %sh 【負な場合は？】, %settings, ε, コレの`色~空間$2D ◎ Initialize imageData given sw, sh, settings set to settings, and defaultColorSpace set to this's color space.
5. %矩形 ~LET 【！コレの`出力~bitmap$2Dの座標~空間~単位による，】 各~隅が次の 4 個の点で与えられる矩形 ⇒ ( %sx, %sy ), ( %sx ~PLUS %sw, %sy ), ( %sx ~PLUS %sw, %sy ~PLUS %sh ), ( %sx, %sy ~PLUS %sh ) ◎ Let the source rectangle be the rectangle whose corners are the four points (sx, sy), (sx+sw, sy), (sx+sw, sy+sh), (sx, sy+sh).

6. %画像~data を成す各~画素の値を次に従って設定する：

   • コレの`出力~bitmap$2D内の 【！コレの`出力~bitmap$2Dの座標~空間~単位による，】 %矩形 との交差域に入る画素 %画素 に対応する画素の値は ⇒ %画素 をコレの`色~空間$2Dから %画像~data の `colorSpace$iD に — 描画~意図 `relative-colorimetric$v を利用する下で — 変換した結果に設定する。
   • 他の画素はすべて`透明な黒$にする。
   ◎ Set the pixel values of imageData to be the pixels of this's output bitmap in the area specified by the source rectangle in the bitmap's coordinate space units, converted from this's color space to imageData's colorSpace using 'relative-colorimetric' rendering intent. ◎ Set the pixels values of imageData for areas of the source rectangle that are outside of the output bitmap to transparent black.
7. ~RET %画像~data ◎ Return imageData.

`画像~dataを初期化する@ ときは、所与の ⇒＃ `ImageData$I ~obj %画像~data, 正な整数 %横幅, 正な整数 %縦幅, `ImageDataSettings$I `設定群@V（省略時は ε ）, `Uint8ClampedArray$I `~source@V（省略時は ε ）, `PredefinedColorSpace$I `既定の色~空間@V（省略時は ε ） ◎終 に対し： ◎ To initialize an ImageData object imageData, given a positive integer number of rows rows, a positive integer number of pixels per row pixelsPerRow, an optional ImageDataSettings settings, an optional Uint8ClampedArray source, and an optional PredefinedColorSpace defaultColorSpace:

1. ~IF［ %~source ~EQ ε ］：

   1. %~buffer ~LET ~size ( %横幅, %縦幅 ) の画像~dataを表現する，新たな`~canvas画素~配列~buffer$
   2. ~IF［ 前~段にて %~buffer 用の~storageを割振れなかった ］ ⇒ ~THROW `RangeError$E
   3. %~source ~SET %~buffer 全体を~viewとする，新たな `Uint8ClampedArray$I ~obj
   ◎ ↓If source was given, then initialize the data attribute of imageData to source. ◎ Otherwise (source was not given), initialize the data attribute of imageData to a new Uint8ClampedArray object. The Uint8ClampedArray object must use a new Canvas Pixel ArrayBuffer for its storage, and must have a zero start offset and a length equal to the length of its storage, in bytes. The Canvas Pixel ArrayBuffer must have the correct size to store rows × pixelsPerRow pixels. ◎ If the Canvas Pixel ArrayBuffer cannot be allocated, then rethrow the RangeError thrown by JavaScript, and return. ◎ ↓Initialize the width attribute of imageData to pixelsPerRow. ◎ ↓Initialize the height attribute of imageData to rows.
2. %色~空間 ~LET ε ◎ ↓
3. ~IF［ %設定群 ~NEQ ε ］ ⇒ %色~空間 ~SET %設定群[ "`colorSpace@mb1" ] ◎ If settings was given and settings["colorSpace"] exists, then initialize the colorSpace attribute of imageData to settings["colorSpace"].
4. ~IF［ %色~空間 ~EQ ε ］ ⇒ %色~空間 ~SET %既定の色~空間 ◎ Otherwise, if defaultColorSpace was given, then initialize the colorSpace attribute of imageData to defaultColorSpace.
5. ~IF［ %色~空間 ~EQ ε ］ ⇒ %色~空間 ~SET `srgb$l ◎ Otherwise, initialize the colorSpace attribute of imageData to "srgb".
6. %画像~data の各~属性を次に従って初期化する ⇒＃ `data@iD 属性 ~SET %~source, `width@iD 属性 ~SET %横幅, `height@iD 属性 ~SET %縦幅 `colorSpace@iD 属性 ~SET %色~空間 ◎ ↑↑

`putImageData(imagedata, dx, dy [, dirtyX, dirtyY, dirtyWidth, dirtyHeight ])@2d ~methodは、 `ImageData$I 構造からの~dataを当の描画~文脈の`出力~bitmap$2Dに書き戻す。 その~method手続きは： ◎ The putImageData() method writes data from ImageData structures back to the rendering context's output bitmap. Its arguments are: imagedata, dx, dy, dirtyX, dirtyY, dirtyWidth, and dirtyHeight.

1. ~IF［ `IsDetachedBuffer$jA( %imagedata の `data$iD 属性の値.`ViewedArrayBuffer^sl ) ~EQ ~T ］ ⇒ ~THROW `InvalidStateError$E ◎ ↓
2. ( %左端, %上端, %右端, %下端 ) ~LET ( 0, 0, %imagedata の `width$iD 属性の値, %imagedata の `height$iD 属性の値 ) ◎ When the last four arguments to this method are omitted, they must be assumed to have the values 0, 0, the width member of the imagedata structure, and the height member of the imagedata structure, respectively. ◎ The method, when invoked, must act as follows: ◎ Let buffer be imagedata's data attribute value's [[ViewedArrayBuffer]] internal slot. ◎ If IsDetachedBuffer(buffer) is true, then throw an "InvalidStateError" DOMException.

3. ~IF［ %dirtyX 以下の引数は省略されていない ］：

   1. %左端 ~SET `max^op( %左端, `min^op( %dirtyX, %dirtyX ~PLUS %dirtyWidth ) )
   2. %右端 ~SET `min^op( %右端, `max^op( %dirtyX, %dirtyX ~PLUS %dirtyWidth ) )
   3. %上端 ~SET `max^op( %上端, `min^op( %dirtyY, %dirtyY ~PLUS %dirtyHeight ) )
   4. %下端 ~SET `min^op( %下端, `max^op( %dirtyY, %dirtyY ~PLUS %dirtyHeight ) )
   ◎ If dirtyWidth is negative, then let dirtyX be dirtyX+dirtyWidth, and let dirtyWidth be equal to the absolute magnitude of dirtyWidth. ◎ If dirtyHeight is negative, then let dirtyY be dirtyY+dirtyHeight, and let dirtyHeight be equal to the absolute magnitude of dirtyHeight. ◎ If dirtyX is negative, then let dirtyWidth be dirtyWidth+dirtyX, and let dirtyX be zero. ◎ If dirtyY is negative, then let dirtyHeight be dirtyHeight+dirtyY, and let dirtyY be zero. ◎ If dirtyX+dirtyWidth is greater than the width attribute of the imagedata argument, then let dirtyWidth be the value of that width attribute, minus the value of dirtyX. ◎ If dirtyY+dirtyHeight is greater than the height attribute of the imagedata argument, then let dirtyHeight be the value of that height attribute, minus the value of dirtyY.
4. ~IF［ %左端 ~EQ %右端 ］~OR［ %上端 ~EQ %下端 ］ ⇒ ~RET ◎ If, after those changes, either dirtyWidth or dirtyHeight are negative or zero, then return without affecting any bitmaps.
5. ［ %x ~IN { %左端 〜 %右端 ~MINUS 1 }, %y ~IN { %上端 〜 %下端 ~MINUS 1 } ］なる ~EACH( 整数~座標 ( %x, %y ) ) に対し ⇒ %imagedata ~data構造の`~canvas画素~配列~buffer$内の座標 ( %x, %y ) にある画素の［ 各 色~channel, ~alpha~channel ］を，コレ＜`~2D描画~文脈$＞の［ `出力~bitmap$2D／`出力~bitmap$iBM ］内の座標 ( %dx ~PLUS %x, %dy ~PLUS %y ) にある画素に複製する ◎ For all integer values of x and y where dirtyX ≤ x < dirtyX+dirtyWidth and dirtyY ≤ y < dirtyY+dirtyHeight, copy the four channels of the pixel with coordinate (x, y) in the imagedata data structure's Canvas Pixel ArrayBuffer to the pixel with coordinate (dx+x, dy+y) in the rendering context's output bitmap.

注記： 色~値を［ 色~空間どうしで変換する／ `~alphaにより乗算済み$にしたり その逆へ変換する ］ときの~~丸め誤差に因り、［ `putImageData()$2d を利用して設定した画素, 直後に等価な `getImageData()$2d を利用して返される画素 ］のうち完全に不透明ではないものは，異なる値になり得る。 ◎ Due to the lossy nature of converting between color spaces and converting to and from premultiplied alpha color values, pixels that have just been set using putImageData(), and are not completely opaque, might be returned to an equivalent getImageData() as different values.

`globalAlpha$2d 設定子~手続きは： ◎ The globalAlpha setter steps are:

1. %~alpha ~LET 所与の値 ◎ ↓
2. ~IF［ %~alpha は`有限$である ］~AND［ 0.0 ~LTE %~alpha ~LTE 1.0 ］ ⇒ コレの`大域~alpha$2D ~SET %~alpha ◎ If the given value is either infinite, NaN, or not in the range 0.0 to 1.0, then return. ◎ Otherwise, set this's global alpha to the given value.

`globalCompositeOperation$2d 設定子~手続きは： ◎ The globalCompositeOperation setter steps are:

1. ~IF［ 所与の値は、［ `blend-mode$t ／ `composite-mode$t ］ `COMPOSITE$r がとるものと定義された，いずれかの値に`一致する$ ］ ⇒ コレの`現在の組成~混色~演算子$2D ~SET 所与の値 ◎ If the given value is not identical to any of the values that the <blend-mode> or the <composite-mode> properties are defined to take, then return. [COMPOSITE] ◎ Otherwise, set this's current compositing and blending operator to the given value.

`影を描く@ ときは、所与の ( %A, %影~style ) に対し，次に従って描画するモノトスル： ◎ When shadows are drawn, they must be rendered as follows:

1. ~Assert ⇒＃ %A は無限に広い`透明な黒$にされた~bitmapに，影を作成する~source画像を描画したものである。 %影~style は `CanvasShadowStyles$I ~objである。 ◎ Let A be an infinite transparent black bitmap on which the source image for which a shadow is being created has been rendered.
2. %B ~LET %A と 座標~空間, 原点が一致する無限に広い`透明な黒$にされた~bitmap ◎ Let B be an infinite transparent black bitmap, with a coordinate space and an origin identical to A.
3. %A の~alpha~channelを %B に — ( ~x, ~y ) とも正な方向に ( %影~style の `shadowOffsetX$2d, %影~style の `shadowOffsetY$2d ) だけ~offsetする下で — 複製する ◎ Copy the alpha channel of A to B, offset by shadowOffsetX in the positive x direction, and shadowOffsetY in the positive y direction.
4. %標準偏差 ~LET %影~style の `shadowBlur$2d ~DIV 2 ◎ ↓
5. ~IF［ %標準偏差 ~GT 0 ］ ⇒ %標準偏差 を標準偏差に利用して %B 上で~2D~Gaussianボカシを遂行する — ~UAは、 ボカシ演算の際に~hardware制限を超過しないよう， %標準偏差 の値を［ 実装に特有な ある最大~値 ］に切り下げてもヨイ。 ◎ If shadowBlur is greater than 0: ◎ Let σ be half the value of shadowBlur. ◎ Perform a 2D Gaussian Blur on B, using σ as the standard deviation. ◎ User agents may limit values of σ to an implementation-specific maximum value to avoid exceeding hardware limitations during the Gaussian blur operation.
6. %色 ~LET %影~style の `shadowColor$2d による色 ◎ ↓
7. %B 内の各~画素に対し ⇒ 画素の ( ~red, ~green, ~blue ) 成分 ~SET %色 の ( ~red, ~green, ~blue ) 成分 ◎ Set the red, green, and blue components of every pixel in B to the red, green, and blue components (respectively) of the color of shadowColor.
8. %B 内の各~画素に対し ⇒ 画素の~alpha成分を %色 の~alpha成分で乗算する ◎ Multiply the alpha component of every pixel in B by the alpha component of the color of shadowColor.
9. ~RET %B （ %B 内にある影は、 下に述べる`描法~model$の一部として描画されることになる。） ◎ The shadow is in the bitmap B, and is rendered as part of the drawing model described below.

`filter$2d 取得子~手続きは ⇒ ~RET コレの`現在の~filter$2D ◎ The filter getter steps are to return this's current filter.

`filter$2d 設定子~手続きは： ◎ The filter setter steps are:

1. ~IF［ 所与の値 ~EQ `none^l ］ ⇒＃ コレの`現在の~filter$2D ~SET `none^l； ~RET ◎ If the given value is "none", then set this's current filter to "none" and return.
2. %構文解析した値 ~LET 所与の値を `filter-value-list$t の`文法に則って構文解析-$した結果 — ［ `inherit^v ／ `initial^v ］の様な，~propに独立な~stylesheet構文が在る場合、 この構文解析は， `失敗^i を返すモノトスル。 ◎ Let parsedValue be the result of parsing the given values as a <filter-value-list>. If any property-independent style sheet syntax like 'inherit' or 'initial' is present, then this parsing must return failure.
3. ~IF［ %構文解析した値 ~EQ `失敗^i ］ ⇒ ~RET ◎ If parsedValue is failure, then return.
4. コレの`現在の~filter$2D ~SET 所与の値 ◎ Set this's current filter to the given value.

［ 図形／画像 ］は、 次の手続きに従ったかのように塗るモノトスル： ◎ When a shape or image is painted, user agents must follow these steps, in the order given (or act as if they do):

1. %A ~LET ［ 無限に広い`透明な黒$にされた~bitmap ］上に［ 図形／画像 ］をこれまでの各~節に述べたとおりに描画して得られる画像 — 図形に対しては、 現在の［ ~fill ／ ~stroke ／ 線 ］~styleを尊守することに加え， ~stroke自身は現在の変形n行列の~subjectにする ◎ Render the shape or image onto an infinite transparent black bitmap, creating image A, as described in the previous sections. For shapes, the current fill, stroke, and line styles must be honored, and the stroke must itself also be subjected to the current transformation matrix.
2. %B ~LET %A ◎ ↓
3. %~filter ~LET `現在の~filter$2D ◎ ↓
4. ~IF［ %~filter は `filter-value-list$t である（ `none^l でない） ］~AND［ %~filter が参照している~filterのうち，外部に定義されたものは、 すべて現在~読込まれた文書~内にある ］ ⇒ %B ~SET 画像 %A を %~filter の入力に利用して， ~SVGと同じ方式で描くことにより作成される画像 ◎ When the current filter is set to a value other than "none" and all the externally-defined filters it references, if any, are in documents that are currently loaded, then use image A as the input to the current filter, creating image B. If the current filter is a string parseable as a <filter-value-list>, then draw using the current filter in the same manner as SVG. ◎ ↑Otherwise, let B be an alias for A.
5. %C ~LET `影を描く$( %B, 現在の影~style【 `CanvasShadowStyles$I 】 ) ◎ When shadows are drawn, render the shadow from image B, using the current shadow styles, creating image C.
6. %C 内の各~画素に対し，その~alpha成分を`大域~alpha$2Dで乗算する ◎ When shadows are drawn, multiply the alpha component of every pixel in C by global alpha.
7. `現在の組成~混色~演算子$2Dを利用して，`切抜き領域$の中で、 現在の`出力~bitmap$2D上に %C を組成する ◎ When shadows are drawn, composite C within the clipping region over the current output bitmap using the current compositing and blending operator.
8. %B 内の各~画素に対し，その~alpha成分を`大域~alpha$2Dで乗算する ◎ Multiply the alpha component of every pixel in B by global alpha.
9. `現在の組成~混色~演算子$2Dを利用して，`切抜き領域$の中で、 現在の`出力~bitmap$2D上に %B を組成する ◎ Composite B within the clipping region over the current output bitmap using the current compositing and blending operator.

上で`出力~bitmap$2D上に組成する所では、 `出力~bitmap$2Dの外側に出る［ %B ／ %C ］の画素は破棄するモノトスル。 ◎ When compositing onto the output bitmap, pixels that would fall outside of the output bitmap must be discarded.

`~ImageBitmapRenderingContextの出力~bitmapを設定する@ ときは、所与の ( `ImageBitmapRenderingContext$I ~obj %文脈, `~bitmap~data$ %bitmap （省略時は ε ） ) に対し，次を走らすモノトスル： ◎ When a user agent is required to set an ImageBitmapRenderingContext's output bitmap, with a context argument that is an ImageBitmapRenderingContext object and an optional argument bitmap that refers to bitmap data, it must run these steps:

1. ~IF［ %bitmap ~EQ ε ］： ◎ If a bitmap argument was not provided, then:

   1. %文脈 の`~bitmap~mode$iBM ~SET `~blank$iBM ◎ Set context's bitmap mode to blank.
   2. %canvas ~LET %文脈 を束縛している `canvas$e 要素 ◎ Let canvas be the canvas element to which context is bound.
   3. %文脈 の`出力~bitmap$iBMの［ `生来な横幅$, `生来な縦幅$ ］を — `px$css 単位に解釈する下で — 順に %canvas の［ `width$a, `height$a ］属性の`数量-値$に等しくした上で、 それを成す全~画素を`透明な黒$にする ◎ Set context's output bitmap to be transparent black with a natural width equal to the numeric value of canvas's width attribute and a natural height equal to the numeric value of canvas's height attribute, those values being interpreted in CSS pixels.
   4. `出力~bitmap$iBM の`生成元cleanか$ ~SET ~T ◎ Set the output bitmap's origin-clean flag to true.

2. ~ELSE： ◎ If a bitmap argument was provided, then:

   1. %文脈 の`~bitmap~mode$iBM ~SET `妥当$iBM ◎ Set context's bitmap mode to valid.

   2. %文脈 の`出力~bitmap$iBM ~SET %bitmap と同じ下層の~bitmap~data（複製しない） ◎ Set context's output bitmap to refer to the same underlying bitmap data as bitmap, without making a copy.

      注記： %bitmap の`生成元cleanか$は、 %文脈 の`出力~bitmap$iBMから参照される~bitmap~dataに含められる。 ◎ The origin-clean flag of bitmap is included in the bitmap data to be referenced by context's output bitmap.

`~ImageBitmapRenderingContextを作成する@ ときは、所与の ( %target, %options ) に対し，次の手続きを走らす： ◎ The ImageBitmapRenderingContext creation algorithm, which is passed a target and options, consists of running these steps:

1. %設定群 ~LET `~IDL値に変換する$( %options, `ImageBitmapRenderingContextSettings$I ) （例外投出あり） ◎ Let settings be the result of converting options to the dictionary type ImageBitmapRenderingContextSettings. (This can throw an exception.)
2. %文脈 ~LET `新たな$ `ImageBitmapRenderingContext$I ~obj ◎ Let context be a new ImageBitmapRenderingContext object.
3. %文脈 の `canvas$2d 属性 ~SET %target に初期化する ◎ Initialize context's canvas attribute to point to target.
4. %文脈 の`出力~bitmap$iBM ~SET %target の~bitmap （ %target と同じ~bitmap共有する） ◎ Set context's output bitmap to the same bitmap as target's bitmap (so that they are shared).
5. `~ImageBitmapRenderingContextの出力~bitmapを設定する$( %文脈 ) ◎ Run the steps to set an ImageBitmapRenderingContext's output bitmap with context.
6. %文脈 の`~alpha~flag$iBM ~SET %設定群 の `~alpha1@mb 値 ◎ Initialize context's alpha flag to true. ◎ Process each of the members of settings as follows: • alpha •• If false, then set context's alpha flag to false.
7. ~RET %文脈 ◎ Return context.

`transferFromImageBitmap(bitmap)@m ~method手続きは： ◎ The transferFromImageBitmap(bitmap) method, when invoked, must run these steps: • Let bitmapContext be the ImageBitmapRenderingContext object on which the transferFromImageBitmap() method was called.

1. ~IF［ %bitmap ~EQ ~NULL ］ ⇒＃ `~ImageBitmapRenderingContextの出力~bitmapを設定する$( コレ )； ~RET ◎ If bitmap is null, then run the steps to set an ImageBitmapRenderingContext's output bitmap, with bitmapContext as the context argument and no bitmap argument, then return.
2. ~IF［ %bitmap.`Detached$sl ~EQ ~T ］ ⇒ ~THROW `InvalidStateError$E ◎ If the value of bitmap's [[Detached]] internal slot is set to true, then throw an "InvalidStateError" DOMException.
3. `~ImageBitmapRenderingContextの出力~bitmapを設定する$( コレ, %bitmap の下層の`~bitmap~data$ ) ◎ Run the steps to set an ImageBitmapRenderingContext's output bitmap, with the context argument equal to bitmapContext, and the bitmap argument referring to bitmap's underlying bitmap data.
4. %bitmap.`Detached$sl ~SET ~T ◎ Set the value of bitmap's [[Detached]] internal slot to true.
5. %bitmap の`~bitmap~data$ ~SET ε ◎ Unset bitmap's bitmap data.

`~offscreen~2D文脈を作成する@ ときは、所与の ( `OffscreenCanvas$I ~obj %target, %~option群【！some arguments】 （省略時は `undefined^jv ）) に対し，次の手続きを走らす： ◎ The offscreen 2D context creation algorithm, which is passed a target (an OffscreenCanvas object) and optionally some arguments, consists of running the following steps: • If the algorithm was passed some arguments, let arg be the first such argument. Otherwise, let arg be undefined.

1. %設定群 ~LET `~IDL値に変換する$( %~option群, `CanvasRenderingContext2DSettings$I ) （例外投出あり） ◎ Let settings be the result of converting arg to the dictionary type CanvasRenderingContext2DSettings. (This can throw an exception.).
2. %context ~LET `新たな$ `OffscreenCanvasRenderingContext2D$I ~obj ◎ Let context be a new OffscreenCanvasRenderingContext2D object.
3. %context の ⇒＃ `~OffscreenCanvas~obj$o2D ~SET %target； `~alpha~flag$o2D ~SET %設定群[ "`alpha$mb" ]； `色~空間$o2D ~SET %設定群[ "`colorSpace$mb" ] ◎ Set context's associated OffscreenCanvas object to target. ◎ If settings["alpha"] is false, then set context's alpha flag to false. ◎ Set context's color space to settings["colorSpace"].

4. %~bitmap ~LET 次のようにされた新たな~bitmap：

   • 寸法は %target の ( `width$oC, `height$oC ) 属性で指定される
   • 全~画素を、 %context の`~alpha~flag$o2Dに応じて［ ~T ならば `透明な黒$／ ~F ならば `不透明な黒$ ］に初期化する
   ◎ Set context's bitmap to a newly created bitmap with the dimensions specified by the width and height attributes of target, and set target's bitmap to the same bitmap (so that they are shared). ◎ If context's alpha flag is set to true, initialize all the pixels of context's bitmap to transparent black. Otherwise, initialize the pixels to opaque black.
5. %context の`~bitmap$o2D ~SET %~bitmap ◎ ↑
6. %target の~bitmap ~SET %~bitmap （~bitmapを %context と共有する。） ◎ ↑
7. ~RET %context ◎ Return context.