HTML-canvas-ja.html

<!DOCTYPE html><html lang="ja"><head><meta charset="utf-8">
<title>HTML Standard — canvas 要素（日本語訳）</title>

<link rel="stylesheet" href="common.css" type="text/css">
<link rel="stylesheet" href="common-whatwg.css" type="text/css">
<style>

.type {
	font-family: monospace0, monospace;
}

.baseline {
	font-family: sans-serif0, sans-serif;
}

._ex-matrix {
	white-space: pre;
	margin-left: 2em;
	padding: 0 0.3em;
	display: inline-block;
	border: thin solid currentcolor;
	border-style: none solid;
	border-radius: 5px;
}

@supports (grid-template-columns: subgrid) and (display: contents) {

#_ex-premultiplied {
	grid-template-columns: 15em 1fr 8em;
	max-width: 40em;
	tr {
		grid-template-areas:
			"CSS 記述 画像"
			"乗算済み 記述 画像"
			"非乗算済み 記述 画像"
		;
		> *:nth-child(1) {
			grid-area: CSS;
		}
		> *:nth-child(2) {
			grid-area: 乗算済み;
		}
		> *:nth-child(3) {
			grid-area: 非乗算済み;
		}
		> *:nth-child(4) {
			grid-area: 記述;
		}
		> *:nth-child(5) {
			grid-area: 画像;
		}
	}
}

}

</style>

<script src="common0.js"></script>
<script src="common1.js" async></script>


<script>

Util.ready = function(){
	const source_data = {
		toc_main: 'MAIN',
		generate: expand
	};
	Util.switchWordsInit(source_data);
}

function expand(){
	const class_map = this.class_map;
	const tag_map = this.tag_map;
	const link_map = this.link_map;

	return this.html.replace(
		/%[\w\-~一-鿆あ-ん]+|`(.+?)([$@\^])(\w*)/g,
		create_html
	);

	function create_html(match, key, indicator, klass){

if(!key) { //%
	return `<var>${match.slice(1)}</var>`;
}

let href = '';
let href1 = '';
{
	const n = key.indexOf('＠');
	if(n > 0) {
		href1 = key.slice(n + 1);
		key = key.slice(0, n);
	}
}
let text = key;

switch(klass){
case 'r':
	text = `[${key}]`;
	href = `HTML-references.html#refs${key}`;
	break;
case 'mt': // media type
case 'l': // literal
case 'cC':
	text = `"<code class="literal">${text}</code>"`;
	break;
case 'm': // IDL member
case '2d':
case '2d1':
case 'iD':
case 'iD1':
case 'tM':
case 'oC':
case 'o2d':
	const n = text.indexOf('(');
	if(n > 0){
		key = text.slice(0, n);
		text = key + text.slice(n).replace(/\w+/g, '<var>$&</var>');
	}
	break;
case 'sl': // JS internal slot
	text = `[[${text}]]`;
	break;
case 'U':
	text = `U+${key}`;
	break;
case 't':
	text = `&lt;${key}&gt;`;
	break;
case 'at':
	text = `@${key}`;
	break;
case 'en':
	return `<span lang="en">${key}</span>`;
	break;
case 'dgm':
	return `<a id="_dgm-${key}"></a>`;
	break;
}

let tag = tag_map[klass];
if(tag) {
	let classname = class_map[klass];
	classname = classname ? ` class="${classname}"` : '';
	text = `<${tag}${classname}>${text}</${tag}>`;
}

if(indicator !== '^'){
	href = href1 || link_map[ klass ? `${klass}.${key}` : key ] || href;
	if(!href){
		console.log(match); // check error
		return match;
	}

	switch(indicator){
	case '$':
		text = `<a href="${href}">${text}</a>`;
		break;
	case '@':
		text = `<dfn id="${href.slice(1)}">${text}</dfn>`;
		break;
	}
}

return text;


	}
}

</script>


<script type="text/plain" id="_source_data">

●●options

spec_date:2025-04-10
trans_update:2025-04-10
source_checked:240712
page_state_key:HTML
spec_status:LS
original_url:https://html.spec.whatwg.org/multipage/canvas.html
	abbr_url:HEcanvas
nav_prev:HEscripting
nav_next:HEcustom
trans_1st_pub:2019-11-03

●●class_map
e:element
a:attr
diM:attr
et:event-type
E:error
p:property
t:type
v:value
U:code-point
at:css
css:css
u:css
bL:baseline
st:attr-state
sl:js-slot
jA:abstract
jv:js-value
jt:js-type
op:op

●●tag_map
I:code
m:code
mb:code
mb1:code
et:code
2d:code
2d1:code
iD:code
iD1:code
tM:code
oC:code
o2d:code
E:code
c:code
e:code
diM:code
a:code
U:span
st:i
sl:span
op:span
p:code
at:code
css:code
u:css
t:var
bL:span
v:code
jA:span
jv:code
jt:code
oM:i
cM:i
i:i
em:em
V:var
cite:cite

●●original_id_map

	dom-context-2d-drawfocusifneeded:dom-context-2d-drawosfocusring
	the-script-element:script

●●mdn_urls
the-canvas-element:HTML/Element/canvas

	blobcallback:API/BlobCallback
	canvascompositing:API/CanvasCompositing
	canvasdirection:API/CanvasDirection
	canvasdrawimage:API/CanvasDrawImage
	canvasdrawpath:API/CanvasDrawPath
	canvasfillrule:API/CanvasFillRule
	canvasfillstrokestyles:API/CanvasFillStrokeStyles
	canvasfilters:API/CanvasFilters
canvasgradient:API/CanvasGradient
	canvasimagedata:API/CanvasImageData
	canvasimagesmoothing:API/CanvasImageSmoothing
canvasimagesource:API/CanvasImageSource
	canvaslinecap:API/CanvasLineCap
	canvaslinejoin:API/CanvasLineJoin
	canvaspath:API/CanvasPath
	canvaspathdrawingstyles:API/CanvasPathDrawingStyles
canvaspattern:API/CanvasPattern
	canvasrect:API/CanvasRect
canvasrenderingcontext2d:API/CanvasRenderingContext2D
	canvasrenderingcontext2dsettings:API/CanvasRenderingContext2DSettings
	canvasshadowstyles:API/CanvasShadowStyles
	canvasstate:API/CanvasState
	canvassettings:API/CanvasSettings
	canvastext:API/CanvasText
	canvastextalign:API/CanvasTextAlign
	canvastextbaseline:API/CanvasTextBaseline
	canvastextdrawingstyles:API/CanvasTextDrawingStyles
	canvastransform:API/CanvasTransform
	canvasuserinterface:API/CanvasUserInterface
	canvasfontkerning:API/CanvasFontKerning
	canvasfontstretch:API/CanvasFontStretch
	canvasfontvariantcaps:API/CanvasFontVariantCaps
	canvastextrendering:API/CanvasTextRendering

htmlcanvaselement:API/HTMLCanvasElement
	htmlorsvgimageelement:API/HTMLOrSVGImageElement
imagebitmaprenderingcontext:API/ImageBitmapRenderingContext
	imagebitmaprenderingcontextsettings:API/ImageBitmapRenderingContextSettings
imagedata:API/ImageData
	imageencodeoptions:API/ImageEncodeOptions
imagesmoothingquality:API/ImageSmoothingQuality
offscreencanvas:API/OffscreenCanvas
	offscreencanvasrenderingcontext2d:API/OffscreenCanvasRenderingContext2D
	offscreenrenderingcontext:API/OffscreenRenderingContext
	offscreenrenderingcontextid:API/OffscreenRenderingContextId
path2d:API/Path2D
renderingcontext:API/RenderingContext
textmetrics:API/TextMetrics


●●link_map


	●IDL
LegacyNullToEmptyString:~WEBIDLjs#LegacyNullToEmptyString
Serializable:~HTMLcloning#serializable
Transferable:~HTMLcloning#transferable
CEReactions:~HEcustom#cereactions
HTMLConstructor:~HTMLdom#htmlconstructor

c.object:~WEBIDL#idl-object
c.unrestricted double:~WEBIDL#idl-unrestricted-double
Promise:~WEBIDL#idl-promise
	I.ArrayBuffer:~WEBIDL#idl-ArrayBuffer
I.Float16Array:~WEBIDL#idl-Float16Array
I.Uint8ClampedArray:~WEBIDL#idl-Uint8ClampedArray

E.RangeError:~TC39#sec-native-error-types-used-in-this-standard-rangeerror
E.EncodingError:~WEBIDL#encodingerror
	I.DOMException:~WEBIDL#idl-DOMException
E.IndexSizeError:~WEBIDL#indexsizeerror
E.InvalidStateError:~WEBIDL#invalidstateerror
E.SecurityError:~WEBIDL#securityerror
E.SyntaxError:~WEBIDL#syntaxerror

I.Blob:~FILEAPI#blob
	#dfn-Blob
I.BlobCallback:#blobcallback
I.CanvasColorType:#canvascolortype
I.CanvasCompositing:#canvascompositing
I.CanvasDirection:#canvasdirection
I.CanvasDrawImage:#canvasdrawimage
I.CanvasDrawPath:#canvasdrawpath
I.CanvasFillRule:#canvasfillrule
I.CanvasFillStrokeStyles:#canvasfillstrokestyles
I.CanvasFilters:#canvasfilters
I.CanvasGradient:#canvasgradient
I.CanvasImageData:#canvasimagedata
I.CanvasImageSmoothing:#canvasimagesmoothing
I.CanvasImageSource:#canvasimagesource
I.CanvasLineCap:#canvaslinecap
I.CanvasLineJoin:#canvaslinejoin
I.CanvasPath:#canvaspath
I.CanvasPathDrawingStyles:#canvaspathdrawingstyles
I.CanvasPattern:#canvaspattern
I.CanvasRect:#canvasrect
I.CanvasRenderingContext2D:#canvasrenderingcontext2d
I.CanvasRenderingContext2DSettings:#canvasrenderingcontext2dsettings
I.CanvasShadowStyles:#canvasshadowstyles
I.CanvasSettings:#canvassettings
I.CanvasState:#canvasstate
I.CanvasText:#canvastext
I.CanvasTextAlign:#canvastextalign
I.CanvasTextBaseline:#canvastextbaseline
I.CanvasTextDrawingStyles:#canvastextdrawingstyles
I.CanvasTransform:#canvastransform
I.CanvasUserInterface:#canvasuserinterface
I.CanvasFontKerning:#canvasfontkerning
I.CanvasFontStretch:#canvasfontstretch
I.CanvasFontVariantCaps:#canvasfontvariantcaps
I.CanvasTextRendering:#canvastextrendering
I.PredefinedColorSpace:#predefinedcolorspace
I.ImageDataArray:#imagedataarray
I.ImageDataPixelFormat:#imagedatapixelformat


I.DOMMatrix:~GEOMETRY#dommatrix
I.DOMMatrix2DInit:~GEOMETRY#dictdef-dommatrix2dinit
I.DOMPointInit:~GEOMETRY#dictdef-dompointinit
I.Document:~HTMLdom#document
文書:~HTMLdom#the-document-object
~node文書:~DOM4#concept-node-document
I.Element:~DOM4#interface-element
I.EventTarget:~DOM4#interface-eventtarget
I.EventHandler:~WAPI#eventhandler
I.Window:~WINDOW#window
I.WorkerGlobalScope:~WORKERS#workerglobalscope

I.FontFace:~CSSFONTLOADING#fontface
	infrastructure.html#fontface
I.HTMLCanvasElement:#htmlcanvaselement
I.HTMLElement:~HTMLdom#htmlelement
I.HTMLImageElement:~HEimages#htmlimageelement
I.HTMLOrSVGImageElement:#htmlorsvgimageelement
I.HTMLVideoElement:~HEmedia#htmlvideoelement
I.ImageBitmap:~HTMLGAPI#imagebitmap
I.ImageBitmapRenderingContext:#imagebitmaprenderingcontext
I.ImageBitmapRenderingContextSettings:#imagebitmaprenderingcontextsettings
I.ImageBitmapSource:~HTMLGAPI#imagebitmapsource
I.ImageData:#imagedata
I.ImageDataSettings:#imagedatasettings
I.ImageEncodeOptions:#imageencodeoptions
I.ImageSmoothingQuality:#imagesmoothingquality
I.OffscreenCanvas:#offscreencanvas
I.OffscreenCanvasRenderingContext2D:#offscreencanvasrenderingcontext2d
I.OffscreenRenderingContext:#offscreenrenderingcontext
I.OffscreenRenderingContextId:#offscreenrenderingcontextid
I.Path2D:#path2d
I.RenderingContext:#renderingcontext
I.SVGImageElement:~SVGembedded#InterfaceSVGImageElement
I.TextMetrics:#textmetrics
I.WebGLRenderingContext:~WEBGL/1.0/#WebGLRenderingContext
I.WebGL2RenderingContext:~WEBGL/2.0/#WebGL2RenderingContext
I.GPUCanvasContext:~WEBGPU#canvas-context
I.VideoFrame:~WEBCODECS#videoframe-interface

m.preserveDrawingBuffer:~WEBGL/1.0/#WebGLContextAttributes
m.new FontFace:~CSSFONTLOADING#dom-fontface-fontface

2d.arc:#dom-context-2d-arc
2d.arcTo:#dom-context-2d-arcto
2d.beginPath:#dom-context-2d-beginpath
2d.bezierCurveTo:#dom-context-2d-beziercurveto
2d.canvas:#dom-context-2d-canvas
2d.clearRect:#dom-context-2d-clearrect
2d.clip:#dom-context-2d-clip
2d1.clip:#dom-context-2d-clip-path
2d.closePath:#dom-context-2d-closepath
2d.createImageData:#dom-context-2d-createimagedata
2d1.createImageData:#dom-context-2d-createimagedata-imagedata
2d.createLinearGradient:#dom-context-2d-createlineargradient
2d.createPattern:#dom-context-2d-createpattern
2d.createRadialGradient:#dom-context-2d-createradialgradient
2d.createConicGradient:#dom-context-2d-createconicgradient
2d.direction:#dom-context-2d-direction
2d.drawFocusIfNeeded:#dom-context-2d-drawfocusifneeded
2d1.drawFocusIfNeeded:#dom-context-2d-drawfocusifneeded-path-element
2d.drawImage:#dom-context-2d-drawimage
2d.ellipse:#dom-context-2d-ellipse
2d.fill:#dom-context-2d-fill
2d1.fill:#dom-context-2d-fill-path
2d.fillRect:#dom-context-2d-fillrect
2d.fillStyle:#dom-context-2d-fillstyle
2d.fillText:#dom-context-2d-filltext
2d.filter:#dom-context-2d-filter
2d.font:#dom-context-2d-font
2d.getContextAttributes:#dom-context-2d-canvas-getcontextattributes
2d.getImageData:#dom-context-2d-getimagedata
2d.getLineDash:#dom-context-2d-getlinedash
2d.getTransform:#dom-context-2d-gettransform
2d.globalAlpha:#dom-context-2d-globalalpha
2d.globalCompositeOperation:#dom-context-2d-globalcompositeoperation
2d.imageSmoothingEnabled:#dom-context-2d-imagesmoothingenabled
2d.imageSmoothingQuality:#dom-context-2d-imagesmoothingquality
2d.isContextLost:#dom-context-2d-iscontextlost
2d.isPointInPath:#dom-context-2d-ispointinpath
2d1.isPointInPath:#dom-context-2d-ispointinpath-path
2d.isPointInStroke:#dom-context-2d-ispointinstroke
2d1.isPointInStroke:#dom-context-2d-ispointinstroke-path
2d.lang:#dom-context-2d-lang
2d.lineCap:#dom-context-2d-linecap
2d.lineDashOffset:#dom-context-2d-linedashoffset
2d.lineJoin:#dom-context-2d-linejoin
2d.lineTo:#dom-context-2d-lineto
2d.lineWidth:#dom-context-2d-linewidth
2d.measureText:#dom-context-2d-measuretext
2d.miterLimit:#dom-context-2d-miterlimit
2d.moveTo:#dom-context-2d-moveto
2d.putImageData:#dom-context-2d-putimagedata
2d1.putImageData:#dom-context-2d-putimagedata-short
2d.quadraticCurveTo:#dom-context-2d-quadraticcurveto
2d.rect:#dom-context-2d-rect
2d.resetTransform:#dom-context-2d-resettransform
2d.reset:#dom-context-2d-reset
2d.restore:#dom-context-2d-restore
2d.rotate:#dom-context-2d-rotate
2d.roundRect:#dom-context-2d-roundrect
2d.save:#dom-context-2d-save
2d.scale:#dom-context-2d-scale
2d.setLineDash:#dom-context-2d-setlinedash
2d.setTransform:#dom-context-2d-settransform
2d1.setTransform:#dom-context-2d-settransform-matrix
2d.shadowBlur:#dom-context-2d-shadowblur
2d.shadowColor:#dom-context-2d-shadowcolor
2d.shadowOffsetX:#dom-context-2d-shadowoffsetx
2d.shadowOffsetY:#dom-context-2d-shadowoffsety
2d.stroke:#dom-context-2d-stroke
2d1.stroke:#dom-context-2d-stroke-path
2d.strokeRect:#dom-context-2d-strokerect
2d.strokeStyle:#dom-context-2d-strokestyle
2d.strokeText:#dom-context-2d-stroketext
2d.textAlign:#dom-context-2d-textalign
2d.textBaseline:#dom-context-2d-textbaseline
2d.transform:#dom-context-2d-transform
2d.translate:#dom-context-2d-translate
2d.letterSpacing:#dom-context-2d-letterspacing
2d.wordSpacing:#dom-context-2d-wordspacing
2d.fontKerning:#dom-context-2d-fontkerning
2d.fontStretch:#dom-context-2d-fontstretch
2d.fontVariantCaps:#dom-context-2d-fontvariantcaps
2d.textRendering:#dom-context-2d-textrendering

	m.Constructor:#dom-imagedata
iD.new ImageData:#dom-imagedata
	constructor:#dom-imagedata
iD1.new ImageData:#dom-imagedata-with-data
	constructor:#dom-imagedata-with-data
iD.data:#dom-imagedata-data
iD.height:#dom-imagedata-height
iD.width:#dom-imagedata-width
iD.colorSpace:#dom-imagedata-colorspace
iD.pixelFormat:#dom-imagedata-pixelformat

tM.width:#dom-textmetrics-width
tM.actualBoundingBoxLeft:#dom-textmetrics-actualboundingboxleft
tM.actualBoundingBoxRight:#dom-textmetrics-actualboundingboxright
tM.fontBoundingBoxAscent:#dom-textmetrics-fontboundingboxascent
tM.fontBoundingBoxDescent:#dom-textmetrics-fontboundingboxdescent
tM.actualBoundingBoxAscent:#dom-textmetrics-actualboundingboxascent
tM.actualBoundingBoxDescent:#dom-textmetrics-actualboundingboxdescent
tM.emHeightAscent:#dom-textmetrics-emheightascent
tM.emHeightDescent:#dom-textmetrics-emheightdescent
tM.hangingBaseline:#dom-textmetrics-hangingbaseline
tM.alphabeticBaseline:#dom-textmetrics-alphabeticbaseline
tM.ideographicBaseline:#dom-textmetrics-ideographicbaseline

oC.new OffscreenCanvas:#dom-offscreencanvas
	constructor:#dom-offscreencanvas
oC.convertToBlob:#dom-offscreencanvas-converttoblob
oC.getContext:#dom-offscreencanvas-getcontext
oC.transferToImageBitmap:#dom-offscreencanvas-transfertoimagebitmap
oC.height:#dom-offscreencanvas-height
oC.width:#dom-offscreencanvas-width

o2d.canvas:#offscreencontext2d-canvas

m.oncontextlost:#handler-offscreencanvas-oncontextlost
m.oncontextrestored:#handler-offscreencanvas-oncontextrestored

m.setTransform:#dom-canvaspattern-settransform
m.addColorStop:#dom-canvasgradient-addcolorstop

m.addPath:#dom-path2d-addpath
m.new Path2D:#dom-path2d
	constructor:#dom-path2d


m.createImageBitmap:~HTMLGAPI#dom-createimagebitmap
m.focus:~HTMLinteraction#dom-focus

m.getContext:#dom-canvas-getcontext
m.toBlob:#dom-canvas-toblob
m.toDataURL:#dom-canvas-todataurl
m.transferControlToOffscreen:#dom-canvas-transfercontroltooffscreen
m.height:#dom-canvas-height
m.width:#dom-canvas-width

m.HAVE_METADATA:~HEmedia#dom-media-have_metadata
m.HAVE_NOTHING:~HEmedia#dom-media-have_nothing
m.readyState:~HEmedia#dom-media-readystate

m.transferFromImageBitmap:#dom-imagebitmaprenderingcontext-transferfromimagebitmap
m.canvas:#dom-imagebitmaprenderingcontext-canvas

mb.alpha:#dom-canvasrenderingcontext2dsettings-alpha
mb.willReadFrequently:#dom-canvasrenderingcontext2dsettings-willreadfrequently
mb.desynchronized:#dom-canvasrenderingcontext2dsettings-desynchronized
mb.colorSpace:#dom-canvasrenderingcontext2dsettings-colorspace
mb.colorType:#dom-canvasrenderingcontext2dsettings-colortype
mb1.colorSpace:#dom-imagedatasettings-colorspace
mb.pixelFormat:#dom-imagedatasettings-pixelformat

mb.~alpha1:#dom-imagebitmaprenderingcontextsettings-alpha
mb.quality:#image-encode-options-quality
mb.type:#image-encode-options-type

mb.x:~GEOMETRY#dom-dompointinit-x
mb.y:~GEOMETRY#dom-dompointinit-x


	IDL keywords
l.center:#dom-context-2d-textalign-center
l.end:#dom-context-2d-textalign-end
l.left:#dom-context-2d-textalign-left
l.right:#dom-context-2d-textalign-right
l.start:#dom-context-2d-textalign-start

l.alphabetic:#dom-context-2d-textbaseline-alphabetic
l.bottom:#dom-context-2d-textbaseline-bottom
l.hanging:#dom-context-2d-textbaseline-hanging
l.ideographic:#dom-context-2d-textbaseline-ideographic
l.middle:#dom-context-2d-textbaseline-middle
l.top:#dom-context-2d-textbaseline-top

l.srgb:#dom-predefinedcolorspace-srgb
l.display-p3:#dom-predefinedcolorspace-display-p3

l.unorm8:#dom-canvascolortype-unorm8
l.float16:#dom-canvascolortype-float16

l.rgba-unorm8:#dom-imagedatapixelformat-rgba-unorm8
l.rgba-float16:#dom-imagedatapixelformat-rgba-float16

l.evenodd:#dom-context-2d-fillrule-evenodd
l.nonzero:#dom-context-2d-fillrule-nonzero

l.high:#dom-context-2d-imagesmoothingquality-high
l.low:#dom-context-2d-imagesmoothingquality-low
l.medium:#dom-context-2d-imagesmoothingquality-medium

l.~inheritL:#dom-context-2d-lang-inherit

l.inherit:#dom-context-2d-direction-inherit
l.ltr:#dom-context-2d-direction-ltr
l.rtl:#dom-context-2d-direction-rtl

l.2d:#offscreen-context-type-2d
l.bitmaprenderer:#offscreen-context-type-bitmaprenderer
l.webgl:#offscreen-context-type-webgl
l.webgl2:#offscreen-context-type-webgl2
l.webgpu:#offscreen-context-type-webgpu


l.~autoK:#dom-context-2d-fontkerning-auto
l.~normalK:#dom-context-2d-fontkerning-normal
l.none:#dom-context-2d-fontkerning-none

l.ultra-condensed:#dom-context-2d-fontstretch-ultra-condensed
l.extra-condensed:#dom-context-2d-fontstretch-extra-condensed
l.condensed:#dom-context-2d-fontstretch-condensed
l.semi-condensed:#dom-context-2d-fontstretch-semi-condensed
l.~normalS:#dom-context-2d-fontstretch-normal
l.semi-expanded:#dom-context-2d-fontstretch-semi-expanded
l.expanded:#dom-context-2d-fontstretch-expanded
l.extra-expanded:#dom-context-2d-fontstretch-extra-expanded
l.ultra-expanded:#dom-context-2d-fontstretch-ultra-expanded
l.~normalC:#dom-context-2d-fontvariantcaps-normal
l.small-caps:#dom-context-2d-fontvariantcaps-small-caps
l.all-small-caps:#dom-context-2d-fontvariantcaps-all-small-caps
l.petite-caps:#dom-context-2d-fontvariantcaps-petite-caps
l.all-petite-caps:#dom-context-2d-fontvariantcaps-all-petite-caps
l.unicase:#dom-context-2d-fontvariantcaps-unicase
l.titling-caps:#dom-context-2d-fontvariantcaps-titling-caps
l.~autoR:#dom-context-2d-textrendering-auto
l.optimizeSpeed:#dom-context-2d-textrendering-optimizespeed
l.optimizeLegibility:#dom-context-2d-textrendering-optimizelegibility
l.geometricPrecision:#dom-context-2d-textrendering-geometricprecision

cC.2d:#canvas-context-2d
cC.bitmaprenderer:#canvas-context-bitmaprenderer
cC.webgl:#canvas-context-webgl
cC.webgl2:#canvas-context-webgl2
cC.webgpu:#canvas-context-webgpu

e.a:semantics.html#the-a-element
e.h1:semantics.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements
e.button:~HEforms#the-button-element
e.canvas:#the-canvas-element
e.img:~HEimages#the-img-element
e.input:~HEinput#the-input-element
e.select:~HEforms#the-select-element
e.textarea:~HEforms#the-textarea-element
e.video:~HEmedia#the-video-element
e.image:~SVGembedded#elementdef-image
e.use:~SVGstruct#elementdef-use

a.contenteditable:~HTMLinteraction#attr-contenteditable
a.height:#attr-canvas-height
a.multiple:~HEforms#attr-select-multiple
a.type:~HEinput#attr-input-type
a.usemap:~HEimages#attr-hyperlink-usemap
a.width:#attr-canvas-width
diM.height:~HEembed#attr-dim-height
diM.width:~HEembed#attr-dim-width

	●用語
有限:#_finite
描法~状態~stack:#_drawing-state-stack
意図された~path:#intended-path

数量-値:#obtain-numeric-values

文脈~mode:#concept-canvas-context-mode
~canvas文脈~mode:#concept-canvas-context-mode
cM.bitmaprenderer:#concept-canvas-bitmaprenderer
cM.2d:#concept-canvas-2d
cM.webgl:#concept-canvas-webgl
cM.webgl2:#concept-canvas-webgl2
cM.webgpu:#concept-canvas-webgpu
cM.placeholder:#concept-canvas-placeholder
cM.none:#concept-canvas-none

oM.2d:#offscreencanvas-context-2d
oM.bitmaprenderer:#offscreencanvas-context-bitmaprenderer
oM.webgl:#offscreencanvas-context-webgl
oM.webgl2:#offscreencanvas-context-webgl2
oM.webgpu:#offscreencanvas-context-webgpu
oM.none:#offscreencanvas-context-none
oM.detached:#offscreencanvas-context-detached

mt.image/jpeg:~HTMLindex#image/jpeg
mt.image/png:~HTMLindex#image/png
mt.image/svg+xml:~HTMLindex#image/svg+xml

sl.display width:~WEBCODECS#dom-videoframe-display-width-slot
sl.display height:~WEBCODECS#dom-videoframe-display-height-slot

et.contextlost:~HTMLindex#event-contextlost
et.contextrestored:~HTMLindex#event-contextrestored

	●CSS

p.border-radius:~CSSBG#propdef-border-radius
p.direction:~CSSWM#propdef-direction
p.font:~CSSFONT#propdef-font
p.font-size:~CSSFONT#propdef-font-size
p.font-width:~CSSFONT#propdef-font-width
p.font-stretch:~CSSFONT#propdef-font-stretch
p.font-weight:~CSSFONT#propdef-font-weight
p.font-variant-caps:~CSSFONT#propdef-font-variant-caps
p.font-kerning:~CSSFONT#propdef-font-kerning
p.letter-spacing:~CSSTEXT#letter-spacing-property
p.word-spacing:~CSSTEXT#propdef-word-spacing
p.white-space:~CSSTEXT#propdef-white-space

p.object-fit:~CSSIMAGE#propdef-object-fit
p.line-height:~CSS2J#propdef-line-height
p.text-rendering:~SVGpainting#TextRenderingProperty

at.font-face:~CSSFONT#at-font-face-rule

v.ultra-condensed:~CSSFONT#valdef-font-width-ultra-condensed
v.extra-condensed:~CSSFONT#valdef-font-width-extra-condensed
v.condensed:~CSSFONT#valdef-font-width-condensed
v.semi-condensed:~CSSFONT#valdef-font-width-semi-condensed
v.semi-expanded:~CSSFONT#valdef-font-width-semi-expanded
v.expanded:~CSSFONT#valdef-font-width-expanded
v.extra-expanded:~CSSFONT#valdef-font-width-extra-expanded
v.ultra-expanded:~CSSFONT#valdef-font-width-ultra-expanded

v.small-caps:~CSSFONT#valdef-font-variant-caps-small-caps
v.all-small-caps:~CSSFONT#valdef-font-variant-caps-all-small-caps
v.petite-caps:~CSSFONT#valdef-font-variant-caps-petite-caps
v.all-petite-caps:~CSSFONT#valdef-font-variant-caps-all-petite-caps
v.unicase:~CSSFONT#valdef-font-variant-caps-unicase
v.titling-caps:~CSSFONT#valdef-font-variant-caps-titling-caps

v.srgb:~CSSCOLOR#valdef-color-srgb
v.display-p3:~CSSCOLOR#valdef-color-display-p3
v.relative-colorimetric:~CSSCOLOR5#valdef-color-profile-rendering-intent-relative-colorimetric

v.conic-gradient():~CSSIMAGE4#funcdef-conic-gradient

v.source-over:~COMPOSITING#source-over
	~COMPOSITING#porterduffcompositingoperators_srcover
v.copy:~COMPOSITING#copy
	~COMPOSITING#porterduffcompositingoperators_src

st.Checkbox:~HEinput#checkbox-state-(type=checkbox)
st.Radio:~HEinput#radio-button-state-(type=radio)

t.length:~CSSVAL#length-value
	t.length:~CSSVAL#lengths
t.color:~CSSCOLOR#typedef-color
t.filter-value-list:~FILTERS#typedef-filter-value-list
t.blend-mode:~COMPOSITING#ltblendmodegt
t.composite-mode:~COMPOSITING#compositemode

	●js
jt.Number:~TC39#sec-ecmascript-language-types-number-type
jA.IsDetachedBuffer:~TC39#sec-isdetachedbuffer
sl.Detached:~HTMLcloning#detached

	●用語

~2D描画~文脈:#_2d-rendering-context
~2D文脈を作成する:#2d-context-creation-algorithm
	~offscreen~canvas用の~2D文脈:#offscreencanvasrenderingcontext2d
~offscreen~2D文脈を作成する:#offscreen-2d-context-creation-algorithm
~ImageBitmapRenderingContextを作成する:#imagebitmaprenderingcontext-creation-algorithm
画像~dataを初期化する:#initialize-an-imagedata-object
	#initialize-imagedata-source
	#initialize-imagedata-defaultcolorspace
画像~dataの画素を~bitmap上に置く:#dom-context2d-putimagedata-common

文脈~喪失dか:#concept-canvas-context-lost

~fill手続き:#fill-steps
~stroke手続き:#stroke-steps
~clip手続き:#clip-steps
点は~path内か？手続き:#is-point-in-path-steps
点は~stroke内か？手続き:#is-point-in-stroke-steps
楕円~上の点を決定する手続き:#determine-the-point-on-an-ellipse-steps

ofC.継承した言語:#offscreencanvas-inherited-lang
ofC.継承した方向:#offscreencanvas-inherited-direction
ofC.文脈~mode:#offscreencanvas-context-mode
ofC.~bitmap:#offscreencanvas-bitmap

矩形な~bitmapを表現する:#concept-imagedata-bitmap-representation
画像~引数は利用-可能か検査する:#check-the-usability-of-the-image-argument

生成元cleanか:#concept-canvas-origin-clean

~placeholder~canvas要素:#offscreencanvas-placeholder
~canvas設定群の出力~bitmapを初期化する:#canvas-setting-init-bitmap
~ImageBitmapRenderingContextの出力~bitmapを設定する:#set-an-imagebitmaprenderingcontext's-output-bitmap
~bitmap寸法を設定する:#concept-canvas-set-bitmap-dimensions
~bitmapを~fileとして直列化する:#a-serialisation-of-the-bitmap-as-a-file

iBM.~alpha~flag:#concept-imagebitmaprenderingcontext-alpha
iBM.~bitmap~mode:#concept-imagebitmaprenderingcontext-bitmap-mode
iBM.~blank:#concept-imagebitmaprenderingcontext-blank
iBM.出力~bitmap:#concept-imagebitmaprenderingcontext-output-bitmap

~OffscreenCanvas~obj:#associated-offscreencanvas-object
o2D.~OffscreenCanvas~obj:#associated-offscreencanvas-object
	結付けられた~OffscreenCanvas~obj:#associated-offscreencanvas-object

~textを準備する:#text-preparation-algorithm
~text準備~algo:#text-preparation-algorithm
引数は生成元cleanでない:#the-image-argument-is-not-origin-clean
	~UI:#canvasuserinterface

iBM.妥当:#concept-imagebitmaprenderingcontext-valid
~canvas~blob直列化~task~source:#canvas-blob-serialisation-task-source
関連な~canvas~fallback内容として利用-中にある:#being-used-as-relevant-canvas-fallback-content

~ellipse~method手続き:#ellipse-method-steps

利用者に伝える:#inform

~path:#concept-path
線~区分:#line-segments
新たな下位pathは必要か:#need-new-subpath
下位pathありを確保する:#ensure-there-is-a-subpath
~pathをナゾる:#trace-a-path

	§画素~操作:#pixel-manipulation
	:#drawCustomFocusRingExample

~alphaにより乗算済み:#concept-premultiplied-alpha
乗算済み色~値を非-乗算済み表現へ変換する:#convert-from-premultiplied
非-乗算済み色~値を乗算済み表現へ変換する:#convert-to-premultiplied

	●用語（描法

2D.色~空間:#concept-canvas-color-space
2D.色~型:#concept-canvas-color-type
2D.非同期化されるか:#concept-canvas-desynchronized
2D.高頻度に読取ることになるか:#concept-canvas-will-read-frequently
読戻n用に最適化する:#concept-canvas-will-read-frequently
2D.出力~bitmap:#output-bitmap
2D.~alpha:#concept-canvas-alpha
2D.~fill~style:#concept-canvasfillstrokestyles-fill-style
2D.~stroke~style:#concept-canvasfillstrokestyles-stroke-style
2D.字l間のアキ:#concept-canvastextdrawingstyles-letter-spacing
2D.単語~間のアキ:#concept-canvastextdrawingstyles-word-spacing
2D.~filter:#concept-canvas-current-filter
2D.現在の組成~混色~演算子:#current-compositing-and-blending-operator
2D.大域~alpha:#concept-canvas-global-alpha
2D.現在の~filter:#concept-canvas-current-filter
2D.影~色:#concept-canvasshadowstyles-shadow-color
2D.言語:#concept-canvastextdrawingstyles-language
2D.方向:#_concept-canvastextdrawingstyles-direction

	~nonzero巻数~規則:#dom-context-2d-fillrule-nonzero
影~属性:#shadows
影~効果:#shadows
切抜き領域:#clipping-region
影を描く:#when-shadows-are-drawn
影を描いた:#when-shadows-are-drawn
現在の既定の~path:#current-default-path
現在の変形n行列:#current-transformation-matrix
	＊現在の変形n行列:#transformations
~dash~list:#dash-list
描法~model:#drawing-model
描法~状態:#drawing-state
~fill規則:#fill-rule
変形n行列:#transformations
~font~style~source:#font-style-source-object
paT.生成元cleanか:#concept-canvas-pattern-not-origin-clean
	生成元cleanでない:#concept-canvas-pattern-not-origin-clean
paT.繰返しの挙動:#_canvas-pattern-repetition
paT.画像:#_canvas-pattern-image
paT.変形n行列:#_canvas-pattern-transformation-matrix
描画~文脈を既定の状態に設定し直す:#reset-the-rendering-context-to-its-default-state
補間と外挿:#interpolation
必要なら~focusを描く:#draw-focus-if-needed

	●用語（HTML
並列的:~HTMLINFRA#in-parallel

反映する:~HTMLcdom#reflect

負でない整数として構文解析-:~HTMLcms#rules-for-parsing-non-negative-integers
妥当な負でない整数:~HTMLcms#valid-non-negative-integer

転送-可能:~HTMLcloning#transferable-objects
転送-手続き:~HTMLcloning#transfer-steps
転送-受信-時の手続き:~HTMLcloning#transfer-receiving-steps

~CORS非同一-生成元:~HTMLurl#cors-cross-origin

直列化-可能:infrastructure.html#serializable-objects
直列化~手続き:~HTMLcloning#serialization-steps
逆直列化~手続き:~HTMLcloning#deserialization-steps
下位-逆直列化:~HTMLcloning#sub-deserialization
下位-直列化:~HTMLcloning#sub-serialization

分類:~HTMLdom#concept-element-categories
内容~属性:~HTMLdom#concept-element-attributes
内容~model:~HTMLdom#concept-element-content-model
この要素を利用できる文脈:~HTMLdom#concept-element-contexts
~accessibilityの考慮点:~HTMLdom#concept-element-accessibility-considerations
~DOM~interface:~HTMLdom#concept-element-dom
~flow内容:~HTMLdom#flow-content-2
大域~属性:~HTMLdom#global-attributes
可触~内容:~HTMLdom#palpable-content-2
句ng内容:~HTMLdom#phrasing-content-2
text/html における~tag省略:~HTMLdom#concept-element-tag-omission
透過的:~HTMLdom#transparent
埋込d内容:~HTMLdom#embedded-content-category
~fallback内容:~HTMLdom#fallback-content
ヤリトリありな内容:~HTMLdom#interactive-content-2
表現-:~HTMLdom#represents
言語:~HTMLdom#language
方向性:~HTMLdom#the-directionality
i.明示的に未知:~HTMLdom#concept-explicitly-unknown
i.~ltr:~HTMLdom#concept-ltr
i.~rtl:~HTMLdom#concept-rtl

具現化されて:~HTMLrendering#being-rendered
~bitmap~data:~HTMLGAPI#concept-imagebitmap-bitmap-data
~button:~HEforms#concept-button
表示~size:~HEforms#concept-select-size

~focus可能な区画:~HTMLinteraction#focusable-area
~focus可能:~HTMLinteraction#focusable
~focusされて:~HTMLinteraction#focused

壊れている:~HEimages#img-error
現在の要請:~HEimages#current-request
imG.状態:~HEimages#img-req-state
画像~data:~HEimages#img-req-data

現在の再生~位置:~HEmedia#current-playback-position
全部的に復号-可能:~HEimages#img-good
vD.生来な縦幅:~HEmedia#concept-video-intrinsic-height
vD.生来な横幅:~HEmedia#concept-video-intrinsic-width
~media資源:~HEmedia#media-resource
~media~data:~HEmedia#media-data

結付けられた文書:~WINDOW#concept-document-window

関連な大域~obj:~WAPI#concept-relevant-global
~event~loop:~WAPI#event-loop
~window~event~loop:~WAPI#window-event-loop
~worker~event~loop:~WAPI#worker-event-loop-2
関連な~agent:~WAPI#relevant-agent
aG.~event~loop:~WAPI#concept-agent-event-loop
大域~taskを~queueする:~WAPI#queue-a-global-task
要素~taskを~queueする:~WAPI#queue-an-element-task
~DOM操作~task~source:~WAPI#dom-manipulation-task-source
関連な~realm:~WAPI#concept-relevant-realm
関連な設定群~obj:~WAPI#relevant-settings-object
担当の~event~loop:~WAPI#responsible-event-loop
~scriptingは不能化されて:~WAPI#concept-n-noscript
~scriptingは可能化されて:~WAPI#concept-n-script
描画を更新する:~WAPI#update-the-rendering
~event~handler:~WAPI#event-handlers
~event~handler~event型:~WAPI#event-handler-event-type
~event~handler~IDL属性:~WAPI#event-handler-idl-attributes
文脈~喪失d時の手続き:~WAPI#context-lost-steps

閲覧~文脈:~HTMLds#browsing-context
生成元:~ORIGIN#concept-origin
同一-生成元:~ORIGIN#same-origin

~worker:~WORKERS#workers

	●用語（外部
~ASCII小文字~化:~INFRA#ascii-lowercase
~ASCII空白:~INFRA#ascii-whitespace
一致する:~INFRA#string-is

~size:~INFRA#list-size
付加する:~INFRA#list-append


~MIME型:~MIMESNIFF#mime-type
行列を~2D辞書で初期化する:~GEOMETRY#_initialize-matrix-with-dictionary-2d
行列を~2D行列に初期化する:~GEOMETRY#_initialize-matrix-2d
~2D行列:#_2d-matrix
右から乗算する:~GEOMETRY#post-multiply
左から乗算する:~GEOMETRY#pre-multiply

~data-URL:~RFCx/rfc2397#section-2

文書~要素:~DOM4#document-element
~shadow~tree:~DOM4#concept-shadow-tree

新たな~obj:~WEBIDLjs#new
新たな~promise:~WEBIDLjs#a-new-promise
却下される~promise:~WEBIDLjs#a-promise-rejected-with
~promiseを却下する:~WEBIDLjs#reject
~promiseを解決する:~WEBIDLjs#resolve
~IDL値に変換する:~WEBIDLjs#dfn-convert-javascript-to-idl-value
~JS値に変換する:~WEBIDLjs#dfn-convert-idl-to-javascript-value
	~IDL値に変換する:~WEBIDLjs#js-type-mapping
	~JS値に変換する:~WEBIDLjs#js-type-mapping
~callback関数を呼出す:~WEBIDLjs#invoke-a-callback-function
BS.~byte長さ:~WEBIDLjs#buffersource-byte-length
~buffer~sourceを作成する:~WEBIDLjs#_buffersource-create

算出d値:~CASCADE#computed-value
~fontに相対的な長さ:~CSSVAL#font-relative-length
css.px:~CSSVAL#px
	css.em:~CSSVAL#em
	css.ex:~CSSVAL#ex
	~CSS~pixel:~CSSVAL#px
~CSS全域~keyword:~CSSVAL#common-keywords

bL.em-over:~CSSINLINE#em-over-baseline
bL.em-under:~CSSINLINE#em-under-baseline
bL.alphabetic:~CSSINLINE#alphabetic-baseline
bL.hanging:~CSSINLINE#hanging-baseline
bL.ideographic-under:~CSSINLINE#ideographic-under-baseline

透明な黒:~CSSCOLOR#transparent-black
不透明な黒:~CSSCOLOR#opaque-black
~CSS色~値を構文解析する:~CSSCOLOR#parse-a-css-color-value
~HTMLに互換な直列化が要請される:~CSSCOLOR#color-serialization-html-compatible-serialization-is-requested
CC.直列化-:~CSSCOLOR#serializing-color-values

既定の~sizing~algo:~CSSIMAGE#default-sizing-algorithm
具象-~obj~size:~CSSIMAGE#concrete-object-size
指定d~size:~CSSIMAGE#specified-size
既定の~obj~size:~CSSIMAGE#default-object-size
~font~source:~CSSFONTLOADING#font-source
行内~box:~CSS2J#inline-box

生来な縦横比:~CSSIMAGE#natural-aspect-ratio
生来な寸法:~CSSIMAGE#natural-dimensions
生来な縦幅:~CSSIMAGE#natural-height
生来な横幅:~CSSIMAGE#natural-width
生来な~size:~CSSIMAGE#natural-size

行l~box:~CSS2J#line-box
塗り~source:~CSSIMAGE4#paint-source
文法に則って構文解析-:~CSSSYN#parse-grammar
~CSS値を直列化する:~CSSOM1#serialize-a-css-value
	~CSS~font値として構文解析:~CSSSYN#parse-grammar
内容~言語:~CSSTEXT#content-language
可用な最初の~font:~CSSFONT#first-available-font
~ascent計量:~CSSINLINE#ascent-metric
~descent計量:~CSSINLINE#descent-metric

m11:~GEOMETRY#matrix-m11-element
m12:~GEOMETRY#matrix-m11-element
m21:~GEOMETRY#matrix-m11-element
m22:~GEOMETRY#matrix-m11-element
m41:~GEOMETRY#matrix-m11-element
m42:~GEOMETRY#matrix-m11-element

~stroke図形:~SVGpainting#TermStrokeShape

●●words_table1

WEBGL:https://www.khronos.org/registry/webgl/specs/latest
WEBGPU:https://gpuweb.github.io/gpuweb/
WEBCODECS:https://w3c.github.io/webcodecs/

SVG-image:SVG <code class="element">image</code>
SVG-use:SVG <code class="element">use</code>
alpha1:alpha
urdb:unrestricted double

omega:<var>ω</var>
data-URL:data: URL 
autoR:auto
autoK:auto
normalK:normal
normalS:normal
normalC:normal
inheritL:inherit

●●words_table

	●名称／略称
CPU:
GPU:
WebGL:
WebGPU:
	BCP 47

	●幾何
2D: 2D
x:
y:
	~~直交座標系:linear Cartesian
even-odd:
nonzero:
巻数:winding::~
重合して:overlapして:重なり合って
重合しな:overlapしな:重なり合わな
	重合していない:non-overlapping
周-:circumference:周
限界:bounding::~

一次元の:one-dimensional::~
三次:cubic::~
回転-:rotate::~
回転:rotation::~
垂直:perpendicular::~
面:surface::~
隅:corner::~
点:point::~
始点:start point::~
終点:end point::~
中点:halfway::~
	中点:half-way
	~~境目:edge
線:line::~
直線:straight line::~
	線分
半直線:half-infinite straight line:~
	半直線:half-infinite line
水平線:horizontal-line::~
曲線:curve::~
	接する:tangent／:touchする
幅:width::~

図形:shape::~
下位path:subpath::下位 path:下位パス
楕円:ellipse::~
楕円な:ellipticalな:~
ellipse:
正方形:square::~
真円:circle::~
真円な:circularな::~
矩形:rectangle::~
	矩形:rect
矩形な:rectangularな::~
三角形:triangle::~
半円:semi-circle::~
円弧:arc::~
円錐:cone::~
半径:radius::~
	半径:radii
平行:parallel::~
並進:translation::~
中央:center::~
中心:center::~
	終端-法:ending
直径:diameter::~

交叉-:cross::~
	交点
合併域:union::~
時計回り:clockwise::~
反時計回り:counterclockwise::~
密度:density::~

変形-:transform::~
変形n:transformation::変形
拡縮-:scale::~
拡縮率:scale::~
拡縮ng:scaling::拡縮

拡大-:scale up::~
基底線:baseline::~::ベースライン
直交な:orthogonalな::直交する
横:horizontal::~
縦:vertical::~
横方向:horizontal::~
縦方向:vertical::~
縦横比:aspect ratio::~
縮退-:collapse::~
解像度:resolution::~
連結-:concatenate::~
	連結-:concatenation of

切取る:clipする::切り取る
切取られ:clipされ::切り取られ
切抜き:clipping::切り抜き
線型:linear::~
放射型:radial::~
円錐型:conic::~
区分:segment::~
	には接続されない:with no connection to

閉じる:closeする::~
	閉じる:mark 〜 as closed
閉じて:closeして::~
閉じた:closeした::~
閉じら:closeさ::~
閉ng:closing::閉じ
閉な:closed::閉じた
開な:open::開いた
縮尺:scale:~
切詰める:clampする:切り詰める
	“辺へ切詰める”:'clamp-to-edge'
裏返され:flipされ:~
丸めら:roundさ:~

	軸に整列された:axis-aligned
	-:semi-major
	-:major:
	-:minor:
	-:major-axis
	-:minor-axis

	~sizeし直す:resize
	〜を起点とする:anchored
	左上:top left
	出会う~meet
	覆われ
	左右方向:horizontally to the left and right
	上下方向 vertically up and down
	端 end
	~~中心:positon
	蟻が行進する:marching-ants
	へ向かうこと:going
	近づく:toward
	至る:lead
	出る:lead out
	はみ出:spill-out
	周りを囲う:surround
	切る:cut
	切られ
	長い:long
	短い:short
	揃わない:line up
	傾いた:slant
	高さ:tall
	収まる:fit
	幅:width
	幅広:wide
	幅広:wider
	~~幅／:wide
	~~縦横比:proportion
	張り出す:overhang
	90 度:quarter turn
	左端:left side
	x軸:x-axis
	出た:land
	出る:fall
	結ぶ
	遠く:far
	遠く離れ:far

	●組版／layout／CSS／効果
右横書き:right-to-left::~
左横書き:left-to-right::~
rtl:::右横書き
ltr:::左横書き
送幅:advance width::送り幅
em:
font-family:font family:::フォントファミリ
condensed:
	actualBoundingBoxDescent$tM:descent
ベジェ:Bézier:::~
join::継ぎ
joinする::継ぐ
joinして::継いで
ナゾる:traceする::なぞる
ナゾっ:traceし::なぞっ

位相:phase:~
middle:
miter:

外形線:outline::~
	外形線~化:outlined
	外形線を成す:outline
ascent::::アセント
descent::::ディセント
kerning::::カーニング
stretch:
variant:
caps:
アキ:spacing:::~
生来:natural::~
字l:letter::字°

	●色／塗り／呈示／画像
alpha:
anti-alias:
	~anti-alias法:anti-aliasing
oversample:
	~oversample法:oversampling
gradient:
graphics::::グラフィックス
	~graphic的に:graphically
raster::::ラスター
	~raster化:rasterization
sprite::::スプライト
sheet::::シート
fill:
	~fillするとき:filling
stroke:
	~strokeするとき:stroking
	表示-:view
bitmap::::ビットマップ
blank:
ボカシ:blur::ぼかし
	ボカシ:blurring／:-blur／:-Blur
	~filter法:filtering algorithm／filtering
offscreen:
scrolling::::スクロール処理
dash::::ダッシュ
破線:dashed line::~
色域:gamut::~
ベタ:solid:~
色停:color stop::~
	色停:stop
	-:opacity
	全部的に不透明:no additional transparency
透明度:transparency::~
不透明度:opacity::~
組成-:composite::~
組成:compositing::~
	組成-法:compositing
組成n:composition::組成
混色-:blend::~
混色:blending::~
	組成~混色:compositing and blending

黒:black::~
gray:
green:
white:
black:
blue:
yellow:
orange:

影:shadow::~
覆う:coverする::~
覆っ:coverし::~
覆われ:coverされ::~
	〜を~~覆う:atop
高精細:high-definition:~
塗ng:painting::塗り
塗り:paint::~
塗る:paintする::~
塗っ:paintし::~
塗らな:paintしな::~
塗られ:paintされ::~

描く:drawする::~
描かな:drawしな::~
描ける:drawできる::~
描けな:drawできな::~
描いて:drawして::
描かれ:drawされ::~
描き:drawing::~
描法:drawing::~

可変:variable:~
品質:quality::~
圧縮比:compression ratio::~
滑化-:smooth::~
	滑化-法:smoothing
	画像の滑化-法:image-smoothing-

強調-:highlight::~
折返して:wrapして::折り返して
	~display
補正:correction::~

拡大用:magnification:~
拡大鏡:magnifier:~

背後:behind:~
中間的:intermediate::~
中間画像:intermediate::~
一時的:temporary:~
分布-:distribute::~
JPEG:
PNG:
RGBA:
遮る:obscureする:~
光度:intensity::~
裏画像:backing store::~
	裏~buffer:back buffer
	裏~buffer:backing buffer
	表~buffer:front:buffer
	~buffer法:buffering
	線の有無が交互に切り替わ:alternately have the line on and the line off
	媒体:medium
	ヤリトリありでない:non-interactive
	可視でない:non-visual
	明るく:brighten

	●比較／算術
radian::::ラジアン
	等し:equal
行列:matrix::~
	行列:matrices
単位i:identity::単位
逆行列:inverse::~
不可逆:singular::~
一対一:one-to-one::~
二次:quadratic::~
一致する:identicalになる:~
係数:factor::~
標準偏差:standard deviation::~
	標準偏差σ
演算子:operator::~
双三次:bicubic::~
Lanczos:
Gaussian:
双線型:bilinear::~
最近傍:nearest-neighbor::~
合成-:synthesize::~
数量-:numeric::~
計量:metric:~
量:amount:~
無限小:infinitesimal::~
乗算済みに:premultiply::~
乗算済み:premultiplied::~
	乗算済み／乗算-:premultiplied
	非-乗算済み:non-premultiplied
加法的:additive::~
総和:sum::~
外挿:extrapolation::~
	2 倍:twice
限界比:limit ratio::~
最大-:max-:~
半分:half:~
半分だけ:halfway-:~
深度:depth:~
浮動小数点数:floating point::~
無符号:unsigned::~
	8 ~bitへ正規化された無符号~整数:8-bit unsigned normalized

	数:number
	整数:number
	奇数:odd
	偶数:even
	整数倍:integral multiple
	整数倍:multiple of
	絶対値／− absolute magnitude
	-:base-ten
	無限に広い:infinite
	無限に長い:infinitely-wide
	より高:higher-〜
	高〜:high-
	低〜:low-
	低い:low
	より低:lower-
	より低い:lower
	より高い:higher
	高い／高:high
	最も大きい:largest
	最も近い:closest
	最も近傍の:nearest
	最も遠い:furthest
	最短な:shortest
	短い方:shortest
	より小さい:smaller
	設定し直す:reset
	型~test法:type-testing
	切り下げて:limit
	初期化する:initially have
	劣化-:loss
	~~丸め誤差:lossy nature
	情報欠損を伴う:lossy
	~~正規化-:remap
	上とは逆に，:inverse
	切り下げら:clamp

	●構文／直列化
	-:decimal
	直列化され直され:re-serialize
直列形:serialized::~::シリアル形
逆直列化:deserialization::~::逆シリアル化
	下位-逆直列化:sub-deserialization
	下位-直列化:sub-serialization
符号変換-:transcode::~::トランスコード
	-:syntactic

	全域:-

	●構造
cycle::::サイクル
内包-:include::~
下位-:sub-:~
配列法:arrangement::~
	逆順に:reverse order
	含む:includeする
	対応-:correspond
	構築-:construction of
	互いに~linkされた:linked

	●一般処理

獲得-:acquire::~
clip:
dirty:
placeholder:
commit:
factory:
blob:
detach:
busy:
書込む:writeする::書き込む
	書き戻す:writes 〜 back to
持続的:persistent::~
永続的:permanent::~
続行-:proceed::~
繰返さな:repeatしな:繰り返さな
繰返しの:repetition::繰り返しの
計算的:computational::~
	-:assignment
	-:uninitialized
	追跡し続ける:keep track
上書-:overwrite::上書き
素通り:bypass:~
復旧-:restore::~
非同期化-:desynchronize::~
処理能指向:performance-oriented:~
効率化-:streamline:~
	外部に定義された:externally-defined
素早く:quickに:~
割振れな:allocateできな:割り振れな
入替える:swapする:入れ替える
読戻n:readback::読み戻し
読戻され:readback::読み戻され
高頻度:frequent:~
加速-:accelerate::~
高処理能:performant:~
喪失d:lost::喪失
喪失:loss::~
喪失-:lose::~

	~~実行した後に:after the following statement
	黙して:silently
	先を争うように:racily
	変更することなく:leave 〜 unchanged
	新規:fresh
	-:retain
	-:passing
	-:arg
	-:erasing
	instance化:instantiate
	jump
	-:rethrow
	を~~渡して:handle to
	使い切った:running out

	●変数
保持体:holder::~
宛先:target::~
	%~data保持体:dataHolder
	%宛先~realm:targetRealm
	%直列形:serialized
	%値:value
	%値:-
	%線~幅:lineWidth
	%最大-横幅:%maxWidth
	%画像~data:imageData
	%画像~data:newImageData
	%横幅:width
	%横幅:pixelsPerRow
	%縦幅:height
	%縦幅:rows
	%画素あたりの~byte数:bytesPerPixel
	%画素~形式:-
	%既定の色~空間:defaultColorSpace
	%設定群:settings
	%画像~形式:for image types
	%構文解析した値:parsedValue
	%A:adjustedStartAngle
	%L:angularColorStopList
	%正規化した半径~群:normalizedRadii
	%左上:upperLeft
	%右上:upperRight
	%右下:lowerRight
	%左下:lowerLeft
	-:left
	-:right
	-:top
	-:bottom
	%拡縮率:scale
	%構文解析した結果:parsed
	%文脈:context
	%影~色:-
	%色~空間:the colorSpace attribute of imageData
	%~option群:options
	%~target:target
	%~text:text
	%~font:font
	%~offset~x:dx
	%~offset~y:dy
	%~dirty~x:dirtyX
	%~dirty~y:dirtyY
	%~dirty横幅:dirtyWidth
	%~dirty縦幅:dirtyHeight
	%言語:language
	%~source~obj:sourceObject
	%方向:direction
	%大域~obj:global
	%要素:element

	●環境
agent:
driver:
crash:

	●UI
art::::アート
checkbox::::チェックボックス
game::::ゲーム
heading::見出し
読易い:readableな:読み易い
再生:playback:~
display::::ディスプレイ
編集用:editing:~
環:ring::~
	access可能:accessible
	focusされて:focused
	focus可能:focusable
	目立たせたい:intense
	触れれる:tactile
	触れない:untouched
	-:keyboard shortcut

	●仕様
overhead::::オーバーヘッド
critical:
不利:disadvantage:~
目安:guide:~
支援技術:assistive technology:~
表記:notation:~
高価:expensive:~
妥協:compromise:~
極端:extreme:~
遺物:artifact:~
中立的:neutral::~
指示書き:instruction:~
基礎的:fundamental::~
優良:good:~
普通の:ordinaryな:~
義務付け:mandateし:~
類別-:classify:~
枯渇-:exhaust:~
機能:function:~
裁量:discretion:~
有利:advantageous:~
拡げる:expandする:~
	拡げること:expansion
計画-:plan:~

	未~supportな:unsupported
	整合するように:consistently
	~~直に:straight
	逆に:conversely
	加えて:furthermore
	今は:now
	そこでは、:wherein
	単に:merely
	単なる:just a
	すなわち:That is
	無差別的:wholesale
	その場:on-the-fly
	よく似る:much like
	必ず:make sure
	本当に:really
	たいていは:pretty much
	仮の:hypothetical
	著しく:greatly
	よほど異例のもの:quite-unusual
	見込みが高い:would likely
	引き換え:price of
	無為な要件:moot point
	~~障害:prohibitive
	類するもの:or similar
	ならば:insofar
	であり続ける:remain〜throughout
	利用-可能か:usability
	影響されない:unaffected
	伝える:informする
	-:work
	処する:deal-with
	短絡-:short-circuit／:shortcut／:short-circuiting
	呼ばれ:called
	要注意:Care ought to be taken
	満たす:satisfy
	築き方:building
	知る仕方がない:there is no way to know
	壊れている:broken
	覚えておく:remember
	省かれ:elide
	注意:notice
	どの〜を選ぶか:choice
	作業-法:working
	^en:an unlikely, though potentially awesome
	-:denoted
	伝える:inform
	~~普及:popular
	の定義により:how 〜 is defined
	区別:distinctions
	分類:categories
	必然的に:entail
	為され:made
	伝える:tell
	〜するよう~~指示:marked for 

	●未分類
	NaN:
OffscreenCanvas:
ImageBitmapRenderingContext:
cap:
ratio:
red:
透過的:transparent::~
可触:palpable::~
句ng:phrasing::句
固定-:fix::~
超過-:exceed::~
消費:consumption::~
弱い:weakな::~
省略:omission:~
	省略時:optional
確定的:definite::~
種類:kind:~
関数-:functional:~
生成元clean:origin-clean::生成元 clean::オリジン clean
入口:entry::~
高速:fast::~
測定結果:measurement:~
	〜から〜までの:measured
plasma:
cloud:
slate:
地域化-:localize::~::ローカル化
数量的:numerical:~


	長さ 0 の:zero-length
	animate化:animated
	現れる:appear
	変わる:vary
	戻-:back
	保つ:keep
	-:huge amount
	~~現れる結果の:final
	複数行:multiline
	置く:put
	空にする:clear
	全~画素を:clear the pixels
	全~画素:clear
	各~画素を成す各~成分:sample
	入力~data:inputData
	指す:refer
	多少:slightly
	残る:remain
	指す:at
	に来る:coming out
	単-:single:~
	ε:unset／
	なって:become
	有していない:missing
	真偽値:true or false
	短い:short
	連続する:consecutive
	-:expression
	-:measure
	-:opposed
	-／まま:leaving
	^en:tearing artifacts
	-:incline
	font-weight^p 〜 `normal^v:~normal-weight
	-:respective
	^en:scan out
	-:saved
	〜参照:back-reference
	`undefined^jv:undefined
	増大-:increasing
	設定:settings
	~tag無しな:untagged
	狭い:narrow
	切り詰める:clip
	こと以外に:beyond, at most,
	全体を~viewとする: a zero start offset and a length equal to the length of its storage 〜 correct size to store
	始まる:begin
	~web~page:webpage
	-:alias
	前項:for the previous overload
	構文解析-不能:unparseable
	構文解析-可能:parsable／:parseable
	変更されない:left unchanged

	次回:next time／:next
	同時に:the same time
	以降に:subsequent
	こともある／ときには／あるとき／あるとき／別のとき:sometimes
	時点における:at the time
	以前に／それまで:previously
	以降／:once
	まだ:yet
	これまでの:earlier
	全体:at once
	全体:whole
	部分, 全体どちらを成す:in parts or in whole
	その次:next
	沿う:along
	一連の:sequence
	何も〜ない:nothing is
	何も:nothing
	部位:part of
	全:whole
	中:medium
	上へ:up
	下へ:down
	側:side
	ほぼ:mostly
	の所:away from
	一部の:certain
	ある種の:certain kind
	唯一:one
	毎:every
	直前の:previous
	少数の:a couple of
	初期時:start with
	各部:parts
	別物:distinct
	総:overall
	大きい:large
	小さい:small
	2 倍／二重:double
	最後の点から〜ように:the previous one
	まったく 〜ない:at all
	ほぼ:nearly
	これまでの:previous
	一緒:together
	一部または全部:total or part
	節:section
	だけ:just a
	すべて:everything
	何回も:many

●●images
＠HTML-resources/
baselines｜width:738px; height:300px｜｜.png
arcTo1｜width:357px; height:254px｜arcTo による描画例｜.png
arcTo2｜width:468px; height:310px｜arcTo による描画例｜.png
arcTo3｜width:513px; height:233px｜arcTo による描画例｜.png
arc1｜width:590px; height:255px｜arc による描画例｜.png
drawImage｜width:356px; height:356px｜｜.png
premultiplied-example-1｜width:96px; height:96px;｜｜.png
premultiplied-example-2｜width:96px; height:96px;｜｜.png
premultiplied-example-3｜width:96px; height:96px;｜｜.png
premultiplied-example-4｜width:96px; height:96px;｜｜.png
premultiplied-example-5｜width:96px; height:96px;｜｜.png
	premultiplied-example-6｜width:96px; height:96px;｜An empty background with nothing atop it｜premultiplied-example-5.png


●●trans_metadata
<p>
~THIS_PAGEは、~WHATWGによる HTML 仕様の
<a href="~SPEC_URL">§ The canvas element</a>
を日本語に翻訳したものです。
~PUB
</p>

</script>
</head>
<body>

<header>
	<hgroup>
<h1>HTML — canvas 要素</h1>
	</hgroup>
</header>

<main id="MAIN" hidden>

			<section id="_conventions">
<h4>【この訳に特有な表記規約】</h4>

◎表記記号

<p>
加えて、
次に挙げる表記も利用される：
</p>

<dl class="def-list">
	<dt>`有限@</dt>
	<dd>
`~urdb^c 型の値が有限であるとは、
次を満たすことの略記である
⇒
値 ~NIN { `NaN^jv, `Infinity^jv, `−Infinity^jv }
</dd>

	<dt>`~2D描画~文脈@</dt>
	<dd>
［
`CanvasRenderingContext2D$I ／ `ImageBitmapRenderingContext$I
］~objの総称。
</dd>

	<dt>%~obj＜%Foo＞</dt>
	<dd>
この表記は、
次の表明を意味する
⇒
“~obj %~obj は［
~interface／~interface~mixin
］ %Foo も実装するものと見做されており、
そうでない場合の挙動は，この仕様には定義されていない。”
</dd>
	<dd>
（この表記を利用する理由は、
この~pageに定義される多くの~interface~mixinにおいて，それを実装する~objは［
それを内包する特定0の~interfaceも実装する ／
それを内包する~interfaceを介して別の~interface~mixinも実装する
］ものと暗黙的に見做されていることにある。）
</dd>
</dl>

			</section>
			<section id="the-canvas-element">
<h4 title="The canvas element">4.12.5. `canvas^e 要素</h4>
<a id="canvas"></a>

<dl class="element-def">
	<dt>`分類$</dt>
	<dd>
`~flow内容$／`句ng内容$／`埋込d内容$／`可触~内容$
◎
Flow content.
◎
Phrasing content.
◎
Embedded content.
◎
Palpable content.
</dd>

	<dt>`この要素を利用できる文脈$</dt>
	<dd>
`埋込d内容$が期待される所。
◎
Where embedded content is expected.
</dd>

	<dt>`内容~model$</dt>
	<dd>
<p>
`透過的$
— ただし，子孫に含む`ヤリトリありな内容$は、
次の表tの 1 列目に挙げる要素のうち，同じ行の 2 列目の条件を満たすものに限るとする：
</p>

<table><thead>
<tr><th>要素
<th>条件
<tbody>

<tr><td>`a$e
<td>無条件

<tr><td>`img$e
<td>`usemap$a 属性を有する

<tr><td>`button$e
<td>無条件

<tr><td>`input$e
<td>`type$a 属性は［
`Checkbox$st ／ `Radio$st
］状態にある

<tr><td>`input$e
<td>`~button$である

<tr><td>`select$e
<td>`multiple$a 属性を有する

<tr><td>`select$e
<td>`表示~size$ ~GT 1
</table>

◎
Transparent, but with no interactive content descendants except for a elements, img elements with usemap attributes, button elements, input elements whose type attribute are in the Checkbox or Radio Button states, input elements that are buttons, and select elements with a multiple attribute or a display size greater than 1.
</dd>

	<dt>`text/html における~tag省略$</dt>
	<dd>
両~tagとも省略-可能でない。
◎
Neither tag is omissible.
</dd>

	<dt>`内容~属性$</dt>
	<dd>
`大域~属性$
◎
Global attributes
</dd>
	<dd>
`width$a
— 横~寸法
◎
width — Horizontal dimension
</dd>
	<dd>
`height$a
— 縦~寸法
◎
height — Vertical dimension
</dd>

	<dt>`~accessibilityの考慮点$</dt>
	<dd>
`作者~向け＠~HTMLARIA#el-canvas$／`実装者~向け＠~HTMLAAM#el-canvas$
◎
For authors.
For implementers.
</dd>

	<dt>`~DOM~interface$</dt>
	<dd>

<pre class="idl">
typedef (`CanvasRenderingContext2D$I or `ImageBitmapRenderingContext$I or `WebGLRenderingContext$I or `WebGL2RenderingContext$I or `GPUCanvasContext$I) `RenderingContext@I;

[Exposed=Window]
interface `HTMLCanvasElement@I : `HTMLElement$I {
  [`HTMLConstructor$] constructor();

  [`CEReactions$] attribute unsigned long `width$m;
  [`CEReactions$] attribute unsigned long `height$m;

  `RenderingContext$I? `getContext$m(DOMString %contextId, optional any %options = null);

  USVString `toDataURL$m(optional DOMString %type = "image/png", optional any %quality);
  undefined `toBlob$m(`BlobCallback$I %_callback, optional DOMString %type = "image/png", optional any %quality);
  `OffscreenCanvas$I `transferControlToOffscreen$m();
};

callback `BlobCallback@I = undefined (`Blob$I? %blob);
</pre>
	</dd>
</dl>

<p>
`canvas$e 要素は、
解像度に依存する~bitmap~canvasを~scriptに供する
— それは［
~graph, ~game~graphic, ~art,
その他の視覚的な画像
］をその場で描画するために利用できる。
◎
The canvas element provides scripts with a resolution-dependent bitmap canvas, which can be used for rendering graphs, game graphics, art, or other visual images on the fly.
</p>

<p>
作者は、
より相応しい要素が可用であるときは，
文書~内に `canvas$e 要素を利用するべきでない。
例えば、
~pageの~headingを描画するために `canvas$e 要素を利用するのは不適切である
— ~headingの呈示を~graphic的に目立たせたい場合、
適切な要素（概して `h1$e ）を利用して~mark-upした上で，
~CSSで~styleをあてがい，
`~shadow~tree$などの~support用~技術を利用するべきである。
【！なぜ~shadow~tree？】
◎
Authors should not use the canvas element in a document when a more suitable element is available. For example, it is inappropriate to use a canvas element to render a page heading: if the desired presentation of the heading is graphically intense, it should be marked up using appropriate elements (typically h1) and then styled using CSS and supporting technologies such as shadow trees.
</p>

<p>
作者は、
`canvas$e 要素を利用するときは、
利用者に呈示する際に［
`canvas$e の~bitmapと本質的に同じ機能または目的を伝達する内容
］を供さなければナラナイ。
この内容は、
`canvas$e 要素の内容として配置してもヨイ。
`canvas$e 要素の内容があれば、
それが要素の`~fallback内容$になる。
◎
When authors use the canvas element, they must also provide content that, when presented to the user, conveys essentially the same function or purpose as the canvas's bitmap. This content may be placed as content of the canvas element. The contents of the canvas element, if any, are the element's fallback content.
</p>

<hr>

<p>
`canvas$e 要素 %要素 は、
可視でない媒体においては，
その`~fallback内容$を`表現-$する。
視覚-媒体においては：
◎
↓</p>

<ul>
	<li>
次が満たされるならば、
動的に作成される， %要素 の~bitmap画像による`埋込d内容$を`表現-$する
⇒
［
媒体はヤリトリありである
］~AND［
%要素 用の`~scriptingは可能化されて$いる
］~AND［
`canvas$e 要素~用の~supportは可能化されている
］
◎
In interactive visual media, if scripting is enabled for the canvas element, and if support for canvas elements has been enabled, then the canvas element represents embedded content consisting of a dynamically created image, the element's bitmap.
</li>
	<li>
媒体がヤリトリありでなく, 静的な場合でも、
%要素 が以前に描画~文脈に結付けられていた場合には
（例：
~pageは ヤリトリありかつ視覚的な媒体に表示されていて，今は印刷されている場合 ／
~page~layout処理nの間に走った~scriptが，要素に何か塗っていた場合）、
%要素 の現在の~bitmapと~sizeを伴う`埋込d内容$を`表現-$する。
◎
In non-interactive, static, visual media, if the canvas element has been previously associated with a rendering context (e.g. if the page was viewed in an interactive visual medium and is now being printed, or if some script that ran during the page layout process painted on the element), then the canvas element represents embedded content with the element's current bitmap and size. Otherwise, the element represents its fallback content instead.
</li>
	<li>
他の場合、
%要素 の`~fallback内容$を表現する。
◎
In non-visual media, and in visual media if scripting is disabled for the canvas element or if support for canvas elements has been disabled, the canvas element represents its fallback content instead.
</li>
</ul>

<p>
`canvas$e 要素が`埋込d内容$を`表現-$するときでも、
利用者は（`~fallback内容$内にある）`canvas$e 要素の子孫を~focusできる。
`~focusされて$いる要素は、
（それ自身は可視でなくとも）~keyboardヤリトリ~eventの~targetになる。
これは、［
ヤリトリありな~canvasを~keyboardで~access可能にする
］ことを作者に許容する
— 作者は、
ヤリトリありな領域から`~fallback内容$内の`~focus可能な区画$へ一対一に対応付けるべきである。
（~focusは、
~mouseによるヤリトリ~eventに対しては効果はない。）
`UIEVENTS$r
◎
When a canvas element represents embedded content, the user can still focus descendants of the canvas element (in the fallback content). When an element is focused, it is the target of keyboard interaction events (even though the element itself is not visible). This allows authors to make an interactive canvas keyboard-accessible: authors should have a one-to-one mapping of interactive regions to focusable areas in the fallback content. (Focus has no effect on mouse interaction events.) [UIEVENTS]
</p> 

<p>
次を満たす要素は、
`関連な~canvas~fallback内容として利用-中にある@
とされる
⇒
［
最も近傍の先祖である `canvas$e 要素は`具現化されて$いる
］~AND［
`埋込d内容$を`表現-$する
］
◎
An element whose nearest canvas element ancestor is being rendered and represents embedded content is an element that is being used as relevant canvas fallback content.
</p>

<hr>

<p>
`canvas$e 要素には、
その~bitmapの~sizeを制御するための 2 種の属性
`width@a,
`height@a
がある：
◎
The canvas element has two attributes to control the size of the element's bitmap: width and height.＼
</p>

<ul>
	<li>
これらの属性に指定する値は、
`妥当な負でない整数$でなければナラナイ。
◎
These attributes, when specified, must have values that are valid non-negative integers.＼
</li>
	<li>
これらの属性から
`数量-値@
を得するときは、［
要素は属性を有していて，属性の値を`負でない整数として構文解析-$した結果 ~NEQ `失敗^i ならば その結果 ／
~ELSE_ 既定~値
］を返すモノトスル
— この既定~値は、
`width$a 属性~用には 300,
`height$a 属性~用には 150 とする。
◎
The rules for parsing non-negative integers must be used to obtain their numeric values. If an attribute is missing, or if parsing its value returns an error, then the default value must be used instead. The width attribute defaults to 300, and the height attribute defaults to 150.
</li>
	<li>
これらの属性が［
要素の`文脈~mode$ ~EQ `placeholder$cM
］の下で設定されようとしたときは、
~UAは，属性を変更することなく `InvalidStateError$E 例外を投出するモノトスル。
◎
When setting the value of the width or height attribute, if the context mode of the canvas element is set to placeholder, the user agent must throw an "InvalidStateError" DOMException and leave the attribute's value unchanged.
</li>
</ul>
<p>
`埋込d内容$を`表現-$するような `canvas$e 要素の`生来な寸法$は、
要素の~bitmapの寸法に等しいとする。
◎
The natural dimensions of the canvas element when it represents embedded content are equal to the dimensions of the element's bitmap.
</p>

<p>
~UAは、［
`canvas$e の~bitmap, およびその描画~文脈
］用の座標~空間には，［
その 1 単位が画像~dataの 1 画素に等しい，正方形の画素~密度
］を利用するモノトスル。
◎
The user agent must use a square pixel density consisting of one pixel of image data per coordinate space unit for the bitmaps of a canvas and its rendering contexts.
</p>

<p class="note">注記：
`canvas$e 要素は、
~stylesheetにより任意に~sizeできる
— そうした場合、
その~bitmapは，~CSS `object-fit$p ~propの~subjectになる。
◎
A canvas element can be sized arbitrarily by a style sheet, its bitmap is then subject to the 'object-fit' CSS property.
</p>

<hr>

<p>
［
`canvas$e 要素／ `ImageBitmap$I ~obj
］の~bitmap，および
一部の描画~文脈
— 以下の各~節に述べる［
`CanvasRenderingContext2D$I,
`OffscreenCanvasRenderingContext2D$I,
`ImageBitmapRenderingContext$I
］など —
は、
`生成元cleanか@
を有する
— それは、
真偽値であり，［
`canvas$e 要素／ `ImageBitmap$I ~obj
］の作成-時には ~T に設定するモノトスル
【描画~文脈に対しては、他所で述べられる】
。
◎
The bitmaps of canvas elements, the bitmaps of ImageBitmap objects, as well as some of the bitmaps of rendering contexts, such as those described in the sections on the CanvasRenderingContext2D, OffscreenCanvasRenderingContext2D, and ImageBitmapRenderingContext objects below, have an origin-clean flag, which can be set to true or false. Initially, when the canvas element or ImageBitmap object is created, its bitmap's origin-clean flag must be set to true.
</p>

<p>
各 `canvas$e 要素は、
ある描画~文脈を束縛し得る。
そのような描画~文脈の有無, その種類を追跡し続けるため、
各 `canvas$e 要素 %要素 は、
`~canvas文脈~mode@
を有する
— それは：
◎
A canvas element can have a rendering context bound to it. Initially, it does not have a bound rendering context. To keep track of whether it has a rendering context or not, and what kind of rendering context it is, a canvas also has a canvas context mode,＼
</p>
<ul>
	<li>
次に挙げるいずれかをとる
⇒＃
`none@cM,
`placeholder@cM,
`2d@cM,
`bitmaprenderer@cM,
`webgl@cM,
`webgl2@cM,
`webgpu@cM
◎
which is initially none but can be changed to either placeholder, 2d, bitmaprenderer, webgl, webgl2, or webgpu by algorithms defined in this specification.
</li>
	<li>
初期~時は `none$cM をとり、
この仕様に定義される各種~algoにより，変更され得る。
◎
↑</li>
	<li>
<p>
次に挙げるいずれかをとるときは、
%要素 が束縛している描画~文脈は無い：
◎
↓</p>
		<ul>
			<li>
`none$cM
⇒
この場合、
%要素 の~bitmapは`透明な黒$になるモノトスル。
加えて， %要素 の［
`生来な横幅$／`生来な縦幅$
］は、
`px$css 単位で %要素 の［
`width$a ／ `height$a
］属性の`数量-値$に等しくなり，これらの属性が［
設定-／変更-／除去-
］される伴い，更新されるモノトスル。
◎
When its canvas context mode is none, a canvas element has no rendering context, and its bitmap must be transparent black with a natural width equal to the numeric value of the element's width attribute and a natural height equal to the numeric value of the element's height attribute, those values being interpreted in CSS pixels, and being updated as the attributes are set, changed, or removed.
</li>
			<li>
`placeholder$cM
⇒
この場合、
%要素 は，ある `OffscreenCanvas$I ~obj %O の~placeholderとして~serveする
— %要素 の内容は、
%O の描画~文脈により更新される。
◎
When its canvas context mode is placeholder, a canvas element has no rendering context. It serves as a placeholder for an OffscreenCanvas object, and the content of the canvas element is updated by the OffscreenCanvas object's rendering context.
</li>
		</ul>
	</li>
</ul>

<p>
`canvas$e 要素 %要素 は、
`埋込d内容$を表現するならば，次のような`塗り~source$を供する：
◎
When a canvas element represents embedded content, it provides a paint source＼
</p>
<ul>
	<li>
%要素 の ( 横幅, 縦幅 ) は、
%要素 の ( `生来な横幅$, `生来な縦幅$ ) で与えられる
◎
whose width is the element's natural width, whose height is the element's natural height,＼
</li>
	<li>
%要素 の外観は、
%要素 の~bitmapで与えられる
◎
and whose appearance is the element's bitmap.
</li>
</ul>

<div class="algo">
<p>
`canvas$e 要素 %要素 の［
`width$a ／ `height$a
］内容~属性が［
設定-（元と同じ値が設定される場合も含む）／変更-／除去-
］されるたびに、
~UAは %要素 の`~canvas文脈~mode$に応じて，次を遂行するモノトスル：
◎
Whenever the width and height content attributes are set, removed, changed, or redundantly set to the value they already have, then the user agent must perform the action from the row of the following table that corresponds to the canvas element's context mode.
◎
Context Mode
◎
Action
</p>

<dl class="switch">
	<dt>`2d$cM</dt>
	<dd>
%要素 の［
`width$a, `height$a
］内容~属性の`数量-値$で`~bitmap寸法を設定する$。
◎
Follow the steps to set bitmap dimensions to the numeric values of the width and height content attributes.
</dd>

	<dt>`webgl$cM</dt>
	<dt>`webgl2$cM</dt>
	<dd>
~WebGL仕様に定義される挙動に従う。
`WEBGL$r
◎
Follow the behavior defined in the WebGL specifications. [WEBGL]
</dd>

	<dt>`webgpu$cM</dt>
	<dd>
~WebGPU仕様に定義される挙動に従う。
`WEBGPU$r
◎
Follow the behavior defined in WebGPU. [WEBGPU]
</dd>

	<dt>`bitmaprenderer$cM</dt>
	<dd>
~IF［
%要素 が束縛している描画~文脈の`~bitmap~mode$iBM ~EQ `~blank$iBM
］
⇒
`~ImageBitmapRenderingContextの出力~bitmapを設定する$( %要素 が束縛している描画~文脈 )
◎
If the context's bitmap mode is set to blank, run the steps to set an ImageBitmapRenderingContext's output bitmap, passing the canvas element's rendering context.
</dd>

	<dt>`placeholder$cM</dt>
	<dd>
何もしない。
◎
Do nothing.
</dd>

	<dt>`none$cM</dt>
	<dd>
何もしない。
【上述した %要素 の`生来な寸法$を更新することを除いて。】
◎
Do nothing.
</dd>
</dl>
</div>

<p>
［
`width@m
／
`height@m
］~IDL属性は、［
`width$a ／ `height$a
］内容~属性を
— 同じ既定で† —
`反映する$モノトスル。
【†おそらく、その`数量-値$を得するときに利用する既定~値を，`既定の値＠~HTMLcdom#default-value$とする下で。】
◎
The width and height IDL attributes must reflect the respective content attributes of the same name, with the same defaults.
</p>

<hr>

<dl class="domintro">
	<dt>%context = %canvas.`getContext(contextId [, options ])$m</dt>
	<dd>
~canvasに描くための~APIを公開する~objを返す。
%contextId は、
欲される~APIを［
`2d$cC,
`bitmaprenderer$cC,
`webgl$cC,
`webgl2$cC,
`webgpu$cC
］いずれかとして指定する。
%options は、
その~APIにより取扱われる。
◎
Returns an object that exposes an API for drawing on the canvas. contextId specifies the desired API: "2d", "bitmaprenderer", "webgl", "webgl2", or "webgpu". options is handled by that API.
</dd>
	<dd>
この仕様は、［
`2d$cC, `bitmaprenderer$cC
］文脈を定義する。
`WEBGL$r 仕様は、［
`webgl$cC, `webgl2$cC 
］文脈を定義する。
`WEBGPU$r 仕様は、
`webgpu$cC 文脈を定義する。
◎
This specification defines the "2d" and "bitmaprenderer" contexts below. The WebGL specifications define the "webgl" and "webgl2" contexts. WebGPU defines the "webgpu" context. [WEBGL] [WEBGPU]
</dd>
	<dd>
次の場合は~NULLを返す
⇒
%contextId は~supportされない場合 ／
当の~canvasは すでに別種の文脈で初期化されている場合（例：
`webgl$cC 文脈を取得した後に `2d$cC 文脈を取得しようと試行した場合）。
◎
Returns null if contextId is not supported, or if the canvas has already been initialized with another context type (e.g., trying to get a "2d" context after getting a "webgl" context).
</dd>
</dl>

<div class="algo">
<p>
`getContext(contextId, options)@m
~method手続きは：
◎
The getContext(contextId, options) method of the canvas element, when invoked, must run these steps:
</p>
<ol>
	<li>
~IF［
%options は `object$c でない
］
⇒
%options ~SET ~NULL
◎
If options is not an object, then set options to null.
</li>
	<li>
%options ~SET `~JS値に変換する$( %options )
◎
Set options to the result of converting options to a JavaScript value.
</li>
	<li>
<p>
( コレの`~canvas文脈~mode$, %contextId )
に応じて
⇒
~GOTO 次の表tの該当する~cellに与えられる~label：
</p>

<table><thead>
<tr><th rowspan="2" scope="col">`~canvas文脈~mode$
<th colspan="5">%contextId

<tr>
<th>`2d@cC
<th>`bitmaprenderer@cC
<th>`webgl@cC／`webgl2@cC†
<th>`webgpu@cC†
<th>未~supportな値
<tbody>

<tr><th>`none$cM
<td>`新~2D^i
<td>`新~bitmap^i
<td>`新~WebGL^i
<td>`新~WebGPU^i
<td>`~NULL^i

<tr><th>`2d$cM
<td>`前回と同じ^i
<td>`~NULL^i
<td>`~NULL^i
<td>`~NULL^i
<td>`~NULL^i

<tr><th>`bitmaprenderer$cM
<td>`~NULL^i
<td>`前回と同じ^i
<td>`~NULL^i
<td>`~NULL^i
<td>`~NULL^i

<tr><th>`webgl$cM／`webgl2$cM
<td>`~NULL^i
<td>`~NULL^i
<td>`前回と同じ^i
<td>`~NULL^i
<td>`~NULL^i

<tr><th>`webgpu$cM
<td>`~NULL^i
<td>`~NULL^i
<td>`~NULL^i
<td>`前回と同じ^i
<td>`~NULL^i

<tr><th>`placeholder$cM
<td>`投出^i
<td>`投出^i
<td>`投出^i
<td>`投出^i
<td>`投出^i
</table>

<p>†
%contextId に対する値［
`webgl$cC ／ `webgl2$cC ／ `webgpu$cC
］は、
~UAが現在の環境設定において［
~WebGL／~WebGL／~WebGPU
］特能を~supportしていない場合は，
未~supportな値と見做すとする
（例えば，~WebGLにおいては、
~graphic~hardwareの能が枯渇していて，
~UAには~software~fallback実装もない事例）
</p>

		<dl class="switch">
			<dt>`投出^i</dt>
			<dd>
~THROW `InvalidStateError$E
</dd>

			<dt>`~NULL^i</dt>
			<dd>
~RET ~NULL
</dd>

			<dt>`前回と同じ^i</dt>
			<dd>
				<ol>
					<li>
~Assert：
［
コレ上でこの~methodが呼出されたのは初回でない
］~AND［
%contextId ~EQ 前回に呼出されたときに渡された %contextId 引数
］
</li>
						<li>
~RET この~methodが最後に呼出されたとき返した~obj
</li>
				</ol>
			</dd>

			<dt>`新~2D^i</dt>
			<dd>
				<ol>
					<li>
%文脈 ~LET `~2D文脈を作成する$( コレ, %options )
</li>
					<li>
コレの`~canvas文脈~mode$ ~SET `2d$cM
</li>
					<li>
~RET %文脈
</li>
				</ol>
			</dd>

			<dt>`新~bitmap^i</dt>
			<dd>
				<ol>
					<li>
%文脈 ~LET `~ImageBitmapRenderingContextを作成する$( コレ, %options )
</li>
					<li>
コレの`~canvas文脈~mode$ ~SET `bitmaprenderer$cM
</li>
					<li>
~RET %文脈
</li>
				</ol>
			</dd>

			<dt>`新~WebGL^i</dt>
			<dd>
				<ol>
					<li>
%文脈 ~LET
`WEBGL$r `§ Context Creation＠~WEBGL/2.0/#2.1$
の指示書きに従って得した結果
</li>
					<li>
~IF［
%文脈 ~NEQ ~NULL
］
⇒
コレの`~canvas文脈~mode$ ~SET %文脈 に応じて
⇒＃
`WebGLRenderingContext$I ならば `webgl$cM ／
`WebGL2RenderingContext$I ならば `webgl2$cM
</li>
					<li>
~RET %文脈
</li>
				</ol>
			</dd>

			<dt>`新~WebGPU^i</dt>
			<dd>
				<ol>
					<li>
%文脈 ~LET
`WEBGPU$r `§ Canvas Rendering＠~WEBGPU#canvas-rendering$
の指示書きに従って得した結果
</li>
					<li>
~IF［
%文脈 ~NEQ ~NULL 【 %文脈 は `GPUCanvasContext$I である】
］
⇒
コレの`~canvas文脈~mode$ ~SET `webgpu$cM
</li>
					<li>
~RET %文脈
</li>
				</ol>
			</dd>
		</dl>
◎
Run the steps in the cell of the following table whose column header matches this canvas element's canvas context mode and whose row header matches contextId:
◎
｜none｜2d｜bitmaprenderer｜webgl or webgl2｜webgpu｜placeholder
◎
"2d"｜＼
• Let context be the result of running the 2D context creation algorithm given this and options.
• Set this's context mode to 2d.
• Return context.
｜＼
Return the same object as was returned the last time the method was invoked with this same first argument.｜Return null.｜Return null.｜Return null.｜Throw an "InvalidStateError" DOMException.
◎
"bitmaprenderer"｜
• Let context be the result of running the ImageBitmapRenderingContext creation algorithm given this and options.
• Set this's context mode to bitmaprenderer.
• Return context.
｜＼
Return null.｜Return the same object as was returned the last time the method was invoked with this same first argument.｜Return null.｜Return null.｜Throw an "InvalidStateError" DOMException.
◎
"webgl" or "webgl2", if the user agent supports the WebGL feature in its current configuration｜
• Let context be the result of following the instructions given in the WebGL specifications' Context Creation sections. [WEBGL]
• If context is null, then return null; otherwise set this's context mode to webgl or webgl2.
• Return context.
｜＼
Return null.｜Return null.｜Return the same object as was returned the last time the method was invoked with this same first argument.｜Return null.｜Throw an "InvalidStateError" DOMException.
◎
"webgpu", if the user agent supports the WebGPU feature in its current configuration｜
• Let context be the result of following the instructions given in WebGPU's Canvas Rendering section. [WEBGPU]
• If context is null, then return null; otherwise set this's context mode to webgpu.
• Return context.
｜＼
Return null.｜Return null.｜Return null.｜Return the same object as was returned the last time the method was invoked with this same first argument.｜Throw an "InvalidStateError" DOMException.
An unsupported value*｜Return null.｜Return null.｜Return null.｜Return null.｜Return null.｜Throw an "InvalidStateError" DOMException.
◎
* For example, the "webgl" or "webgl2" value in the case of a user agent having exhausted the graphics hardware's abilities and having no software fallback implementation.
</li>
</ol>
</div>

<hr>

<dl class="domintro">

	<dt>%url = %canvas.`toDataURL( [ type [, quality ] ])$m</dt>
	<dd>
この~canvas内の画像~用の`~data-URL$を返す。
◎
Returns a data: URL for the image in the canvas.
</dd>
	<dd>
%type 引数が供された場合、
返される画像の型を制御する（例： ~PNG／~JPEG ）。
既定は `image/png$mt 型とする
— この型は、
所与の型が~supportされない場合にも利用される。
%quality 引数は、［
型による画像~形式が可変~品質を~supportする場合（ `image/jpeg$mt など ）に適用される，
0.0 以上 1.0 以下の数
］であり，結果の画像に欲される品質~levelを指示する。
◎
The first argument, if provided, controls the type of the image to be returned (e.g. PNG or JPEG). The default is "image/png"; that type is also used if the given type isn't supported. The second argument applies if the type is an image format that supports variable quality (such as "image/jpeg"), and is a number in the range 0.0 to 1.0 inclusive indicating the desired quality level for the resulting image.
</dd>
	<dd>
作者は、
`image/png$mt 以外の型を利用しようと試行するときは，
返された画像が本当に要請した形式であるかどうかを検査できる
— 返された文字列が正確に文字列 ［
`data:image/png,^l ／ `data:image/png;^l
］から開始されているかどうかを見て。
そうであれば、
画像は~PNGであり，要請した型は~supportされないことになる
（これに対する唯一の例外は，~canvasの縦幅または横幅がない場合であり、
その事例での結果は単純に `data:,^l になるであろう）。
◎
When trying to use types other than "image/png", authors can check if the image was really returned in the requested format by checking to see if the returned string starts with one of the exact strings "data:image/png," or "data:image/png;". If it does, the image is PNG, and thus the requested type was not supported. (The one exception to this is if the canvas has either no height or no width, in which case the result might simply be "data:,".)
</dd>

	<dt>%canvas.`toBlob(callback [, type [, quality ] ])$m</dt>
	<dd>
この~canvas内の画像を包含している~fileを表現している `Blob$I ~objを作成した上で、
その~objを~~渡して %callback を呼出す。
◎
Creates a Blob object representing a file containing the image in the canvas, and invokes a callback with a handle to that object.
</dd>
	<dd>
%type 引数が供された場合、
返される画像の型を制御する
（例： ~PNG／~JPEG ）。
既定は `image/png$mt 型とする
— この型は、
所与の型が~supportされない場合にも利用される。
%quality 引数は、
型による画像~形式が可変~品質を~supportする場合（ `image/jpeg$mt など ）に適用される［
0.0 以上 1.0 以下の数
］であり，
結果の画像に欲される品質~levelを指示する。
◎
The second argument, if provided, controls the type of the image to be returned (e.g. PNG or JPEG). The default is "image/png"; that type is also used if the given type isn't supported. The third argument applies if the type is an image format that supports variable quality (such as "image/jpeg"), and is a number in the range 0.0 to 1.0 inclusive indicating the desired quality level for the resulting image.
</dd>

	<dt>%canvas.`transferControlToOffscreen()$m</dt>
	<dd>
`canvas$e 要素を~placeholderとして利用するような，新たな `OffscreenCanvas$I ~obj %O を返す。
`canvas$e 要素が %O 用の~placeholderになって以降は、
その`生来な~size$は，もはや変更し得なくなり，描画~文脈も有し得なくなる。
~placeholder~canvasの内容は、
%O に`関連な~agent$の`~event~loop$aG内で`描画を更新する$ときに更新される。
◎
Returns a newly created OffscreenCanvas object that uses the canvas element as a placeholder. Once the canvas element has become a placeholder for an OffscreenCanvas object, its natural size can no longer be changed, and it cannot have a rendering context. The content of the placeholder canvas is updated on the OffscreenCanvas's relevant agent's event loop's update the rendering steps.
</dd>
</dl>

<div class="algo">
<p>
`toDataURL(type, quality)@m
~method手続きは：
◎
The toDataURL(type, quality) method, when invoked, must run these steps:
</p>
<ol>
	<li>
~IF［
コレの~bitmapの`生成元cleanか$ ~EQ ~F
］
⇒
~THROW `SecurityError$E
◎
If this canvas element's bitmap's origin-clean flag is set to false, then throw a "SecurityError" DOMException.
</li>
	<li>
~IF［
コレの~bitmapの寸法は、
横, 縦いずれかは 0
（すなわち、~bitmapは空）
］
⇒
~RET 文字列 `data:,^l
（これは、［
`text/plain^c 資源~内の空~文字列
］を表現する最短な`~data-URL$を与える。）
◎
If this canvas element's bitmap has no pixels (i.e. either its horizontal dimension or its vertical dimension is zero) then return the string "data:,". (This is the shortest data: URL; it represents the empty string in a text/plain resource.)
</li>
	<li>
%file ~LET `~bitmapを~fileとして直列化する$( コレの~bitmap, %type, %quality )
（ %type ／ %quality は省略-時は ε ）
◎
Let file be a serialization of this canvas element's bitmap as a file, passing type and quality if given.
</li>
	<li>
~IF［
%file ~EQ ~NULL
］
⇒
~RET `data:,^l
◎
If file is null then return "data:,".
</li>
	<li>
~RET %file を表現している`~data-URL$
`RFC2397$r
◎
Return a data: URL representing file. [RFC2397]
</li>
</ol>
</div>

<div class="algo">
<p>
`toBlob(callback, type, quality)@m
~method手続きは：
◎
The toBlob(callback, type, quality) method, when invoked, must run these steps:
</p>
<ol>
	<li>
~IF［
コレの~bitmapの`生成元cleanか$ ~EQ ~F
］
⇒
~THROW `SecurityError$E
◎
If this canvas element's bitmap's origin-clean flag is set to false, then throw a "SecurityError" DOMException.
</li>
	<li>
%結果 ~LET ~NULL
◎
Let result be null.
</li>
	<li>
~IF［
コレの~bitmapの寸法は、
横, 縦とも 0 でない
（すなわち、~bitmapは空でない）
］
⇒
%結果 ~SET コレの~bitmapの複製
◎
If this canvas element's bitmap has pixels (i.e., neither its horizontal dimension nor its vertical dimension is zero), then set result to a copy of this canvas element's bitmap.
</li>
	<li>
<p>
この段は`並列的$に走らす：
◎
Run these steps in parallel:
</p>
		<ol>
			<li>
~IF［
%結果 ~NEQ ~NULL
］
⇒
%結果 ~SET `~bitmapを~fileとして直列化する$( %結果, %type, %quality )
（ %type ／ %quality は省略-時は ε ）
◎
If result is non-null, then set result to a serialization of result as a file with type and quality if given.
</li>
			<li>
<p>
`要素~taskを~queueする$(
`~canvas~blob直列化~task~source@,
コレ, 次の手続き )
◎
Queue an element task on the canvas blob serialization task source given the canvas element to run these steps:
</p>

<div class="algo">
<p>
手続きは：
◎
↑</p>
				<ol>
					<li>
~IF［
%結果 ~NEQ ~NULL
］
⇒
%結果 ~SET %結果 を表現する`新たな~obj$( `Blob$I, コレに`関連な~realm$ )
`FILEAPI$r
◎
If result is non-null, then set result to a new Blob object, created in the relevant realm of this canvas element, representing result. [FILEAPI]
</li>
					<li>
`~callback関数を呼出す$( %callback, « %結果 », `報告する^i )
◎
Invoke callback with « result » and "report".
</li>
				</ol>
</div>
			</li>
		</ol>
	</li>
</ol>
</div>

<div class="algo">
<p>
`transferControlToOffscreen()@m
~method手続きは：
◎
The transferControlToOffscreen() method, when invoked, must run these steps:
</p>
<ol>
	<li>
~IF［
コレの`~canvas文脈~mode$ ~NEQ `none$cM
］
⇒
~THROW `InvalidStateError$E
◎
If this canvas element's context mode is not set to none, throw an "InvalidStateError" DOMException.
</li>
	<li>
%offscreenCanvas ~LET `新たな~obj$( `OffscreenCanvas$I )
— その
⇒＃
`width$oC ~SET コレの `width$a 内容~属性の`数量-値$,
`height$oC ~SET コレの `height$a 内容~属性の`数量-値$
◎
Let offscreenCanvas be a new OffscreenCanvas object with its width and height equal to the values of the width and height content attributes of this canvas element.
</li>
	<li>
%offscreenCanvas の`~placeholder~canvas要素$ ~SET コレへの弱い参照
◎
Set the offscreenCanvas's placeholder canvas element to a weak reference to this canvas element.
</li>
	<li>
コレの`~canvas文脈~mode$ ~SET `placeholder$cM
◎
Set this canvas element's context mode to placeholder.
</li>
	<li>
%offscreenCanvas の`継承した言語$ofC ~SET コレの`言語$
◎
Set the offscreenCanvas's inherited language to the language of this canvas element.
</li>
	<li>
%offscreenCanvas の`継承した方向$ofC ~SET コレの`方向性$
◎
Set the offscreenCanvas's inherited direction to the directionality of this canvas element.
</li>
	<li>
~RET %offscreenCanvas
◎
Return offscreenCanvas.
</li>
</ol>
</div>

				<section id="2dcontext">
<h5 title="The 2D rendering context">4.12.5.1. ~2D描画~文脈</h5>

<pre class="idl">
typedef (`HTMLImageElement$I or
         `SVGImageElement$I) `HTMLOrSVGImageElement@I;

typedef (`HTMLOrSVGImageElement$I or
         `HTMLVideoElement$I or
         `HTMLCanvasElement$I or
         `ImageBitmap$I or
         `OffscreenCanvas$I or
         `VideoFrame$I) `CanvasImageSource@I;

enum `PredefinedColorSpace@I { `srgb$l, `display-p3$l };

enum `CanvasColorType@I { `unorm8$l, `float16$l };

enum `CanvasFillRule@I { `nonzero$l, `evenodd$l };

dictionary `CanvasRenderingContext2DSettings@I {
  boolean `alpha$mb = true;
  boolean `desynchronized$mb = false;
  `PredefinedColorSpace$I `colorSpace$mb = "srgb";
  `CanvasColorType$I `colorType$mb = "unorm8";
  boolean `willReadFrequently$mb = false;
};

enum `ImageSmoothingQuality@I { `low$l, `medium$l, `high$l };

[Exposed=Window]
interface `CanvasRenderingContext2D@I {
  /* <span class="comment">
束縛している~canvasへの参照
◎
back-reference to the canvas
</span> */
  readonly attribute `HTMLCanvasElement$I `canvas$2d;
};
`CanvasRenderingContext2D$I includes `CanvasSettings$I;
`CanvasRenderingContext2D$I includes `CanvasState$I;
`CanvasRenderingContext2D$I includes `CanvasTransform$I;
`CanvasRenderingContext2D$I includes `CanvasCompositing$I;
`CanvasRenderingContext2D$I includes `CanvasImageSmoothing$I;
`CanvasRenderingContext2D$I includes `CanvasFillStrokeStyles$I;
`CanvasRenderingContext2D$I includes `CanvasShadowStyles$I;
`CanvasRenderingContext2D$I includes `CanvasFilters$I;
`CanvasRenderingContext2D$I includes `CanvasRect$I;
`CanvasRenderingContext2D$I includes `CanvasDrawPath$I;
`CanvasRenderingContext2D$I includes `CanvasUserInterface$I;
`CanvasRenderingContext2D$I includes `CanvasText$I;
`CanvasRenderingContext2D$I includes `CanvasDrawImage$I;
`CanvasRenderingContext2D$I includes `CanvasImageData$I;
`CanvasRenderingContext2D$I includes `CanvasPathDrawingStyles$I;
`CanvasRenderingContext2D$I includes `CanvasTextDrawingStyles$I;
`CanvasRenderingContext2D$I includes `CanvasPath$I;

interface mixin `CanvasSettings@I {
  /* <span class="comment">
設定群
◎
settings
</span> */
  `CanvasRenderingContext2DSettings$I `getContextAttributes$2d();
};

interface mixin `CanvasState@I {
  /* <span class="comment">
状態
◎
state
</span> */
  undefined `save$2d(); /* <span class="comment">
状態~stackに状態を~pushする
◎
push state on state stack
</span> */
  undefined `restore$2d(); /* <span class="comment">
状態~stackを~popして状態を復旧する
◎
pop state stack and restore state
</span> */
  undefined `reset$2d(); /* <span class="comment">
`描画~文脈を既定の状態に設定し直す$
◎
reset the rendering context to its default state
</span> */
  boolean `isContextLost$2d(); /* <span class="comment">
文脈を喪失したかどうかを返す
◎
return whether context is lost
</span> */
};

interface mixin `CanvasTransform@I {
  /* <span class="comment">
変形n
（既定の変形-は単位i行列）
◎
transformations (default transform is the identity matrix)
</span> */
  undefined `scale$2d(~urdb %x, ~urdb %y);
  undefined `rotate$2d(~urdb %angle);
  undefined `translate$2d(~urdb %x, ~urdb %y);
  undefined `transform$2d(~urdb %a, ~urdb %b, ~urdb %c, ~urdb %d, ~urdb %e, ~urdb %f);

  [NewObject] `DOMMatrix$I `getTransform$2d();
  undefined `setTransform$2d(~urdb %a, ~urdb %b, ~urdb %c, ~urdb %d, ~urdb %e, ~urdb %f);
  undefined `setTransform$2d1(optional `DOMMatrix2DInit$I %transform = {});
  undefined `resetTransform$2d();

};

interface mixin `CanvasCompositing@I {
  /* <span class="comment">
組成-法
◎
compositing
</span> */
  attribute ~urdb `globalAlpha$2d; /* <span class="comment">
（既定は 1.0 ）
◎
(default 1.0)
</span> */
  attribute DOMString `globalCompositeOperation$2d; /* <span class="comment">
（既定は "`source-over$v" ）
◎
(default "source-over")
</span> */
};

interface mixin `CanvasImageSmoothing@I {
  /* <span class="comment">
画像の滑化-法
◎
image smoothing
</span> */
  attribute boolean `imageSmoothingEnabled$2d; /* <span class="comment">
（既定は ~T ）
◎
(default true)
</span> */
  attribute `ImageSmoothingQuality$I `imageSmoothingQuality$2d; /* <span class="comment">
（既定は `low$l ）
◎
(default low)
</span> */

};

interface mixin `CanvasFillStrokeStyles@I {
  /* <span class="comment">
色と~style
（ `CanvasPathDrawingStyles$I ／ `CanvasTextDrawingStyles$I
~interfaceも見よ ）
◎
colors and styles (see also the CanvasPathDrawingStyles and CanvasTextDrawingStyles interfaces)
</span> */
  attribute (DOMString or `CanvasGradient$I or `CanvasPattern$I) `strokeStyle$2d; /* <span class="comment">
（既定は黒）
◎
(default black)
</span> */
  attribute (DOMString or `CanvasGradient$I or `CanvasPattern$I) `fillStyle$2d; /* <span class="comment">
（既定は黒）
◎
(default black)
</span> */
  `CanvasGradient$I `createLinearGradient$2d(double %x0, double %y0, double %x1, double %y1);
  `CanvasGradient$I `createRadialGradient$2d(double %x0, double %y0, double %r0, double %x1, double %y1, double %r1);
  `CanvasGradient$I `createConicGradient$2d(double %startAngle, double %x, double %y);
  `CanvasPattern$I? `createPattern$2d(`CanvasImageSource$I %image, [`LegacyNullToEmptyString$] DOMString %repetition);

};

interface mixin `CanvasShadowStyles@I {
  /* <span class="comment">
影
◎
shadows
</span> */
  attribute ~urdb `shadowOffsetX$2d; /* <span class="comment">
（既定は 0 ）
◎
(default 0)
</span> */
  attribute ~urdb `shadowOffsetY$2d; /* <span class="comment">
（既定は 0 ）
◎
(default 0)
</span> */
  attribute ~urdb `shadowBlur$2d; /* <span class="comment">
（既定は 0 ）
◎
(default 0)
</span> */
  attribute DOMString `shadowColor$2d; /* <span class="comment">
（既定は `透明な黒$)
◎
(default transparent black)
</span> */
};

interface mixin `CanvasFilters@I {
  /* <span class="comment">
~filter
◎
filters
</span> */
  attribute DOMString `filter$2d; /* <span class="comment">
（既定は `none^l ）
◎
(default "none")
</span> */
};

interface mixin `CanvasRect@I {
  /* <span class="comment">
矩形
◎
rects
</span> */
  undefined `clearRect$2d(~urdb %x, ~urdb %y, ~urdb %w, ~urdb %h);
  undefined `fillRect$2d(~urdb %x, ~urdb %y, ~urdb %w, ~urdb %h);
  undefined `strokeRect$2d(~urdb %x, ~urdb %y, ~urdb %w, ~urdb %h);
};

interface mixin `CanvasDrawPath@I {
  /* <span class="comment">
~path~API
（`CanvasPath$I も見よ）
◎
path API (see also CanvasPath)
</span> */
  undefined `beginPath$2d();
  undefined `fill$2d(optional `CanvasFillRule$I fillRule = `nonzero$l);
  undefined `fill$2d1(`Path2D$I %path, optional `CanvasFillRule$I fillRule = `nonzero$l);
  undefined `stroke$2d();
  undefined `stroke$2d1(`Path2D$I %path);
  undefined `clip$2d(optional `CanvasFillRule$I fillRule = `nonzero$l);
  undefined `clip$2d1(`Path2D$I %path, optional `CanvasFillRule$I fillRule = `nonzero$l);
  boolean `isPointInPath$2d(~urdb %x, ~urdb %y, optional `CanvasFillRule$I fillRule = `nonzero$l);
  boolean `isPointInPath$2d1(`Path2D$I %path, ~urdb %x, ~urdb %y, optional `CanvasFillRule$I fillRule = `nonzero$l);
  boolean `isPointInStroke$2d(~urdb %x, ~urdb %y);
  boolean `isPointInStroke$2d1(`Path2D$I %path, ~urdb %x, ~urdb %y);
};

interface mixin `CanvasUserInterface@I {
  undefined `drawFocusIfNeeded$2d(`Element$I %element);
  undefined `drawFocusIfNeeded$2d1(`Path2D$I %path, `Element$I %element);
};

interface mixin `CanvasText@I {
  /* <span class="comment">
~text
（ `CanvasPathDrawingStyles$I ／ `CanvasTextDrawingStyles$I ~interface も見よ)
◎
text (see also the CanvasPathDrawingStyles and CanvasTextDrawingStyles interfaces)
</span> */
  undefined `fillText$2d(DOMString %text, ~urdb %x, ~urdb %y, optional ~urdb %maxWidth);
  undefined `strokeText$2d(DOMString %text, ~urdb %x, ~urdb %y, optional ~urdb %maxWidth);
  `TextMetrics$I `measureText$2d(DOMString %text);
};

interface mixin `CanvasDrawImage@I {
  /* <span class="comment">
画像を描く
◎
drawing images
</span> */
  undefined `drawImage$2d(`CanvasImageSource$I %image, ~urdb %dx, ~urdb %dy);
  undefined `drawImage$2d(`CanvasImageSource$I %image, ~urdb %dx, ~urdb %dy, ~urdb %dw, ~urdb %dh);
  undefined `drawImage$2d(`CanvasImageSource$I %image, ~urdb %sx, ~urdb %sy, ~urdb %sw, ~urdb %sh, ~urdb %dx, ~urdb %dy, ~urdb %dw, ~urdb %dh);
};

interface mixin `CanvasImageData@I {
  /* <span class="comment">
`画素~操作＠#pixel-manipulation$
◎
pixel manipulation
</span> */
  `ImageData$I `createImageData$2d([EnforceRange] long %sw, [EnforceRange] long %sh, optional `ImageDataSettings$I %settings = {});
  `ImageData$I `createImageData$2d1(`ImageData$I %imageData);
  `ImageData$I `getImageData$2d([EnforceRange] long %sx, [EnforceRange] long %sy, [EnforceRange] long %sw, [EnforceRange] long %sh, optional `ImageDataSettings$I %settings = {});
  undefined `putImageData$2d1(`ImageData$I %imageData, [EnforceRange] long %dx, [EnforceRange] long %dy);
  undefined `putImageData$2d(`ImageData$I %imageData, [EnforceRange] long %dx, [EnforceRange] long %dy, [EnforceRange] long %dirtyX, [EnforceRange] long %dirtyY, [EnforceRange] long %dirtyWidth, [EnforceRange] long %dirtyHeight);
};

enum `CanvasLineCap@I { `butt^l, `round^l, `square^l };
enum `CanvasLineJoin@I { `round^l, `bevel^l, `miter^l };
enum `CanvasTextAlign@I { `start$l, `end$l, `left$l, `right$l, `center$l };
enum `CanvasTextBaseline@I { `top$l, `hanging$l, `middle$l, `alphabetic$l, `ideographic$l, `bottom$l };
enum `CanvasDirection@I { `ltr$l, `rtl$l, `inherit$l };
enum `CanvasFontKerning@I { `~autoK$l, `~normalK$l, `none$l };
enum `CanvasFontStretch@I { `ultra-condensed$l, `extra-condensed$l, `condensed$l, `semi-condensed$l, `~normalS$l, `semi-expanded$l, `expanded$l, `extra-expanded$l, `ultra-expanded$l };
enum `CanvasFontVariantCaps@I { `~normalC$l, `small-caps$l, `all-small-caps$l, `petite-caps$l, `all-petite-caps$l, `unicase$l, `titling-caps$l };
enum `CanvasTextRendering@I { `~autoR$l, `optimizeSpeed$l, `optimizeLegibility$l, `geometricPrecision$l };

interface mixin `CanvasPathDrawingStyles@I {
  /* <span class="comment">
線~cap／線~join
◎
line caps/joins
</span> */
  attribute ~urdb `lineWidth$2d; /* <span class="comment">
（既定は 1)
◎
(default 1)
</span> */
  attribute `CanvasLineCap$I `lineCap$2d; /* <span class="comment">
（既定は `butt^l ）
◎
(default "butt")
</span> */
  attribute `CanvasLineJoin$I `lineJoin$2d; /* <span class="comment">
（既定は `miter^l ）
◎
(default "miter")
</span> */
  attribute ~urdb `miterLimit$2d; /* <span class="comment">
（既定は 10 ）
◎
(default 10)
</span> */

  /* <span class="comment">
破線
◎
dashed lines
</span> */
  undefined `setLineDash$2d(sequence&lt;~urdb&gt; %segments); /* <span class="comment">
既定は空
◎
default empty
</span> */
  sequence&lt;~urdb&gt; `getLineDash$2d();
  attribute ~urdb `lineDashOffset$2d;
};

interface mixin `CanvasTextDrawingStyles@I {
  /* <span class="comment">
~text
◎
text
</span> */
  attribute DOMString `lang$2d; /* <span class="comment">
（既定は `inherit^l ）
◎
(default: "inherit")
</span> */
  attribute DOMString `font$2d; /* <span class="comment">
（既定は `10px sans-serif^v ）
◎
(default 10px sans-serif)
</span> */
  attribute `CanvasTextAlign$I `textAlign$2d; /* <span class="comment">
（既定は `start^l ）
◎
(default: "start")
</span> */
  attribute `CanvasTextBaseline$I `textBaseline$2d; /* <span class="comment">
（既定は `alphabetic^l ）
◎
(default: "alphabetic")
</span> */
  attribute `CanvasDirection$I `direction$2d; /* <span class="comment">
（既定は `inherit^l ）
◎
(default: "inherit")
</span> */
  attribute DOMString `letterSpacing$2d; /* <span class="comment">
（既定は `0px^l ）
◎
(default: "0px")
</span> */
  attribute `CanvasFontKerning$I `fontKerning$2d; /* <span class="comment">
（既定は `auto^l ）
◎
(default: "auto")
</span> */
  attribute `CanvasFontStretch$I `fontStretch$2d; /* <span class="comment">
（既定は `normal^l ）
◎
(default: "normal")
</span> */
  attribute `CanvasFontVariantCaps$I `fontVariantCaps$2d; /* <span class="comment">
（既定は `normal^l ）
◎
(default: "normal")
</span> */
  attribute `CanvasTextRendering$I `textRendering$2d; /* <span class="comment">
（既定は `auto^l ）
◎
(default: "auto")
</span> */
  attribute DOMString `wordSpacing$2d; /* <span class="comment">
（既定は `0px^l ）
◎
(default: "0px")
</span> */
};

interface mixin `CanvasPath@I {
  /* <span class="comment">
各種 共用の~path~API~method
◎
shared path API methods
</span> */
  undefined `closePath$2d();
  undefined `moveTo$2d(~urdb %x, ~urdb %y);
  undefined `lineTo$2d(~urdb %x, ~urdb %y);
  undefined `quadraticCurveTo$2d(~urdb %cpx, ~urdb %cpy, ~urdb %x, ~urdb %y);
  undefined `bezierCurveTo$2d(~urdb %cp1x, ~urdb %cp1y, ~urdb %cp2x, ~urdb %cp2y, ~urdb %x, ~urdb %y);
  undefined `arcTo$2d(~urdb %x1, ~urdb %y1, ~urdb %x2, ~urdb %y2, ~urdb %radius); 
  undefined `rect$2d(~urdb %x, ~urdb %y, ~urdb %w, ~urdb %h);
  undefined `roundRect$2d(~urdb %x, ~urdb %y, ~urdb %w, ~urdb %h, optional (~urdb or `DOMPointInit$I or sequence&lt;(~urdb or `DOMPointInit$I)&gt;) %radii = 0);
  undefined `arc$2d(~urdb %x, ~urdb %y, ~urdb %radius, ~urdb %startAngle, ~urdb %endAngle, optional boolean %counterclockwise = false); 
  undefined `ellipse$2d(~urdb %x, ~urdb %y, ~urdb %radiusX, ~urdb %radiusY, ~urdb %rotation, ~urdb %startAngle, ~urdb %endAngle, optional boolean %counterclockwise = false); 
};

[Exposed=(Window,Worker)]
interface `CanvasGradient@I {
  /* <span class="comment">
不透明な~obj
◎
opaque object
</span> */
  undefined `addColorStop$m(double %offset, DOMString %color);
};

[Exposed=(Window,Worker)]
interface `CanvasPattern@I {
  /* <span class="comment">
不透明な~obj
◎
opaque object
</span> */
  undefined `setTransform$m(optional `DOMMatrix2DInit$I %transform = {});
};

[Exposed=(Window,Worker)]
interface `TextMetrics@I {
  /* <span class="comment">
~x方向
◎
x-direction
</span> */
  readonly attribute double `width$tM; /* <span class="comment">
送幅
◎
advance width
</span> */
  readonly attribute double `actualBoundingBoxLeft$tM;
  readonly attribute double `actualBoundingBoxRight$tM;

  /* <span class="comment">
~y方向
◎
y-direction
</span> */
  readonly attribute double `fontBoundingBoxAscent$tM;
  readonly attribute double `fontBoundingBoxDescent$tM;
  readonly attribute double `actualBoundingBoxAscent$tM;
  readonly attribute double `actualBoundingBoxDescent$tM;
  readonly attribute double `emHeightAscent$tM;
  readonly attribute double `emHeightDescent$tM;
  readonly attribute double `hangingBaseline$tM;
  readonly attribute double `alphabeticBaseline$tM;
  readonly attribute double `ideographicBaseline$tM;
};

typedef (`Uint8ClampedArray$I or `Float16Array$I) `ImageDataArray@I;

enum `ImageDataPixelFormat@I { `rgba-unorm8$l, `rgba-float16$l };

dictionary `ImageDataSettings@I {
  `PredefinedColorSpace$I `colorSpace$mb1;
  `ImageDataPixelFormat$I `pixelFormat$mb = `rgba-unorm8$l;
};

[Exposed=(Window,Worker), `Serializable$]
interface `ImageData@I {
  `constructor＠#dom-imagedata$(unsigned long %sw, unsigned long %sh, optional `ImageDataSettings$I %settings = {});
  `constructor＠#dom-imagedata-with-data$(`ImageDataArray$I %data, unsigned long %sw, optional unsigned long %sh, optional `ImageDataSettings$I %settings = {});

  readonly attribute unsigned long `width$iD;
  readonly attribute unsigned long `height$iD;
  readonly attribute `ImageDataArray$I `data$iD;
  readonly attribute `ImageDataPixelFormat$I `pixelFormat$iD;
  readonly attribute `PredefinedColorSpace$I `colorSpace$iD;
};

[Exposed=(Window,Worker)]
interface `Path2D@I {
  `constructor＠#dom-path2d$(optional (`Path2D$I or DOMString) %path);
  undefined `addPath$m(`Path2D$I %path, optional `DOMMatrix2DInit$I %transform = {});
};
`Path2D$I includes `CanvasPath$I;
</pre>

<p class="note">注記：
既存の~web内容との互換性を保守するため、
~UAは，［
`CanvasRenderingContext2D$I ~obj上の `stroke()$2d ~method
］の直後に［
`CanvasUserInterface$I にて定義される~method
］を列挙する必要がある。
◎
To maintain compatibility with existing web content, user agents need to enumerate methods defined in CanvasUserInterface immediately after the stroke() method on CanvasRenderingContext2D objects.
</p>

<dl class="domintro">
	<dt>%context = %canvas.`getContext$m('2d' [, { [ `alpha$mb: true ] [, `desynchronized$mb: false ] [, `colorSpace$mb: 'srgb'] [, `willReadFrequently$mb: false ] } ])</dt>

	<dd>
特定0の `canvas$e 要素が永続的に束縛している
`CanvasRenderingContext2D$I ~objを返す。
◎
Returns a CanvasRenderingContext2D object that is permanently bound to a particular canvas element.
</dd>
	<dd>
`alpha$mb ~memberが ~F の場合、
当の~canvasは，常に不透明に強制される。
◎
If the alpha member is false, then the context is forced to always be opaque.
</dd>
	<dd>
`desynchronized$mb ~memberが ~T の場合、
当の文脈の`非同期化されるか$2Dは ~T にされ得る。
◎
If the desynchronized member is true, then the context might be desynchronized.
</dd>
	<dd>
`colorSpace$mb ~memberは、
当の描画~文脈の`色~空間$2Dを指定する。
◎
The colorSpace member specifies the color space of the rendering context.
</dd>
	<dd>
`colorType$mb ~memberは、
当の描画~文脈の`色~型$2Dを指定する。
◎
The colorType member specifies the color type of the rendering context.
</dd>
	<dd>
`willReadFrequently$mb ~memberが ~T の場合、
当の文脈を`読戻n用に最適化する$よう~~指示する。
◎
If the willReadFrequently member is true, then the context is marked for readback optimization.
</dd>

	<dt>%context.`canvas$2d</dt>
	<dd>
`canvas$e 要素を返す。
◎
Returns the canvas element.
</dd>

	<dt>%attributes = %context.`getContextAttributes()$2d</dt>
	<dd>
<p>
次に挙げる~memberを伴う~objを返す：
◎
Returns an object whose:
</p>
		<ul>
			<li>
`alpha$mb
⇒
当の文脈に~alpha成分が在るならば ~T ／
不透明に強制されているならば ~F
◎
alpha member is true if the context has an alpha component, or false if it was forced to be opaque.
</li>
			<li>
`desynchronized$mb
⇒
当の文脈の`非同期化されるか$2D
◎
desynchronized member is true if the context can be desynchronized.
</li>
			<li>
`colorSpace$mb
⇒
当の文脈の`色~空間$2Dを指示する文字列
◎
colorSpace member is a string indicating the context's color space.
</li>
			<li>
`colorType$mb
⇒
当の文脈の`色~型$2Dを指示する文字列
◎
colorType member is a string indicating the context's color type.
</li>
			<li>
`willReadFrequently$mb
⇒
当の文脈は`読戻n用に最適化する$よう~~指示されているならば ~T
◎
willReadFrequently member is true if the context is marked for readback optimization.
</li>
		</ul>
	</dd>
</dl>

<hr>

<p>
~2D描画~文脈 `CanvasRenderingContext2D$I は、
~~直交座標系を成す平坦な面を表現する
— その座標~空間は：
原点 ( 0, 0 ) は左上~隅にあり, ［
%x ／ %y
］値は［
右／下
］へ向かって増大し, ［
右端~辺の %x 座標 ／ 下端~辺の %y 座標
］は
— `px$css 単位で【！＊】 —
当の描画~文脈の`出力~bitmap$2Dの［
横幅 ／ 縦幅
］に等しくなる。
◎
The CanvasRenderingContext2D 2D rendering context represents a flat linear Cartesian surface whose origin (0,0) is at the top left corner, with the coordinate space having x values increasing when going right, and y values increasing when going down. The x-coordinate of the right-most edge is equal to the width of the rendering context's output bitmap in CSS pixels; similarly, the y-coordinate of the bottom-most edge is equal to the height of the rendering context's output bitmap in CSS pixels.
</p>

<p>
~UAが［
内部で／描画の間に
］利用する実際~bitmapの~sizeは、
座標~空間の~sizeになるとは限らない。
一例として，高精細~display上では、
~UAは
— 描画が高~品質であり続けるよう —
［
4 個の機器~画素が座標~空間の 1 単位~画素を成すような~bitmap
］を内部で利用してもヨイ。
同様に，~anti-alias法は、［
~displayに~~現れる結果の画像より解像度が高い~bitmapを得る~oversample法
］を利用して実装できる。
◎
The size of the coordinate space does not necessarily represent the size of the actual bitmaps that the user agent will use internally or during rendering. On high-definition displays, for instance, the user agent may internally use bitmaps with four device pixels per unit in the coordinate space, so that the rendering remains at high quality throughout. Anti-aliasing can similarly be implemented using oversampling with bitmaps of a higher resolution than the final image on the display.
</p>

<div class="example">
<p>
描画~文脈の`出力~bitmap$2Dの~sizeを `px$css で述べることは、
描画される~canvasが `px$css による等価な区画を覆うことを意味しない。
`px$css が再利用されるのは、
~text~layoutなどの~CSS特能との統合を容易にするためである。
◎
Using CSS pixels to describe the size of a rendering context's output bitmap does not mean that when rendered the canvas will cover an equivalent area in CSS pixels. CSS pixels are reused for ease of integration with CSS features, such as text layout.
</p>

<p>
言い換えれば、
下の `canvas$e 要素の描画~文脈の`出力~bitmap$2Dは 200×200 であり
（それは、~CSS特能との統合を容易にするため， `px$css 単位を内部的に利用する）、
100×100 `px$css として描画される：
◎
In other words, the canvas element below's rendering context has a 200x200 output bitmap (which internally uses CSS pixels as a unit for ease of integration with CSS) and is rendered as 100x100 CSS pixels:
</p>

<pre class="lang-html">
&lt;canvas width=200 height=200 style=width:100px;height:100px&gt;
</pre>
</div>

<hr>

<div class="algo">
<p>
`~2D文脈を作成する@
~algoは、
所与の
( `canvas$e 要素 %~target, %~option群 )
に対し：
◎
The 2D context creation algorithm, which is passed a target (a canvas element) and options, consists of running these steps:
</p>
<ol>
	<li>
%設定群 ~LET `~IDL値に変換する$( %~option群, `CanvasRenderingContext2DSettings$I )
（例外投出あり）
◎
Let settings be the result of converting options to the dictionary type CanvasRenderingContext2DSettings. (This can throw an exception.)
</li>
	<li>
%文脈 ~LET `新たな~obj$( `CanvasRenderingContext2D$I )
◎
Let context be a new CanvasRenderingContext2D object.
</li>
	<li>
%文脈 の `canvas$2d 属性 ~SET %~target を指すよう初期化する
◎
Initialize context's canvas attribute to point to target.
</li>
	<li>
%文脈 の`出力~bitmap$2D ~SET %~target の~bitmap
（ %~target と同じ~bitmap共有する）
◎
Set context's output bitmap to the same bitmap as target's bitmap (so that they are shared).
</li>
	<li>
%~target の［
`width$a, `height$a
］内容~属性の`数量-値$で`~bitmap寸法を設定する$
◎
Set bitmap dimensions to the numeric values of target's width and height content attributes.
</li>
	<li>
`~canvas設定群の出力~bitmapを初期化する$( %文脈, %設定群 )
◎
Run the canvas settings output bitmap initialization algorithm, given context and settings.
</li>
	<li>
~RET %文脈
◎
Return context.
</li>
</ol>
</div>

<hr>

<div class="algo">
<p>
所与の
( %横幅, %縦幅 )
で，
%描画~文脈 の
`~bitmap寸法を設定する@
~algoは：
◎
When the user agent is to set bitmap dimensions to width and height, it must run these steps:
</p>
<ol>
	<li>
`描画~文脈を既定の状態に設定し直す$( %描画~文脈 )
◎
Reset the rendering context to its default state.
</li>
	<li>
%描画~文脈 の`出力~bitmap$2Dを
( %横幅, %縦幅 )
に~sizeし直す
◎
Resize the output bitmap to the new width and height.
</li>
	<li>
%canvas ~LET %描画~文脈 の `canvas$2d 属性の初期化-時に与えた `canvas$e 要素
◎
Let canvas be the canvas element to which the rendering context's canvas attribute was initialized.
</li>
	<li>
~IF［
%canvas の `width$a 内容~属性の`数量-値$ ~NEQ %横幅
］
⇒
%canvas の `width$a 内容~属性の値 ~SET
%横幅 を`妥当な負でない整数$として表現する，アリな限り最短な文字列
◎
If the numeric value of canvas's width content attribute differs from width, then set canvas's width content attribute to the shortest possible string representing width as a valid non-negative integer.
</li>
	<li>
~IF［
%canvas の `height$a 内容~属性の`数量-値$ ~NEQ %縦幅
］
⇒
%canvas の `height$a 内容~属性の値 ~SET
%縦幅 を`妥当な負でない整数$として表現する，アリな限り最短な文字列
◎
If the numeric value of canvas's height content attribute differs from height, then set canvas's height content attribute to the shortest possible string representing height as a valid non-negative integer.
</li>
</ol>
</div>

<div class="example">

<p>
次の例では、
正方形が 1 個だけ現れるように描かれる：
◎
Only one square appears to be drawn in the following example:
</p>

<pre class="lang-js">
/* <span class="comment">
%canvas は `canvas^e 要素への参照
◎
canvas is a reference to a &lt;canvas&gt; element
</span> */
var %context = %canvas.getContext('2d');
%context.fillRect(0,0,50,50);
%canvas.setAttribute('width', '300'); /* <span class="comment">
これは  %canvas を~clearする
◎
clears the canvas
</span> */
%context.fillRect(0,100,50,50);
%canvas.width = %canvas.width; /* <span class="comment">
これは %canvas を~clearする
◎
clears the canvas
</span> */
%context.fillRect(100,0,50,50); /* <span class="comment">
この正方形だけ残る
◎
only this square remains
</span> */
</pre>
</div>

<hr>

<div class="algo">
`canvas@m
取得子~手続きは、
コレの作成-時に初期化された値を返す。
◎
The canvas attribute must return the value it was initialized to when the object was created.
</div>

<hr>

<p>
`PredefinedColorSpace$I 列挙~型の値は、
~canvasの裏画像（ `backing store^en ）用の色~空間を指定する：
◎
The PredefinedColorSpace enumeration is used to specify the color space of the canvas's backing store.
</p>
<dl class="def-list">
	<dt>`srgb@l</dt>
	<dd>
`srgb$v 色~空間を指示する。
◎
The "srgb" value indicates the 'srgb' color space.
</dd>

	<dt>`display-p3@l</dt>
	<dd>
`display-p3$v 色~空間を指示する。
◎
The "display-p3" value indicates the 'display-p3' color space.
</dd>
</dl>

<p class="note">注記：
互いの色~空間へ変換する~algoは、
`CSSCOLOR$r `§ 色の変換-法＠~CSSCOLOR#color-conversion$
にて見出せる。
◎
The algorithm for converting between color spaces can be found in the Converting Colors section of CSS Color. [CSSCOLOR]
</p>

<hr>

<p>
`CanvasColorType$I 列挙~型の値は、
~canvasの裏画像~用の色~型を指定する：
◎
The CanvasColorType enumeration is used to specify the color type of the canvas's backing store.
</p>

<dl class="def-list">
	<dt>`unorm8@l</dt>
	<dd>
どの色~成分も，値の型は［
8 ~bitへ正規化された無符号~整数
］であることを指示する。
◎
The "unorm8" value indicates that the type for all color components is 8-bit unsigned normalized.
</dd>

	<dt>`float16@l</dt>
	<dd>
どの色~成分も，値の型は 16 ~bitな浮動小数点数であることを指示する。
◎
The "float16" value indicates that the type for all color components is 16-bit floating point.
</dd>
</dl>

<hr>

<p>
`CanvasFillRule$I 列挙~型の値は、
`~fill規則@
— 所与の点が~pathの［
内側, 外側
］のどちらに入るかを決定する~algo —
を選定するために利用される：
◎
The CanvasFillRule enumeration is used to select the fill rule algorithm by which to determine if a point is inside or outside a path.
</p>

<dl class="def-list">
	<dt>`nonzero@l</dt>
	<dd>
~nonzero巻数~規則を指示する
— この規則の下では
⇒
所与の点は、
次が満たされるとき，図形の外側にあると見なされる
⇒
図形の~pathが［
点から描かれる半直線
］に点から見て［
右から左へ交叉する回数, 左から右へ交叉する回数
］は等しい
◎
The "nonzero" value indicates the nonzero winding rule, wherein a point is considered to be outside a shape if the number of times a half-infinite straight line drawn from that point crosses the shape's path going in one direction is equal to the number of times it crosses the path going in the other direction.
</dd>

	<dt>`evenodd@l</dt>
	<dd>
~even-odd巻数~規則を指示する
— この規則の下では
⇒
所与の点は、
次が満たされるとき，図形の外側にあると見なされる
⇒
図形の~pathが［
点から描かれる半直線
］に交叉する回数は偶数である
◎
The "evenodd" value indicates the even-odd rule, wherein a point is considered to be outside a shape if the number of times a half-infinite straight line drawn from that point crosses the shape's path is even.
</dd>
</dl>

<p>
所与の点は、
図形の外側にないならば，内側にあるものとされる。
◎
If a point is not outside a shape, it is inside the shape.
</p>

<hr>

<p>
`ImageSmoothingQuality$I 列挙は、
画像の滑化-時に利用する補間~品質についての選好を表出する
— 次に挙げる値をとり得る：
◎
The ImageSmoothingQuality enumeration is used to express a preference for the interpolation quality to use when smoothing images.
</p>

<dl class="def-list">
	<dt>`low@l</dt>
	<dd>
低~levelを指示する。
他の値より計算的に効率的になり得る。
◎
The "low" value indicates a preference for a low level of image interpolation quality. Low-quality image interpolation may be more computationally efficient than higher settings.
</dd>

	<dt>`medium@l</dt>
	<dd>
中~levelを指示する。
◎
The "medium" value indicates a preference for a medium level of image interpolation quality.
</dd>

	<dt>`high@l</dt>
	<dd>
高~levelを指示する。
他の値より計算的に高価になり得る。
◎
The "high" value indicates a preference for a high level of image interpolation quality. High-quality image interpolation may be more computationally expensive than lower settings.
</dd>
</dl>

<p class="note">注記：
双線型~拡縮-法は、
他より低~品質だが，画像を比較的~高速に滑化する~algoの例である。
［
双三次／~Lanczos
］拡縮-法は、
より高~品質な出力を生産する，画像を滑化する~algoの例である。
この仕様は、
利用する特定の補間~algoは義務付けない。
◎
Bilinear scaling is an example of a relatively fast, lower-quality image-smoothing algorithm. Bicubic or Lanczos scaling are examples of image-smoothing algorithms that produce higher-quality output. This specification does not mandate that specific interpolation algorithms be used.
</p>

					<section id="implementation-notes">
<h6 title="Implementation notes">4.12.5.1.1. 実装に対する注記</h6>

◎非規範的

<p>
~UAにより直に表示されない`出力~bitmap$2Dに対しては、
実装は，~bitmapの~dataが実際に必要になる時点
（例えば `drawImage()$2d や `createImageBitmap()$m ~factory~methodの~call）
まで、
この~bitmapを更新せずに，適用された一連の描き演算を単に覚えておくだけにできる。
これにより、
多くの事例で~memoryに関してより効率的になる。
◎
The output bitmap, when it is not directly displayed by the user agent, implementations can, instead of updating this bitmap, merely remember the sequence of drawing operations that have been applied to it until such time as the bitmap's actual data is needed (for example because of a call to drawImage(), or the createImageBitmap() factory method). In many cases, this will be more memory efficient.
</p>

<p>
実施においては、
`canvas$e 要素の~bitmapは，たいていは常に必要になる。
描画~文脈の`出力~bitmap$2Dは、
もしあれば，常に `canvas$e 要素の~bitmapを指す単なる別名になる。
◎
The bitmap of a canvas element is the one bitmap that's pretty much always going to be needed in practice. The output bitmap of a rendering context, when it has one, is always just an alias to a canvas element's bitmap.
</p>

<p>
追加的な~bitmapが必要になることも，ときにはある
— 例：［
当の~canvasがその`生来な~size$から異なる~sizeで塗られている ／
例えば~page~scrollingの様な，~graphic更新-時の二重~buffer法を可能化する
］ときに，高速な描きを可能化するために、
~canvasに描く~commandが実行されている間，同時並行に処理できるような。
◎
Additional bitmaps are sometimes needed, e.g. to enable fast drawing when the canvas is being painted at a different size than its natural size, or to enable double buffering so that graphics updates, like page scrolling for example, can be processed concurrently while canvas draw commands are being executed.
</p>

					</section>
					<section id="the-canvas-settings">
<h6 title="The canvas settings">4.12.5.1.2 ~canvas設定群</h6>


<p>
各 `CanvasSettings$I ~objは、
次に挙げるものを有する：
</p>

<dl class="def-list">
	<dt>
`出力~bitmap@2D
◎
A CanvasSettings object has an output bitmap＼
</dt>
	<dd>
~objの作成-時に初期化される。
◎
that is initialized when the object is created.
</dd>
	<dd>
各`出力~bitmap$2Dは、
真偽値をとる`生成元cleanか$を有する
— 初期~時は ~T に設定するモノトスル。
【！one of these bitmaps？】
◎
The output bitmap has an origin-clean flag, which can be set to true or false. Initially, when one of these bitmaps is created, its origin-clean flag must be set to true.
</dd>

	<dt>
`~alpha@2D
◎
The CanvasSettings object also has an alpha＼
</dt>
	<dd>
真偽値
◎
boolean.＼
</dd>
	<dd>
~F の場合、
~alpha成分は，全~画素において 1.0 （全部的に不透明）に固定される
— どの画素に対しても，［
その~alpha成分を変更しようとする試み
］は黙して無視するモノトスル。
◎
When a CanvasSettings object's alpha is false, then its alpha component must be fixed to 1.0 (fully opaque) for all pixels, and attempts to change the alpha component of any pixel must be silently ignored.
</dd>
	<dd class="note">注記：
したがって，そのような文脈の~bitmapは、
`透明な黒$に代わって，`不透明な黒$から開始され、［
`clearRect()$2d ~methodによる結果は 常に`不透明な黒$になる／
`getImageData()$2d ~methodから得られる毎 4 個目の~byteは 常に 255 になる／
`putImageData()$2d ~methodでは 入力における毎 4 個目の~byteは実質的に無視される
］等々になる。
しかしながら，~canvas上に描かれる~styleや画像の~alpha成分は、
`出力~bitmap$2Dに影響iする箇所の~alpha成分に限り，依然として尊守される。
一例として，新規に［
`~alpha$2Dが ~F に設定されて作成された`出力~bitmap$2D
］上に 50% 透明な~whiteの正方形を描いたときの結果は、
全部的に不透明な~grayの正方形になる。
◎
Thus, the bitmap of such a context starts off as opaque black instead of transparent black; clearRect() always results in opaque black pixels, every fourth byte from getImageData() is always 255, the putImageData() method effectively ignores every fourth byte in its input, and so on. However, the alpha component of styles and images drawn onto the canvas are still honoured up to the point where they would impact the output bitmap's alpha component; for instance, drawing a 50% transparent white square on a freshly created output bitmap with its alpha set to false will result in a fully-opaque gray square.
</dd>

	<dt>
`非同期化されるか@2D
◎
The CanvasSettings object also has a desynchronized＼
</dt>
	<dd>
真偽値。
◎
boolean.＼
</dd>
	<dd>
~T ならば、
~UAは，当の~canvasの描画を最適化してもヨイ
— すなわち、［
~canvas塗り~cycleを~event~loopから非同期化したり，普通の~UA描画~algoを素通りする
］ことにより，
入力~eventから~raster化までの待時間を抑制してもヨイ。
この~modeは、［
通例的な塗りの仕組み／~raster化
］を素通りすることを孕む場合には，可視な `tearing artifacts^en
【画面上の ある~~境目を挟んで，異なる~frameが同時に表示される現象】
を導入し得る。
◎
When a CanvasSettings object's desynchronized is true, then the user agent may optimize the rendering of the canvas to reduce the latency, as measured from input events to rasterization, by desynchronizing the canvas paint cycle from the event loop, bypassing the ordinary user agent rendering algorithm, or both. Insofar as this mode involves bypassing the usual paint mechanisms, rasterization, or both, it might introduce visible tearing artifacts.
</dd>
	<dd class="note">注記：
~UAは通例的に，表示されない~buffer上に描画し、
呈示~用に，それを `scan out^en されている~buffer
【~display装置へ直に転送するための~buffer】
と素早く入替える
— 前者の~bufferは “裏~buffer（ `back buffer^en ）”,
後者の~bufferは “表~buffer（ `front buffer^en ）”
と呼ばれる。
待時間を抑制するためとして，表~buffer描画と呼ばれる技法が~~普及している
（ `単-~buffer^i 描画とも呼ばれる）
— そこでの描画は、
`scan out^en する処理nと並列的に，先を争うように起こる。
この技法は、
`tearing artifacts^en を導入し得る引き換えに待時間を抑制し，
`非同期化されるか$2Dの一部または全部を実装するために利用され得る。
`MULTIPLEBUFFERING$r
◎
The user agent usually renders on a buffer which is not being displayed, quickly swapping it and the one being scanned out for presentation; the former buffer is called back buffer and the latter front buffer. A popular technique for reducing latency is called front buffer rendering, also known as single buffer rendering, where rendering happens in parallel and racily with the scanning out process. This technique reduces the latency at the price of potentially introducing tearing artifacts and can be used to implement in total or part of the desynchronized boolean. [MULTIPLEBUFFERING]
</dd>
	<dd class="note">注記：
`非同期化されるか$2Dは、
描き~appなど，［
入力から~raster化までの待時間が~criticalになる，ある種の~app
］を実装するときに有用になり得る。
◎
The desynchronized boolean can be useful when implementing certain kinds of applications, such as drawing applications, where the latency between input and rasterization is critical.
</dd>

	<dt>
`高頻度に読取ることになるか@2D
◎
The CanvasSettings object also has a will read frequently＼
</dt>
	<dd>
真偽値。
◎
boolean.＼
</dd>
	<dd>
~T ならば、
~UAは，当の~canvasを読戻n演算~用に最適化してもヨイ。
◎
When a CanvasSettings object's will read frequently is true, the user agent may optimize the canvas for readback operations.
</dd>
	<dd class="note">注記：
ほとんどの機器では，~UAは、
~canvasの`出力~bitmap$2Dを［
~GPU, ~CPU
］どちらに格納するかどうか裁定する必要がある
（前者は “~hardwareで加速された（ `accelerated^en ）”,
後者は “~softwareで” とも呼ばれる）。
ほとんどの描画~演算は，加速された~canvasの方が高処理能になるが、
例外として［
`getImageData$2d ／ `toDataURL$m ／ `toBlob$m
］で読戻されている場合，そうならない。
`高頻度に読取ることになるか$2D ~EQ ~T の場合、
次を~UAに伝える
⇒
当の~web~pageは、
読戻n演算を何回も遂行すると見込まれるので，
~software~canvasを利用する方が有利である。
◎
On most devices the user agent needs to decide whether to store the canvas's output bitmap on the GPU (this is also called "hardware accelerated"), or on the CPU (also called "software"). Most rendering operations are more performant for accelerated canvases, with the major exception being readback with getImageData(), toDataURL(), or toBlob(). CanvasSettings objects with will read frequently equal to true tell the user agent that the webpage is likely to perform many readback operations and that it is advantageous to use a software canvas.
</dd>

	<dt>
`色~空間@2D
◎
The CanvasSettings object also has a color space setting＼
</dt>
	<dd>
`PredefinedColorSpace$I 型の値
◎
of type PredefinedColorSpace.＼
</dd>
	<dd>
`出力~bitmap$2D用の色~空間を指示する。
◎
The CanvasSettings object's color space indicates the color space for the output bitmap.
</dd>

	<dt>
`色~型@2D
◎
The CanvasSettings object also has a color type setting＼
</dt>
	<dd>
`CanvasColorType$I 型の値
◎
of type CanvasColorType.＼
</dd>
	<dd>
`出力~bitmap$2Dを成す画素を成す［
各~色~成分, ~alpha成分
］の~data型を指示する。
◎
The CanvasSettings object's color type indicates the data type of the color and alpha components of the pixels of the output bitmap.
</dd>
</dl>

<div class="algo">
<p>
`~canvas設定群の出力~bitmapを初期化する@
~algoは、
所与の
( `CanvasSettings$I %文脈, `CanvasRenderingContext2DSettings$I %設定群 )
に対し：
◎
To initialize a CanvasSettings output bitmap, given a CanvasSettings context and a CanvasRenderingContext2DSettings settings:
</p>
<ol>
	<li>
%文脈 の`~alpha$2D ~SET %設定群[
"`alpha@mb"
]
◎
Set context's alpha to settings["alpha"].
</li>
	<li>
%文脈 の`非同期化されるか$2D ~SET %設定群[
"`desynchronized@mb"
]
◎
Set context's desynchronized to settings["desynchronized"].
</li>
	<li>
%文脈 の`色~空間$2D ~SET %設定群[
"`colorSpace@mb"
]
◎
Set context's color space to settings["colorSpace"].
</li>
	<li>
%文脈 の`色~型$2D ~SET %設定群[
"`colorType@mb"
]
◎
Set context's color type to settings["colorType"].
</li>
	<li>
%文脈 の`高頻度に読取ることになるか$2D ~SET %設定群[
"`willReadFrequently@mb"
]
◎
Set context's will read frequently to settings["willReadFrequently"].
</li>
</ol>
</div>

<div class="algo">
`getContextAttributes()@2d
~method手続きは
⇒
~RET «[ 次に挙げる~entry ]»
⇒＃
`alpha$mb → コレの`~alpha$2D,
`desynchronized$mb → コレの`非同期化されるか$2D,
`colorSpace$mb → コレの`色~空間$2D,
`colorType$mb → コレの`色~型$2D,
`willReadFrequently$mb → コレの`高頻度に読取ることになるか$2D
◎
The getContextAttributes() method steps are to return «[ "alpha" → this's alpha, "desynchronized" → this's desynchronized, "colorSpace" → this's color space, "colorType" → this's color type, "willReadFrequently" → this's will read frequently ]».
</div>

					</section>
					<section id="the-canvas-state">
<h6 title="The canvas state">4.12.5.1.3. ~canvas状態</h6>

<p>
`CanvasState$I を実装する~objは、
`描法~状態$たちが成す
`描法~状態~stack@
を保守する。
各
`描法~状態@
は、
次に挙げるものからなる：
◎
Objects that implement the CanvasState interface maintain a stack of drawing states. Drawing states consist of:
</p>
<ul>
	<li>
現在の`変形n行列$
◎
The current transformation matrix.
</li>
	<li>
現在の`切抜き領域$
◎
The current clipping region.
</li>
	<li>
現在の
⇒＃
`字l間のアキ$2D,
`単語~間のアキ$2D,
`~fill~style$2D,
`~stroke~style$2D,
`~filter$2D,
`大域~alpha$2D,
`影~色$2D
◎
The current letter spacing, word spacing, fill style, stroke style, filter, global alpha, compositing and blending operator, and shadow color.
</li>
	<li>
`現在の組成~混色~演算子$2D
◎
↑</li>
	<li>
次に挙げる属性の現在の値
⇒＃
`lineWidth$2d,
`lineCap$2d,
`lineJoin$2d,
`miterLimit$2d,
`lineDashOffset$2d,
`shadowOffsetX$2d,
`shadowOffsetY$2d,
`shadowBlur$2d,
`lang$2d,
`font$2d,
`textAlign$2d,
`textBaseline$2d,
`direction$2d,
`fontKerning$2d,
`fontStretch$2d,
`fontVariantCaps$2d,
`textRendering$2d,
`imageSmoothingEnabled$2d,
`imageSmoothingQuality$2d
◎
The current values of the following attributes: lineWidth, lineCap, lineJoin, miterLimit, lineDashOffset, shadowOffsetX, shadowOffsetY, shadowBlur, lang, font, textAlign, textBaseline, direction, fontKerning, fontStretch, fontVariantCaps, textRendering, imageSmoothingEnabled, imageSmoothingQuality.
</li>
	<li>
現在の`~dash~list$
◎
The current dash list.
</li>
</ul>

<p class="note">注記：
描画~文脈の~bitmapは、
描法~状態の一部を成さない
— それは、
描画~文脈が `canvas$e 要素に［
束縛されているかどうか／どう束縛されたか
］に依存するので。
◎
The rendering context's bitmaps are not part of the drawing state, as they depend on whether and how the rendering context is bound to a canvas element.
</p>

<p>
`CanvasState$I ~mixinを実装する各~objは、
真偽値をとる
`文脈~喪失dか@
を有する
— 当の~objの作成-時には、
~F に初期化される。
これは、
`文脈~喪失d時の手続き$にて更新される。
◎
Objects that implement the CanvasState mixin have a context lost boolean, that is initialized to false when the object is created. The context lost value is updated in the context lost steps.
</p>

<dl class="domintro">
	<dt>%context.`save()$2d</dt>
	<dd>
現在の状態を`描法~状態~stack$に~pushする。
◎
Pushes the current state onto the stack.
</dd>

	<dt>%context.`restore()$2d</dt>
	<dd>
`描法~状態~stack$から状態を~popして，現在の状態をその状態に復旧する。
◎
Pops the top state on the stack, restoring the context to that state.
</dd>

	<dt>%context.`reset()$2d</dt>
	<dd>
描画~文脈を その［
裏~buffer,
描法~状態~stack,
~path,
~style
］も含めて設定し直す。
◎
Resets the rendering context, which includes the backing buffer, the drawing state stack, path, and styles.
</dd>

	<dt>%context.`isContextLost()$2d</dt>
	<dd>
描画~文脈を喪失した場合に ~T を返す。
文脈の喪失は、
~driver~crash, ~memoryを使い切った, 等々
に因り生じ得る。
これらの事例では、
当の~canvasは，その裏~storageを喪失するので，
`描画~文脈を既定の状態に設定し直す$ことになる。
◎
Returns true if the rendering context was lost. Context loss can occur due to driver crashes, running out of memory, etc. In these cases, the canvas loses its backing storage and takes steps to reset the rendering context to its default state.
</dd>
</dl>

<div class="algo">
`save()@2d
~method手続きは
⇒
コレの`描法~状態~stack$に，コレの現在の描法~状態の複製を~pushする
◎
The save() method steps are to push a copy of the current drawing state onto the drawing state stack.
</div>

<div class="algo">
<p>
`restore()@2d
~method手続きは：
</p>
<ol>
	<li>
%状態 ~LET コレの`描法~状態~stack$から~popする
</li>
	<li>
~IF［
%状態 ~EQ ε
］
⇒
~RET
</li>
	<li>
コレの現在の描法~状態を %状態 が述べる描法~状態に設定し直す
</li>
</ol>
◎
The restore() method steps are to pop the top entry in the drawing state stack, and reset the drawing state it describes. If there is no saved state, then the method must do nothing.
</div>

<div class="algo">
`reset()@2d
~method手続きは
⇒
`描画~文脈を既定の状態に設定し直す$( コレの描画~文脈 )
◎
The reset() method steps are to reset the rendering context to its default state.
</div>

<div class="algo">
<p>
`描画~文脈を既定の状態に設定し直す@
~algoは、
所与の
( 描画~文脈 %文脈 )
に対し：
◎
To reset the rendering context to its default state:
</p>
<ol>
	<li>
~canvas†の~bitmapを成す全~画素を`透明な黒$にする
【† %文脈 を束縛している `canvas$e 要素／ `OffscreenCanvas$I ~obj】
◎
Clear canvas's bitmap to transparent black.
</li>
	<li>
%文脈 の`現在の既定の~path$を成す下位path~listを空にする
◎
Empty the list of subpaths in context's current default path.
</li>
	<li>
%文脈 の`描法~状態~stack$を空にする
◎
Clear the context's drawing state stack.
</li>
	<li>
%文脈 の現在の`描法~状態$を成すものすべてを初期~値に設定し直す
◎
Reset everything that drawing state consists of to their initial values.
</li>
</ol>
</div>

<div class="algo">
`isContextLost@2d
~method手続きは
⇒
~RET コレの`文脈~喪失dか$
◎
The isContextLost() method steps are to return this's context lost.
</div>

					</section>
					<section id="line-styles">
<h6 title="Line styles">4.12.5.1.4. 線~style</h6>

<dl class="domintro">
	<dt>%context.`lineWidth$2d [ = %value ]</dt>
	<dt>%styles.`lineWidth$2d [ = %value ]</dt>
	<dd>
現在の線~幅を返す。
◎
Returns the current line width.
</dd>
	<dd>
設定して、
線~幅を変更できる。
［
`有限$でない値／正でない値
］は、
無視される。
◎
Can be set, to change the line width. Values that are not finite values greater than zero are ignored.
</dd>

	<dt>%context.`lineCap$2d [ = %value ]</dt>
	<dt>%styles.`lineCap$2d [ = %value ]</dt>
	<dd>
現在の線~cap~styleを返す。
◎
Returns the current line cap style.
</dd>
	<dd>
設定して、
線~cap~styleを変更できる。
◎
Can be set, to change the line cap style.
</dd>
	<dd>
線~cap~styleにアリな値は、
`butt^l , `round^l , `square^l 。
他の値は、
無視される。
◎
The possible line cap styles are "butt", "round", and "square". Other values are ignored.
</dd>

	<dt>%context.`lineJoin$2d [ = %value ]</dt>
	<dt>%styles.`lineJoin$2d [ = %value ]</dt>
	<dd>
現在の線~join~styleを返す。
◎
Returns the current line join style.
</dd>
	<dd>
設定して、
線~join~styleを変更できる。
◎
Can be set, to change the line join style.
</dd>
	<dd>
~join~styleにアリな値は
 `bevel^l , `round^l , `miter^l 。
他の値は、
無視される。
◎
The possible line join styles are "bevel", "round", and "miter". Other values are ignored.
</dd>

	<dt>%context.`miterLimit$2d [ = %value ]</dt>
	<dt>%styles.`miterLimit$2d [ = %value ]</dt>
	<dd>
現在の~miter限界比を返す。
◎
Returns the current miter limit ratio.
</dd>
	<dd>
設定して、
~miter限界比を変更できる。
［
`有限$でない値／正でない値
］は、
無視される。
◎
Can be set, to change the miter limit ratio. Values that are not finite values greater than zero are ignored.
</dd>

	<dt>%context.`setLineDash(segments)$2d</dt>
	<dt>%styles.`setLineDash(segments)$2d</dt>
	<dd>
現在の線~dash~patternを設定する
（~stroke時に利用される）。
引数は、
線の有無が交互に切り替わるような，距離たちが成す~listである。
◎
Sets the current line dash pattern (as used when stroking). The argument is a list of distances for which to alternately have the line on and the line off.
</dd>

	<dt>%segments = %context.`getLineDash()$2d</dt>
	<dt>%segments = %styles.`getLineDash()$2d</dt>
	<dd>
現在の線~dash~patternの複製を返す。
返される配列~内の~entry数は常に偶数になる
（すなわち、~patternは正規化される）。
◎
Returns a copy of the current line dash pattern. The array returned will always have an even number of entries (i.e. the pattern is normalized).
</dd>

	<dt>%context.`lineDashOffset$2d</dt>
	<dt>%styles.`lineDashOffset$2d</dt>
	<dd>
位相~offsetを返す
（線~dash~patternと同じ単位による）。
◎
Returns the phase offset (in the same units as the line dash pattern).
</dd>
	<dd>
設定して、
位相~offsetを変更できる。
`有限$でない値は、
無視される。
◎
Can be set, to change the phase offset. Values that are not finite values are ignored.
</dd>
</dl>

<p>
`CanvasPathDrawingStyles$I を実装する~objは、
この~objが線をどう扱うかを制御する，各種［
属性, ~method
］（この節にて定義する）を有する。
◎
Objects that implement the CanvasPathDrawingStyles interface have attributes and methods (defined in this section) that control how lines are treated by the object.
</p>

<p>
`lineWidth@2d
属性は、
線~幅を【！座標~空間~単位で】与える
— 次に従うモノトスル：
◎
The lineWidth attribute gives the width of lines, in coordinate space units.＼
</p>
<ul>
	<li>
取得子は、
現在の値を返す。
◎
On getting, it must return the current value.＼
</li>
	<li>
設定子は、［
所与の値は`有限$であって正である
］ならば，現在の値を所与の値に変更する
◎
On setting, zero, negative, infinite, and NaN values must be ignored, leaving the value unchanged; other values must change the current value to the new value.
</li>
	<li>
コレの作成-時には、
値 1.0 に初期化する。
◎
When the object implementing the CanvasPathDrawingStyles interface is created, the lineWidth attribute must initially have the value 1.0.
</li>
</ul>

<p>
`lineCap@2d
属性は、
~UAが線の終端に配置する終端-法の種別を定義する
— 次に従うモノトスル：
◎
The lineCap attribute defines the type of endings that UAs will place on the end of lines.＼
</p>
<ul>
	<li>
妥当な値は、
次のいずれかとする
⇒
`butt^l,
`round^l,
`square^l
◎
The three valid values are "butt", "round", and "square".
</li>
	<li>
取得子は、
現在の値を返す。
◎
On getting, it must return the current value.＼
</li>
	<li>
設定子は、
現在の値を所与の値に変更する。
◎
On setting, the current value must be changed to the new value.
</li>
	<li>
コレの作成-時には、
値 `butt^l に初期化する。
◎
When the object implementing the CanvasPathDrawingStyles interface is created, the lineCap attribute must initially have the value "butt".
</li>
</ul>

<p>
`lineJoin@2d
属性は、
2 本の線が出会う所で~UAが配置する隅の種別を定義する
— 次に従うモノトスル：
◎
The lineJoin attribute defines the type of corners that UAs will place where two lines meet.＼
</p>
<ul>
	<li>
妥当な値は、
次のいずれかとする
⇒
`bevel^l,
`round^l,
`miter^l
◎
The three valid values are "bevel", "round", and "miter".
</li>
	<li>
取得子は、
現在の値を返す。
◎
On getting, it must return the current value.＼
</li>
	<li>
設定子は、
現在の値を所与の値に変更する。
◎
On setting, the current value must be changed to the new value.
</li>
	<li>
コレの作成-時には、
値 `miter^l に初期化する。
◎
When the object implementing the CanvasPathDrawingStyles interface is created, the lineJoin attribute must initially have the value "miter".
</li>
</ul>

<p>
［
`lineJoin$2d 属性の値 ~EQ `miter^l
］の下では、
~strokeの~joinをどう描画するか裁定するときに~miter限界比が利用される。
~miter限界比は、
`miterLimit@2d
属性を利用して明示的に設定できる
— 次に従うモノトスル：
◎
When the lineJoin attribute has the value "miter", strokes use the miter limit ratio to decide how to render joins. The miter limit ratio can be explicitly set using the miterLimit attribute.＼
</p>
<ul>
	<li>
取得子は、
現在の値を返す。
◎
On getting, it must return the current value.＼
</li>
	<li>
設定子は、［
所与の値は`有限$であって正である
］ならば，現在の値を所与の値に変更する。
◎
On setting, zero, negative, infinite, and NaN values must be ignored, leaving the value unchanged; other values must change the current value to the new value.
</li>
	<li>
コレの作成-時には、
値 10.0 に初期化する。
◎
When the object implementing the CanvasPathDrawingStyles interface is created, the miterLimit attribute must initially have the value 10.0.
</li>
</ul>

<hr>

<p>
各 `CanvasPathDrawingStyles$I ~objは
`~dash~list@
を有する。
それは偶数~個（ 0 個でもよい）の負でない数からなり、
初期~時は空になるモノトスル。
◎
Each CanvasPathDrawingStyles object has a dash list, which is either empty or consists of an even number of non-negative numbers. Initially, the dash list must be empty.
</p>

<div class="algo">
<p>
`setLineDash(segments)@2d
~method手続きは：
◎
The setLineDash(segments) method, when invoked, must run these steps:
</p>
<ol>
	<li>
~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).
</li>
	<li>
~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.
</li>
	<li>
コレの`~dash~list$ ~SET %segments
◎
Let the object's dash list be segments.
</li>
</ol>
</div>

<div class="algo">
`getLineDash()@2d
~method手続きは、
コレの`~dash~list$を成す値たちからなる同じ順序の連列を返す。
◎
When the getLineDash() method is invoked, it must return a sequence whose values are the values of the object's dash list, in the same order.
</div>

<p>
~dash~patternの “位相” を変更するのが有用になることもある
— 例えば、
“蟻が行進する” ような効果を達成するなど。
`lineDashOffset@2d
属性を利用すれば、
この位相を設定できる
— 次に従うモノトスル。
◎
It is sometimes useful to change the "phase" of the dash pattern, e.g. to achieve a "marching ants" effect. The phase can be set using the lineDashOffset attribute.＼
</p>
<ul>
	<li>
取得子は、
現在の値を返す。
◎
On getting, it must return the current value.＼
</li>
	<li>
設定子は、［
所与の値は`有限$でない
］場合に限り，現在の値を所与の値に変更する。
◎
On setting, infinite and NaN values must be ignored, leaving the value unchanged; other values must change the current value to the new value.
</li>
	<li>
コレの作成-時には、
値 0.0 に初期化する。
◎
When the object implementing the CanvasPathDrawingStyles interface is created, the lineDashOffset attribute must initially have the value 0.0.
</li>
</ul>

<hr>

<div class="algo">
<p>
`~pathをナゾる@
~algoは、
所与の
( `~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.
</p>

<p class="trans-note">【
以下、
この~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に対応付ける下で。
】</p>
</div>

					</section>
					<section id="text-styles">
<h6 title="Text styles">4.12.5.1.5. ~text~style</h6>

<dl class="domintro">
	<dt>%context.`lang$2d [ = %value ]</dt>
	<dt>%styles.`lang$2d [ = %value ]</dt>
	<dd>
現在の言語~設定を返す。
◎
Returns the current language setting.
</dd>
	<dd>
［
BCP 47 言語~tag／空~文字列／`~inheritL$l
］に設定して，~fontを解決するときに利用される言語を変更できる。
`~inheritL$l は、
言語を `canvas$e 要素
— 無い場合は結付けられた`文書~要素$ —
の言語からとる。
◎
Can be set to a BCP 47 language tag, the empty string, or "inherit", to change the language used when resolving fonts. "inherit" takes the language from the canvas element's language, or the associated document element when there is no canvas element.
</dd>
	<dd>
既定は `~inheritL$l である。
◎
The default is "inherit".
</dd>

	<dt>%context.`font$2d [ = %value ]</dt>
	<dt>%styles.`font$2d [ = %value ]</dt>
	<dd>
現在の~font設定群を返す。
◎
Returns the current font settings.
</dd>
	<dd>
設定して、
~fontを変更できる。
その構文は，~CSS `font$p ~propのそれと同じであり、
~CSS~font値として構文解析できない値は，無視される。
◎
Can be set, to change the font. The syntax is the same as for the CSS 'font' property; values that cannot be parsed as CSS font values are ignored.＼
</dd>
	<dd>
既定は `10px sans-serif^l である。
◎
The default is "10px sans-serif".
</dd>
	<dd>
相対［
~keyword／長さ
］は、
`canvas$e 要素の~fontに相対的に算出される。
◎
Relative keywords and lengths are computed relative to the font of the canvas element.
</dd>

	<dt>%context.`textAlign$2d [ = %value ]</dt>
	<dt>%styles.`textAlign$2d [ = %value ]</dt>
	<dd>
現在の~text整列~設定群を返す。
◎
Returns the current text alignment settings.
</dd>
	<dd>
設定して、
整列-法を変更できる。
アリな値とその意味は，下に与えられ、
他の値は無視される。
既定は `start$l 。
◎
Can be set, to change the alignment. The possible values are and their meanings are given below. Other values are ignored. The default is "start".
</dd>

	<dt>%context.`textBaseline$2d [ = %value ]</dt>
	<dt>%styles.`textBaseline$2d [ = %value ]</dt>
	<dd>
現在の基底線~整列 設定群を返す。
◎
Returns the current baseline alignment settings.
</dd>
	<dd>
設定して、
基底線~整列を変更できる。
アリな値とその意味は，下に与えられ、
他の値は無視される。
既定は `alphabetic$l 。
◎
Can be set, to change the baseline alignment. The possible values and their meanings are given below. Other values are ignored. The default is "alphabetic".
</dd>

	<dt>%context.`direction$2d [ = %value ]</dt>
	<dt>%styles.`direction$2d [ = %value ]</dt>
	<dd>
現在の方向性を返す。
◎
Returns the current directionality.
</dd>
	<dd>
設定して、
方向性を変更できる。
アリな値とその意味は，下に与えられ、
他の値は無視される。
既定は `inherit$l 。
◎
Can be set, to change the directionality. The possible values and their meanings are given below. Other values are ignored. The default is "inherit".
</dd>

	<dt>%context.`letterSpacing$2d [ = %value ]</dt>
	<dt>%styles.`letterSpacing$2d [ = %value ]</dt>
	<dd>
~text内の現在の字l~間【！文字~間】のアキを返す。
◎
Returns the current spacing between characters in the text.
</dd>
	<dd>
設定して，字l~間【！文字~間】のアキを変更できる。
~CSS `length$t として構文解析できない値は無視される。
既定は `0px^l 。
◎
Can be set, to change spacing between characters. Values that cannot be parsed as a CSS &lt;length&gt; are ignored. The default is "0px".
</dd>

	<dt>%context.`fontKerning$2d [ = %value ]</dt>
	<dt>%styles.`fontKerning$2d [ = %value ]</dt>
	<dd>
現在の~font~kerning設定を返す。
◎
Returns the current font kerning settings.
</dd>
	<dd>
設定して~font~kerningを変更できる。
アリな値とその意味は，下に与えられ、
他の値は無視される。
既定は `~autoK$l 。
◎
Can be set, to change the font kerning. The possible values and their meanings are given below. Other values are ignored. The default is "auto".
</dd>

	<dt>%context.`fontStretch$2d [ = %value ]</dt>
	<dt>%styles.`fontStretch$2d [ = %value ]</dt>
	<dd>
現在の~font~stretch【字幅】設定を返す。
◎
Returns the current font stretch settings.
</dd>
	<dd>
設定して，~font~stretchを変更できる。
アリな値とその意味は，下に与えられ、
他の値は無視される。
既定は `~normalS$l 。
◎
Can be set, to change the font stretch. The possible values and their meanings are given below. Other values are ignored. The default is "normal".
</dd>

	<dt>%context.`fontVariantCaps$2d [ = %value ]</dt>
	<dt>%styles.`fontVariantCaps$2d [ = %value ]</dt>
	<dd>
現在の~font~variant~caps設定を返す。
◎
Returns the current font variant caps settings.
</dd>
	<dd>
設定して，~font~variant~capsを変更できる。
アリな値とその意味は，下に与えられ、
他の値は無視される。
既定は `~normalC$l 。
◎
Can be set, to change the font variant caps. The possible values and their meanings are given below. Other values are ignored. The default is "normal".
</dd>

	<dt>%context.`textRendering$2d [ = %value ]</dt>
	<dt>%styles.`textRendering$2d [ = %value ]</dt>
	<dd>
現在の~text描画~設定を返す。
◎
Returns the current text rendering settings.
</dd>
	<dd>
設定して，~text描画を変更できる。
アリな値とその意味は，下に与えられ、
他の値は無視される。
既定は `~autoR$l 。
◎
Can be set, to change the text rendering. The possible values and their meanings are given below. Other values are ignored. The default is "auto".
</dd>

	<dt>%context.`wordSpacing$2d [ = %value ]</dt>
	<dt>%styles.`wordSpacing$2d [ = %value ]</dt>
	<dd>
~text内の現在の単語~間のアキを返す。
◎
Returns the current spacing between words in the text.
</dd>
	<dd>
設定して，単語~間のアキを変更できる。
~CSS `length$t として構文解析できない値は無視される。
既定は `0px^l 。
◎
Can be set, to change spacing between words. Values that cannot be parsed as a CSS &lt;length&gt; are ignored. The default is "0px".
</dd>
</dl>

<p>
`CanvasTextDrawingStyles$I を実装する~objは、
~objにより
~textがどう~lay-outされるか（~raster化／外形線~化）を制御する属性を有する
（この節にて定義する）。
そのような~objは、
その
`~font~style~source@
になる~objも有し得る。
`~font~style~source$は、［
`CanvasRenderingContext2D$I ~obj用には，
その `canvas$2d 属性の値で与えられる `canvas$e 要素 ／
`OffscreenCanvasRenderingContext2D$I ~obj用には，
それに結付けられた `OffscreenCanvas$I ~obj
］になる。
◎
Objects that implement the CanvasTextDrawingStyles interface have attributes (defined in this section) that control how text is laid out (rasterized or outlined) by the object. Such objects can also have a font style source object. For CanvasRenderingContext2D objects, this is the canvas element given by the value of the context's canvas attribute. For OffscreenCanvasRenderingContext2D objects, this is the associated OffscreenCanvas object.
</p>

<div class="algo">
<p>
`~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]
</p>

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

<div class="example">

<p>
定例の `canvas$e 要素における~font解決の例：
◎
This is an example of font resolution with a regular canvas element with ID c1.
</p>

<pre class="lang-js">
const %font = `new FontFace$m("MyCanvasFont", "url(mycanvasfont.ttf)");
documents.fonts.add(font);

const %context = document.getElementById("c1").`getContext$m("2d");
document.fonts.ready.then(function() {
  %context.font = "64px MyCanvasFont";
  %context.`fillText$2d("hello", 0, 0);
});</pre>

<p>
この例では、
~ID `c1^v の `canvas^e 要素は，
`mycanvasfont.ttf^v を~fontに利用して~textを表示することになる。
◎
In this example, the canvas will display text using mycanvasfont.ttf as its font.
</p>
</div>

<div class="example">

<p>
`OffscreenCanvas$I を利用して~font解決が起こる様子を示す例。
~ID `c2^v の `canvas$e 要素のそれは、
ある~workerに転送されるとする：
◎
This is an example of how font resolution can happen using OffscreenCanvas. Assuming a canvas element with ID c2 which is transferred to a worker like so:
</p>

<pre class="lang-js">
const %offscreenCanvas = document.getElementById("c2").`transferControlToOffscreen$m();
%worker.postMessage(%offscreenCanvas, [%offscreenCanvas]);</pre>

<p>
その~worker内では：
◎
Then, in the worker:
</p>

<pre class="lang-js">
self.onmessage = function(%ev) {
  const %transferredCanvas = %ev.data;
  const %context = %transferredCanvas.getContext("2d");
  const %font = `new FontFace$m("MyFont", "url(myfont.ttf)");
  self.fonts.add(%font);
  self.fonts.ready.then(function() {
    %context.font = "64px MyFont";
    %context.`fillText$2d("hello", 0, 0);
  });
};</pre>

<p>
この例では、
~canvasは， `myfont.ttf^v を利用して~textを表示することになる。
~fontは、
~workerの内側に限り読込まれ，
文書の文脈~内には読込まれないことに注意。
◎
In this example, the canvas will display a text using myfont.ttf. Notice that the font is only loaded inside the worker, and not in the document context.
</p>
</div>

<p>
`font@2d
~IDL属性は、
次に従うモノトスル：
◎
The font IDL attribute,＼
</p>
<ul>
	<li class="algo">
<p>
その設定子~手続きは：
</p>
			<ol>
				<li>
%結果 ~LET 所与の値を~CSS `font$p ~prop値の`文法に則って構文解析-$した結果
</li>
				<li>
~IF［
%結果 ~EQ `失敗^i
］~OR［
%結果 は`~CSS全域~keyword$である
］
⇒
~RET
</li>
				<li>
次を適用する下で， %結果 が指示する~fontをコレにアテガう
`CSS$r
⇒＃
`line-height$p 成分を `normal^v に強制する,
`font-size$p 成分を `px$css 値に変換する,
~system~fontは明示的な値に算出する
</li>
			</ol>
◎
on setting, must be parsed as a CSS &lt;'font'&gt; value (but without supporting property-independent style sheet syntax like 'inherit'), and the resulting font must be assigned to the context, with the 'line-height' component forced to 'normal', with the 'font-size' component converted to CSS pixels, and with system fonts being computed to explicit values. If the new value is syntactically incorrect (including using property-independent style sheet syntax like 'inherit' or 'initial'), then it must be ignored, without assigning a new font value. [CSS]
</li>
	<li>
各~font-family名は、
~fontが利用される時点で，コレの`~font~style~source$の文脈の下で解釈するモノトスル。
したがって、
~fontのうち［
`font-face$at ~at-規則を利用して埋込まれたもの ／
`FontFace$I ~objを利用して読込まれたもの
］のうち，`~font~style~source$から可視なものは、
読込まれた時点から可用になるモノトスル。
（各`~font~style~source$は、
どの~fontが可用かを決定する`~font~source$を有する。）
~fontが利用された時点で，当の~fontが［
まだ全部的に読込まれていない／
`~font~style~source$の視野~内に無い
］場合、
未知な~fontであったかのように扱うモノトスル
— すなわち、
関連な~CSS仕様にて述べられるとおりに，別のものに~fall-backするとする。
`CSSFONTS$r
`CSSFONTLOAD$r
◎
Font family names must be interpreted in the context of the font style source object when the font is to be used; any fonts embedded using @font-face or loaded using FontFace objects that are visible to the font style source object must therefore be available once they are loaded. (Each font style source object has a font source, which determines what fonts are available.) If a font is used before it is fully loaded, or if the font style source object does not have that font in scope at the time the font is to be used, then it must be treated as if it was an unknown font, falling back to another as described by the relevant CSS specifications. [CSSFONTS] [CSSFONTLOAD]
</li>
	<li class="algo">
<p>
その取得子~手続きは：
</p>
		<ol>
			<li>
%~font値 ~LET コレの現在の~fontの値
</li>
			<li>
~Assert：
%~font値 は `line-height$p 成分を伴わない。
</li>
			<li>
~RET `~CSS値を直列化する$( %~font値 )
`CSSOM$r
</li>
		</ol>
◎
On getting, the font attribute must return the serialized form of the current font of the context (with no 'line-height' component). [CSSOM]
</li>
	<li class="example">
<p>
例えば、
次の~code：
◎
For example, after the following statement:
</p>

<pre class="lang-js">
%context.font = 'italic 400 12px/2 Unknown Font, sans-serif';
</pre>

<p>
を~~実行した後，
%context の `font$2d 属性を評価した結果は、
文字列 `italic 12px "Unknown Font", sans-serif^l になる。
`font-weight^p `400^v は、
既定の値なので現れない。
`line-height^p も、
既定の値 `normal^v に強制されるので現れない。
◎
...the expression context.font would evaluate to the string "italic 12px "Unknown Font", sans-serif". The "400" font-weight doesn't appear because that is the default value. The line-height doesn't appear because it is forced to "normal", the default value.
</p>

	</li>
	<li>
コレの作成-時には、
`font$2d 属性の値を `10px sans-serif^v に設定する。
◎
When the object implementing the CanvasTextDrawingStyles interface is created, the font of the context must be set to 10px sans-serif.＼
</li>
	<li>
<p>
［
`font-size$p ／ `font-weight$p
］成分が相対的な値に設定されたときは：
◎
↓</p>
		<ul>
			<li>
<p>
その時点における`~font~style~source$の その~propの`算出d値$に相対的に解釈する
— 次に挙げるものが、
相対的な値に該当する：
◎
↓</p>
				<ul>
					<li>
`font-size$p に対しては、
次により与えられる長さ
⇒＃
百分率 ／
`~fontに相対的な長さ$ 【！ em, ex 】／
`larger^v ~keyword ／
`smaller^v ~keyword
◎
When the 'font-size' component is set to lengths using percentages, 'em' or 'ex' units, or the 'larger' or 'smaller' keywords, these must be interpreted relative to the computed value of the 'font-size' property of the font style source object at the time that the attribute is set, if it is an element.＼
</li>
					<li>
`font-weight$p に対しては、
次の~keyword
⇒
`bolder^v ／
`lighter^v
◎
When the 'font-weight' component is set to the relative values 'bolder' and 'lighter', these must be interpreted relative to the computed value of the 'font-weight' property of the font style source object at the time that the attribute is set, if it is an element.＼
</li>
				</ul>
			</li>
			<li>
ただし、
`算出d値$が未定義になる事例においては
（例： `~font~style~source$は要素でないか，要素ではあるが`具現化されて$いないなど）、
相対的な値は，既定のもの
— `font-size^p に対しては `10px sans-serif^v ／
`font-weight^p に対しては `normal^v —
に相対的に解釈する。
◎
If the computed values are undefined for a particular case (e.g. because the font style source object is not an element or is not being rendered), then the relative keywords must be interpreted relative to the normal-weight 10px sans-serif default.
</li>
		</ul>
	</li>
</ul>

<p>
`textAlign@2d
~IDL属性は、
次に従うモノトスル：
◎
The textAlign IDL attribute,＼
</p>
<ul>
	<li>
取得子は、
現在の値を返す。
◎
on getting, must return the current value.＼
</li>
	<li>
設定子は、
現在の値を所与の値に変更する。
◎
On setting, the current value must be changed to the new value.＼
</li>
	<li>
コレの作成-時には、
値 `start$l に初期化する。
◎
When the object implementing the CanvasTextDrawingStyles interface is created, the textAlign attribute must initially have the value start.
</li>
</ul>

<p>
`textBaseline@2d
~IDL属性は、
次に従うモノトスル：
◎
The textBaseline IDL attribute,＼
</p>
<ul>
	<li>
取得子は、
現在の値を返す。
◎
on getting, must return the current value.＼
</li>
	<li>
設定子は、
現在の値を所与の値に変更する。
◎
On setting, the current value must be changed to the new value.＼
</li>
	<li>
コレの作成-時には、
値 `alphabetic$l に初期化する。
◎
When the object implementing the CanvasTextDrawingStyles interface is created, the textBaseline attribute must initially have the value alphabetic.
</li>
</ul>

<div>
<p>
`CanvasTextDrawingStyles$I ~interfaceを実装する~objは、
次に挙げるものを有する：
</p>
<dl class="def-list">
	<dt>`言語@2D</dt>
	<dd>
~font描画を地域化するために利用される。
</dd>
	<dd>
妥当な値は、［
BCP 47 言語~tag ／
空~文字列 ／
`~inheritL@l
］であり，初期~時は `~inheritL$l になるモノトスル
</dd>
	<dd>
`~inheritL$l は、
言語を `canvas$e 要素
— 無い場合は結付けられた`文書~要素$ —
の言語からとる。
</dd>

	<dt>`方向@2D</dt>
	<dd>
描画される~textが［
左横書き／右横書き
］どちらとして扱うかを指定する。
</dd>
	<dd>
初期~時は `inherit$l になるモノトスル
（妥当な値は、以下を見よ）。
</dd>
</dl>
◎
Objects that implement the CanvasTextDrawingStyles interface have an associated language value used to localize font rendering. Valid values are a BCP 47 language tag, the empty string, or "inherit" where the language comes from the canvas element's language, or the associated document element when there is no canvas element. Initially, the language must be "inherit".
◎
↓</div>

<p>
`lang@2d
~IDL属性の：
◎
↓</p>
<ul>
	<li class="algo">
取得子~手続きは
⇒
~RET コレの`言語$2D
◎
The lang getter steps are to return this's language.
</li>
	<li class="algo">
設定子~手続きは
⇒
コレの`言語$2D ~SET 所与の値
◎
The lang setter steps are to set this's language to the given value.
</li>
</ul>

<div>
<p>
`direction@2d
~IDL属性の：
</p>
<ul>
	<li class="algo">
取得子~手続きは
⇒
~RET コレの`方向$2D
</li>
	<li class="algo">
設定子~手続きは
⇒
コレの`方向$2D ~SET 所与の値
</li>
</ul>
◎
The direction IDL attribute,＼
on getting, must return the current value.＼
On setting, the current value must be changed to the new value.＼
↑ When the object implementing the CanvasTextDrawingStyles interface is created, the direction attribute must initially have the value "inherit".
</div>

<p>
`CanvasTextDrawingStyles$I ~interfaceを実装する~objは、［
字l間のアキ, 単語~間のアキ
］を制御する属性を有する。
そのような~objには、［
`字l間のアキ@2D
,
`単語~間のアキ@2D
］が結付けられる
— どちらも、
~CSS `length$t 値をとり，初期~時は［
`0px^l を~CSS `length$t の`文法に則って構文解析-$した結果
］になるとする。
◎
Objects that implement the CanvasTextDrawingStyles interface have attributes that control the spacing between letters and words. Such objects have associated letter spacing and word spacing values, which are CSS &lt;length&gt; values. Initially, both must be the result of parsing "0px" as a CSS &lt;length&gt;.
</p>

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

<div class="algo">
<p>
`letterSpacing$2d
設定子~手続きは：
◎
The letterSpacing setter steps are:
</p>
<ol>
	<li>
%構文解析した結果 ~LET 所与の値を~CSS `length$t の`文法に則って構文解析-$した結果
◎
Let parsed be the result of parsing the given value as a CSS &lt;length&gt;.
</li>
	<li>
~IF［
%構文解析した結果 ~EQ `失敗^i
］
⇒
~RET
◎
If parsed is failure, then return.
</li>
	<li>
コレの`字l間のアキ$2D ~SET %構文解析した結果
◎
Set this's letter spacing to parsed.
</li>
</ol>
</div>

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

<div class="algo">
<p>
`wordSpacing$2d
設定子~手続きは：
◎
The wordSpacing setter steps are:
</p>
<ol>
	<li>
%構文解析した結果 ~LET 所与の値を~CSS `length$t の`文法に則って構文解析-$した結果
◎
Let parsed be the result of parsing the given value as a CSS &lt;length&gt;.
</li>
	<li>
~IF［
%構文解析した結果 ~EQ `失敗^i
］
⇒
~RET
◎
If parsed is failure, then return.
</li>
	<li>
コレの`単語~間のアキ$2D ~SET %構文解析した結果
◎
Set this's word spacing to parsed.
</li>
</ol>
</div>

<p>
`fontKerning@2d
~IDL属性は、
次に従うモノトスル：
◎
The fontKerning IDL attribute,＼
</p>
<ul>
	<li>
取得子は、
現在の値を返す。
◎
on getting, must return the current value.＼
</li>
	<li>
設定子は、
現在の値を所与の値に変更する。
◎
On setting, the current value must be changed to the new value.＼
</li>
	<li>
コレの作成-時には、
値 `~autoK$l に初期化する。
◎
When the object implementing the CanvasTextDrawingStyles interface is created, the fontKerning attribute must initially have the value "auto".
</li>
</ul>

<p>
`fontStretch@2d
~IDL属性は、
次に従うモノトスル：
◎
The fontStretch IDL attribute,＼
</p>
<ul>
	<li>
取得子は、
現在の値を返す。
◎
on getting, must return the current value.＼
</li>
	<li>
設定子は、
現在の値を所与の値に変更する。
◎
On setting, the current value must be changed to the new value.＼
</li>
	<li>
コレの作成-時には、
値 `~normalS$l に初期化する。
◎
When the object implementing the CanvasTextDrawingStyles interface is created, the fontStretch attribute must initially have the value "normal".
</li>
</ul>

<p>
`fontVariantCaps@2d
~IDL属性は、
次に従うモノトスル：
◎
The fontVariantCaps IDL attribute,＼
</p>
<ul>
	<li>
取得子は、
現在の値を返す。
◎
on getting, must return the current value.＼
</li>
	<li>
設定子は、
現在の値を所与の値に変更する。
◎
On setting, the current value must be changed to the new value.＼
</li>
	<li>
コレの作成-時には、
値 `~normalC$l に初期化する。
◎
When the object implementing the CanvasTextDrawingStyles interface is created, the fontVariantCaps attribute must initially have the value "normal".
</li>
</ul>

<p>
`textRendering@2d
~IDL属性は、
次に従うモノトスル：
◎
The textRendering IDL attribute,＼
</p>
<ul>
	<li>
取得子は、
現在の値を返す。
◎
on getting, must return the current value.＼
</li>
	<li>
設定子は、
現在の値を所与の値に変更する。
◎
On setting, the current value must be changed to the new value.＼
</li>
	<li>
コレの作成-時には、
値 `~autoR$l に初期化する。
◎
When the object implementing the CanvasTextDrawingStyles interface is created, the textRendering attribute must initially have the value "auto".
</li>
</ul>

<p>
`textAlign$2d 属性に許容される~keywordは、
次に従う：
◎
The textAlign attribute's allowed keywords are as follows:
</p>

<dl>
	<dt>`start@l</dt>
	<dd>
~textの始端~辺に整列する
（左横書き~textにおいては左端~側 ／
右横書き~textにおいては右端~側になる）。
◎
Align to the start edge of the text (left side in left-to-right text, right side in right-to-left text).
</dd>

	<dt>`end@l</dt>
	<dd>
~textの終端~辺に整列する
（左横書き~textにおいては右端~側 ／
右横書き~textにおいては左端~側になる）。
◎
Align to the end edge of the text (right side in left-to-right text, left side in right-to-left text).
</dd>

	<dt>`left@l</dt>
	<dd>
左端に整列する。
◎
Align to the left.
</dd>

	<dt>`right@l</dt>
	<dd>
右端に整列する。
◎
Align to the right.
</dd>

	<dt>`center@l</dt>
	<dd>
中央に整列する。
◎
Align to the center.
</dd>
</dl>

<p>
`textBaseline$2d 属性に許容される~keywordは、
~fontにおける整列~点に対応する：
◎
The textBaseline attribute's allowed keywords correspond to alignment points in the font:
</p>
<figure>
<p class="alt" hidden id="_dgm-baselines">
`em-over$bL 基底線は、
概ね，~font内の~glyphの上端にある。
`hanging$bL 基底線は、
"आ" の様な一部の~glyphが起点とする所になる。
図の "middle" は、
`em-over$bL 基底線と `em-under$bL 基底線の中点にある。
`alphabetic$bL 基底線は、
"Á", "ÿ", "f", "Ω" 様な文字が起点とする所になる。
`ideographic-under$bL 基底線は、
"私", "達" の様な~glyphが起点とする所になる。
`em-under$bL 基底線は、
概ね，~font内の~glyphの下端にある。
~glyphの限界~boxの上端と下端は、
当の~glyphが［
`em-over$bL ／ `em-under$bL
］基底線から遠く外側へ拡張することに因り，
これらの基底線から遠く離れることもある。
◎
The em-over baseline is roughly at the top of the glyphs in a font, the hanging baseline is where some glyphs like आ are anchored, the middle is half-way between the em-over and em-under baselines, the alphabetic baseline is where characters like Á, ÿ, f, and Ω are anchored, the ideographic-under baseline is where glyphs like 私 and 達 are anchored, and the em-under baseline is roughly at the bottom of the glyphs in a font. The top and bottom of the bounding box can be far from these baselines, due to glyphs extending far outside em-over and em-under baselines.
</p>
</figure>

<p>
各~keywordに対応付けられる整列~点は：
◎
The keywords map to these alignment points as follows:
</p>

<dl>
	<dt>`top@l</dt>
	<dd>
`em-over$bL 基底線
◎
The em-over baseline
</dd>

	<dt>`hanging@l</dt>
	<dd>
`hanging$bL 基底線
◎
The hanging baseline
</dd>

	<dt>`middle@l</dt>
	<dd>
`em-over$bL 基底線と `em-under$bL 基底線の中点
◎
Halfway between the em-over baseline and the em-under baseline
</dd>

	<dt>`alphabetic@l</dt>
	<dd>
`alphabetic$bL 基底線
◎
The alphabetic baseline
</dd>

	<dt>`ideographic@l</dt>
	<dd>
`ideographic-under$bL 基底線
◎
The ideographic-under baseline
</dd>

	<dt>`bottom@l</dt>
	<dd>
`em-under$bL 基底線
◎
The em-under baseline
</dd>
</dl>

<p>
`direction$2d 属性には、
次に挙げる~keywordが許容され，［
`~textを準備する$~algoに渡す入力~文字列
］が対応する方向性を伴う~textとして扱われるようにする：
◎
The direction attribute's allowed keywords are as follows:
</p>

<dl>
	<dt>`ltr@l</dt>
	<dd>
左横書き。
◎
Treat input to the text preparation algorithm as left-to-right text.
</dd>

	<dt>`rtl@l</dt>
	<dd>
右横書き。
◎
Treat input to the text preparation algorithm as right-to-left text.
</dd>

	<dt>`inherit@l</dt>
	<dd>
方向性は、
当の~algo内の処理nを利用して，［
当の `canvas$e 要素,
`~placeholder~canvas要素$,
`文書~要素$
］いずれかから得される。
◎
Use the process in the text preparation algorithm to obtain the text direction from the canvas element, placeholder canvas element, or document element.
</dd>
</dl>

<p>
`fontKerning$2d 属性には、
次に挙げる~keywordが許容される：
◎
The fontKerning attribute's allowed keywords are as follows:
</p>
<dl>
	<dt>`~autoK@l</dt>
	<dd>
~kerningが適用されるかどうかは、
~UAの裁量に委ねられる。
◎
Kerning is applied at the discretion of the user agent.
</dd>

	<dt>`~normalK@l</dt>
	<dd>
~kerningは適用される。
◎
Kerning is applied.
</dd>

	<dt>`none@l</dt>
	<dd>
~kerningは適用されない。
◎
Kerning is not applied.
</dd>
</dl>

<div>
<p>
`fontStretch$2d 属性には、
次の表tの 1 列目に挙げる~keywordが許容される
— それらの効果は、
~CSS `font-width$p ~propに同じ行の 2 列目に挙げる値を設定するのと同じになる：
</p>

<p class="trans-note">【
`font-width^p は、
原文では `font-stretch$p だが，改称された。
】</p>

<table><thead><tr>
<th>~keyword
<th>`font-width^p
<tbody>

<tr><td>`ultra-condensed@l
<td>`ultra-condensed$v

<tr><td>`extra-condensed@l
<td>`extra-condensed$v

<tr><td>`condensed@l
<td>`condensed$v

<tr><td>`semi-condensed@l
<td>`semi-condensed$v

<tr><td>`~normalS@l
<td>`normal^v

<tr><td>`semi-expanded@l
<td>`semi-expanded$v

<tr><td>`expanded@l
<td>`expanded$v

<tr><td>`extra-expanded@l
<td>`extra-expanded$v

<tr><td>`ultra-expanded@l
<td>`ultra-expanded$v
</table>

<p>
既定の設定は， `~normalS$l であり、
各~glyphの横幅は，そのまま 100% になる。
</p>

◎
The fontStretch attribute's allowed keywords are as follows:
◎
ultra-condensed
• Same as CSS 'font-stretch' 'ultra-condensed' setting.
extra-condensed
• Same as CSS 'font-stretch' 'extra-condensed' setting.
condensed
• Same as CSS 'font-stretch' 'condensed' setting.
semi-condensed
• Same as CSS 'font-stretch' 'semi-condensed' setting.
normal
• The default setting, where width of the glyphs is at 100%.
semi-expanded
• Same as CSS 'font-stretch' 'semi-expanded' setting.
expanded
• Same as CSS 'font-stretch' 'expanded' setting.
extra-expanded
• Same as CSS 'font-stretch' 'extra-expanded' setting.
ultra-expanded
• Same as CSS 'font-stretch' 'ultra-expanded' setting.
</div>

<div>
<p>
`fontVariantCaps$2d 属性には、
次の表tの 1 列目に挙げる~keywordが許容される
— それらの効果は、
~CSS `font-variant-caps$p ~propに同じ行の 2 列目に挙げる値を設定するのと同じになる：
</p>

<table><thead><tr>
<th>~keyword
<th>`font-variant-caps^p
<tbody>

<tr><td>`~normalC@l
<td>`normal^v

<tr><td>`small-caps@l
<td>`small-caps$v

<tr><td>`all-small-caps@l
<td>`all-small-caps$v

<tr><td>`petite-caps@l
<td>`petite-caps$v

<tr><td>`all-petite-caps@l
<td>`all-petite-caps$v

<tr><td>`unicase@l
<td>`unicase$v

<tr><td>`titling-caps@l
<td>`titling-caps$v
</table>

<p>
既定の設定は， `~normalC$l であり、
どの特能も可能化されない。
</p>

◎
The fontVariantCaps attribute's allowed keywords are as follows:
◎
normal
• None of the features listed below are enabled.
small-caps
• Same as CSS 'font-variant-caps' 'small-caps' setting.
all-small-caps
• Same as CSS 'font-variant-caps' 'all-small-caps' setting.
petite-caps
• Same as CSS 'font-variant-caps' 'petite-caps' setting.
all-petite-caps
• Same as CSS 'font-variant-caps' 'all-petite-caps' setting.
unicase
• Same as CSS 'font-variant-caps' 'unicase' setting.
titling-caps
• Same as CSS 'font-variant-caps' 'titling-caps' setting.
</div>

<div>
<p>
`textRendering$2d 属性には、
次の表tの 1 列目に挙げる~keywordが許容される
— それらの効果は、
~SVG `text-rendering$p ~propに同じ行の 2 列目に挙げる値を設定するのと同じになる：
</p>

<table><thead><tr>
<th>~keyword
<th>`text-rendering^p
<tbody>

<tr><td>`~autoR@l
<td>`auto^v

<tr><td>`optimizeSpeed@l
<td>`optimizeSpeed^v

<tr><td>`optimizeLegibility@l
<td>`optimizeLegibility^v

<tr><td>`geometricPrecision@l
<td>`geometricPrecision^v
</table>
◎
The textRendering attribute's allowed keywords are as follows:
◎
auto
• Same as 'auto' in SVG text-rendering property.
optimizeSpeed
• Same as 'optimizeSpeed' in SVG text-rendering property.
optimizeLegibility
• Same as 'optimizeLegibility' in SVG text-rendering property.
geometricPrecision
• Same as 'geometricPrecision' in SVG text-rendering property.
</div>

<div class="algo">
<p>
`~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＼
</p>

<div>
<ul>
	<li>
図形~listは、
共通な座標~空間~内にある~glyph図形たちが成す~list
</li>
	<li>
物理的~整列 ~IN { `左端^i, `右端^i, `中央^i }
</li>
</ul>

【！無意味な記述：（この~algoのほとんどの~call元は、図形~list以外を無視する。）】
◎
an array of glyph shapes, each positioned on a common coordinate space,＼
a physical alignment whose value is one of left, right, and center, and＼
an inline box.＼
(Most callers of this algorithm ignore the physical alignment and the inline box.)
</div>

<ol>
	<li>
~Assert：
%最大-横幅 は［
`有限$または `無限大^i
］である
【この段は、この訳による補完】
</li>
	<li>
~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.
</li>
	<li>
%~text 内の各 `~ASCII空白$すべてを
`0020^U SPACE 文字に置換する
◎
Replace all ASCII whitespace in text with U+0020 SPACE characters.
</li>
	<li>
%~font ~LET %~target の `font$2d 属性で与えられる現在の~font
◎
Let font be the current font of target, as given by that object's font attribute.
</li>
	<li>
%言語 ~LET %~target の`言語$2D
◎
Let language be the target's language.
</li>
	<li>
<p>
~IF［
%言語 ~EQ `~inheritL$l
］：
◎
If language is "inherit":
</p>
		<ol>
			<li>
%~source~obj ~LET %~obj の`~font~style~source$
◎
Let sourceObject be object's font style source object.
</li>
			<li>
%言語 ~SET %~source~obj に応じて
⇒＃
`canvas$e 要素であるならば %~source~obj の`言語$／
`OffscreenCanvas$I ~objであるならば %~source~obj の`継承した言語$ofC
◎
If sourceObject is a canvas element, then set language to the sourceObject's language.
◎
Otherwise:
• Assert: sourceObject is an OffscreenCanvas object.
• Set language to the sourceObject's inherited language.
</li>
		</ol>
	</li>
	<li>
~IF［
%言語 ~EQ 空~文字列
］
⇒
%言語 ~SET `明示的に未知$i
◎
If language is the empty string, then set language to explicitly unknown.
</li>
	<li>
%方向 ~LET %~target の`方向$2Dに応じて
⇒＃
`ltr$l ならば `~ltr$i ／
`rtl$l ならば `~rtl$i ／
`inherit$l ならば ε
◎
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'.
◎
↓</li>
	<li>
<p>
~IF［
%方向 ~EQ ε
］：
◎
If the target object's direction attribute has the value "inherit"
</p>
		<ol>
			<li>
%~source~obj ~LET %~target【！%~obj】 の`~font~style~source$
◎
Let sourceObject be object's font style source object.
</li>
			<li>
%方向 ~SET %~source~obj に応じて
⇒＃
`canvas$e 要素であるならば %~source~obj の`方向性$／
`OffscreenCanvas$I ~objであるならば %~source~obj の`継承した方向$ofC
◎
If sourceObject is a canvas element, then let direction be sourceObject's directionality.
◎
Otherwise:
• Assert: sourceObject is an OffscreenCanvas object.
• Let direction be sourceObject's inherited direction.
</li>
		</ol>
	</li>
	<li>
%行内~box ~LET ~textとして %~text を包含している新たな`行内~box$ `CSS$r
◎
Form a hypothetical infinitely-wide CSS line box containing a single inline box containing the text text,＼
</li>
	<li>
%行内~box の~CSS`内容~言語$ ~SET %言語
◎
with the CSS content language set to language,
</li>
	<li>
<p>
%行内~box の各~propを次の表tに従って設定する：
</p>

<table><thead>
<tr><th>~prop
<th>~source
<tbody>

<tr><td>`direction$p
<td>%方向

<tr><td>`font$p
<td>%~font

<tr><td>`font-kerning$p
<td>%~target の `fontKerning$2d

<tr><td>`font-width$p
<td>%~target の `fontStretch$2d

<tr><td>`font-variant-caps$p
<td>%~target の `fontVariantCaps$2d

<tr><td>`letter-spacing$p
<td>%~target の`字l間のアキ$2D

<tr><td>~SVG `text-rendering$p
<td>%~target の `textRendering$2d

<tr><td>`white-space$p
<td>`pre^v

<tr><td>`word-spacing$p
<td>%~target の`単語~間のアキ$2D

<tr><td>他のすべての~prop
<td>各自の初期~値
</table>

◎
and 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.
</li>
	<li>
<p>
~WHILE 無条件：
</p>
		<ol>
			<li>
%行内~box の `font$p ~prop ~SET %~font
</li>
			<li>
~IF［
%最大-横幅 ~EQ `無限大^i
］~OR［［
%行内~box を無限に長い仮の~CSS`行l~box$内に~~配置したときの， `px$css 単位による横幅
］ ~LTE %最大-横幅
］
⇒
~BREAK
</li>
			<li>
%~font ~SET ［
%~font より~condensedな~fontが可用なら それ／
~ELSE_ ［
%~font に横方向の拡縮-係数を適用することにより，適度に読易い~fontを合成できる
］ならば それ ／
~ELSE_ %~font より小さい~font
］
</li>
		</ol>

◎
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.
</li>
	<li>
<p>
%起点 は %行内~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:
</p>
		<ul>
			<li>

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

<div >

<table><thead>
<tr><th>`textAlign^2d
<th>%方向
<th>横~位置
<th>%物理的~整列
<tbody>

<tr><td>`left$l
<td>任意
<td rowspan="3">%行内~box の左端~辺
<td rowspan="3">`左端^i

<tr><td>`start$l
<td>~ltr

<tr><td>`end$l
<td>~rtl

<tr><td>`right$l
<td>任意
<td rowspan="3">%行内~box の右端~辺
<td rowspan="3">`右端^i

<tr><td>`end$l
<td>~ltr

<tr><td>`start$l
<td>~rtl

<tr><td>`center$l
<td>任意
<td>%行内~box の左端~辺と右端~辺の中点
<td>`中央^i
</table>

◎
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.
</div>

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

<table><thead>
<tr><th>`textBaseline^2d
<th>縦~位置
<tbody>

<tr><td>
`top$l
◎
If textBaseline is top
<td>
~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.

<tr><td>
`hanging$l
◎
If textBaseline is hanging
<td>
~fontの `hanging$bL 基底線
◎
Let the anchor point's vertical position be the hanging baseline of the first available font of the inline box.

<tr><td>
`middle$l
◎
If textBaseline is middle
<td>
~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.

<tr><td>
`alphabetic$l
◎
If textBaseline is alphabetic
<td>
~fontの `alphabetic$bL 基底線
◎
Let the anchor point's vertical position be the alphabetic baseline of the first available font of the inline box.

<tr><td>
`ideographic$l
◎
If textBaseline is ideographic
<td>
~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.

<tr><td>
`bottom$l
◎
If textBaseline is bottom
<td>
~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.
</table>

			</li>
		</ul>
	</li>
	<li>
<p>
%図形~list ~LET 次のような一連の図形からなる~list：
</p>
		<ul>
			<li>
各~図形は、
左端から右端の順に， %行内~box 内の各~glyphに対応する
</li>
			<li>
各~図形は、
対応する~glyphが %行内~box 内に~~描かれるときの図形を与える
</li>
			<li>
すべての図形は、［
`px$css を利用し, %起点 を原点とする，ある座標~空間
］内に位置される
</li>
		</ul>
◎
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 at the anchor point.
</li>
	<li>
~RET
( %図形~list, %物理的~整列, %行内~box )
◎
Return result, physical alignment, and the inline box.
</li>
</ol>
</div>

					</section>
					<section id="building-paths">
<h6 title="Building paths">4.12.5.1.6. ~pathの築き方</h6>

<p>
`CanvasPath$I を実装する各~objは、
`~path$を有する。
◎
Objects that implement the CanvasPath interface have a path.＼
</p>

<p>
`~path@
は、
下位pathたちが成す~listである。
各 下位pathは：
◎
A path has a list of zero or more subpaths. Each subpath consists of＼
</p>

<ul>
	<li>
1 個~以上の点たちが成す~listであり、
それを成す各［
連続する 2 個の点
］は，ある
`線~区分@
— 直線や曲線 —
で接続される。
◎
a list of one or more points, connected by straight or curved line segments, and＼
</li>
	<li>
加えて，閉な下位pathは、
その最後の点から最初の点まで，直線で接続される。
そうでない下位pathは、
開な下位pathと称される
【指定されない限り，開な下位pathとする】
。
“下位pathを閉じる”
という句は、
所与の開な下位pathを閉な下位pathにすることを意味する。
【その逆を行う操作は無い。】
◎
a flag indicating whether the subpath is closed or not. A closed subpath is one where the last point of the subpath is connected to the first point of the subpath by a straight line.＼
</li>
</ul>

<p>
1 個の点のみからなる下位pathは、
~pathを塗るときには無視される。
◎
Subpaths with only one point are ignored when painting the path.
</p>

<p>
各`~path$は、
`新たな下位pathは必要か@
を有する
— ~pathの作成-時には ~T になるモノトスル。
［
この~flag ~EQ ~T
］の下では、
一部の~APIは
— 最後の下位pathを拡張することなく —
`~path$に新たな下位pathを付加する。
◎
Paths have a need new subpath flag. When this flag is set, certain APIs create a new subpath rather than extending the previous one. When a path is created, its need new subpath flag must be set.
</p>

<p>
`CanvasPath$I ~objの作成-時には、
その`~path$は
0 個の下位pathからなるように初期化するモノトスル。
◎
When an object implementing the CanvasPath interface is created, its path must be initialized to zero subpaths.
</p>

<dl class="domintro">
	<dt>%context.`moveTo(x, y)$2d</dt>
	<dt>%path.`moveTo(x, y)$2d</dt>
	<dd>
所与の点を伴う新たな下位pathを作成する。
◎
Creates a new subpath with the given point.
</dd>

	<dt>%context.`closePath()$2d</dt>
	<dt>%path.`closePath()$2d</dt>
	<dd>
現在の下位pathを閉じた上で、
その始端（すなわち終端）と同じ点から，新たな下位pathを開始する。
◎
Marks the current subpath as closed, and starts a new subpath with a point the same as the start and end of the newly closed subpath.
</dd>

	<dt>%context.`lineTo(x, y)$2d</dt>
	<dt>%path.`lineTo(x, y)$2d</dt>
	<dd>
現在の下位pathに，その最後の点から直線で接続するように所与の点を追加する。
◎
Adds the given point to the current subpath, connected to the previous one by a straight line.
</dd>

	<dt>%context.`quadraticCurveTo(cpx, cpy, x, y)$2d</dt>
	<dt>%path.`quadraticCurveTo(cpx, cpy, x, y)$2d</dt>
	<dd>
現在の下位pathに，その最後の点から［
所与の制御~点を伴う二次ベジェ曲線
］で接続するように所与の点を追加する。
◎
Adds the given point to the current subpath, connected to the previous one by a quadratic Bézier curve with the given control point.
</dd>

	<dt>%context.`bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)$2d</dt>
	<dt>%path.`bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)$2d</dt>
	<dd>
現在の下位pathに，その最後の点から［
所与の制御~点を伴う三次ベジェ曲線
］で接続するように所与の点を追加する。
◎
Adds the given point to the current subpath, connected to the previous one by a cubic Bézier curve with the given control points.
</dd>

	<dt>%context.`arcTo(x1, y1, x2, y2, radius)$2d</dt>
	<dt>%path.`arcTo(x1, y1, x2, y2, radius)$2d</dt>
	<dd>
現在の下位pathに，その最後の点から直線, および［
所与の［
制御~点, 半径
］を伴う円弧
］で順に接続するように点を追加する。
◎
Adds an arc with the given control points and radius to the current subpath, connected to the previous point by a straight line.
</dd>
	<dd>
%radius が負な場合、
`IndexSizeError$E 例外が投出される。
◎
Throws an "IndexSizeError" DOMException if the given radius is negative.
</dd>
	<dd>
<figure>
`arcTo1^dgm
`arcTo2^dgm
`arcTo3^dgm
</figure>

	</dd>

	<dt>%context.`arc(x, y, radius, startAngle, endAngle [, counterclockwise ])$2d</dt>
	<dt>%path.`arc(x, y, radius, startAngle, endAngle [, counterclockwise ])$2d</dt>
	<dd>
現在の下位pathに，その最後の点から直線, および［
真円の周を所与の始端~角度から所与の終端~角度まで所与の方向へたどる円弧（既定は時計回り）
］で順に接続するように点を追加する。
◎
Adds points to the subpath such that the arc described by the circumference of the circle described by the arguments, starting at the given start angle and ending at the given end angle, going in the given direction (defaulting to clockwise), is added to the path, connected to the previous point by a straight line.
</dd>
	<dd>
所与の半径が負な場合、
`IndexSizeError$E 例外が投出される。
◎
Throws an "IndexSizeError" DOMException if the given radius is negative.
</dd>
	<dd>
<figure>`arc1^dgm
</figure>
</dd>

	<dt>%context.`ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle [, counterclockwise])$2d</dt>
	<dt>%path.`ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle [, counterclockwise])$2d</dt>
	<dd>
現在の下位pathに，その最後の点から直線, および［
楕円の周を所与の始端~角度から所与の終端~角度まで所与の方向へたどる円弧（既定は時計回り）
］で順に接続するように点を追加する。
◎
Adds points to the subpath such that the arc described by the circumference of the ellipse described by the arguments, starting at the given start angle and ending at the given end angle, going in the given direction (defaulting to clockwise), is added to the path, connected to the previous point by a straight line.
</dd>
	<dd>
所与の半径が負な場合、
`IndexSizeError$E 例外が投出される。
◎
Throws an "IndexSizeError" DOMException if the given radius is negative.
</dd>

	<dt>%context.`rect(x, y, w, h)$2d</dt>
	<dt>%path.`rect(x, y, w, h)$2d</dt>
	<dd>
所与の矩形を表現している新たな閉な下位pathを，この~pathに追加する。
◎
Adds a new closed subpath to the path, representing the given rectangle.
</dd>

	<dt>%context.`roundRect(x, y, w, h, radii)$2d</dt>
	<dt>%path.`roundRect(x, y, w, h, radii)$2d</dt>
	<dd>
~pathに新たな［
所与の丸められた矩形を表現している，閉な下位path
］を追加する。
%radii は、［
半径たちが成す~list／ 1 個の半径
］を与える
— 後者は、
1 個の半径【！element】からなる~listと同じ仕方で挙動する。
これらの半径は、
矩形の各~隅~用の半径を画素~数【 `px$css 数？】で表現する
— その個数と順序は、
~CSS `border-radius$p ~propと同じ仕方で機能する。
◎
Adds a new closed subpath to the path representing the given rounded rectangle. radii is either a list of radii or a single radius representing the corners of the rectangle in pixels. If a list is provided, the number and order of these radii function in the same way as the CSS 'border-radius' property. A single radius behaves the same way as a list with a single element.
</dd>
	<dd>
当の下位path【！~path】は、［
%w, %h
］が次を［
満たすならば時計回り／満たないならば反時計回り
］に描かれる
⇒
［［
%w ~GTE 0
］~AND［
%h ~GTE 0
］］~OR［［
%w ~LT 0
］~AND［
%h ~LT 0
］］
◎
If w and h are both greater than or equal to 0, or if both are smaller than 0, then the path is drawn clockwise. Otherwise, it is drawn counterclockwise.
</dd>
	<dd>
%w ~LT 0 の場合、
丸められた矩形は横方向に裏返される
— すなわち、
通常は［
左端／右端
］隅に適用される各~半径~値は［
右端／左端
］隅に利用される。
類似に， %h ~LT 0 の場合、
丸められた矩形は縦方向に裏返される。
◎
When w is negative, the rounded rectangle is flipped horizontally, which means that the radius values that normally apply to the left corners are used on the right and vice versa. Similarly, when h is negative, the rounded rect is flipped vertically.
</dd>
	<dd>
<p>
%radii を成す各~値 %r に対し，それが：
</p>
		<ul>
			<li>
実数である場合
⇒
対応する隅は、
半径 %r の真円な円弧として描かれる。
</li>
			<li>
［
`x^c, `y^c
］~propを伴う~objである場合
⇒
対応する隅は、［
~x／~y
］半径が［
`x^c／`y^c
］~propの値に等しくされた，楕円な円弧として描かれる。
</li>
</ul>

◎
When a value r in radii is a number, the corresponding corner(s) are drawn as circular arcs of radius r.
◎
When a value r in radii is an object with { x, y } properties, the corresponding corner(s) are drawn as elliptical arcs whose x and y radii are equal to r.x and r.y, respectively.
</dd>
	<dd>
ある辺に対し，［
辺の~~両端にある 2 個の隅の【辺と平行な方の】半径【！ %radii 】の総和
］が辺の長さを超える場合、
丸められた矩形の半径【！ %radii 】すべては，係数［
辺の長さ ~DIV 半径の総和
］で拡縮される。
そのような辺が複数ある場合、
各~辺に対応する拡縮-係数のうち最~小なものが利用される。
これは、
~CSSの【 `border-radius$p ~propの】挙動と一貫する。
◎
When the sum of the radii of two corners of the same edge is greater than the length of the edge, all the radii of the rounded rectangle are scaled by a factor of length / (r1 + r2). If multiple edges have this property, the scale factor of the edge with the smallest scale factor is used. This is consistent with CSS behavior.
</dd>
	<dd>
<p>
%radii は次を満たす必要がある
— さもなければ `RangeError$E が投出される：
</p>
		<ul>
			<li>
%radii は~listであるならば、
その~size ~IN { 1, 2, 3, 4 }
</li>
			<li>
%radii を成す各~値は、
負でない実数であるか，~objであって［
負でない実数を値にとる［
`x^c, `y^c
］~prop
］を伴う
</li>
		</ul>
◎
Throws a RangeError if radii is a list whose size is not one, two, three, or four.
◎
Throws a RangeError if a value in radii is a negative number, or is an { x, y } object whose x or y properties are negative numbers.
</dd>
</dl>

<p>
以下の~methodは、［
`CanvasPath$I ~objの`~path$に対する操作
］を作者に許容する。
◎
The following methods allow authors to manipulate the paths of objects implementing the CanvasPath interface.
</p>

<p>
［
`CanvasDrawPath$I ~obj ／ `CanvasTransform$I ~obj
］に対しては、［
これらの~methodに渡された点, および
これらの~methodにより`現在の既定の~path$に追加されることになる線
］は、
~pathに追加される前に`変形n行列$に則って変形するモノトスル。
◎
For objects implementing the CanvasDrawPath and CanvasTransform interfaces, the points passed to the methods, and the resulting lines added to current default path by these methods, must be transformed according to the current transformation matrix before being added to the path.
</p>

<div class="algo">
<p>
`moveTo(x, y)@2d
~method手続きは：
◎
The moveTo(x, y) method, when invoked, must run these steps:
</p>
<ol>
	<li>
~IF［
いずれかの引数は`有限$でない
］
⇒
~RET
◎
If either of the arguments are infinite or NaN, then return.
</li>
	<li>
コレの`~path$に［
点 ( %x, %y ) のみからなる新たな下位path
］を追加する【！Create a】
◎
Create a new subpath with the specified point as its first (and only) point.
</li>
</ol>
</div>

<div class="algo">
<p>
`下位pathありを確保する@
~algoは、
所与の
( `~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＼
</p>

<ol>
	<li>
~IF［
%~path の`新たな下位pathは必要か$ ~EQ ~F
］
⇒
~RET
◎
check to see if the path has its need new subpath flag set.＼
</li>
	<li>
%~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＼
</li>
	<li>
%~path の`新たな下位pathは必要か$ ~SET ~F
◎
must then unset the path's need new subpath flag.
</li>
</ol>
</div>

<div class="algo">
<p>
`closePath()@2d
~method手続きは：
◎
The closePath() method, when invoked, must＼
</p>
<ol>
	<li>
%~path ~LET コレの`~path$
◎
↓</li>
	<li>
~IF［
%~path は空である
］
⇒
~RET
◎
do nothing if the object's path has no subpaths.＼
</li>
	<li>
%~path を成す最後の下位pathを閉じる
◎
Otherwise, it must mark the last subpath as closed,＼
</li>
	<li>
%~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.
</li>
</ol>
</div>

<p class="note">注記：
最後の下位path内に複数の点がある場合、
これは，下位pathの［
最後の点から最初の点へ
］戻るように接続する直線を追加して，下位pathを “閉じる” 。
◎
If the last subpath had more than one point in its list of points, then this is equivalent to adding a straight line connecting the last point back to the first point of the last subpath, thus "closing" the subpath.
</p>

<hr>

<p>
以下に述べる各種~methodは、
新たな点, および それを接続する線を下位pathに追加する。
どの~methodも，当の~objの~pathを成す最後の下位pathのみを改変する：
◎
New points and the lines connecting them are added to subpaths using the methods described below. In all cases, the methods only modify the last subpath in the object's path.
</p>

<div class="algo">
<p>
`lineTo(x, y)@2d
~method手続きは：
◎
The lineTo(x, y) method, when invoked, must run these steps:
</p>
<ol>
	<li>
~IF［
いずれかの引数は`有限$でない
］
⇒
~RET
◎
If either of the arguments are infinite or NaN, then return.
</li>
	<li>
%P ~LET 点 ( %x, %y )
◎
↓</li>
	<li>
~IF［
コレの`~path$は空である
］
⇒＃
`下位pathありを確保する$( コレの`~path$, %P )；
~RET
◎
If the object's path has no subpaths, then ensure there is a subpath for (x, y).
</li>
	<li>
コレの`~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.
</li>
</ol>
</div>

<div class="algo">
<p>
`quadraticCurveTo(cpx, cpy, x, y)@2d
~method手続きは：
◎
The quadraticCurveTo(cpx, cpy, x, y) method, when invoked, must run these steps:
</p>
<ol>
	<li>
~IF［
いずれかの引数は`有限$でない
］
⇒
~RET
◎
If any of the arguments are infinite or NaN, then return.
</li>
	<li>
%CP ~LET 点 ( %cpx, %cpy )
◎
↓</li>
	<li>
%P ~LET 点 ( %x, %y )
◎
↓</li>
	<li>
`下位pathありを確保する$( コレの`~path$, %CP )
◎
Ensure there is a subpath for (cpx, cpy)
</li>
	<li>
コレの`~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.
</li>
</ol>
</div>

<div class="algo">
<p>
`bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)@2d
~method手続きは：
◎
The bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) method, when invoked, must run these steps:
</p>
<ol>
	<li>
~IF［
いずれかの引数は`有限$でない
］
⇒
~RET
◎
If any of the arguments are infinite or NaN, then return.
</li>
	<li>
%P ~LET 点 ( %x, %y )
◎
↓</li>
	<li>
%CP1 ~LET 点 ( %cp1x, %cp1y )
◎
↓</li>
	<li>
%CP2 ~LET 点 ( %cp2x, %cp2y )
◎
↓</li>
	<li>
`下位pathありを確保する$( コレの`~path$, %CP1 )
◎
Ensure there is a subpath for (cp1x, cp1y).
</li>
	<li>
コレの`~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.
</li>
</ol>
</div>

<div class="algo">
<p>
`arcTo(x1, y1, x2, y2, radius)@2d
~method手続きは：
◎
The arcTo(x1, y1, x2, y2, radius) method, when invoked, must run these steps:
</p>
<ol>
	<li>
~IF［
いずれかの引数は`有限$でない
］
⇒
~RET
◎
If any of the arguments are infinite or NaN, then return.
</li>
	<li>
%P1 ~LET 点( %x1, %y1 )
◎
↓</li>
	<li>
%P2 ~LET 点( %x2, %y2 )
◎
↓</li>
	<li>
`下位pathありを確保する$( コレの`~path$, %P1 )
◎
Ensure there is a subpath for (x1, y1).
</li>
	<li>
%下位path ~LET コレの`~path$を成す最後の下位path
【この段はこの訳による補完】
◎
↓</li>
	<li>
~IF［
%radius ~LT 0
］
⇒
~THROW `IndexSizeError$E
◎
If radius is negative, then throw an "IndexSizeError" DOMException.
</li>
	<li>
%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).
</li>
	<li>
<p>
~IF［
~OR↓
］…
</p>
		<ul>
			<li>
%P0 ~EQ %P1
</li>
			<li>
%P1 ~EQ %P2
</li>
			<li>
%radius ~EQ 0
</li>
			<li>
［
%P0, %P1, %P2
］は、
同じ直線~上にある
</li>
		</ul>
<p>
…ならば
⇒
%下位path に %P1 を追加した上で，
%P0 から %P1 へ直線で接続する
</p>
◎
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.
</li>
	<li>
<p>
~ELSE：
</p>
		<ol>
			<li>
%L0 ~LET %P0 に交叉し, %P1 で終端する半直線
</li>
			<li>
%L2 ~LET %P2 に交叉し, %P1 で終端する半直線
</li>
			<li>
%真円 ~LET 半径 ~EQ %radius, かつ %L0, %L2 に接する真円
</li>
			<li>
%Q0 ~LET %真円 と %L0 が接する点
</li>
			<li>
%Q2 ~LET %真円 と %L2 が接する点
</li>
			<li>
%下位path に %Q0 を追加した上で、
%P0 から %Q0 へ直線で接続する
</li>
			<li>
%下位path に %Q2 を追加した上で、
%Q0 から %Q2 へ［
%真円 を成す短い方の円弧
］で接続する
</li>
		</ol>
◎
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.
</li>
</ol>
</div>

<div class="algo">
<p>
`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.
</p>

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

<div class="algo">
`ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, counterclockwise)@2d
~method手続きは
⇒
`~ellipse~method手続き$( コレの`~path$, %x, %y, %radiusX, %radiusY, %rotation, %startAngle, %endAngle, %counterclockwise )
◎
The ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, counterclockwise) method, when invoked, must run the ellipse method steps with this, x, y, radiusX, radiusY, rotation, startAngle, endAngle, and counterclockwise.
</div>

<div class="algo">
<p>
`~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: 
</p>
<ol>
	<li>
~IF［［
%~path, %反時計回りか
］以外の引数に`有限$でないものがある
］
⇒
~RET
◎
If any of the arguments are infinite or NaN, then return.
</li>
	<li>
~IF［
%~x半径 ~LT 0
］~OR［
%~y半径 ~LT 0
］
⇒
~THROW `IndexSizeError$E
◎
If either radiusX or radiusY are negative, then throw an "IndexSizeError" DOMException.
</li>
	<li>
( %円弧, %始点, %終点 ) ~LET 下に従って決定される円弧と，その始点, 終点
◎
↓</li>
	<li>
~IF［
%~path は空である
］
⇒
`下位pathありを確保する$( %~path, %始点 )
◎
↓</li>
	<li>
~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.
</li>
	<li>
%~path を成す最後の下位pathに
— その最後の点から %円弧 で接続するように —
%終点 を追加する
◎
Add the start and end points of the arc to the subpath, and connect them with an arc.＼
</li>
</ol>

<div class="algo">
<p>
上における円弧, およびその［
始点, 終点
］は、
次の下位-手続きに従って決定される：
</p>
<ol>
	<li>
%真円 ~LET 中心 (0, 0) 半径 1 の真円
</li>
	<li>
( %始点, %終点 ) ~LET
%真円 の周-に沿って %真円 上の点 (1, 0) から時計回りに角度
( %始端~角度 ~radian, %終端~角度 ~radian )
にある点
</li>
	<li>
<p>
%全~周-か ~LET ~IS ~OR↓：
</p>
		<ul>
			<li>
［
%反時計回りか ~EQ ~F
］~AND［
%終端~角度 ~MINUS %始端~角度 ~GTE 2π
］
</li>
			<li>
［
%反時計回りか ~EQ ~T
］~AND［
%始端~角度 ~MINUS %終端~角度 ~GTE 2π
］
</li>
		</ul>
	</li>
	<li>
~IF［
%全~周-か ~EQ ~T
］
⇒
%終点 ~SET %始点
</li>
	<li>
<p>
%円弧 ~LET %真円 の周-を次のように なぞって得られる円弧：
</p>
		<ul>
			<li>
%全~周-か に応じて
⇒＃
~T ならば %始点 から周-全体を ／
~F ならば %始点 から %終点 までを
</li>
			<li>
%反時計回りか に応じて
⇒＃
~T ならば反時計回りに
~F ならば時計回りに
</li>
		</ul>
	</li>
	<li>
~RET ［
%円弧, %始点, %終点
］それぞれに対し，次を順に適用した結果
⇒＃
( x, y ) 軸~方向に ( %~x半径, %~y半径 ) 倍だけ拡縮する；
時計回りに %回転 ~radianだけ回転する；
( x, y ) 軸~方向に ( %~x, %~y ) だけ移動する
</li>
</ol>

<p class="trans-note">【
原文は，この下位-手続きの中で
`楕円~上の点を決定する手続き@
を利用しているが、
この訳では，代わりに
その手続きを %真円 と変形（最後の段）に分ける形で組み込んでいる。
】</p>
◎
The arc and its start and end points are defined as follows:
◎
Consider an ellipse that has its origin at (x, y), that has a major-axis radius radiusX and a minor-axis radius radiusY, and that is rotated about its origin such that its semi-major axis is inclined rotation radians clockwise from the x-axis.
◎
If counterclockwise is false and endAngle − startAngle is greater than or equal to 2π, or, if counterclockwise is true and startAngle − endAngle is greater than or equal to 2π, then the arc is the whole circumference of this ellipse, and both the start point and the end point are the result of running the determine the point on an ellipse steps given this ellipse and startAngle.
◎
Otherwise, the start point is the result of running the determine the point on an ellipse steps given this ellipse and startAngle, the end point is the result of running the determine the point on an ellipse steps given this ellipse and endAngle, and the arc is the path along the circumference of this ellipse from the start point to the end point, going counterclockwise if counterclockwise is true, and clockwise otherwise. Since the points are on the ellipse, as opposed to being simply angles from zero, the arc can never cover an angle greater than 2π radians.
</div>

<p class="note">注記：
結果の円弧が楕円の全~周-を覆っていて，下位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.
</p>
</div>

<div class="algo">
<p>
`rect(x, y, w, h)@2d
~method手続きは：
◎
The rect(x, y, w, h) method, when invoked, must run these steps:
</p>
<ol>
	<li>
~IF［
いずれかの引数は`有限$でない
］
⇒
~RET
◎
If any of the arguments are infinite or NaN, then return.
</li>
	<li>
コレの`~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.
</li>
	<li>
コレの`~path$に［
点 ( %x, %y ) のみからなる新たな下位path
］を追加する【！Create a】
◎
Create a new subpath with the point (x, y) as the only point in the subpath.
</li>
</ol>
</div>

<div class="algo">
<p>
`roundRect(x, y, w, h, radii)@2d
~method手続きは：
◎
The roundRect(x, y, w, h, radii) method steps are:
</p>
<ol>
	<li>
~IF［
%x, %y, %w, %h いずれかは`有限$でない
］
⇒
~RET
◎
If any of x, y, w, or h are infinite or NaN, then return.
</li>
	<li>
~IF［
%radii は［
`~urdb^c ／ `DOMPointInit$I
］である
］
⇒
%radii ~SET « %radii »
◎
If radii is an unrestricted double or DOMPointInit, then set radii to « radii ».
</li>
	<li>
~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.
</li>
	<li>
%正規化した半径~群 ~LET 空~list
◎
Let normalizedRadii be an empty list.
</li>
	<li>
<p>
%radii を成す
~EACH( %半径 )
に対し：
◎
For each radius of radii:
</p>
		<ol>
			<li>
<p>
~IF［
%半径 は `DOMPointInit$I である
］：
◎
If radius is a DOMPointInit:
</p>
				<ol>
					<li>
~IF［
%半径[ "`x$mb" ] は`有限$でない
］~OR［
%半径[ "`y$mb" ] は`有限$でない
］
⇒
~RET
◎
If radius["x"] or radius["y"] is infinite or NaN, then return.
</li>
					<li>
~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.
</li>
					<li>
%正規化した半径~群 に %半径 を`付加する$
◎
Otherwise, append radius to normalizedRadii.
</li>
				</ol>
			</li>
			<li>
<p>
~IF［
%半径 は `unrestricted double$c である
］：
◎
If radius is a unrestricted double:
</p>
				<ol>
					<li>
~IF［
%半径 は`有限$でない
］
⇒
~RET
◎
If radius is infinite or NaN, then return.
</li>
					<li>
~IF［
%半径 ~LT 0
］
⇒
~THROW `RangeError$E
◎
If radius is negative, then throw a RangeError.
</li>
					<li>
%正規化した半径~群 に
«[ "`x$mb" → %半径, "`x$mb" → %半径 ]»
を`付加する$
◎
Otherwise, append «[ "x" → radius, "y" → radius ]» to normalizedRadii.
</li>
				</ol>
			</li>
		</ol>
	</li>
	<li>
~WHILE［
%正規化した半径~群 の`~size$ ~LT 4
］
⇒
%正規化した半径~群 に ε を`付加する$
◎
↓</li>
	<li>
( %左上, %右上, %右下, %左下 ) ~LET 
( %正規化した半径~群[ 0 ], %正規化した半径~群[ 1 ], %正規化した半径~群[ 2 ], %正規化した半径~群[ 3 ] )
◎
↓</li>
	<li>
<p>
（~~欠落している半径を次に従って拡充する）：
</p>
		<ol>
			<li>
~IF［
%右上 ~EQ ε
］
⇒
%右上 ~SET %左上
</li>
			<li>
~IF［
%右下 ~EQ ε
］
⇒
%右下 ~SET %左上
</li>
			<li>
~IF［
%左下 ~EQ ε
］
⇒
%左下 ~SET %右上
</li>
		</ol>
◎
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].
</li>
	<li>
<p>
（隅~曲線が重合しないよう，すべての半径を拡縮する）：
◎
Corner curves must not overlap. Scale all radii to prevent this:
</p>
		<ol>
			<li>
<p>
%拡縮率 ~LET 次に挙げる値の最小：
</p>
				<ul>
					<li>
%w ~DIV ( %左上[ "`x$mb" ] ~PLUS %右上[ "`x$mb" ] )
</li>
					<li>
%h ~DIV ( %右上[ "`y$mb" ] ~PLUS %右下[ "`y$mb" ] )
</li>
					<li>
%w ~DIV ( %右下[ "`x$mb" ] ~PLUS %左下[ "`x$mb" ] )
</li>
					<li>
%h ~DIV ( %左下[ "`y$mb" ] ~PLUS %左上[ "`y$mb" ] )
</li>
				</ul>
◎
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.
</li>
			<li>
~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.
</li>
		</ol>
	</li>
	<li>
<p>
%下位path ~LET 次に従って描かれる新たな下位path：
◎
Create a new subpath:
</p>
		<ol>
			<li>
点 ( %x ~PLUS %左上[ "`x$mb" ], %y )
へ移動する
◎
Move to the point (x + upperLeft["x"], y).
</li>
			<li>
点 ( %x ~PLUS %w ~MINUS %右上[ "`x$mb" ], %y )
へ直線を描く
◎
Draw a straight line to the point (x + w − upperRight["x"], y).
</li>
			<li>
点 ( %x ~PLUS %w, %y ~PLUS %右上[ "`y$mb" ] )
へ円弧を描く
◎
Draw an arc to the point (x + w, y + upperRight["y"]).
</li>
			<li>
点 ( %x ~PLUS %w, %y ~PLUS %h ~MINUS %右下[ "`y$mb" ] )
へ直線を描く
◎
Draw a straight line to the point (x + w, y + h − lowerRight["y"]).
</li>
			<li>
点 ( %x ~PLUS %w ~MINUS %右下[ "`x$mb" ], %y ~PLUS %h )
へ円弧を描く
◎
Draw an arc to the point (x + w − lowerRight["x"], y + h).
</li>
			<li>
点 ( %x ~PLUS %左下[ "`x$mb" ], %y ~PLUS %h )
へ直線を描く
◎
Draw a straight line to the point (x + lowerLeft["x"], y + h).
</li>
			<li>
点 ( %x, %y ~PLUS %h ~MINUS %左下[ "`y$mb" ] )
へ円弧を描く
◎
Draw an arc to the point (x, y + h − lowerLeft["y"]).
</li>
			<li>
点 ( %x, %y ~PLUS %左上[ "`y$mb" ] )
へ直線を描く
◎
Draw a straight line to the point (x, y + upperLeft["y"]).
</li>
			<li>
点 ( %x ~PLUS %左上[ "`x$mb" ], %y )
へ円弧を描く
◎
Draw an arc to the point (x + upperLeft["x"], y).
</li>
		</ol>
	</li>
	<li>
%下位path を閉じる
◎
Mark the subpath as closed.
</li>
	<li>
コレの`~path$に %下位path を追加する
【この段は、この訳による補完。】
</li>
	<li>
コレの`~path$に［
点 ( %x, %y ) のみからなる新たな下位path
］を追加する【！Create a】
◎
Create a new subpath with the point (x, y) as the only point in the subpath.
</li>
</ol>

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

					</section>
					<section id="path2d-objects">
<h6 title="Path2D objects">4.12.5.1.7. `Path2D^I ~obj</h6>

<p>
`Path2D$I ~objは、
~pathを宣言してから，後で `CanvasDrawPath$I ~obj上で利用するために利用できる。
これまでの各~節に述べた多くの~APIに加えて、
`Path2D$I ~objには，［
一連の~pathを組合せる ／ ~pathに~textを追加する【？】
］ための~methodもある。
◎
Path2D objects can be used to declare paths that are then later used on objects implementing the CanvasDrawPath interface. In addition to many of the APIs described in earlier sections, Path2D objects have methods to combine paths, and to add text to paths.
</p>

<dl class="domintro">
	<dt>%path = `new Path2D()$m</dt>
	<dd>
新たな空な `Path2D$I ~objを作成する。
◎
Creates a new empty Path2D object.
</dd>

	<dt>%path = `new Path2D(path)$m</dt>
	<dd>
%path は `Path2D$I ~objである場合、
その複製を返す。
◎
When path is a Path2D object, returns a copy.
</dd>
	<dd>
%path は文字列である場合、
それを~SVG~path~data `SVG$r として解釈して得られる~pathを作成する。
◎
When path is a string, creates the path described by the argument, interpreted as SVG path data. [SVG]
</dd>

	<dt>%path.`addPath(path [, transform ])$m</dt>
	<dd>
この~objが表現する~pathに %path を追加する。
◎
Adds to the path the path given by the argument.
</dd>
</dl>

<div class="algo">
<p>
`new Path2D(path)@m
構築子~手続きは：
◎
The Path2D(path) constructor, when invoked, must run these steps:
• Let output be a new Path2D object.
</p>
<ol>
	<li>
~IF［
%path ~EQ ε
］
⇒
~RET
◎
If path is not given, then return output.
</li>
	<li>
~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.)
</li>
	<li>
<p>
%~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]
</p>

<p class="note">注記：
結果の~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.
</p>
	</li>
	<li>
~IF［
%~SVG~path は空である
］
⇒
~RET
【この段は、この訳による補完（さもなければ、次の段の %P を定義し得ない）】
</li>
	<li>
%P ~LET %~SVG~path 内の最後の点
◎
Let (x, y) be the last point in svgPath.
</li>
	<li>
コレに %~SVG~path を成すすべての下位pathを追加する
（もしあれば）
◎
Add all the subpaths, if any, from svgPath to output.
</li>
	<li>
コレに［
点 %P のみからなる新たな下位path
］を追加する【！create a】
◎
Create a new subpath in output with (x, y) as the only point in the subpath.
◎
Return output.
</li>
</ol>
</div>

<div class="algo">
<p>
`addPath(path, transform)@m
~method手続きは：
◎
The addPath(path, transform) method, when invoked on a Path2D object a, must run these steps:
</p>
<ol>
	<li>
( %a, %b ) ~LET ( コレが表現する~path, %path が表現する~path )
◎
↓</li>
	<li>
~IF［
%b は下位pathを有さない
］
⇒
~RET
◎
If the Path2D object path has no subpaths, then return.
</li>
	<li>
%行列 ~LET `新たな~obj$( `DOMMatrix$I )
◎
↓</li>
	<li>
`行列を~2D辞書で初期化する$( %行列, %transform )
◎
Let matrix be the result of creating a DOMMatrix from the 2D dictionary transform.
</li>
	<li>
~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.
</li>
	<li>
%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.
</li>
	<li>
%P ~LET %b の最後の下位path内の最後の点
◎
Let (x, y) be the last point in the last subpath of c.
</li>
	<li>
%a に［
%b 内の すべての下位path
］を追加する
◎
Add all the subpaths in c to a.
</li>
	<li>
%a に［
点 %P のみからなる新たな下位path
］を追加する【！create a】
◎
Create a new subpath in a with (x, y) as the only point in the subpath.
</li>
</ol>
</div>

					</section>
					<section id="transformations">
<h6 title="Transformations">4.12.5.1.8. 変形n</h6>

<p>
`CanvasTransform$I を実装する~objは、
`現在の変形n行列@
とそれを操作する各種~methodを有する
（この節にて述べる）。
この変形n行列は、
~objの作成-時には，単位i行列に初期化するモノトスル。
◎
Objects that implement the CanvasTransform interface have a current transformation matrix, as well as methods (described in this section) to manipulate it. When an object implementing the CanvasTransform interface is created, its transformation matrix must be initialized to the identity matrix.
</p>

<p>
`現在の変形n行列$は、［
`現在の既定の~path$を作成するとき ／
~text, 図形, `Path2D$I ~objを塗るとき
］に `CanvasTransform$I ~obj上の座標に適用される。
◎
The current transformation matrix is applied to coordinates when creating the current default path, and when painting text, shapes, and Path2D objects, on objects implementing the CanvasTransform interface.
</p>

<p>
一連の変形nは、
逆順に遂行するモノトスル。
【変形n行列は，点に対し`左から乗算する$のが規約なので、行列~演算としては`同順に乗算する^emことを意味する。】
◎
The transformations must be performed in reverse order.
</p>

<p class="note">注記：
一例として，［
横幅を 2 倍する拡縮-変形n,
描き演算を 90 度~回転する回転~変形n
］がこの順で~canvasに適用された場合、
~~幅が高さの 2 倍である矩形が~canvas上に描かれた場合に現れる結果は，正方形になる。
◎
For instance, if a scale transformation that doubles the width is applied to the canvas, followed by a rotation transformation that rotates drawing operations by a quarter turn, and a rectangle twice as wide as it is tall is then drawn on the canvas, the actual result will be a square.
</p> 

<dl class="domintro">
	<dt>%context.`scale(x, y)$2d</dt>
	<dd>
所与の特性を伴う拡縮ng変形nを適用するように，`現在の変形n行列$を変更する。
◎
Changes the current transformation matrix to apply a scaling transformation with the given characteristics.
</dd>

	<dt>%context.`rotate(angle)$2d</dt>
	<dd>
所与の特性を伴う回転~変形nを適用するように，`現在の変形n行列$を変更する。
角度 %angle は~radian単位とする。
◎
Changes the current transformation matrix to apply a rotation transformation with the given characteristics. The angle is in radians.
</dd>

	<dt>%context.`translate(x, y)$2d</dt>
	<dd>
所与の特性を伴う並進~変形nを適用するように，`現在の変形n行列$を変更する。
◎
Changes the current transformation matrix to apply a translation transformation with the given characteristics.
</dd>

	<dt>%context.`transform(a, b, c, d, e, f)$2d</dt>
	<dd>
`現在の変形n行列$を，引数たちにより与えられる行列（下に述べる）を適用するように変更する。
◎
Changes the current transformation matrix to apply the matrix given by the arguments as described below.
</dd>

	<dt>%matrix = %context.`getTransform()$2d</dt>
	<dd>
`現在の変形n行列$の複製を新たな `DOMMatrix$I ~objとして返す。
◎
Returns a copy of the current transformation matrix, as a newly created DOMMatrix object.
</dd>

	<dt>%context.`setTransform(a, b, c, d, e, f)$2d</dt>
	<dd>
`現在の変形n行列$を，引数たちにより与えられる行列（下に述べる）に変更する。
◎
Changes the current transformation matrix to the matrix given by the arguments as described below.
</dd>

	<dt>%context.`setTransform(transform)$2d1</dt>
	<dd>
`現在の変形n行列$を，渡された `DOMMatrix2DInit$I 辞書により表現される行列に変更する。
◎
Changes the current transformation matrix to the matrix represented by the passed DOMMatrix2DInit dictionary.
</dd>

	<dt>%context.`resetTransform()$2d</dt>
	<dd>
`現在の変形n行列$を，単位i行列に変更する。
◎
Changes the current transformation matrix to the identity matrix.
</dd>
</dl>

<div class="algo">
<p>
`~2D行列@
[ %a, %b, %c, %d, %e, %f ]
という表記は、
次の結果が表現する行列を表すとする：
</p>
<ol>
	<li>
%行列 ~LET `新たな~obj$( `DOMMatrix$I )
</li>
	<li>
`行列を~2D行列に初期化する$( %行列, « %a, %b, %c, %d, %e, %f » )
</li>
	<li>
~RET %行列
</li>
</ol>
◎
↓</div>

<div class="algo">
<p>
`scale(x, y)@2d
~method手続きは：
◎
The scale(x, y) method, when invoked, must run these steps:
</p>
<ol>
	<li>
~IF［
いずれかの引数は`有限$でない
］
⇒
~RET
◎
If either of the arguments are infinite or NaN, then return.
</li>
	<li>
コレの`現在の変形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.
</li>
</ol>
</div>

<div class="algo">
<p>
`rotate(angle)@2d
~method手続きは：
◎
The rotate(angle) method, when invoked, must run these steps:
</p>
<ol>
	<li>
~IF［
%angle は`有限$でない
］
⇒
~RET
◎
If angle is infinite or NaN, then return.
</li>
	<li>
コレの`現在の変形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.
</li>
</ol>
</div>

<div class="algo">
<p>
`translate(x, y)@2d
~method手続きは：
◎
The translate(x, y) method, when invoked, must run these steps:
</p>
<ol>
	<li>
~IF［
いずれかの引数は`有限$でない
］
⇒
~RET
◎
If either of the arguments are infinite or NaN, then return.
</li>
	<li>
コレの`現在の変形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.
</li>
</ol>
</div>

<div class="algo">
<p>
`transform(a, b, c, d, e, f)@2d
~method手続きは：
◎
The transform(a, b, c, d, e, f) method, when invoked, must run these steps:
</p>
<ol>
	<li>
~IF［
いずれかの引数は`有限$でない
］
⇒
~RET
◎
If any of the arguments are infinite or NaN, then return.
</li>
	<li>
コレの`現在の変形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
</li>
</ol>

<p class="note">注記：
引数［
%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.
</p>
</div>

<div class="algo">
<div>
<p>
`getTransform()@2d
~method手続きは：
</p>
<ol>
	<li>
%行列 ~LET `新たな~obj$( `DOMMatrix$I )
</li>
	<li>
%行列 をコレの`現在の変形n行列$の複製を表現するよう初期化する
</li>
	<li>
~RET %行列
</li>
</ol>
◎
The getTransform() method, when invoked, must return a newly created DOMMatrix representing a copy of the current transformation matrix matrix of the context.
</div>

<p class="note">注記：
返される~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.
</p>
</div>

<div class="algo">
<p>
`setTransform(a, b, c, d, e, f)@2d
~method手続きは：
◎
The setTransform(a, b, c, d, e, f) method, when invoked, must run these steps:
</p>
<ol>
	<li>
~IF［
いずれかの引数は`有限$でない
］
⇒
~RET
◎
If any of the arguments are infinite or NaN, then return.
</li>
	<li>
コレの`現在の変形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
</li>
</ol>
</div>

<div class="algo">
<p>
`setTransform(transform)@2d1
~method手続きは：
◎
The setTransform(transform) method, when invoked, must run these steps:
</p>
<ol>
	<li>
%行列 ~LET `新たな~obj$( `DOMMatrix$I )
◎
↓</li>
	<li>
`行列を~2D辞書で初期化する$( %行列, %transform )
◎
Let matrix be the result of creating a DOMMatrix from the 2D dictionary transform.
</li>
	<li>
~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.
</li>
	<li>
コレの`現在の変形n行列$ ~SET %行列
◎
Reset the current transformation matrix to matrix.
</li>
</ol>
</div>

<div class="algo">
`resetTransform()@2d
~method手続きは
⇒
コレの`現在の変形n行列$を単位i行列に設定し直す
◎
The resetTransform() method, when invoked, must reset the current transformation matrix to the identity matrix.
</div>

<div class="note">

<p>注記：
`transform()$2d ／
`setTransform()$2d
~methodから作成される行列
— すなわち：
◎
Given a matrix of the form created by the transform() and setTransform() methods, i.e.,
</p>

<div class="_ex-matrix">%a %c %e
%b %d %f
0 0 1
</div>

<p>
が与えられたとき、
この変形-行列の乗算により，座標 (%x, %y) を変形した結果は
⇒＃
( %a %x ~PLUS %c %y ~PLUS %e, %b %x ~PLUS %d %y ~PLUS %f )
◎
the resulting transformed coordinates after transform matrix multiplication will be
• xnew = a x + c y + e
• ynew = b x + d y + f
</p>
</div>

					</section>
					<section id="image-sources-for-2d-rendering-contexts">
<h6 title="Image sources for 2D rendering contexts">4.12.5.1.9. ~2D描画~文脈~用の画像~source</h6>

<p>
［
`CanvasDrawImage$I ／ `CanvasFillStrokeStyles$I
］~interface上の一部の~methodは、
共用体~型 `CanvasImageSource$I の引数をとる。
◎
Some methods on the CanvasDrawImage and CanvasFillStrokeStyles interfaces take the union type CanvasImageSource as an argument.
</p>

<p>
この共用体~型は、［
次に挙げる~interface実装する~objを画像~sourceとして利用する
］ことを許容する：
◎
This union type allows objects implementing any of the following interfaces to be used as image sources:
</p>
<ul>
	<li>
`HTMLOrSVGImageElement$I
（ `img$e 要素 ／ ~SVG `image$e 要素）
</li>
	<li>
`HTMLVideoElement$I
（ `video$e 要素）
</li>
	<li>
`HTMLCanvasElement$I
（ `canvas$e 要素）
</li>
	<li>
`OffscreenCanvas$I
</li>
	<li>
`ImageBitmap$I
</li>
	<li>
`VideoFrame$I
</li>
</ul>

<p class="note">注記：
~SVG `image$e 要素については、
このように正式には指定されてはいないが，
`img$e 要素にほぼ一致するように実装されるものと期待されている。
すなわち， ~SVG `image$e 要素は、
基礎的な［
概念, 特能
］を `img$e 要素と共有する。
◎
Although not formally specified as such, SVG image elements are expected to be implemented nearly identical to img elements. That is, SVG image elements share the fundamental concepts and features of img elements.
</p>

<p class="note">注記：
`ImageBitmap$I ~objは、
`ImageData$I も含め，何種かの［
画像を表現する型
］から作成できる。
◎
The ImageBitmap interface can be created from a number of other image-representing types, including ImageData.
</p>

<div class="algo">
<p>
`画像~引数は利用-可能か検査する@
~algoは、
所与の
( `CanvasImageSource$I ~obj %image )
に対し：
◎
To check the usability of the image argument, where image is a CanvasImageSource object, run these steps:
</p>

<ol>
	<li>
<p>
%image に応じて：
◎
Switch on image:
</p>
		<dl class="switch">
			<dt>`HTMLOrSVGImageElement$I</dt>
			<dd>
				<ol>
					<li>
~IF［
%image の`現在の要請$の`状態$imG ~EQ `壊れている$
］
⇒
~THROW  `InvalidStateError$E
◎
If image's current request's state is broken, then throw an "InvalidStateError" DOMException.
</li>
					<li>
~IF［
%image は`全部的に復号-可能$でない
］
⇒
~RET `不良^i
◎
If image is not fully decodable, then return bad.
</li>
					<li>
~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.
</li>
				</ol>
			</dd>

			<dt>`HTMLVideoElement$I</dt>
			<dd>
~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.
</dd>

			<dt>`HTMLCanvasElement$I</dt>
			<dt>`OffscreenCanvas$I</dt>
			<dd>
~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.
</dd>

			<dt>`ImageBitmap$I</dt>
			<dt>`VideoFrame$I</dt>
			<dd>
~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.
</dd>
		</dl>
	</li>
	<li>
~RET `優良^i
◎
Return good.
</li>
</ol>
</div>

<p>
`CanvasImageSource$I ~obj %O による
`CanvasRenderingContext2D$I ~API用の画像を描画するときは、
%O が表現する~objの型に応じて，次に与えるものを~source画像として利用するモノトスル：
◎
↓</p>

<ul class="switch">
	<li>
<p>
%O は要素である場合、
%O に応じて：
◎
↓</p>
		<ul class="switch">
			<li>
<p>
`HTMLOrSVGImageElement$I
⇒
%O である要素の画像。
◎
When a CanvasImageSource object represents an HTMLOrSVGImageElement, the element's image must be used as the source image.
</p>

<p>
特定的には，要素が~animate化~画像を表現する場合、
その既定の画像
（~animationが~supportされないか不能化されているときに，
その画像の形式が利用するものと定義されるもの）
は［
在るならば それ ／
無いならば ~animationの最初の~frame
］になる。
◎
Specifically, when a CanvasImageSource object represents an animated image in an HTMLOrSVGImageElement, the user agent must use the default image of the animation (the one that the format defines is to be used when animation is not supported or is disabled), or, if there is no such image, the first frame of the animation, when rendering the image for CanvasRenderingContext2D APIs.
</p>
			</li>
			<li>
`HTMLVideoElement$I
⇒
%O を引数に~methodが呼出された時点で，`現在の再生~位置$にある~frame
— この場合の~source画像の寸法は、
`~media資源$の［
`生来な横幅$vD, `生来な縦幅$vD
］になるとする
（すなわち、
縦横比~補正があれば，それを適用した後の寸法）。
◎
When a CanvasImageSource object represents an HTMLVideoElement, then the frame at the current playback position when the method with the argument is invoked must be used as the source image when rendering the image for CanvasRenderingContext2D APIs, and the source image's dimensions must be the natural width and natural height of the media resource (i.e., after any aspect-ratio correction has been applied).
</li>
			<li>
`HTMLCanvasElement$I
⇒
%O である要素の~bitmap。
◎
When a CanvasImageSource object represents an HTMLCanvasElement, the element's bitmap must be used as the source image.
</li>
		</ul>

<p>
要素 %O が`具現化されて$いて，~sizeし直されたときでも、
~source画像には，描画された画像ではなく，元の画像~dataを利用するモノトスル
（例：要素が［
`width$diM ／ `height$diM
］属性を有していても、
それは，［
画像を `CanvasRenderingContext2D$I ~APIで描画するとき %O がどう解釈されるか
］に効果を及ぼすことはない）。
◎
When a CanvasImageSource object represents an element that is being rendered and that element has been resized, the original image data of the source image must be used, not the image as it is rendered (e.g. width and height attributes on the source element have no effect on how the object is interpreted when rendering the image for CanvasRenderingContext2D APIs).
</p>
	</li>
	<li>
`ImageBitmap$I
⇒
%O の~bitmap画像~data。
◎
When a CanvasImageSource object represents an ImageBitmap, the object's bitmap image data must be used as the source image.
</li>
	<li>
`OffscreenCanvas$I
⇒
%O の`~bitmap$ofC。
◎
When a CanvasImageSource object represents an OffscreenCanvas, the object's bitmap must be used as the source image.
</li>
	<li>
`VideoFrame$I
⇒
%O の画素~data
— この場合の~source画像の寸法は、
%O の［
`display width$sl,
`display height$sl
］になるとする。
◎
When a CanvasImageSource object represents a VideoFrame, the object's pixel data must be used as the source image, and the source image's dimensions must be the object's [[display width]] and [[display height]].
</li>
</ul>

<p>
所与の %image
`引数は生成元cleanでない@
とは、
%image の型に応じて，次が満たされることをいう：
◎
An object image is not origin-clean if, switching on image's type:
</p>

<dl class="switch">
	<dt>`HTMLOrSVGImageElement$I</dt>
	<dd>
%image の`現在の要請$の`画像~data$は`~CORS非同一-生成元$である。
◎
image's current request's image data is CORS-cross-origin.
</dd>

	<dt>`HTMLVideoElement$I</dt>
	<dd>
%image の`~media~data$は`~CORS非同一-生成元$である
◎
image's media data is CORS-cross-origin.
</dd>

	<dt>`HTMLCanvasElement$I</dt>
	<dt>`ImageBitmap$I</dt>
	<dt>`OffscreenCanvas$I</dt>
	<dd>
%image の~bitmapの`生成元cleanか$ ~EQ ~F
◎
image's bitmap's origin-clean flag is false.
</dd>
</dl>

					</section>
					<section id="fill-and-stroke-styles">
<h6 title="Fill and stroke styles">4.12.5.1.10. ~fill~style, ~stroke~style</h6>

<dl class="domintro">

	<dt>%context.`fillStyle$2d [ = %value ]</dt>
	<dt>%context.`strokeStyle$2d [ = %value ]</dt>
	<dd>
順に，図形を［
~fillする／~strokeする
］ときに利用される現在の~styleを返す。
◎
Returns the current style used for filling shapes.
</dd>
	<dd>
設定して、
順に，［
`~fill~style$2D／`~stroke~style$2D
］を変更できる。
◎
Can be set, to change the fill style.
</dd>
	<dd>
~styleは、
~CSS色を与える文字列, または［
`CanvasGradient$I ／ `CanvasPattern$I
］~objをとり得る。
妥当でない値は、
無視される。
◎
The style can be either a string containing a CSS color, or a CanvasGradient or CanvasPattern object. Invalid values are ignored.
◎
context . strokeStyle [ = value ]
◎
Returns the current style used for stroking shapes.
◎
Can be set, to change the stroke style.
◎
The style can be either a string containing a CSS color, or a CanvasGradient or CanvasPattern object. Invalid values are ignored.
</dd>
</dl>

<p>
`CanvasFillStrokeStyles$I を実装する各~objは、
図形をどう扱うかを制御する各種［
属性, ~method
］を有する
（この節にて定義する）。
◎
Objects that implement the CanvasFillStrokeStyles interface have attributes and methods (defined in this section) that control how shapes are treated by the object.
</p>

<p>
そのような各~objには［
`~fill~style@2D
,
`~stroke~style@2D
］が結付けられる
— どちらも：
<ul>
	<li>
次のいずれかを値にとる
⇒＃
~CSS色／
`CanvasPattern$I ~obj／
`CanvasGradient$I ~obj
</li>
	<li>
初期~時は、
次の結果になるモノトスル
⇒
`~CSS色~値を構文解析する$( `#000000^l )
◎
Such objects have associated fill style and stroke style values, which are either CSS colors, CanvasPatterns, or CanvasGradients. Initially, both must be the result of parsing the string "#000000".
</li>
	<li>
~CSS色を値にとる場合、［
~bitmap上に描くために利用されるときは，変形n行列により影響されない
］モノトスル。
◎
When the value is a CSS color, it must not be affected by the transformation matrix when used to draw on bitmaps.
</li>
</ul>

<p class="note">注記：
［
`CanvasPattern$I ／ `CanvasGradient$I
］~objが設定された場合、
~objに為された変更は，それ以降に図形を［
~strokeする／~fillする
］ときに影響する。
◎
When set to a CanvasPattern or CanvasGradient object, changes made to the object after the assignment do affect subsequent stroking or filling of shapes.
</p>

<div class="algo">
<p>
`fillStyle@2d
取得子~手続きは：
◎
The fillStyle getter steps are:
</p>
<ol>
	<li>
%~fill ~LET コレの`~fill~style$2D
◎
↓</li>
	<li>
~IF［
%~fill は~CSS色である
］
⇒
~RET `~HTMLに互換な直列化が要請される$下で， %~fill を`直列化-$CCした結果
◎
If this's fill style is a CSS color, then return the serialization of that color with HTML-compatible serialization requested.
</li>
	<li>
~RET %~fill
◎
Return this's fill style.
</li>
</ol>
</div>

<div class="algo">
<p>
`fillStyle$2d
設定子~手続きは：
◎
The fillStyle setter steps are:
</p>
<ol>
	<li>
%値 ~LET 所与の値
◎
↓</li>
	<li>
<p>
~IF［
%値 は文字列である
］：
◎
If the given value is a string, then:
</p>
		<ol>
			<li>
%文脈 ~LET コレの `canvas$2d 属性の値
◎
Let context be this's canvas attribute's value,＼
</li>
			<li>
~IF［
%文脈 は要素でない
］
⇒
%文脈 ~SET ε
◎
if that is an element; otherwise null.
</li>
			<li>
%構文解析した値 ~LET `~CSS色~値を構文解析する$( %値, %文脈 )
◎
Let parsedValue be the result of parsing the given value with context if non-null.
</li>
			<li>
~IF［
%構文解析した値 ~EQ `失敗^i
］
⇒
~RET
◎
If parsedValue is failure, then return.
</li>
			<li>
コレの`~fill~style$2D ~SET %構文解析した値
◎
Set this's fill style to parsedValue.
</li>
			<li>
~RET
◎
Return.
</li>
		</ol>
	</li>
	<li>
~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.
</li>
	<li>
コレの`~fill~style$2D ~SET %値
◎
Set this's fill style to the given value.
</li>
</ol>
</div>

<div class="algo">
<p>
`strokeStyle@2d
取得子~手続きは：
◎
The strokeStyle getter steps are:
</p>
<ol>
	<li>
%~stroke ~LET コレの`~stroke~style$2D
◎
↓</li>
	<li>
~IF［
%~stroke は~CSS色である
］
⇒
~RET `~HTMLに互換な直列化が要請される$下で， %~stroke を`直列化-$CCした結果
◎
If this's stroke style is a CSS color, then return the serialization of that color with HTML-compatible serialization requested.
</li>
	<li>
~RET %~stroke
◎
Return this's stroke style.
</li>
</ol>
</div>

<div class="algo">
<p>
`strokeStyle$2d
設定子~手続きは：
◎
The strokeStyle setter steps are:
</p>
<ol>
	<li>
%値 ~LET 所与の値
◎
↓</li>
	<li>
<p>
~IF［
%値 は文字列である
］：
◎
If the given value is a string, then:
</p>
		<ol>
			<li>
%文脈 ~LET コレの `canvas$2d 属性の値
◎
Let context be this's canvas attribute's value,＼
</li>
			<li>
~IF［
%文脈 は要素でない
］
⇒
%文脈 ~SET ε
◎
if that is an element; otherwise null.
</li>
			<li>
%構文解析した値 ~LET `~CSS色~値を構文解析する$( %値, %文脈 )
◎
Let parsedValue be the result of parsing the given value with context if non-null.
</li>
			<li>
~IF［
%構文解析した値 ~EQ `失敗^i
］
⇒
~RET
◎
If parsedValue is failure, then return.
</li>
			<li>
コレの`~stroke~style$2D ~SET %構文解析した値
◎
Set this's stroke style to parsedValue.
</li>
			<li>
~RET
◎
Return.
</li>
		</ol>
	</li>
	<li>
~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.
</li>
	<li>
コレの`~stroke~style$2D ~SET %値
◎
Set this's stroke style to the given value.
</li>
</ol>
</div>

<hr>

<p>
~gradientには 3 種の型
— 線型~gradient, 放射型~gradient, 円錐型~gradient —
があり、
いずれも不透明な `CanvasGradient$I ~objにより表現される。
◎
There are three types of gradients, linear gradients, radial gradients, and conic gradients, represented by objects implementing the opaque CanvasGradient interface.
</p>

<p class="trans-note">【
順に，~CSSに定義される［
`線型~gradient＠~CSSIMAGE#linear-gradients$,
`放射型~gradient＠~CSSIMAGE#radial-gradients$,
`円錐型~gradient＠~CSSIMAGE4#conic-gradients$
］に等価な効果を与える。
以下に現れる一部の用語にも，それらの用語が流用されている。
】</p>

<div class="p">
<p id="interpolation">
~gradientが作成された時点で（下を見よ）、
色停たちが配置される
— それらは、
~gradientに沿って色がどう分布するかを定義する。
~gradientの色は、
次に従うように分布するモノトスル：
</p>
<ul>
	<li>
各 色停の所での色は、
その色停が指定する色になる。
</li>
	<li>
2 つの色停の合間における色は、［
色, ~alpha
］成分を~RGBA空間~内で線型に補間して得る
— 色~成分に対しては~alpha値で乗算することなく。
</li>
	<li>
最初の色停の所より前における色は、
最初の色停の色になる。
</li>
	<li>
最後の色停の所より後における色は、
最後の色停の色になる。
</li>
	<li>
色停が 1 つもない場合、
~gradientは全体が`透明な黒$になる。
</li>
</ul>
◎
Once a gradient has been created (see below), stops are placed along it to define how the colors are distributed along the gradient. The color of the gradient at each stop is the color specified for that stop. Between each such stop, the colors and the alpha component must be linearly interpolated over the RGBA space without premultiplying the alpha value to find the color to use at that offset. Before the first stop, the color must be the color of the first stop. After the last stop, the color must be the color of the last stop. When there are no stops, the gradient is transparent black.
</div>

<dl class="domintro">
	<dt>%gradient.`addColorStop(offset, color)$m</dt>
	<dd>
コレの~gradientの，所与の~offsetに所与の色による色停を追加する
%offset 0.0 は~gradientの一方の端,
%offset 1.0 は他方の端を指す。
◎
Adds a color stop with the given color to the gradient at the given offset. 0.0 is the offset at one end of the gradient, 1.0 is the offset at the other end.
</dd>
	<dd>
%offset が範囲~外の場合、
`IndexSizeError$E 例外が投出される。
%color を色として構文解析できない場合、
`SyntaxError$E 例外が投出される。
◎
Throws an "IndexSizeError" DOMException if the offset is out of range. Throws a "SyntaxError" DOMException if the color cannot be parsed.
</dd>

	<dt>%gradient = %context.`createLinearGradient(x0, y0, x1, y1)$2d</dt>
	<dd>
線型~gradientを表現する `CanvasGradient$I ~objを返す
— ~gradientは、
引数たちにより表現される 2 個の座標を結ぶ線に沿って塗られる。
◎
Returns a CanvasGradient object that represents a linear gradient that paints along the line given by the coordinates represented by the arguments.
</dd>

	<dt>%gradient = %context.`createRadialGradient(x0, y0, r0, x1, y1, r1)$2d</dt>
	<dd>
放射型~gradientを表現する `CanvasGradient$I ~objを返す
— ~gradientは、［
引数たちにより表現される 2 個の真円
］から得られる円錐に沿って塗られる。
◎
Returns a CanvasGradient object that represents a radial gradient that paints along the cone given by the circles represented by the arguments.
</dd>
	<dd>
半径 %r0, %r1 のいずれかが負な場合、
`IndexSizeError$E 例外が投出される。
◎
If either of the radii are negative, throws an "IndexSizeError" DOMException exception.
</dd>

	<dt>%gradient = %context.`createConicGradient(startAngle, x, y)$2d</dt>
	<dd>
円錐型~gradientを表現する `CanvasGradient$I ~objを返す
— ~gradientは、［
%x, %y 引数により表現される中心
］の周りに沿って時計回りに塗られる。
◎
Returns a CanvasGradient object that represents a conic gradient that paints clockwise along the rotation around the center represented by the arguments.
</dd>
</dl>

<p>
`CanvasGradient$I ~interface上の各種~method：
◎
↓</p>

<div class="algo">
<p>
`addColorStop(offset, color)@m
~method手続きは：
◎
The addColorStop(offset, color) method on the CanvasGradient, when invoked, must run these steps:
</p>
<ol>
	<li>
~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.
</li>
	<li>
<p>
%構文解析した色 ~LET `~CSS色~値を構文解析する$( %color )
◎
Let parsed color be the result of parsing color.
</p>

<p class="note">注記：
構文解析するときに要素は渡されない。
`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.
</p>
	</li>
	<li>
~IF［
%構文解析した色 ~EQ `失敗^i
］
⇒
~THROW `SyntaxError$E
◎
If parsed color is failure, throw a "SyntaxError" DOMException.
</li>
	<li>
<p>
コレの~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.
</p>

<p>
~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).
</p>
	</li>
</ol>
</div>

<div class="algo">
<div>
<p>
`createLinearGradient(x0, y0, x1, y1)@2d
~method手続きは：
</p>
<ol>
	<li>
%~gradient ~LET `新たな~obj$( `CanvasGradient$I )
</li>
	<li>
%~gradient を次を伴う線型~gradientを表現するよう初期化する
⇒＃
その始点 ~SET ( %x0, %y0 ),
その終点 ~SET ( %x1, %y1 )
</li>
	<li>
~RET %~gradient
</li>
</ol>
◎
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.
</div>

<p>
線型~gradientは、
次に従って描画するモノトスル：
◎
Linear gradients＼
</p>
<ul>
	<li>
［
始点, 終点に交叉する線 %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).＼
</li>
	<li>
~gradient内の点は、
描画-時には，`変形n行列$により変形する。
◎
The points in the linear gradient must be transformed as described by the current transformation matrix when rendering.
</li>
	<li>
［
%x0 ~EQ %x1
］~AND［
%y0 ~EQ %y1
］の場合、
何も塗らない。
◎
If x0 = x1 and y0 = y1, then the linear gradient must paint nothing.
</li>
</ul>
</div>

<div class="algo">
<div>
<p>
`createRadialGradient(x0, y0, r0, x1, y1, r1)@2d
~method手続きは：
</p>
<ol>
	<li>
~IF［
%r0 ~LT 0
］~OR［
%r1 ~LT 0
］
⇒
~THROW `IndexSizeError$E
</li>
	<li>
%~gradient ~LET `新たな~obj$( `CanvasGradient$I )
</li>
	<li>
%~gradient を次を伴う放射型~gradientを表現するよう初期化する
【！値は座標~空間~単位による。】
⇒＃
その始端を表現する［原点 ( %x0, %y0 ), 半径 %r0 の真円］,
その終端を表現する［原点 ( %x1, %y1 ), 半径 %r1 の真円］
</li>
	<li>
~RET %~gradient
</li>
</ol>
◎
The createRadialGradient(x0, y0, r0, x1, y1, r1) method takes six arguments, the first three representing the start circle with origin (x0, y0) and radius r0, and the last three representing the end circle with origin (x1, y1) and radius r1. The values are in coordinate space units. If either of r0 or r1 are negative, then an "IndexSizeError" DOMException must be thrown. Otherwise, the method, when invoked, must return a radial CanvasGradient initialized with the two specified circles.
</div>

<p>
放射型~gradientは、
次の手続きに従って描画するモノトスル：
◎
Radial gradients must be rendered by following these steps:
</p>
<ol>
	<li>
( %dx, %dy, %dr ) ~LET (
%x1 ~MINUS %x0,
%y1 ~MINUS %y0,
%r1 ~MINUS %r0
)
◎
↓</li>
	<li>
~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.
</li>
	<li>
`真円^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
</li>
	<li>
`色^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).
</li>
	<li>
<p>
すべての実数 ~omega のうち［
`真円^op( ~omega ) の半径 ~GT 0
］になるものに対し， ~omega の降順に†
⇒
`真円^op( ~omega ) の周-を `色^op( ~omega ) で描く
— ただし、
より大きい ~omega に対しすでに塗られた部分には塗らない†
</p>

<p class="trans-note">【
~omega の範囲は無限になるが、
当然ながら，描画~結果に影響する範囲に限られる。
】【†
この塗り順序が影響するのは、
具体的には，~vector ( %dx, %dy ) の長さが %dr の絶対値を超える場合になる
— その場合、
より小さい ~omega による周-は，より大きい ~omega による周-で部分的に隠される。
】</p>
◎
For all values of ω where r(ω) &gt; 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.
</li>
</ol>

<p class="note">注記：
これは実質的に、
~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).
</p>

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

<div class="algo">
<div>
<p>
`createConicGradient(startAngle, x, y)@2d
~method手続きは：
</p>
<ol>
	<li>
%~gradient ~LET `新たな~obj$( `CanvasGradient$I )
</li>
	<li>
%~gradient を次を伴う円錐型~gradientを表現するよう初期化する
⇒＃
それが始まる角度 ~SET %startAngle ~radian,
その中心 ~SET  ( %x `px$css, %y `px$css )
</li>
	<li>
~RET %~gradient
</li>
</ol>
◎
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.
</div>

<p>
円錐型~gradientは、
~CSSの `conic-gradient()$v と同じ描画~規則に従い，次の~CSS値と等価になる
⇒
<code class="value">conic-gradient(from %A`rad^css at %x`px^css %y`px^css, %L)</code>
— ここで：
◎
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:
</p>
<ul>
	<li>
%A は
⇒
%startAngle ~PLUS ( π ~DIV 2 )
◎
adjustedStartAngle is given by startAngle + π/2;
</li>
	<li>
%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.
</li>
</ul>
</div>

<p>
~gradientが塗られるのは、
関連な［
~stroke／~fill
］用の効果を描くよう要求される所に限るモノトスル。
◎
Gradients must be painted only where the relevant stroking or filling effects requires that they be drawn.
</p>

<hr>

<p>
~patternは、
不透明な `CanvasPattern$I ~objにより表現される。
◎
Patterns are represented by objects implementing the opaque CanvasPattern interface.
</p>

<div>
<p>
各~patternには、
次に挙げるものが結付けられる：
</p>

<p class="trans-note">【
これらの［
用語／記述
］は、［
他所を明確化する／記述を集中する
］ための，この訳による追加。
】</p>

<dl class="def-list">
	<dt>`生成元cleanか@paT</dt>
	<dd>
初期~時は ~T とする
</dd>

	<dt>`繰返しの挙動@paT</dt>
	<dd>
次に挙げるいずれかの文字列
— 作成-時に設定される
⇒＃
`repeat^l （両~方向）,
`repeat-x^l （横のみ）,
`repeat-y^l （縦のみ）,
`no-repeat^l （繰返さない）
</dd>

	<dt>`画像@paT</dt>
	<dd>
`CanvasImageSource$I ~obj
— 作成-時に設定される。
</dd>

	<dt>`変形n行列@paT</dt>
	<dd>
~patternを塗るときに，どう利用されるかを制御する。
初期~時は単位i行列になるモノトスル。
</dd>
</dl>

◎
—
</div>


<dl class="domintro">
	<dt>%pattern = %context.`createPattern(image, repetition)$2d</dt>
	<dd>
%image 引数に与えられた画像を %repetition 引数で与えられる方向に繰返すような
`CanvasPattern$I ~objを返す。
◎
Returns a CanvasPattern object that uses the given image and repeats in the direction(s) given by the repetition argument.
</dd>
	<dd>
%repetition に許容される値は、
`繰返しの挙動$paTに挙げられたもの, および空~文字列（ `repeat^l と同じに扱われる）である
◎
The allowed values for repetition are repeat (both directions), repeat-x (horizontal only), repeat-y (vertical only), and no-repeat (neither). If the repetition argument is empty, the value repeat is used.
</dd>
	<dd>
画像が まだ全部的に復号されてないない場合、
何も描かれない。
画像は~canvasであって~dataがない場合、
`InvalidStateError$E 例外が投出される。
◎
If the image isn't yet fully decoded, then nothing is drawn. If the image is a canvas with no data, throws an "InvalidStateError" DOMException.
</dd>

	<dt>%pattern.`setTransform(transform)$m</dt>
	<dd>
`変形n行列$paTを設定する。
これは、［
~fill／~stroke
］塗ng演算において~patternを描画するときに利用される。
◎
Sets the transformation matrix that will be used when rendering the pattern during a fill or stroke painting operation.
</dd>
</dl>

<div class="algo">
<p>
`createPattern(image, repetition)@2d
~method手続きは：
◎
The createPattern(image, repetition) method, when invoked, must run these steps:
</p>
<ol>
	<li>
~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.
</li>
	<li>
~IF［
%repetition ~EQ 空~文字列
］
⇒
%repetition ~SET `repeat^l
◎
If repetition is the empty string, then set it to "repeat".
</li>
	<li>
~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.
</li>
	<li>
%pattern ~LET `新たな~obj$( `CanvasPattern$I )
◎
Let pattern be a new CanvasPattern object＼
</li>
	<li>
%pattern の
⇒＃
`画像$paT ~SET %image,
`繰返しの挙動$paT ~SET %repetition
◎
with the image image and the repetition behavior given by repetition.
</li>
	<li>
~IF［
%image `引数は生成元cleanでない$
］
⇒
%pattern の`生成元cleanか$paT ~SET ~F
◎
If image is not origin-clean, then mark pattern as not origin-clean.
</li>
	<li>
~RET %pattern
◎
Return pattern.
</li>
</ol>

<p>
%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.
</p>
</div>

<div class="algo">
<p>
`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:
</p>
<ol>
	<li>
%行列 ~LET `新たな~obj$( `DOMMatrix$I )
◎
↓</li>
	<li>
`行列を~2D辞書で初期化する$( %行列, %transform )
◎
Let matrix be the result of creating a DOMMatrix from the 2D dictionary transform.
</li>
	<li>
~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.
</li>
	<li>
コレの`変形n行列$paT 【！現在の変形n行列】 ~SET %行列
◎
Reset the pattern's transformation matrix to matrix.
</li>
</ol>
</div>

<div class="algo">
<p>
ある区画の中に~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:
</p>

<ol>
	<li>
%~bitmap ~LET 無限に広い, `透明な黒$にされた，新たな~bitmap
◎
Create an infinite transparent black bitmap.
</li>
	<li>
%画像 ~LET %~pattern の`画像$paT
◎
↓</li>
	<li>
<p>
次に従って，
%~bitmap に %画像 の複製を配置する
— 以下では、［
%画像 の~sizeにおける 1 `px$css は %~bitmap の 1 座標~空間~単位を成す
］と解釈する：
◎
↓</p>
		<ol>
			<li>
まず、
 %画像 の左上~隅が
%~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,＼
</li>
			<li>
%~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".
</li>
		</ol>

<p>
%画像 の元の~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.＼
</p>
		<ul>
			<li>
<p>
%画像 を拡大するときは、
~UAは，
`imageSmoothingEnabled$2d 属性の値に応じて：
</p>
				<ul class="switch">
					<li>
~F ならば、
最近傍~補間を利用して描画するモノトスル。
</li>
					<li>
~T ならば、
数ある~filter法のうち，どの~algoを利用してもヨイ
（例えば、双線型~補間や最近傍~補間）。
</li>
				</ul>
◎
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).＼
</li>
			<li>
複数の~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.＼
</li>
			<li>
そのような~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.)
</li>
		</ul>
	</li>
	<li>
%~bitmap を %~pattern の`変形n行列$paTで変形する
◎
Transform the resulting bitmap according to the pattern's transformation matrix.
</li>
	<li>
%~bitmap を【！＊】`変形n行列$で変形する
◎
Transform the resulting bitmap again, this time according to the current transformation matrix.
</li>
	<li>
%画像 の一部を成していて，［
%~pattern が描画されることになる区画の外側
］にあるものは、
`透明な黒$に置換する
【これは何を意味する？】
◎
Replace any part of the image outside the area in which the pattern is to be rendered with transparent black.
</li>
	<li>
~RET %~bitmap
（これが、同じ原点, 同じ縮尺で描画されるものになる。）
◎
The resulting bitmap is what is to be rendered, with the same origin and same scale.
</li>
</ol>
</div>

<hr>

<p>
［
放射型~gradient／繰返される~pattern
］が利用されるとき、
変形n行列が不可逆である場合の結果の~styleは，`透明な黒$になるモノトスル
（さもなければ、［
~gradient／~pattern
］は点または線に縮退して，他の画素は未定義になるので）。
［
線型~gradient／ベタ色
］は、
変形n行列が不可逆な場合でも，常に すべての点を定義する。
◎
If a radial gradient or repeated pattern is used when the transformation matrix is singular, then the resulting style must be transparent black (otherwise the gradient or pattern would be collapsed to a point or line, leaving the other pixels undefined). Linear gradients and solid colors always define all points even with singular transformation matrices.
</p>

					</section>
					<section id="drawing-rectangles-to-the-bitmap">
<h6 title="Drawing rectangles to the bitmap">4.12.5.1.11. ~bitmapに対する矩形の描法</h6>

<p>
`CanvasRect$I を実装する各~objは、
~bitmapに矩形を即時に描くための各種~methodを供する。
どの~methodも、［
矩形の左上の座標を与える 2 個の引数 %x, %y,
矩形の横幅, 縦幅を与える 2 個の引数 %w, %h
］を この順にとる。
◎
Objects that implement the CanvasRect interface provide the following methods for immediately drawing rectangles to the bitmap. The methods each take four arguments; the first two give the x and y coordinates of the top left of the rectangle, and the second two give the width w and height h of the rectangle, respectively.
</p>

<p>
`変形n行列$は、次に挙げる［
矩形の~pathを形成する， 4 個の座標
］に適用するモノトスル
— 加えて，この矩形は閉じるモノトスル
⇒＃
( %x, %y ),
( %x ~PLUS %w, %y ),
(%x ~PLUS %w, %y ~PLUS %h ),
( %x, %y ~PLUS %h )
◎
The current transformation matrix must be applied to the following four coordinates, which form the path that must then be closed to get the specified rectangle: (x, y), (x+w, y), (x+w, y+h), (x, y+h).
</p>

<p>
図形は、
`現在の既定の~path$に影響することなく塗られる
— それは、
`切抜き領域$の~subjectになることに加え，
`clearRect()$2d は例外として［
`影~効果$ ／ `大域~alpha$2D ／ `現在の組成~混色~演算子$2D
］の~subjectにもなる。
◎
Shapes are painted without affecting the current default path, and are subject to the clipping region, and, with the exception of clearRect(), also shadow effects, global alpha, and the current compositing and blending operator.
</p>

<dl class="domintro">
	<dt>%context.`clearRect(x, y, w, h)$2d</dt>
	<dd>
~bitmap上の所与の矩形~内にある全~画素を`透明な黒$にする。
◎
Clears all pixels on the bitmap in the given rectangle to transparent black.
</dd>

	<dt>%context.`fillRect(x, y, w, h)$2d</dt>
	<dd>
現在の~fill~styleを利用して，~bitmap上に所与の矩形を塗る。
◎
Paints the given rectangle onto the bitmap, using the current fill style.
</dd>

	<dt>%context.`strokeRect(x, y, w, h)$2d</dt>
	<dd>
現在の~stroke~styleを利用して，~bitmap上に所与の矩形の外形線を成す~boxを塗る。
◎
Paints the box that outlines the given rectangle onto the bitmap, using the current stroke style.
</dd>
</dl>

<div class="algo">
<p>
`clearRect(x, y, w, h)@2d
~method手続きは：
◎
The clearRect(x, y, w, h) method, when invoked, must run these steps:
</p>
<ol>
	<li>
~IF［
いずれかの引数は`有限$でない
］
⇒
~RET
◎
If any of the arguments are infinite or NaN, then return.
</li>
	<li>
［
引数に指定された矩形と 現在の`切抜き領域$との交差域
］内にある全~画素を`透明な黒$にする
◎
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.
</li>
</ol>

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

<div class="algo">
<p>
`fillRect(x, y, w, h)@2d
~method手続きは：
◎
The fillRect(x, y, w, h) method, when invoked, must run these steps:
</p>
<ol>
	<li>
~IF［
いずれかの引数は`有限$でない
］
⇒
~RET
◎
If any of the arguments are infinite or NaN, then return.
</li>
	<li>
~IF［
%w ~EQ 0
］~OR［
%h ~EQ 0
］
⇒
~RET
◎
If either w or h are zero, then return.
</li>
	<li>
コレの`~fill~style$2Dを利用して，指定された矩形な区画を塗る
◎
Paint the specified rectangular area using this's fill style.
</li>
</ol>
</div>

<div class="algo">
<p>
`strokeRect(x, y, w, h)@2d
~method手続きは：
◎
The strokeRect(x, y, w, h) method, when invoked, must run these steps:
</p>
<ol>
	<li>
~IF［
いずれかの引数は`有限$でない
］
⇒
~RET
◎
If any of the arguments are infinite or NaN, then return.
</li>
	<li>
~IF［
%w ~EQ 0
］~AND［
%h ~EQ 0
］
⇒
~RET
<!-- 
1 個の点
( %x, %y )
のみからなる 1 本の下位pathのみからなる
— これは線を含まないので、
この~methodの効果はない（ナゾった結果は，空~pathになる）。
-->
◎
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).
◎
↓↓</li>
	<li>
%~path ~LET 新たな空~path
◎
↓</li>
	<li>
~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.
</li>
	<li>
~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.
</li>
	<li>
%~path ~SET `~pathをナゾる$( %~path, コレ＜`CanvasPathDrawingStyles$I＞ )
◎
↑</li>
	<li>
%~path をコレ＜`CanvasFillStrokeStyles$I＞の`~stroke~style$2Dで~fillする
◎
↑</li>
</ol>
</div>

					</section>
					<section id="drawing-text-to-the-bitmap">
<h6 title="Drawing text to the bitmap">4.12.5.1.12. ~bitmapへの~textの描法</h6>

<dl id="text-0" class="domintro">

	<dt>%context.`fillText(text, x, y [, maxWidth ])$2d</dt>
	<dt>%context.`strokeText(text, x, y [, maxWidth ])$2d</dt>
	<dd>
順に，所与の~textを所与の位置に［
~fillする, ~strokeする
］。
%maxWidth が供された場合、
必要yなら，~textは その横幅に収まるよう拡縮される。
◎
Fills or strokes (respectively) the given text at the given position. If a maximum width is provided, the text will be scaled to fit that width if necessary.
</dd>

	<dt>%metrics = %context.`measureText(text)$2d</dt>
	<dd>
現在の~fontで与えられる~textの計量を伴う `TextMetrics$I ~objを返す。
◎
Returns a TextMetrics object with the metrics of the given text in the current font.
</dd>

	<dt>%metrics.`width$tM</dt>
	<dt>%metrics.`actualBoundingBoxLeft$tM</dt>
	<dt>%metrics.`actualBoundingBoxRight$tM</dt>
	<dt>%metrics.`fontBoundingBoxAscent$tM</dt>
	<dt>%metrics.`fontBoundingBoxDescent$tM</dt>
	<dt>%metrics.`actualBoundingBoxAscent$tM</dt>
	<dt>%metrics.`actualBoundingBoxDescent$tM</dt>
	<dt>%metrics.`emHeightAscent$tM</dt>
	<dt>%metrics.`emHeightDescent$tM</dt>
	<dt>%metrics.`hangingBaseline$tM</dt>
	<dt>%metrics.`alphabeticBaseline$tM</dt>
	<dt>%metrics.`ideographicBaseline$tM</dt>
	<dd>
下に述べる測定結果を返す。
◎
Returns the measurement described below.
</dd>
</dl>

<p>
`CanvasText$I を実装する~objは、
~textを描画するための各種~methodを供する。
◎
Objects that implement the CanvasText interface provide the following methods for rendering text.
</p>

<div class="algo">
<p>
［
`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.＼
</p>

<p>
これらの~method手続きは：
◎
Specifically, when the methods are invoked, the user agent must run these steps:
</p>
<ol>
	<li>
~IF［
いずれかの引数は`有限$でない
］
⇒
~RET
◎
If any of the arguments are infinite or NaN, then return.
</li>
	<li>
%最大-横幅 ~LET ［
%maxWidth ~NEQ ε ならば %maxWidth ／
~ELSE_ `無限大^i
］
◎
↓</li>
	<li>
%~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.
</li>
	<li>
<p>
%~glyph列 を成す すべての~glyphの図形を塗る
— その際の各~図形に対しては：
◎
↓</p>
		<ul>
			<li>
その~size 1 `px$css は、
座標~空間における 1 単位を成すとする
◎
↓</li>
			<li>
( %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.
</li>
			<li>
`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.＼
</li>
			<li>
`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.
</li>
			<li>
現在の~pathには影響しない
◎
These shapes are painted without affecting the current path, and＼
</li>
			<li>
［
`影~効果$ ／ `大域~alpha$2D ／ `切抜き領域$ ／ `現在の組成~混色~演算子$2D
］の~subjectになる
◎
are subject to shadow effects, global alpha, the clipping region, and the current compositing and blending operator.
</li>
		</ul>
	</li>
</ol>
</div>

<div class="algo">
<p>
◎追跡路
`measureText(text)@2d
~method手続きは：
◎
(This is a tracking vector.)
The measureText(text) method steps are to＼
</p>
<ol>
	<li>
%行内~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＼
</li>
	<li>
~RET `新たな~obj$( `TextMetrics$I )
⇒
その各~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]
</li>
</ol>

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

<dl class="def-list">
	<dt>`width@tM</dt>
	<dd>
%行内~box の横幅（ %text の送幅）を測定した距離を返す。
◎
The width of that inline box, in CSS pixels. (The text's advance width.)
</dd>

	<dt>`actualBoundingBoxLeft@tM</dt>
	<dd>
基底線に平行な，［
`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.
</dd>
	<dd class="note">注記：
この値と `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.
</dd>

	<dt>`actualBoundingBoxRight@tM</dt>
	<dd>
基底線に平行な，［
`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.
</dd>

	<dt>`fontBoundingBoxAscent@tM</dt>
	<dd>
［
`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.
</dd>
	<dd class="note">注記：
この値と その次の値は、［
描画される正確な~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.
</dd>

	<dt>`fontBoundingBoxDescent@tM</dt>
	<dd>
［
`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.
</dd>

	<dt>`actualBoundingBoxAscent@tM</dt>
	<dd>
［
`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.
</dd>
	<dd class="note">注記：
この数は、
入力~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.
</dd>

	<dt>`actualBoundingBoxDescent@tM</dt>
	<dd>
［
`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.
</dd>

	<dt>`emHeightAscent@tM</dt>
	<dd>
［
`textBaseline$2d 属性により指示される水平線
］から［
`行内~box$内の `em-over$bL 基底線
］までの距離を返す
— 正な数は、
所与の基底線は `em-over$bL 基底線より下にあることを指示する
（なので、この値は通例的に正になる）。
所与の基底線が［
`em-over$bL 基底線ならば 0 ／
`em-over$bL 基底線と `em-under$bL 基底線の中点にあるならば，~font~sizeの半分
］になる。
◎
The distance from the horizontal line indicated by the textBaseline attribute to the em-over baseline in the inline box, in CSS pixels; positive numbers indicating that the given baseline is below the em-over baseline (so this value will usually be positive). Zero if the given baseline is the em-over baseline; half the font size if the given baseline is halfway between the em-over baseline and the em-under baseline.
</dd>

	<dt>`emHeightDescent@tM</dt>
	<dd>
［
`textBaseline$2d 属性により指示される水平線
］から `em-under$bL 基底線までの距離を返す
— 正な数は、
所与の基底線は `em-under$bL 基底線より上にあることを指示する
（所与の基底線が `em-under$bL 基底線ならば， 0 になる）。
◎
The distance from the horizontal line indicated by the textBaseline attribute to the em-under baseline in the inline box, in CSS pixels; positive numbers indicating that the given baseline is above the em-under baseline. (Zero if the given baseline is the em-under baseline.)
</dd>

	<dt>`hangingBaseline@tM</dt>
	<dd>
［
`textBaseline$2d 属性により指示される水平線
］から［
`行内~box$の `hanging$bL 基底線
］までの距離を返す
— 正な数は、
所与の基底線は `hanging$bL 基底線より下にあることを指示する。
（所与の基底線が `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.)
</dd>

	<dt>`alphabeticBaseline@tM</dt>
	<dd>
`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.)
</dd>

	<dt>`ideographicBaseline@tM</dt>
	<dd>
`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.)
</dd>
</dl>

<p class="note">注記：
`fillText()$2d ／ `strokeText()$2d
を利用して描画された~glyphたちは、
~font~sizeにより与えられる~boxや, 
`measureText()$2d （ ~text横幅 ）から返される横幅をはみ出し得る。
作者には、
これが課題になる場合には，上に述べた限界~box値を利用することが奨励される。
◎
Glyphs rendered using fillText() and strokeText() can spill out of the box given by the font 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.
</p>

<p class="note">注記：
~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.
</p>
</div>

					</section>
					<section id="drawing-paths-to-the-canvas">
<h6 title="Drawing paths to the canvas">4.12.5.1.13. ~canvasへの~pathの描法</h6>

<p>
`CanvasDrawPath$I を実装する~objは、
`現在の既定の~path@
を有する。
それは、
~objごとに 1 個だけある`~path$であり，
`描法~状態$の一部を成さない。
◎
Objects that implement the CanvasDrawPath interface have a current default path. There is only one current default path, it is not part of the drawing state. The current default path is a path, as described above.
</p>

<dl class="domintro">
	<dt>%context.`beginPath()$2d</dt>
	<dd>
`現在の既定の~path$を設定し直す。
◎
Resets the current default path.
</dd>

	<dt>%context.`fill( [ fillRule ])$2d</dt>
	<dt>%context.`fill(path [, fillRule ])$2d1</dt>
	<dd>
`意図された~path$【！`現在の既定の~path$】の下位pathたちを現在の~fill~styleで，所与の~fill規則を順守する下で~fillする。
◎
Fills the subpaths of the current default path or the given path with the current fill style, obeying the given fill rule.
</dd>

	<dt>%context.`stroke()$2d</dt>
	<dt>%context.`stroke(path)$2d1</dt>
	<dd>
`意図された~path$【！`現在の既定の~path$】の下位pathたちを現在の~stroke~styleで~strokeする。
◎
Strokes the subpaths of the current default path or the given path with the current stroke style.
</dd>

	<dt>%context.`clip( [ fillRule ])$2d</dt>
	<dt>%context.`clip(path [, fillRule ])$2d1</dt>
	<dd>
現在の切抜き領域を`意図された~path$【！`現在の既定の~path$】で更に拘束する。
所与の~fill規則は、
どの点が~path内にあるかを決定する。
◎
Further constrains the clipping region to the current default path or the given path, using the given fill rule to determine what points are in the path.
</dd>

	<dt>%context.`isPointInPath(x, y [, fillRule ])$2d</dt>
	<dt>%context.`isPointInPath(path, x, y [, fillRule ])$2d1</dt>
	<dd>
所与の点は、［
所与の~fill規則を利用する下で`意図された~path$【！`現在の既定の~path$】内に入る
］ならば ~T を返す。
◎
Returns true if the given point is in the current default path or the given path, using the given fill rule to determine what points are in the path.
</dd>

	<dt>%context.`isPointInStroke(x, y)$2d</dt>
	<dt>%context.`isPointInStroke(path, x, y)$2d1</dt>
	<dd>
所与の点は、［
現在の~stroke~styleの下で`意図された~path$【！`現在の既定の~path$】の~strokeで覆われる領域に入る
］ならば ~T を返す。
◎
Returns true if the given point would be in the region covered by the stroke of the current default path or the given path, given the current stroke style.
</dd>
</dl>

<div class="algo">
`beginPath()@2d
~method手続きは
⇒
コレの`現在の既定の~path$を成す下位path~listを空にする
◎
The beginPath() method steps are to empty the list of subpaths in this's current default path so that it once again has zero subpaths.
</div>

<p>
以下の~method定義では、
所与の［ `Path2D$I ／ ~NULL ］をとる引数 %path 用に用語
`意図された~path@
を利用する
— それは、
%path に応じて，次を意味する：
◎
Where the following method definitions use the term intended path for a Path2D-or-null path, it means path itself if it is a Path2D object, or the current default path otherwise.
</p>
<ul class="switch">
	<li>
`Path2D$I ~obj
⇒
%path をコレ＜`CanvasTransform$I＞の`変形n行列$に則って変形した結果
（ %path 自身には影響することなく）
◎
When the intended path is a Path2D object, the coordinates and lines of its subpaths must be transformed according to the current transformation matrix on the object implementing the CanvasTransform interface when used by these methods (without affecting the Path2D object itself).＼
</li>
	<li>
~NULL
⇒
コレ＜`CanvasDrawPath$I＞の`現在の既定の~path$
（コレの構築-時には，すでに当の変形nが影響しており、
さらに変形nを適用する必要はないので）
◎
When the intended path is the current default path, it is not affected by the transform. (This is because transformations already affect the current default path when it is constructed, so applying it when it is painted as well would result in a double transformation.)
</li>
</ul>

<div class="algo">
<p>
`fill(fillRule)@2d
~method手続きは
⇒
`~fill手続き$( コレ, ~NULL, %fillRule )
◎
The fill(fillRule) method steps are to run the fill steps given this, null, and fillRule.
</div>

<div class="algo">
<p>
`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.
</div>

<div class="algo">
<p>
`~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).
</p>
</div>

<div class="algo">
`stroke()@2d
~method手続きは
⇒
`~stroke手続き$( コレ, ~NULL )
◎
The stroke() method steps are to run the stroke steps given this and null.
</div>

<div class="algo">
`stroke(path)@2d1
~method手続きは
⇒
`~stroke手続き$( コレ, %path )
◎
The stroke(path) method steps are to run the stroke steps given this and path.
</div>

<div class="algo">
<p>
`~stroke手続き@
は、
所与の
( `CanvasDrawPath$I %文脈, ［ `Path2D$I ／ ~NULL ］ %path )
に対し：
</p>
<ol>
	<li>
%~path図形 ~LET `~pathをナゾる$( %path に`意図された~path$, %文脈＜`CanvasPathDrawingStyles$I＞ )
</li>
	<li>
［
%文脈＜`CanvasFillStrokeStyles$I＞ の`~fill~style$2D,
`nonzero$l 巻数~規則
］を利用して，
%~path図形 を~fillする
</li>
</ol>
◎
The stroke steps, given a CanvasDrawPath context and a Path2D-or-null path, are to trace the intended path for path, using context's line styles as set by its CanvasPathDrawingStyles mixin, and then fill the resulting path using context's stroke style, using the nonzero winding rule.
</div>

<p class="note">注記：
`~pathをナゾる$~algoの定義により、［
1 回の~stroke演算において重合している~pathを成す各部
］は，それらの合併域が塗られるかのように扱われる。
◎
As a result of how the algorithm to trace a path is defined, overlapping parts of the paths in one stroke operation are treated as if their union was what was painted.
</p>

<p class="note">注記：
塗ngの間は、
`現在の既定の~path$が利用される場合でも，
~stroke`~style^emは変形nにより影響される。
◎
The stroke style is affected by the transformation during painting, even if the current default path is used.
</p>

<div>
<p>
~pathが［
~fillされる／~strokeされる
］ときは、
次に従うモノトスル：
</p>
<ul>
	<li>
`現在の既定の~path$にも,
`Path2D$I ~obj【 %path 引数】にも影響しない。
</li>
	<li>
［
`影~効果$ ／ `大域~alpha$2D ／ `切抜き領域$ ／ `現在の組成~混色~演算子$2D
］の~subjectになる。
</li>
</ul>
<p>
（変形nの効果は、
上に述べた，どの~pathが利用されているかに基づいて変わる。）
</p>
◎
Paths, when filled or stroked, must be painted without affecting the current default path or any Path2D objects, and must be subject to shadow effects, global alpha, the clipping region, and the current compositing and blending operator. (The effect of transformations is described above and varies based on which path is being used.)
</div>

<div class="algo">
`clip(fillRule)@2d
~method手続きは
⇒
`~clip手続き$( コレ, ~NULL, %fillRule )
◎
The clip(fillRule) method steps are to run the clip steps given this, null, and fillRule.
</div>

<div class="algo">
`clip(path, fillRule)@2d1
~method手続きは
⇒
`~clip手続き$( コレ, %path, %fillRule )
◎
The clip(path, fillRule) method steps are to run the clip steps given this, path, and fillRule.
</div>

<div class="algo">
<p>
`~clip手続き@
は、
所与の
( `CanvasDrawPath$I %文脈, ［ `Path2D$I ／ ~NULL ］ %path, %fillRule )
に対し
⇒
現在の
`切抜き領域@
を［
次に与える新たな`切抜き領域$
］に置換する
⇒
%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.
</p>

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

<div class="algo">
`isPointInPath(x, y, fillRule)@2d
~method手続きは
⇒
~RET `点は~path内か？手続き$( コレ, ~NULL, %x, %y, %fillRule )
◎
The isPointInPath(x, y, fillRule) method steps are to return the result of the is point in path steps given this, null, x, y, and fillRule.
</div>

<div class="algo">
`isPointInPath(path, x, y, fillRule)@2d1
~method手続きは
⇒
~RET `点は~path内か？手続き$( コレ, %path, %x, %y, %fillRule )
◎
The isPointInPath(path, x, y, fillRule) method steps are to return the result of the is point in path steps given this, path, x, y, and fillRule.
</div>

<div class="algo">
<p>
`点は~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:
</p>
<ol>
	<li>
~IF［
%x, %y いずれかは`有限$でない
］
⇒
~RET ~F
◎
If x or y are infinite or NaN, then return false.
</li>
	<li>
<p>
~RET ~IS［
点 ( %x, %y ) は %path に`意図された~path$の内側にある
］
</p>

<p>
内側にあるかどうかは、
次に従って決定する：
</p>
		<ul>
			<li>
点は、
現在の変形nに影響されない，~canvas座標~空間~内の座標として扱う
</li>
			<li>
%fillRule に指示された`~fill規則$に従う
</li>
			<li>
区画の内側を与える~pathの算出-時には、
開な下位pathは，実際~下位pathに影響することなく暗黙的に閉じる。
</li>
			<li>
~path上の点は内側にあると見なす
</li>
		</ul>
◎
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.
</li>
</ol>
</div>

<div class="algo">
`isPointInStroke(x, y)@2d
~method手続きは
⇒
~RET `点は~stroke内か？手続き$( コレ, ~NULL, %x, %y )
◎
The isPointInStroke(x, y) method steps are to return the result of the is point in stroke steps given this, null, x, and y.
</div>

<div class="algo">
`isPointInStroke(path, x, y)@2d1
~method手続きは
⇒
~RET `点は~stroke内か？手続き$( コレ, %path, %x, %y )
◎
The isPointInStroke(path, x, y) method steps are to return the result of the is point in stroke steps given this, path, x, and y.
</div>

<div class="algo">
<p>
`点は~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:
</p>
<ol>
	<li>
~IF［
%x, %y いずれかは`有限$でない
］
⇒
~RET ~F
◎
If x or y are infinite or NaN, then return false.
</li>
	<li>
%~path図形 ~LET `~pathをナゾる$( %path に`意図された~path$, %文脈＜`CanvasPathDrawingStyles$I＞ )
</li>
	<li>
<p>
~RET ~IS［
点 ( %x, %y ) は %~path図形 の内側にある
］
</p>

<p>
内側にあるかどうかは、
次に従って決定する：
</p>
		<ul>
			<li>
`nonzero$l 巻数~規則を利用する
</li>
			<li>
点は、
現在の変形nに影響されない，~canvas座標~空間~内の座標として扱う
</li>
			<li>
~path上の点は内側にあると見なす
</li>
		</ul>
◎
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.
</li>
</ol>
</div>

<hr>

<div id="drawCustomFocusRingExample" class="example">
<p>
次の例の `canvas$e 要素には…
【この例は未訳／省略する。】
◎
This canvas element has a couple of checkboxes. The path-related commands are highlighted:
</p>
</div>

					</section>
					<section id="drawing-focus-rings-and-scrolling-paths-into-view">
<h6 title="Drawing focus rings">4.12.5.1.14. ~focus環の描法</h6>

<p class="trans-note">【
~focus環（ `focus ring^en ）
— ~focusされた区画を囲うように描かれる線
（矩形とは限らない）。
】</p>

<dl class="domintro">
	<dt>%context.`drawFocusIfNeeded(element)$2d</dt>
	<dd>
%element は`~focusされて$いる場合、
~focus環~用の~platform規約に従って，
`現在の既定の~path$の周りに~focus環を描く。
◎
If element is focused, draws a focus ring around the current default path, following the platform conventions for focus rings.
</dd>

	<dt>%context.`drawFocusIfNeeded(path, element)$2d1</dt>
	<dd>
%element は`~focusされて$いる場合、
~focus環~用の~platform規約に従って，
%path の周りに~focus環を描く。
◎
If element is focused, draws a focus ring around path, following the platform conventions for focus rings.
</dd>
</dl>

<p>
`CanvasUserInterface$I を実装する~objは、
~focus環の描法を制御するための~methodを供する。
◎
Objects that implement the CanvasUserInterface interface provide the following methods to draw focus rings.
</p>

<hr>

<div class="algo">
`drawFocusIfNeeded(element)@2d
~method手続きは
⇒
`必要なら~focusを描く$( コレ, %element, コレの`現在の既定の~path$ )
◎
The drawFocusIfNeeded(element) method steps are to draw focus if needed given this, element, and this's current default path.
</div>

<div class="algo">
`drawFocusIfNeeded(path, element)@2d1
~method手続きは
⇒
`必要なら~focusを描く$( コレ, %element, %path )
◎
The drawFocusIfNeeded(path, element) method steps are to draw focus if needed given this, element, and path.
</div>

<div class="algo">
<p>
`必要なら~focusを描く@
~algoは、
所与の
( `CanvasUserInterface$I を実装している~obj %文脈, 要素 %要素, `~path$ %~path )
に対し：
◎
To draw focus if needed, given an object implementing CanvasUserInterface context, an element element, and a path path:
</p>
<ol>
	<li>
~IF［
%要素 は`~focusされて$いない
］~OR［
%要素 は %文脈＜`~2D描画~文脈$＞ を束縛している `canvas$e 要素の子孫でない
］
⇒
~RET
◎
If element is not focused or is not a descendant of context's canvas element, then return.
</li>
	<li>
<p>
~platform規約に従って、
~focus環を適切な~styleで %~path に沿うように描く
◎
Draw a focus ring of the appropriate style along path, following platform conventions.

 the intended path, 
</p>

<p class="note">注記：
一部の~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).
</p>

<p>
~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.)
</p>
	</li>
	<li>
`~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.
</li>
</ol>

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

<p class="note">注記：
しかしながら、
これは無為な要件かもしれない。
例えば，当の~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.
</p>
</div>

<p>
この節に利用される
“`利用者に伝える@”
は、
何らかの持続的な状態~変化を含意するものではない。
それは、
一例として，
拡大用~toolなどの支援技術に［
利用者の拡大鏡を~canvasの所与の区画に移動する
］よう通知するために［
~system~accessibility~APIを~callすること
］などを意味する。
それは、［
当の~pathを要素に結付ける／
~feedback用に触れれる領域を供する
］等を行うものではない。
◎
"Inform the user", as used in this section, does not imply any persistent state change. It could mean, for instance, calling a system accessibility API to notify assistive technologies such as magnification tools so that the user's magnifier moves to the given area of the canvas. However, it does not associate the path with the element, or provide a region for tactile feedback, etc.
</p>

					</section>
					<section id="drawing-images">
<h6 title="Drawing images">4.12.5.1.15. 画像の描法（ `drawing^en ）</h6>

<p>
`CanvasDrawImage$I を実装する~objには、
画像を描くための `drawImage()$2d がある。
◎
Objects that implement the CanvasDrawImage interface have the drawImage method to draw images.
◎
This method can be invoked with three different sets of arguments:
◎
drawImage(image, dx, dy)
◎
drawImage(image, dx, dy, dw, dh)
◎
drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) 
</p>

<dl class="domintro">
	<dt>%context.`drawImage(image, dx, dy)$2d</dt>
	<dt>%context.`drawImage(image, dx, dy, dw, dh)$2d</dt>
	<dt>%context.`drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)$2d</dt>
	<dd>
<p>
所与の画像を~canvas上に描く。
引数は、
次に従って解釈される：
◎
Draws the given image onto the canvas. The arguments are interpreted as follows:
</p>

<figure>
<p class="alt" hidden id="_dgm-drawImage">
［
%sx ／ %sy ／ %sw ／ %sh
］引数は、
~source矩形の［
~x座標／~y座標／横幅／縦幅
］を与える。
［
%dx ／ %dy ／ %dw ／ %dh
］引数は、
行先~矩形の［
~x座標／~y座標／横幅／縦幅
］を与える。
◎
The sx and sy parameters give the x and y coordinates of the source rectangle; the sw and sh arguments give the width and height of the source rectangle; the dx and dy give the x and y coordinates of the destination rectangle; and the dw and dh arguments give the width and height of the destination rectangle.
</p>
</figure>

	</dd>
	<dd>
画像は まだ全部的に復号されていない場合、
何も描かれない。
画像は~dataを伴わない~canvasである場合、
`InvalidStateError$E 例外が投出される。
◎
If the image isn't yet fully decoded, then nothing is drawn. If the image is a canvas with no data, throws an "InvalidStateError" DOMException.
</dd>
</dl>

<div class="algo">
<div class="p">
<p>
`drawImage()@2d
~methodは、
次の 3 通りの引数~群で呼出せる：
</p>

<ul ><li>(A) `drawImage(image, dx, dy)^m
</li><li>(B) `drawImage(image, dx, dy, dw, dh)^m
</li><li>(C) `drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)^m
</li></ul>

<p>
その~method手続きは：
</p>
◎
When the drawImage() method is invoked, the user agent must run these steps:
</div>
<ol>
	<li>
~IF［
%image 以外の引数に`有限$でないものがある
］
⇒
~RET
◎
If any of the arguments are infinite or NaN, then return.
</li>
	<li>
~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).
</li>
	<li>
%出力~bitmap ~LET コレ＜`~2D描画~文脈$＞の［
`出力~bitmap$2D／`出力~bitmap$iBM
］
【！https://github.com/whatwg/html/issues/3364】
◎
↓↓</li>
	<li>
%画像 ~LET %image の~source画像
◎
↓↓</li>
	<li>
<p>
（この段は、与えられなかった引数を拡充する）
— この段においては、［
%画像 の~sizeにおける 1 `px$css は %出力~bitmap の 1 画素の~sizeを成す
］ものと解釈する：
</p>
		<ol>
			<li>
<p>
~IF［
(A) ／ (B) による引数で呼出されている
］：
</p>
				<ol>
					<li>
( %sx, %sy, %sw, %sh ) ~LET ( 0, 0, 0, 0 )
</li>
					<li>
~IF［
%画像 には`生来な寸法$は在る
］
⇒
( %sw, %sh ) ~SET ( %画像 の`生来な横幅$, %画像 の`生来な縦幅$ )
</li>
					<li>
~ELSE
⇒
( %sw, %sh ) ~SET 次を与える下で，`既定の~sizing~algo$【！具象-~obj~size解決】 `CSSIMAGES$r を利用して決定される`具象-~obj~size$
⇒＃
`指定d~size$は横幅, 縦幅とも拘束なし,
~objの`生来な~size$【！~prop】 ~SET %image 引数のそれ,
`既定の~obj~size$ ~SET %出力~bitmap の~size
</li>
					</ol>
				</li>
				<li>
~IF［
%sw ~EQ 0
］~OR［
%sh ~EQ 0
］
⇒
~RET
（何も塗られない。）
</li>
			<li>
~IF［
(A) による引数で呼出されている
］
⇒
( %dw, %dh ) ~LET ( %sw, %sh )
</li>
		</ol>

◎
↓↓
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]
</li>
	<li>
%~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).
</li>
	<li>
%行先~矩形 ~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).
</li>
	<li>
<p>
~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.
</p>

<p class="note">注記：
%行先~矩形 が %出力~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.
</p>
	</li>
	<li>
<p>
以下に従って，［
%画像 内の %~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.
</p>
		<ul>
			<li>
所与の寸法が負な場合でも、
画像~dataは 元の方向で処理すること。
◎
The image data must be processed in the original direction, even if the dimensions given are negative.
</li>
			<li>
<p>
拡大-時には、
`imageSmoothingEnabled$2d 属性に応じて：
</p>
				<dl class="switch">
					<dt>~T</dt>
					<dd>
%画像 を成す~dataに，滑化する~algoを適用しようと試みるべきである。
~algoとして複数の~filter法を~supportする~UAは、
`imageSmoothingQuality$2d 属性の値を目安に~filter法を選んでもヨイ。
</dd>
					<dd class="note">注記：
この仕様は、
この場合に画像の拡縮-時に利用する精確な~algoは定義しない。
</dd>

					<dt>~F</dt>
					<dd>
最近傍~補間を利用して，画像を描画する
</dd>
				</dl>

◎
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.
</li>
			<li>

<p class="note">注記：
`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.
</p>
			</li>
			<li>
<p>
元の画像~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.
</p>

<p class="note">注記：
したがって，部分, 全体どちらを成す画像に対しても、
拡縮-時の効果は同じになる。
これは、［
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.
</p>
			</li>
			<li>
画像は、
現在の~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.
</li>
		</ul>
	</li>
	<li>
~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.
</li>
</ol>
</div>

					</section>
					<section id="pixel-manipulation">
<h6 title="Pixel manipulation">4.12.5.1.16. 画素~操作</h6>

<dl class="domintro">
	<dt>%imageData = `new ImageData(sw, sh [, settings ])$iD</dt>
	<dd>
所与の［
寸法（ %sw, %sh ）, %settings により指示される色~空間
］を伴う `ImageData$I ~objを返す。
◎
Returns an ImageData object with the given dimensions and the color space indicated by settings.＼
</dd>
	<dd>
返される~objの~bitmapを成す全~画素は、
`透明な黒$にされる。
◎
All the pixels in the returned object are transparent black.
</dd>
	<dd>
%sw, %sh どちらかが 0 の場合、
`IndexSizeError$E 例外が投出される。
◎
Throws an "IndexSizeError" DOMException if either of the width or height arguments are zero.
</dd>

	<dt>%imageData = `new ImageData(data, sw [, sh [, settings ] ])$iD1</dt>
	<dd>
供された `ImageDataArray$I 引数 %data を所与の［
寸法（ %sw, %sh ）, %settings により指示される色~空間
］を利用して解釈した結果を利用して，
`ImageData$I ~objを返す。
◎
Returns an ImageData object using the data provided in the ImageDataArray argument, interpreted using the given dimensions and the color space indicated by settings.
</dd>
	<dd>
%data の~byte長さは、
( ( 1 画素あたりの~byte数 ) ~MUL ( %sw ) )
の整数倍になる必要があり，
%sh も供された場合には正確に
( ( 1 画素あたりの~byte数 ) ~MUL %sw ~MUL %sh )
になる必要がある。
◎
The byte length of the data needs to be a multiple of the number of bytes per pixel times the given width. If the height is provided as well, then the length needs to be exactly the number of bytes per pixel times the width times the height.
</dd>
	<dd>
［
所与の~dataと寸法が整合するように解釈できない場合／
%sw, %sh どちらかが 0 の場合
］、
`IndexSizeError$E 例外が投出される。
◎
Throws an "IndexSizeError" DOMException if the given data and dimensions can't be interpreted consistently, or if either dimension is zero.
</dd>

	<dt>%imageData = %context.`createImageData(imageData)$2d1</dt>
	<dd>
引数と同じ［
寸法, 色~空間
］を伴う `ImageData$I ~objを返す。
返される~obj内の全~画素は、
`透明な黒$にされる。
◎
Returns an ImageData object with the same dimensions and color space as the argument. All the pixels in the returned object are transparent black.
</dd>

	<dt>%imageData = %context.`createImageData(sw, sh [, settings])$2d</dt>
	<dd>
所与の寸法を伴う `ImageData$I ~objを返す。
返される~objの`色~空間$2Dは、
%settings により上書きされない限り，
%context の`色~空間$2Dになる。
返される~obj内の全~画素は、
`透明な黒$になる。
◎
Returns an ImageData object with the given dimensions. The color space of the returned object is the color space of context unless overridden by settings. All the pixels in the returned object are transparent black.
</dd>
	<dd>
%sw, %sh どちらかが 0 の場合、
`IndexSizeError$E 例外が投出される。
◎
Throws an "IndexSizeError" DOMException if either of the width or height arguments are zero.
</dd>

	<dt>%imageData = %context.`getImageData(sx, sy, sw, sh [, settings])$2d</dt>
	<dd>
~bitmapを成す［
所与の矩形が占める部分
］用の画像~dataを包含している `ImageData$I ~objを返す。
返される~objの`色~空間$2Dは、
%settings により上書きされない限り，
%context の`色~空間$2Dになる。
◎
Returns an ImageData object containing the image data for the given rectangle of the bitmap. The color space of the returned object is the color space of context unless overridden by settings.
</dd>
	<dd>
%sw, %sh どちらかが 0 の場合、
`IndexSizeError$E 例外が投出される。
◎
Throws an "IndexSizeError" DOMException if the either of the width or height arguments are zero.
</dd>

	<dt>%imageData.`width$iD</dt>
	<dt>%imageData.`height$iD</dt>
	<dd>
`ImageData$I ~obj内の~dataの実際の寸法を，画素~数で返す。
◎
Returns the actual dimensions of the data in the ImageData object, in pixels.
</dd>

	<dt>%imageData.`data$iD</dt>
	<dd>
【`矩形な~bitmapを表現する$】~dataを包含している一次元~配列を返す
— ~RGBA順序で，各配列要素は［
範囲 0 〜 255 に入る整数†
］になるような。
◎
Returns the one-dimensional array containing the data in RGBA order, as integers in the range 0 to 255.
</dd>
	<dd class="trans-note">【†
`pixelFormat$iD ~EQ `rgba-unorm8$l の事例では。
他の事例については、
まだ述べられていない。
】</dd>

	<dt>%imageData.`pixelFormat$iD</dt>
	<dd class="trans-note">【
この新たに追加された属性も，ここに挙げられるべきだが、
まだ無い。
】</dd>

	<dt>%imageData.`colorSpace$iD</dt>
	<dd>
画素たちが属する色~空間を返す。
◎
Returns the color space of the pixels.
</dd>

	<dt>%context.`putImageData(imageData, dx, dy)$2d1</dt>
	<dt>%context.`putImageData(imageData, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight)$2d</dt>
	<dd>
所与の `ImageData$I ~objの~dataを~bitmapの上に塗る。
~dirty矩形も供された場合、
その矩形に入る画素のみ塗られる。
◎
Paints the data from the given ImageData object onto the bitmap. If a dirty rectangle is provided, only the pixels from that rectangle are painted.
</dd>
	<dd>
この~method~callの目的においては、［
`globalAlpha$2d ~prop／
`globalCompositeOperation$2d ~prop／
各種`影~属性$
］は無視され，
~canvas内の画素は無差別的に
— すなわち，組成n, ~alpha混色, 影, 等々を施すことなく —
置換される。
◎
The globalAlpha and globalCompositeOperation properties, as well as the shadow attributes, are ignored for the purposes of this method call; pixels in the canvas are replaced wholesale, with no composition, alpha blending, no shadows, etc.
</dd>
	<dd>
%imageData ~objの `data$iD 属性の値の `ViewedArrayBuffer^sl 内部~slotが~detachされている場合、
`InvalidStateError$E 例外が投出される
◎
Throws an "InvalidStateError" DOMException if the imageData object's data attribute value's [[ViewedArrayBuffer]] internal slot is detached.
</dd>
</dl>

<p>
`CanvasImageData$I を実装する~objは、
画素~dataを［
~bitmapから読取る／~bitmapに書込む
］ための~methodを供する。
◎
Objects that implement the CanvasImageData interface provide the following methods for reading and writing pixel data to the bitmap.
</p>

<div class="algo">
<p>
`new ImageData(sw, sh, settings)@iD
構築子~手続きは：
◎
The new ImageData(sw, sh, settings) constructor steps are:
</p>
<ol>
	<li>
~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.
</li>
	<li>
`画像~dataを初期化する$( ↓ )
⇒＃
コレ,
%sw,
%sh,
%settings
◎
Initialize this given sw, sh, and settings.
</li>
	<li>
コレの全~画素を`透明な黒$に初期化する
◎
Initialize the image data of this to transparent black.
</li>
</ol>
</div>

<div class="algo">
<p>
`new ImageData(data, sw, sh, settings)@iD1
構築子~手続きは：
◎
The new ImageData(data, sw, sh, settings) constructor steps are:
</p>
<ol>
	<li>
%画素あたりの~byte数 ~LET %settings[ "`pixelFormat$mb" ] に応じて
⇒＃
`rgba-unorm8$l ならば 4 ／
~ELSE_ 8
◎
Let bytesPerPixel be 4 if settings["pixelFormat"] is "rgba-unorm8"; otherwise 8.
</li>
	<li>
%長さ ~LET %data の`~byte長さ$BS
◎
Let length be the buffer source byte length of data.
</li>
	<li>
~IF［
%長さ ~EQ 0
］~OR［
%長さ は %画素あたりの~byte数 の整数倍でない
］
⇒
~THROW `InvalidStateError$E
◎
If length is not a nonzero integral multiple of bytesPerPixel, then throw an "InvalidStateError" DOMException.
</li>
	<li>
%長さ ~SET %長さ ~DIV %画素あたりの~byte数
◎
Let length be length divided by bytesPerPixel.
</li>
	<li>
<p>
~IF［
%長さ は %sw の整数倍でない
］
⇒
~THROW `IndexSizeError$E
◎
If length is not an integral multiple of sw, then throw an "IndexSizeError" DOMException.
</p>

<p class="note">注記：
この時点では［
%長さ ~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.
</p>
	</li>
	<li>
~IF［
%sh ~EQ ε
］
⇒
%sh ~SET %長さ ~DIV %sw
◎
Let height be length divided by sw.
</li>
	<li>
~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.
</li>
	<li>
<p>
`画像~dataを初期化する$( ↓ )
⇒＃
コレ,
%sw,
%sh,
%settings,
%data
◎
Initialize this given sw, sh, settings, and source set to data.
</p>

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

<div class="algo">
<p>
`createImageData(sw, sh, settings)@2d
~method手続きは：
◎
The createImageData(sw, sh, settings) method steps are:
</p>
<ol>
	<li>
~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.
</li>
	<li>
%画像~data ~LET `新たな~obj$( `ImageData$I )
◎
Let newImageData be a new ImageData object.
</li>
	<li>
`画像~dataを初期化する$( ↓ )
⇒＃
%画像~data,
%sw の絶対値,
%sh の絶対値,
%settings,
ε,
コレの`色~空間$2D
◎
Initialize newImageData given the absolute magnitude of sw, the absolute magnitude of sh, settings, and defaultColorSpace set to this's color space.
</li>
	<li>
%画像~data の全~画素を`透明な黒$に初期化する
◎
Initialize the image data of newImageData to transparent black.
</li>
	<li>
~RET %画像~data
◎
Return newImageData.
</li>
</ol>
</div>

<div class="algo">
<p>
`createImageData(imageData)@2d1
~method手続きは：
◎
The createImageData(imageData) method steps are:
</p>
<ol>
	<li>
%画像~data ~LET `新たな~obj$( `ImageData$I )
◎
Let newImageData be a new ImageData object.
</li>
	<li>
%設定群 ~LET 新たな `ImageDataSettings$I ~obj
— その
⇒＃
`colorSpace$mb1 ~SET コレの `colorSpace$iD,
`pixelFormat$mb ~SET コレの `pixelFormat$iD
◎
Let settings be the ImageDataSettings object «[ "colorSpace" → this's colorSpace, "pixelFormat" → this's pixelFormat ]».
</li>
	<li>
`画像~dataを初期化する$( ↓ )
⇒＃
%画像~data,
%imageData の `width$iD 属性の値,
%imageData の `height$iD 属性の値,
%設定群
◎
Initialize newImageData given the value of imageData's width attribute, the value of imageData's height attribute, and settings.
</li>
	<li>
%画像~data の全~画素を`透明な黒$に初期化する
◎
Initialize the image data of newImageData to transparent black.
</li>
	<li>
~RET %画像~data
◎
Return newImageData.
</li>
</ol>
</div>

<div class="algo">
<p>
`getImageData(sx, sy, sw, sh, settings)@2d
~method手続きは：
◎
The getImageData(sx, sy, sw, sh, settings) method steps are:
</p>
<ol>
	<li>
~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.
</li>
	<li>
~IF［
コレの`生成元cleanか$ ~EQ ~F
］
⇒
~THROW `SecurityError$E
◎
If the CanvasRenderingContext2D's origin-clean flag is set to false, then throw a "SecurityError" DOMException.
</li>
	<li>
%画像~data ~LET `新たな~obj$( `ImageData$I )
◎
Let imageData be a new ImageData object.
</li>
	<li>
<p>
`画像~dataを初期化する$( ↓ )
⇒＃
%画像~data,
%sw,
%sh,
%settings,
ε,
コレの`色~空間$2D
</p>

<p class="trans-note">【
%sw, %sh いずれかに負な値が供された場合にどうなるか，指定されていない。
`createImageData()$2d と同様に絶対値をとる？
】</p>
◎
Initialize imageData given sw, sh, settings, and defaultColorSpace set to this's color space.
</li>
	<li>
%矩形 ~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).
</li>
	<li>
<p>
%画像~data を成す各~画素の値を次に従って設定する：
</p>
		<ul>
			<li>
コレの`出力~bitmap$2D内の
【！コレの`出力~bitmap$2Dの座標~空間~単位による，】
%矩形 との交差域に入る画素 %画素 に対応する画素の値は
⇒
%画素 をコレの`色~空間$2Dから %画像~data の `colorSpace$iD に
— 描画~意図 `relative-colorimetric$v を利用する下で —
変換した結果に設定する。
</li>
			<li>
他の画素はすべて`透明な黒$にする。
</li>
		</ul>
◎
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.
</li>
	<li>
~RET %画像~data
◎
Return imageData.
</li>
</ol>
</div>

<div class="algo">
<p>
`画像~dataを初期化する@
~algoは、
所与の
⇒＃
`ImageData$I ~obj %画像~data,
正な整数 %横幅,
正な整数 %縦幅,
`ImageDataSettings$I %設定群,
`ImageDataArray$I %~source（省略時は ε ）,
`PredefinedColorSpace$I %既定の色~空間（省略時は ε ）
◎終
に対し：
◎
To initialize an ImageData object imageData, given a positive integer number of pixels per row pixelsPerRow, a positive integer number of rows rows, an ImageDataSettings settings, an optional ImageDataArray source, and an optional PredefinedColorSpace defaultColorSpace:
</p>
<ol>
	<li>
%画素~形式 ~LET %設定群[ "`pixelFormat@mb" ]
◎
↓</li>
	<li>
<p>
~IF［
%~source ~NEQ ε
］：
◎
If source was given:
</p>
		<ol>
			<li>
<p>
%画素~形式 に応じて：
</p>
				<ul class="switch">
					<li>
<p>
`rgba-unorm8$l
⇒
~IF［
%~source は `Uint8ClampedArray$I でない
］
⇒
~THROW `InvalidStateError$E
</li>
					<li>
`rgba-float16$l
⇒
~IF［
%~source は `Float16Array$I でない
］
⇒
~THROW `InvalidStateError$E
</li>
				</ul>
◎
If settings["pixelFormat"] equals "rgba-unorm8" and source is not a Uint8ClampedArray, then throw an "InvalidStateError" DOMException.
◎
If settings["pixelFormat"] is "rgba-float16" and source is not a Float16Array, then throw an "InvalidStateError" DOMException.
◎
↓↓ Initialize the data attribute of imageData to source.
</li>
		</ol>
	</li>
	<li>
<p>
~ELSE：
◎
Otherwise (source was not given):
</p>
		<ol>
			<li>
<p>
%~source ~SET %画素~形式 に応じて
⇒＃
`rgba-unorm8$l ならば `~buffer~sourceを作成する$( `Uint8ClampedArray$I, 4 ~MUL %縦幅 ~MUL %横幅 ) ／
`rgba-float16$l ならば `~buffer~sourceを作成する$( `Float16Array$I, 8 ~MUL %縦幅 ~MUL %横幅 )
</p>

<p>
この段は、
~buffer~source用の配列~bufferを割振れなかった場合には，
~JSにより投出される `RangeError$E を投出し直すことになる。
</p>

<p class="trans-note">【
この訳では、
“~buffer~sourceを作成する” ~algoを利用して，
この段の内容を簡素化する。
】</p>
◎
If settings["pixelFormat"] is "rgba-unorm8", then initialize the data attribute of imageData to a new Uint8ClampedArray object. The Uint8ClampedArray object must use a new ArrayBuffer for its storage, and must have a zero byte offset and byte length equal to the length of its storage, in bytes. The storage ArrayBuffer must have a length of 4 × rows × pixelsPerRow bytes.
◎
Otherwise, if settings["pixelFormat"] is "rgba-float16", then initialize the data attribute of imageData to a new Float16Array object. The Float16Array object must use a new ArrayBuffer for its storage, and must have a zero byte offset and byte length equal to the length of its storage, in bytes. The storage ArrayBuffer must have a length of 8 × rows × pixelsPerRow bytes.
◎
If the storage ArrayBuffer could not be allocated, then rethrow the RangeError thrown by JavaScript, and return.
</li>
		</ol>
	</li>
	<li>
%色~空間 ~LET %設定群[ "`colorSpace@mb1" ]
◎
↓</li>
	<li>
~IF［
%色~空間 ~EQ ε
］
⇒
%色~空間 ~SET %既定の色~空間
◎
↓</li>
	<li>
~IF［
%色~空間 ~EQ ε
］
⇒
%色~空間 ~SET `srgb$l
◎
↓</li>
	<li>
%画像~data の各~属性を次に従って初期化する
⇒＃
`data@iD 属性 ~SET %~source,
`width@iD 属性 ~SET %横幅,
`height@iD 属性 ~SET %縦幅
`pixelFormat@iD 属性 ~SET %画素~形式
`colorSpace@iD 属性 ~SET %色~空間
◎
Initialize the width attribute of imageData to pixelsPerRow.
◎
Initialize the height attribute of imageData to rows.
◎
Initialize the pixelFormat attribute of imageData to settings["pixelFormat"].
◎
If settings["colorSpace"] exists, then initialize the colorSpace attribute of imageData to settings["colorSpace"].
◎
Otherwise, if defaultColorSpace was given, then initialize the colorSpace attribute of imageData to defaultColorSpace.
◎
Otherwise, initialize the colorSpace attribute of imageData to "srgb".
</li>
</ol>
</div>

<p>
`ImageData$I ~objは`直列化-可能$である：
◎
ImageData objects are serializable objects.＼
</p>
<ul>
	<li>
<p>
その`直列化~手続き$は、
所与の
( %値, %直列形 )
に対し：
◎
Their serialization steps, given value and serialized, are:
</p>
		<ol>
			<li>
%直列形 . `Data^sl ~SET %値 の`data$iD 属性の値の`下位-直列化$
◎
Set serialized.[[Data]] to the sub-serialization of the value of value's data attribute.
</li>
			<li>
%直列形 . `Width^sl ~SET %値 の`width$iD 属性の値
◎
Set serialized.[[Width]] to the value of value's width attribute.
</li>
			<li>
%直列形 . `Height^sl ~SET %値 の `height$iD 属性の値
◎
Set serialized.[[Height]] to the value of value's height attribute.
</li>
			<li>
%直列形 . `ColorSpace^sl ~SET %値 の `colorSpace$iD 属性の値
◎
Set serialized.[[ColorSpace]] to the value of value's colorSpace attribute.
</li>
			<li>
%直列形 . `PixelFormat^sl ~SET %値 の `pixelFormat$iD 属性の値
◎
Set serialized.[[PixelFormat]] to the value of value's pixelFormat attribute.
</li>
		</ol>
	</li>
	<li>
<p>
その`逆直列化~手続き$は、
所与の
( %直列形, %値, %宛先~realm )
に対し：
◎
Their deserialization steps, given serialized, value, and targetRealm, are:
</p>
		<ol>
			<li>
%値 の `data$iD 属性 ~SET %直列形 . `Data^sl の`下位-逆直列化$
◎
Initialize value's data attribute to the sub-deserialization of serialized.[[Data]].
</li>
			<li>
%値 の `width$iD 属性 ~SET %直列形 . `Width^sl
◎
Initialize value's width attribute to serialized.[[Width]].
</li>
			<li>
%値 の `height$iD 属性 ~SET %直列形 . `Height^sl
◎
Initialize value's height attribute to serialized.[[Height]].
</li>
			<li>
%値 の `colorSpace$iD 属性 ~SET %直列形 . `ColorSpace^sl
◎
Initialize value's colorSpace attribute to serialized.[[ColorSpace]].
</li>
			<li>
%値 の `pixelFormat$iD 属性 ~SET %直列形 . `PixelFormat^sl
◎
Initialize value's pixelFormat attribute to serialized.[[PixelFormat]].
</li>
		</ol>
	</li>
</ul>

<p>
`ImageDataPixelFormat$I
列挙は、［
`ImageData$I の`data$iD 属性の型,
各~画素~用の色~成分たちの配列法と数量的な表現
］を指定するために利用される
— 可用な値は：
◎
The ImageDataPixelFormat enumeration is used to specify type of the data attribute of an ImageData and the arrangement and numerical representation of the color components for each pixel.
</p>
<dl>
	<dt>
`rgba-unorm8@l
◎
The "rgba-unorm8" value＼
</dt>
	<dd>
［
当の属性の値は `Uint8ClampedArray$I 型でなければナラナイ
］ことを指示する。
各~画素を成す各~成分~用の値は、
8 ~bitな無符号~整数に正規化した上で，
4 個の連列的な要素に［
~red, ~green, ~blue, ~alpha
］の順序で格納するモノトスル。
◎
indicates that the data attribute of an ImageData must be of type Uint8ClampedArray. The color components of each pixel must be stored in four sequential elements in the order of red, green, blue, and then alpha. Each element represents the 8-bit unsigned normalized value for that component.
</dd>

	<dt>
`rgba-float16@l
◎
The "rgba-float16" value＼
</dt>
	<dd>
［
当の属性の値は `Float16Array$I 型でなければナラナイ
］ことを指示する。
各~画素を成す各~成分~用の値は、
4 個の連列的な要素に［
~red, ~green, ~blue, ~alpha
］の順序で格納するモノトスル。
◎
indicates that the data attribute of an ImageData must be of type Float16Array. The color components of each pixel must be stored in four sequential elements in the order of red, green, blue, and then alpha. Each element represents the value for that component.
</dd>
</dl>

<p>
`ImageData$I ~obj %O は、
次に従う
`矩形な~bitmapを表現する@
：
◎
An ImageData object represents a rectanglar bitmap with＼
</p>
<ul>
	<li>
その横幅は、
%O の `width$iD 属性に等しい。
◎
width equal to the width attribute＼
</li>
	<li>
その縦幅は、
%O の `height$iD 属性に等しい。
◎
and height equal to the height attribute.＼
</li>
	<li>
~bitmapを成す~画素~値たちは、
%O の `data$iD 属性~内に格納される
— 座標
( %x ~IN { 0 〜 横幅 ~MINUS 1 }, %y ~IN { 0 〜 縦幅 ~MINUS 1 } )
にある画素を ( %y ~MUL 横幅 ~PLUS %x ) 個目の画素~値が表現するよう。
◎
The pixel values of this bitmap are stored in the data attribute in left-to-right order, row by row from top to bottom, starting with 0 for the top left pixel,＼
</li>
	<li>
各~画素を成す色~成分たちの順序, 各~成分~値の数量的な表現は、
%O の `pixelFormat$iD 属性により決定される。
◎
with the order and numerical representation of the color components of each pixel determined by the pixelFormat attribute.＼
</li>
	<li>
画素~値の色~空間は、
%O の `colorSpace$iD 属性により決定される。
◎
The color space of the pixel values of the bitmap is determined by the colorSpace attribute.
</li>
</ul>

<div class="algo">
`putImageData(imageData, dx, dy)@2d1
~method手続きは
⇒
`画像~dataの画素を~bitmap上に置く$( ↓ )
⇒＃
%imageData,
コレの`出力~bitmap$2D,
%dx,
%dy,
0,
0,
%imageData の `width$iD,
%imageData の `height$iD
◎
The putImageData(imageData, dx, dy) method steps are to put pixels from an ImageData onto a bitmap, given imageData, this's output bitmap, dx, dy, 0, 0, imageData's width, and imageData's height.
</div>

<div class="algo">
`putImageData(imageData, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight)@2d
~method手続きは
⇒
`画像~dataの画素を~bitmap上に置く$( ↓ )
⇒＃
%imageData,
コレの`出力~bitmap$2D,
%dx,
%dy,
%dirtyX,
%dirtyY,
%dirtyWidth,
%dirtyHeight
◎
The putImageData(imageData, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight) method steps are to put pixels from an ImageData onto a bitmap, given imageData, this's output bitmap, dx, dy, dirtyX, dirtyY, dirtyWidth, and dirtyHeight.
</div>

<div class="algo">
<p>
`画像~dataの画素を~bitmap上に置く@
~algoは、
所与の
⇒＃
`ImageData$I %画像~data,
`出力~bitmap$2D %~bitmap,
整数 %~offset~x,
整数 %~offset~y,
整数 %~dirty~x,
整数 %~dirty~y,
整数 %~dirty横幅,
整数 %~dirty縦幅
◎終
に対し：
◎
To put pixels from an ImageData onto a bitmap, given an ImageData imageData, an output bitmap bitmap, and numbers dx, dy, dirtyX, dirtyY, dirtyWidth, and dirtyHeight:
</p>
<ol>
	<li>
~IF［
`IsDetachedBuffer$jA( %画像~data の `data$iD 属性の値 . `ViewedArrayBuffer^sl )
~EQ ~T
］
⇒
~THROW `InvalidStateError$E
◎
Let buffer be imagedata's data attribute value's [[ViewedArrayBuffer]] internal slot.
◎
If IsDetachedBuffer(buffer) is true, then throw an "InvalidStateError" DOMException.
</li>
	<li>
%左端 ~SET `max^op( 0, `min^op( %~dirty~x, %~dirty~x ~PLUS %~dirty横幅 ) )
◎
↓</li>
	<li>
%右端 ~SET `min^op( %画像~data の `width$iD 属性の値, `max^op( %~dirty~x, %~dirty~x ~PLUS %~dirty横幅 ) )
◎
↓</li>
	<li>
%上端 ~SET `max^op( 0, `min^op( %~dirty~y, %~dirty~y ~PLUS %~dirty縦幅 ) )
◎
↓</li>
	<li>
%下端 ~SET `min^op( %画像~data の `height$iD 属性の値, `max^op( %~dirty~y, %~dirty~y ~PLUS %~dirty縦幅 ) )
◎
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.
</li>
	<li>
~IF［
%左端 ~EQ %右端
］~OR［
%上端 ~EQ %下端
］
⇒
~RET
◎
If, after those changes, either dirtyWidth or dirtyHeight are negative or zero, then return without affecting any bitmaps.
</li>
	<li>
<p>
~AND↓ を満たす
~EACH( 座標 ( %~x, %~y ) )
に対し…
</p>
		<ul>
			<li>
%~x ~IN { %左端 〜 %右端 ~MINUS 1 }
</li>
			<li>
%~y ~IN { %上端 〜 %下端 ~MINUS 1 }
</li>
			<li>
座標 ( %~x ~PLUS %~offset~x, %~y ~PLUS %~offset~y ) は %~bitmap 内にある
</li>
		</ul>
<p>
…に対し
⇒
%~bitmap 内の座標 ( %~x ~PLUS %~offset~x, %~y ~PLUS %~offset~y ) にある画素の色 ~SET ［
%画像~data `~data構造の~bitmap＠#concept-imagedata-bitmap-representation$内の座標 ( %~x, %~y ) にある画素の色
］を［
%画像~data の `colorSpace$iD から %~bitmap の`色~空間$2D
］へ［
描画~意図 `relative-colorimetric$v を利用する
］下で変換した結果
</p>
◎
For all integer values of x and y where dirtyX ≤ x &lt; dirtyX+dirtyWidth and dirtyY ≤ y &lt; dirtyY+dirtyHeight, set the pixel with coordinate (dx+x, dy+y) in bitmap to the color of the pixel at coordinate (x, y) in the imageData data structure's bitmap, converted from imageData's colorSpace to the color space of bitmap using 'relative-colorimetric' rendering intent.
</li>
</ol>

<p class="note">注記：
色~値を［
色~空間どうしで変換する／
`~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.
</p>
</div>

<p>
次に挙げるものは、
この節にて述べる~methodに影響しないモノトスル
⇒＃
現在の~path ／
`変形n行列$ ／
`影~属性$ ／
`大域~alpha$2D ／
`切抜き領域$ ／
`現在の組成~混色~演算子$2D
◎
The current path, transformation matrix, shadow attributes, global alpha, the clipping region, and current compositing and blending operator must not affect the methods described in this section.
</p>

<div class="example">
<p>
次の例の~scriptは…
【この例は未訳／省略する。】
◎
In the following example, the script generates an ImageData object so that it can draw onto it.
</p>
</div>

<div class="example">
<p>
`getImageData()$2d ／ `putImageData()$2d
を利用して…
【この例は未訳／省略する。】
◎
Here is an example of using getImageData() and putImageData() to implement an edge detection filter.
</p>
</div>

<div class="example">
<p>
`getImageData()$2d ／ `putImageData()$2d
を利用して，色~空間を変換する例…
【この例は未訳／省略する。】
◎
Here is an example of color space conversion applied when drawing a solid color and reading the result back using and getImageData().
</p>
</div>

					</section>
					<section id="compositing">
<h6 title="Compositing">4.12.5.1.17. 組成-法（ `compositing^en ）</h6>

<dl class="domintro">
	<dt>%context.`globalAlpha$2d [ = %value ]</dt>
	<dd>
描画~演算に適用される現在の`大域~alpha$2Dを返す。
◎
Returns the current global alpha value applied to rendering operations.
</dd>
	<dd>
設定して、
`大域~alpha$2Dを変更できる。
0.0 以上 1.0 以下でない値は、
無視される。
◎
Can be set, to change the global alpha value. Values outside of the range 0.0 .. 1.0 are ignored.
</dd>

	<dt>%context.`globalCompositeOperation$2d [ = %value ]</dt>
	<dd>
`Compositing and Blending^cite `COMPOSITE$r にて定義される値として，
`現在の組成~混色~演算子$2Dを返す。
◎
Returns the current compositing and blending operator, from the values defined in Compositing and Blending. [COMPOSITE]
</dd>
	<dd>
設定して、
`現在の組成~混色~演算子$2Dを変更できる。
未知な値は、
無視される。
◎
Can be set, to change the current compositing and blending operator. Unknown values are ignored.
</dd>
</dl>

<p>
`CanvasCompositing$I ~interfaceを実装する~objは、［
`大域~alpha$2D,
`現在の組成~混色~演算子$2D
］を有する
— どちらも、
この~objに対するすべての描き演算に影響する。
◎
Objects that implement the CanvasCompositing interface have a global alpha value and a current compositing and blending operator value that both affect all the drawing operations on this object.
</p>

<p>
`大域~alpha@2D
は、［
`出力~bitmap$2Dに組成される前に，図形や画像に適用される~alpha値
］を与える。
その値は、
0.0 （全部的に透明）以上 1.0 （全部的に不透明）であり，
初期~時は 1.0 をとるモノトスル。
◎
The global alpha value gives an alpha value that is applied to shapes and images before they are composited onto the output bitmap. The value ranges from 0.0 (fully transparent) to 1.0 (no additional transparency). It must initially have the value 1.0.
</p>

<div class="algo">
`globalAlpha@2d
取得子~手続きは
⇒
~RET コレの`大域~alpha$2D
◎
The globalAlpha getter steps are to return this's global alpha.
</div>

<div class="algo">
<p>
`globalAlpha$2d
設定子~手続きは：
◎
The globalAlpha setter steps are:
</p>
<ol>
	<li>
%~alpha ~LET 所与の値
◎
↓</li>
	<li>
~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.
</li>
</ol>
</div>

<p>
`現在の組成~混色~演算子@2D
は、
図形や画像が
— `大域~alpha$2Dと`現在の変形n行列$を適用した後に —
`出力~bitmap$2D上にどう描かれるかを制御する
— 初期~時は "`source-over$v" になるモノトスル。
◎
The current compositing and blending operator value controls how shapes and images are drawn onto the output bitmap, once they have had the global alpha and the current transformation matrix applied. Initially, it must be set to "source-over".
</p>

<div class="algo">
`globalCompositeOperation@2d
取得子~手続きは
⇒
~RET コレの`現在の組成~混色~演算子$2D
◎
The globalCompositeOperation getter steps are to return this's current compositing and blending operator.
</div>

<div class="algo">
<p>
`globalCompositeOperation$2d
設定子~手続きは：
◎
The globalCompositeOperation setter steps are:
</p>
<ol>
	<li>
~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 &lt;blend-mode&gt; or the &lt;composite-mode&gt; properties are defined to take, then return. [COMPOSITE]
◎
Otherwise, set this's current compositing and blending operator to the given value.
</li>
</ol>
</div>

					</section>
					<section id="image-smoothing">
<h6 title="Image smoothing">4.12.5.1.18. 画像の滑化-法（ `smoothing^en ）</h6>

<dl class="domintro">
	<dt>%context.`imageSmoothingEnabled$2d [ = %value ]</dt>
	<dd>
~patternを~fillするかどうか, および
`drawImage()$2d ~methodが［
画像を拡大するときに，画素が表示に正確に揃わない場合
］に画像を滑化しようと試みるかどうかを返す。
◎
Returns whether pattern fills and the drawImage() method will attempt to smooth images if their pixels don't line up exactly with the display, when scaling images up.
</dd>
	<dd>
設定して、
画像を滑化するか（ ~T ）しないか（ ~F ）を変更できる。
◎
Can be set, to change whether images are smoothed (true) or not (false).
</dd>

	<dt>%context.`imageSmoothingQuality$2d [ = %value ]</dt>
	<dd>
現在の，画像の滑化-法に選好される品質を返す。
◎
Returns the current image-smoothing-quality preference.
</dd>
	<dd>
設定して、
画像の滑化-法に選好される品質を変更できる。
アリな値は［
 `low$l, `medium$l, `high$l
］。
未知な値は、
無視される。
◎
Can be set, to change the preferred quality of image smoothing. The possible values are "low", "medium" and "high". Unknown values are ignored.
</dd>
</dl>

<p>
`CanvasImageSmoothing$I を実装する~objは、
画像がどう滑化されるかを制御する属性を有する。
◎
Objects that implement the CanvasImageSmoothing interface have attributes that control how image smoothing is performed.
</p>

<p>
`imageSmoothingEnabled@2d
属性は、
次に従うモノトスル：
◎
The imageSmoothingEnabled attribute,＼
</p>
<ul>
	<li>
取得子は、
最後に設定された値を返す。
◎
on getting, must return the last value it was set to.＼
</li>
	<li>
設定子は、
この属性を所与の値に設定する。
◎
On setting, it must be set to the new value.＼
</li>
	<li>
コレの作成-時には、
値 ~T に初期化する。
◎
When the object implementing the CanvasImageSmoothing interface is created, the attribute must be set to true.
</li>
</ul>

<p>
`imageSmoothingQuality@2d
属性は、
次に従うモノトスル：
◎
The imageSmoothingQuality attribute,＼
</p>
<ul>
	<li>
取得子は、
最後に設定された値を返す。
◎
on getting, must return the last value it was set to.＼
</li>
	<li>
設定子は、
この属性を所与の値に設定する。
◎
On setting, it must be set to the new value.＼
</li>
	<li>
コレの作成-時には、
値 `low$l に初期化する。
◎
When the object implementing the CanvasImageSmoothing interface is created, the attribute must be set to "low".
</li>
</ul>

					</section>
					<section id="shadows">
<h6 title="Shadows">4.12.5.1.19. 影（ `shadow^en ）</h6>

<p>
`CanvasShadowStyles$I は影~styleを表現する。
それを実装する~obj上の すべての描き演算は、
4 種の大域的な影~属性により影響される。
◎
All drawing operations on an object which implements the CanvasShadowStyles interface are affected by the four global shadow attributes.
</p>

【！＊色／~offset／ボカシ~level】

<dl class="domintro">
	<dt>%context.`shadowColor$2d [ = %value ]</dt>
	<dd>
現在の影~色を返す。
◎
Returns the current shadow color.
</dd>
	<dd>
設定して、
影~色を変更できる。
~CSS色として構文解析できない値は、
無視される。
◎
Can be set, to change the shadow color. Values that cannot be parsed as CSS colors are ignored.
</dd>

	<dt>%context.`shadowOffsetX$2d [ = %value ]</dt>
	<dt>%context.`shadowOffsetY$2d [ = %value ]</dt>
	<dd>
現在の影~offsetを返す。
◎
Returns the current shadow offset.
</dd>
	<dd>
設定して、
影~offsetを変更できる。
`有限$でない値は、
無視される。
◎
Can be set, to change the shadow offset. Values that are not finite numbers are ignored.
</dd>

	<dt>%context.`shadowBlur$2d [ = %value ]</dt>
	<dd>
影に適用されるボカシの現在の~levelを返す。
◎
Returns the current level of blur applied to shadows.
</dd>
	<dd>
設定して、
ボカシ~levelを変更できる。
［
`有限$でない値／負な値
］は、
無視される。
◎
Can be set, to change the blur level. Values that are not finite numbers greater than or equal to zero are ignored.
</dd>
</dl>

<p>
`CanvasShadowStyles$I を実装する~objには、
`影~色@2D
が結付けられる
— それは、
~CSS色であり，
初期~時は`透明な黒$になるモノトスル。
◎
Objects which implement the CanvasShadowStyles interface have an associated shadow color, which is a CSS color. Initially, it must be transparent black.
</p>

<div class="algo">
`shadowColor@2d
取得子~手続きは
⇒
~RET `~HTMLに互換な直列化が要請される$下で，コレの`影~色$2D を`直列化-$CCした結果
◎
The shadowColor getter steps are to return the serialization of this's shadow color with HTML-compatible serialization requested.
</div>

<div class="algo">
<p>
`shadowColor$2d
設定子~手続きは：
◎
The shadowColor setter steps are:
</p>
<ol>
	<li>
%文脈 ~LET コレの `canvas$2d 属性の値
◎
Let context be this's canvas attribute's value,＼
</li>
	<li>
~IF［
%文脈 は要素でない
］
⇒
%文脈 ~SET ε
◎
if that is an element; otherwise null.
</li>
	<li>
%構文解析した値 ~LET `~CSS色~値を構文解析する$( 所与の値, %文脈 )
◎
Let parsedValue be the result of parsing the given value with context if non-null.
</li>
	<li>
~IF［
%構文解析した値 ~EQ `失敗^i
］
⇒
~RET
◎
If parsedValue is failure, then return.
</li>
	<li>
コレの`影~色$2D ~SET %構文解析した値
◎
Set this's shadow color to parsedValue.
</li>
</ol>
</div>

<p>
［
`shadowOffsetX@2d
／
`shadowOffsetY@2d
］属性は、
影が正な［
横／縦
］に~offsetされる距離を指定する。
【！座標~空間~単位で】
これらは、
現在の変形n行列により影響されない。
両~属性とも、
次に従うモノトスル：
◎
The shadowOffsetX and shadowOffsetY attributes specify the distance that the shadow will be offset in the positive horizontal and positive vertical distance respectively. Their values are in coordinate space units. They are not affected by the current transformation matrix.
</p>
<ul>
	<li>
コレの作成-時には、
値 0 に初期化する。
◎
When the context is created, the shadow offset attributes must initially have the value 0.
</li>
	<li>
取得子は、
この属性の現在の値を返す。
◎
On getting, they must return their current value.＼
</li>
	<li>
設定子は、
所与の値は［
`有限$であって負でない
］ならば、
この属性を所与の値に設定する。
◎
On setting, the attribute being set must be set to the new value, except if the value is infinite or NaN, in which case the new value must be ignored.
</li>
</ul>

<p>
`shadowBlur@2d
属性は、
ボカシ効果の~levelを指定する
（座標~空間~単位に対応付けられないので、
現在の変形n行列により影響されない）。
両~属性とも、
次に従うモノトスル：
◎
The shadowBlur attribute specifies the level of the blurring effect. (The units do not map to coordinate space units, and are not affected by the current transformation matrix.)
</p>
<ul>
	<li>
コレの作成-時には、
値 0 に初期化する。
◎
When the context is created, the shadowBlur attribute must initially have the value 0.
</li>
	<li>
取得子は、
この属性の現在の値を返す。
◎
On getting, the attribute must return its current value.＼
</li>
	<li>
設定子は、
所与の値は［
`有限$であって負でない
］ならば，この属性を所与の値に設定する。
◎
On setting, the attribute must be set to the new value, except if the value is negative, infinite or NaN, in which case the new value must be ignored.
</li>
</ul>

<div>
<p>
`影を描く$のは、
~AND↓ が満たされる場合に限られる：
</p>
<ul>
	<li>
`影~色$2Dの~alpha成分【！の不透明度~成分（重言）】 ~NEQ 0
</li>
	<li>
［
`shadowBlur$2d ~NEQ 0
］~OR［
`shadowOffsetX$2d ~NEQ 0
］~OR［
`shadowOffsetY$2d ~NEQ 0
］
</li>
</ul>
◎
Shadows are only drawn if the opacity component of the alpha component of the shadow color is nonzero and either the shadowBlur is nonzero, or the shadowOffsetX is nonzero, or the shadowOffsetY is nonzero.
</div>

<div class="algo">
<p>
`影を描く@
~algoは、
所与の
( %A, %影~style )
に対し，次に従って描画する：
◎
When shadows are drawn, they must be rendered as follows:
</p>
<ol>
	<li>
~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.
</li>
	<li>
%B ~LET %A と 座標~空間, 原点が一致する無限に広い`透明な黒$にされた~bitmap
◎
Let B be an infinite transparent black bitmap, with a coordinate space and an origin identical to A.
</li>
	<li>
%A の~alpha成分を %B に
— ( ~x, ~y ) とも正な方向に
( %影~style の `shadowOffsetX$2d, %影~style の `shadowOffsetY$2d )
だけ~offsetする下で —
複製する
◎
Copy the alpha component of A to B, offset by shadowOffsetX in the positive x direction, and shadowOffsetY in the positive y direction.
</li>
	<li>
%標準偏差 ~LET %影~style の `shadowBlur$2d ~DIV 2
◎
↓</li>
	<li>
~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.
</li>
	<li>
%影~色 ~LET %影~style の`影~色$2D
◎
↓</li>
	<li>
%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 shadow color.
</li>
	<li>
%B 内の各~画素に対し
⇒
画素の~alpha成分を %影~色 の~alpha成分で乗算する
◎
Multiply the alpha component of every pixel in B by the alpha component of the shadow color.
</li>
	<li>
~RET %B
（ %B 内にある影は、
下に述べる`描法~model$の一部として描画されることになる。）
◎
The shadow is in the bitmap B, and is rendered as part of the drawing model described below.
</li>
</ol>
</div>

<p>
［
`現在の組成~混色~演算子$2D ~EQ "`copy$v"
］の場合、
影は実質的に描画されない
（この影は当の図形で上書されるので）。
◎
If the current compositing and blending operator is "copy", then shadows effectively won't render (since the shape will overwrite the shadow).
</p>

					</section>
					<section id="filters">
<h6 title="Filters">4.12.5.1.20. ~filter</h6>

<p>
大域的な
`filter@2d
属性は、
`CanvasFilters$I を実装する~obj上の すべての描き演算に影響する。
◎
All drawing operations on an object which implements the CanvasFilters interface are affected by the global filter attribute.
</p>

<dl class="domintro">
	<dt>%context.`filter$2d [ = %value ]</dt>
	<dd>
`現在の~filter$2Dを返す。
◎
Returns the current filter.
</dd>
	<dd>
設定して、
現在の~filterを，次に挙げるいずれかの値に変更できる
— 他の値は無視される。
⇒＃
文字列 `none^l ／ 
`filter-value-list$t として構文解析-可能な文字列
◎
Can be set, to change the filter. Values can either be the string "none" or a string parseable as a &lt;filter-value-list&gt;. Other values are ignored.
</dd>
</dl>

<p>
そのような~objには、
`現在の~filter@2D
が結付けられる
— それは、
文字列であり，初期~時は文字列 `none^l に設定される。
この値が `none^l をとる間は、
当の文脈~用の~filterは不能化されることになる。
◎
Such objects have an associated current filter, which is a string. Initially the current filter is set to the string "none". Whenever the value of the current filter is the string "none" filters will be disabled for the context.
</p>

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

<div class="algo">
<p>
`filter$2d
設定子~手続きは：
◎
The filter setter steps are:
</p>
<ol>
	<li>
~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.
</li>
	<li>
%構文解析した値 ~LET 所与の値を `filter-value-list$t の`文法に則って構文解析-$した結果
— ［
`inherit^v ／ `initial^v
］の様な，~propに独立な~stylesheet構文が在る場合、
この構文解析は， `失敗^i を返すモノトスル。
◎
Let parsedValue be the result of parsing the given values as a &lt;filter-value-list&gt;. If any property-independent style sheet syntax like 'inherit' or 'initial' is present, then this parsing must return failure.
</li>
	<li>
~IF［
%構文解析した値 ~EQ `失敗^i
］
⇒
~RET
◎
If parsedValue is failure, then return.
</li>
	<li>
コレの`現在の~filter$2D ~SET 所与の値
◎
Set this's current filter to the given value.
</li>
</ol>

<div class="note">
<p>注記：
`filter$2d に設定される値のうち：
</p>
<ul>
	<li>
`none^l は、
当の文脈~用の~filterを不能化することになる。
</li>
	<li>
［
空~文字列 ／ `null^jv ／ `undefined^jv
］は、
構文解析-不能な入力として扱われ，
`現在の~filter$2Dの値は変更されない。
</li>
</ul>
◎
Though context.filter = "none" will disable filters for the context, context.filter = "", context.filter = null, and context.filter = undefined are all treated as unparseable inputs and the value of the current filter is left unchanged.
</div>
</div>

<p>
`現在の~filter$2Dの値に利用される座標は、
1 画素が 1 ［
~SVG利用元~空間, ~canvas座標~空間
］単位に等価なものとして解釈される。
`変形n行列$は、
~filter座標には影響しない。
現在の変形n行列が影響するのは、
当の~filterへの入力に限られる。
各~filterは、
`出力~bitmap$2Dの座標~空間~内で適用される。
◎
Coordinates used in the value of the current filter are interpreted such that one pixel is equivalent to one SVG user space unit and to one canvas coordinate space unit. Filter coordinates are not affected by the current transformation matrix. The current transformation matrix affects only the input to the filter. Filters are applied in the output bitmap's coordinate space.
</p>

<p>
`現在の~filter$2Dの値は、
`filter-value-list$t として構文解析-可能な文字列である場合：
◎
↓</p>
<ul>
	<li>
値を成す ある `filter-function^t に［
百分率による長さ／`~fontに相対的な長さ$【！ em, ex 】
］が利用されている場合、
それら長さは，この属性【 `filter$2d 】が設定された時点における［
`~font~style~source$の `font-size$p ~propの`算出d値$
］に相対的に解釈するモノトスル。
この算出d値が未定義になる特定0の事例においては
（例：`~font~style~source$は、
要素でないか`具現化されて$いないとき）、
これらの相対~長さは，【！ relative keywords】
`font$2d 属性の既定の値に相対的に解釈するモノトスル。
~keyword［
`larger^v ／ `smaller^v 
］は、
~supportされない。
◎
When the value of the current filter is a string parsable as a &lt;filter-value-list&gt; which defines lengths using percentages or using 'em' or 'ex' units, these must be interpreted relative to the computed value of the 'font-size' property of the font style source object at the time that the attribute is set. If the computed values are undefined for a particular case (e.g. because the font style source object is not an element or is not being rendered), then the relative keywords must be interpreted relative to the default value of the font attribute. The 'larger' and 'smaller' keywords are not supported.
</li>
	<li>
値を成す ある `url^t が［
同じ文書~内の ある~SVG~filterへの参照
］を与えていて，それが変化した場合、
次回に描く演算には，変更された~filterが利用される。
◎
If the value of the current filter is a string parseable as a &lt;filter-value-list&gt; with a reference to an SVG filter in the same document, and this SVG filter changes, then the changed filter is used for the next draw operation.
</li>
	<li>
値を成す ある `url^t が［
ある外部~資源~文書~内の ある~SVG~filterへの参照
］を与えていて，
その文書は描き演算が呼出された時点で読込まれていない場合、
描き演算は~filterすることなく続行するモノトスル。
◎
If the value of the current filter is a string parseable as a &lt;filter-value-list&gt; with a reference to an SVG filter in an external resource document and that document is not loaded when a drawing operation is invoked, then the drawing operation must proceed with no filtering.
</li>
</ul>

					</section>
					<section id="working-with-externally-defined-svg-filters">
<h6 title="Working with externally-defined SVG filters">4.12.5.1.21. 外部に定義された~SVG~filterとの作業-法</h6>

◎非規範的

<p>
描き演算は［
外部に定義された~filterが読込ngを完遂するまでは，
~filterなし（ `filter$2d 値 `none^l ）の下で遂行される
］ので、
作者は［
描き演算を続行する前に，
そのような~filterが読込ngを完遂したかどうか決定したい
］と望むであろう。
これを達成するには、
同じ~pageの中の他所で［
`load^et ~eventを送信するような，ある要素
（例：~SVG `use$e 要素 ）
］内に外部に定義された~filterを読込ませた上で，
`load^et ~eventが配送されるまで待機する仕方が挙げられる。
◎
Since drawing is performed using filter value "none" until an externally-defined filter has finished loading, authors might wish to determine whether such a filter has finished loading before proceeding with a drawing operation. One way to accomplish this is to load the externally-defined filter elsewhere within the same page in some element that sends a load event (for example, an SVG use element), and wait for the load event to be dispatched.
</p>

					</section>
					<section id="drawing-model">
<h6 title="Drawing model">4.12.5.1.22. 描法~model</h6>

<div class="algo">
<p>
［
図形／画像
］は、
次の手続きに従ったかのように塗るモノトスル：
◎
When a shape or image is painted, user agents must follow these steps, in the order given (or act as if they do):
</p>
<ol>
	<li>
%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.
</li>
	<li>
%A 内の各~画素に対し，その~alpha成分を`大域~alpha$2Dで乗算する
◎
Multiply the alpha component of every pixel in A by global alpha.
</li>
	<li>
%B ~LET %A 
◎
↓</li>
	<li>
%~filter ~LET `現在の~filter$2D
◎
↓</li>
	<li>
~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 &lt;filter-value-list&gt;, then draw using the current filter in the same manner as SVG.
◎
↑Otherwise, let B be an alias for A.
</li>
	<li>
%C ~LET `影を描く$( %B, 現在の影~style【 `CanvasShadowStyles$I 】 )
◎
When shadows are drawn, render the shadow from image B, using the current shadow styles, creating image C.
</li>
	<li>
`現在の組成~混色~演算子$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.
</li>
	<li>
`現在の組成~混色~演算子$2Dを利用して，`切抜き領域$の中で、
現在の`出力~bitmap$2D上に %B を組成する
◎
Composite B within the clipping region over the current output bitmap using the current compositing and blending operator.
</li>
</ol>

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

					</section>
					<section id="best-practices">
<h6 title="Best practices">4.12.5.1.23. 最善な実施</h6>

<p>
~canvasがヤリトリありなときには、
作者は，要素の~fallback内容に［
各`~focus可能$な部位に対応する，`~focus可能$な要素
］を含めるべきである。
【！`上の例＠#drawCustomFocusRingExample$のように】
◎
When a canvas is interactive, authors should include focusable elements in the element's fallback content corresponding to each focusable part of the canvas, as in the example above.
</p>

<p>
［
~focus環の描画-時に，その~focus環の外観が~native~focus環になる
］ことを確保するためには、
作者は，［
`drawFocusIfNeeded()$2d ~methodを利用して，環が描かれている要素を渡す
］べきである。
この~methodは、
要素が`~focusされて$いるときに限り，~focus環を描く
— 要素は［
~focusされている／最初【の何？】でない
］ことを検査せずに，単純に要素を描くたびに~callできるよう。
◎
When rendering focus rings, to ensure that focus rings have the appearance of native focus rings, authors should use the drawFocusIfNeeded() method, passing it the element for which a ring is being drawn. This method only draws the focus ring if the element is focused, so that it can simply be called whenever drawing the element, without checking whether the element is focused or not first.
</p>

<p id="no-text-editing-in-canvas-please">
作者は、［
`canvas$e 要素を利用して~text編集用~controlを実装する
］ことは，避けるべきである。
そうすることには、
数多の不利がある。
【以下、この不利についての，これでもかと言わんばかりの記述は省略する。要約すると、~OSに備わる膨大な~text編集~systemを再発明するような，無謀な試みに等しい。】
◎
Authors should avoid implementing text editing controls using the canvas element. Doing so has a large number of disadvantages:
◎
• Mouse placement of the caret has to be reimplemented.
• Keyboard movement of the caret has to be reimplemented (possibly across lines, for multiline text input).
• Scrolling of the text control has to be implemented (horizontally for long lines, vertically for multiline input).
• Native features such as copy-and-paste have to be reimplemented.
• Native features such as spell-checking have to be reimplemented.
• Native features such as drag-and-drop have to be reimplemented.
• Native features such as page-wide text search have to be reimplemented.
• Native features specific to the user, for example custom text services, have to be reimplemented. This is close to impossible since each user might have different services installed, and there is an unbounded set of possible such services.
• Bidirectional text editing has to be reimplemented.
• For multiline text editing, line wrapping has to be implemented for all relevant languages.
• Text selection has to be reimplemented.
• Dragging of bidirectional text selections has to be reimplemented.
• Platform-native keyboard shortcuts have to be reimplemented.
• Platform-native input method editors (IMEs) have to be reimplemented.
• Undo and redo functionality has to be reimplemented.
• Accessibility features such as magnification following the caret or selection have to be reimplemented.
</p>

<p>
代わりに［
`input$e 要素 ／ `textarea$e 要素 ／ `contenteditable$a 属性
］を利用することが強く奨励される。
◎
This is a huge amount of work, and authors are most strongly encouraged to avoid doing any of it by instead using the input element, the textarea element, or the contenteditable attribute.
</p>

					</section>
					<section id="examples">
<h6 title="Examples">4.12.5.1.24. 例</h6>

<p class="trans-note">【
この節の内容は未訳／省略する。
】</p>

					</section>
				</section>
				<section id="the-imagebitmap-rendering-context">
<h5 title="The ImageBitmap rendering context">4.12.5.2. `ImageBitmap^I 描画~文脈</h5>

					<section id="introduction-6">
<h6 title="Introduction">4.12.5.2.1. 序論</h6>

<p>
`ImageBitmapRenderingContext$I は、
`ImageBitmap$I ~objの内容を表示するための低~overheadな~methodを供する，処理能指向な~interfaceである。
それは、
総~memory消費を抑制する転送-意味論を利用する。
また，
`CanvasRenderingContext2D$I の `drawImage()$2d ~methodと違って、
中間的な組成を避けることにより，処理能を効率化する。
◎
ImageBitmapRenderingContext is a performance-oriented interface that provides a low overhead method for displaying the contents of ImageBitmap objects. It uses transfer semantics to reduce overall memory consumption. It also streamlines performance by avoiding intermediate compositing, unlike the drawImage() method of CanvasRenderingContext2D.
</p>

<p>
~canvasの中に置く画像~資源を取得するために，
`img$e 要素を中間画像として利用すると、
例えば，同時に 2 つの復号された画像の複製
— `img$e 要素~用のそれ, ~canvasの裏画像~用のそれ —
が~memory内に存在する結果になる。
この~memory~costは、
極端に大きい画像を処するとき~~障害になり得る。
`ImageBitmapRenderingContext$I を利用すれば、
これを避けれる。
◎
Using an img element as an intermediate for getting an image resource into a canvas, for example, would result in two copies of the decoded image existing in memory at the same time: the img element's copy, and the one in the canvas's backing store. This memory cost can be prohibitive when dealing with extremely large images. This can be avoided by using ImageBitmapRenderingContext.
</p>

<div class="example">
<p>
`ImageBitmapRenderingContext$I を利用して、
画像を~CPUに効率的な仕方で，~memory内に ~JPEG形式に符号変換する方法：
◎
Using ImageBitmapRenderingContext, here is how to transcode an image to the JPEG format in a memory- and CPU-efficient way:
</p>

<pre class="lang-js">
createImageBitmap(%inputImageBlob).then(%image =&gt; {
  const %canvas = document.createElement('canvas');
  const %context = %canvas.getContext('bitmaprenderer');
  %context.transferFromImageBitmap(%image);

  %canvas.toBlob(outputJPEGBlob =&gt; {
    /* <span class="comment">
%outputJPEGBlob に対し何かする。
◎
Do something with outputJPEGBlob.
</span> */
  }, 'image/jpeg');
});
</pre>
</div>

					</section>
					<section id="the-imagebitmaprenderingcontext-interface">
<h6 title="The ImageBitmapRenderingContext interface">4.12.5.2.2. `ImageBitmapRenderingContext^I ~interface</h6>

<pre class="idl">
[Exposed=(Window,Worker)]
interface `ImageBitmapRenderingContext@I {
  readonly attribute (`HTMLCanvasElement$I or `OffscreenCanvas$I) `canvas$m;
  undefined `transferFromImageBitmap$m(`ImageBitmap$I? %bitmap);
};

dictionary `ImageBitmapRenderingContextSettings@I {
  boolean `~alpha1$mb = true;
};
</pre>

<dl class="domintro">
	<dt>%context = %canvas.`getContext$m('bitmaprenderer' [, { [ `~alpha1$mb: false ] } ] )</dt>
	<dd>
特定0の `canvas$e 要素 %canvas に永続的に束縛される `ImageBitmapRenderingContext$I ~objを返す。
◎
Returns an ImageBitmapRenderingContext object that is permanently bound to a particular canvas element.
</dd>
	<dd>
`~alpha1$mb が ~F に設定されている場合、
当の~canvasは，常に不透明に強制される。
◎
If the alpha setting is provided and set to false, then the canvas is forced to always be opaque.
</dd>

	<dt>%context.`canvas$2d</dt>
	<dd>
%context を束縛している `canvas$e 要素を返す。
◎
Returns the canvas element that the context is bound to.
</dd>

	<dt>%context.`transferFromImageBitmap(bitmap【！imageBitmap】)$m</dt>
	<dd>
下層の `~bitmap~data$を
%imageBitmap から %context へ転送する
— その~bitmapが %context を束縛している `canvas$e 要素の内容になる。
◎
Transfers the underlying bitmap data from imageBitmap to context, and the bitmap becomes the contents of the canvas element to which context is bound.
</dd>

	<dt>%context.`transferFromImageBitmap$m(null)</dt>
	<dd>
%context を束縛している `canvas$e 要素の内容を，次のような~bitmapに置換する
⇒
~sizeは要素の［
`width$a, `height$a
］内容~属性の`数量-値$で
`透明な黒$にされた~bitmap
◎
Replaces contents of the canvas element to which context is bound with a transparent black bitmap whose size corresponds to the width and height content attributes of the canvas element.
</dd>
</dl>


<div class="algo">
`canvas@2d
取得子~手続きは、
コレの作成-時に初期化された値を返す。
◎
The canvas attribute must return the value it was initialized to when the object was created.
</div>

<p>
各 `ImageBitmapRenderingContext$I ~obj %文脈 は、
次に挙げるものを有する：
◎
↓</p>

<dl class="def-list">
	<dt>`出力~bitmap@iBM</dt>
	<dd>
ある`~bitmap~data$への参照。
◎
An ImageBitmapRenderingContext object has an output bitmap, which is a reference to bitmap data.
</dd>

	<dt>`~bitmap~mode@iBM</dt>
	<dd>
［
`妥当@iBM ／
`~blank@iBM
］のいずれかを値にとり、
%文脈 の`出力~bitmap$iBMは［
`transferFromImageBitmap()$m を介して獲得した`~bitmap~data$を指す ／
既定の透明~bitmapである
］ことを指示する。
◎
An ImageBitmapRenderingContext object has a bitmap mode, which can be set to valid or blank. A value of valid indicates that the context's output bitmap refers to bitmap data that was acquired via transferFromImageBitmap(). A value blank indicates that the context's output bitmap is a default transparent bitmap.
</dd>

	<dt>`~alpha~flag@iBM</dt>
	<dd>
<p>
真偽値をとり、［
%文脈 を束縛している `canvas$e 要素
］が その内容として次を利用していることを指示する
— %~bitmap は %文脈 の`出力~bitmap$iBMを表すとするとき：
</p>
		<ul class="switch">
			<li>
~T の場合
⇒
%~bitmap
</li>
			<li>
<p>
~F の場合
⇒
［
%~bitmap と同じ~sizeの，全~画素が`不透明な黒$にされた~bitmap
］に［
`source-over$v 組成~演算子 `COMPOSITE$r
］を利用して %~bitmap を組成した結果
</p>

<p class="note">注記：
この組成する段は、［
他の手段で もっと効率的に等価な結果が得せる
］ならば，省かれるべきである。
</p>
			</li>
		</ul>
◎
An ImageBitmapRenderingContext object also has an alpha flag, which can be set to true or false.＼
When an ImageBitmapRenderingContext object has its alpha flag set to false, the contents of the canvas element to which the context is bound are obtained by compositing the context's output bitmap onto an opaque black bitmap of the same size using the source-over compositing operator.＼
If the alpha flag is set to true, then the output bitmap is used as the contents of the canvas element to which the context is bound. [COMPOSITE]
◎
The step of compositing over an opaque black bitmap ought to be elided whenever equivalent results can be obtained more efficiently by other means.
</dd>
</dl>

<hr>

<div class="algo">
<p>
`~ImageBitmapRenderingContextの出力~bitmapを設定する@
~algoは、
所与の
( `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:
</p>

<ol>
	<li>
<p>
~IF［
%bitmap ~EQ ε
］：
◎
If a bitmap argument was not provided, then:
</p>
		<ol>
			<li>
%文脈 の`~bitmap~mode$iBM ~SET `~blank$iBM
◎
Set context's bitmap mode to blank.
</li>
			<li>
%canvas ~LET %文脈 を束縛している `canvas$e 要素
◎
Let canvas be the canvas element to which context is bound.
</li>
			<li>
%文脈 の`出力~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.
</li>
			<li>
%文脈 の`出力~bitmap$iBMの`生成元cleanか$ ~SET ~T
◎
Set the output bitmap's origin-clean flag to true.
</li>
		</ol>
	</li>
	<li>
<p>
~ELSE：
◎
If a bitmap argument was provided, then:
</p>
		<ol>
			<li>
%文脈 の`~bitmap~mode$iBM ~SET `妥当$iBM
◎
Set context's bitmap mode to valid.
</li>
			<li>
<p>
%文脈 の`出力~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.
</p>

<p class="note">注記：
%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.
</p>
			</li>
		</ol>
	</li>
</ol>
</div>

<hr>

<div class="algo">
<p>
`~ImageBitmapRenderingContextを作成する@
~algoは、
所与の
( %~target, %~option群 )
に対し：
◎
The ImageBitmapRenderingContext creation algorithm, which is passed a target and options, consists of running these steps:
</p>

<ol>
	<li>
%設定群 ~LET `~IDL値に変換する$( %~option群, `ImageBitmapRenderingContextSettings$I )
（例外投出あり）
◎
Let settings be the result of converting options to the dictionary type ImageBitmapRenderingContextSettings. (This can throw an exception.)
</li>
	<li>
%文脈 ~LET `新たな~obj$( `ImageBitmapRenderingContext$I )
◎
Let context be a new ImageBitmapRenderingContext object.
</li>
	<li>
%文脈 の `canvas$2d 属性 ~SET %~target に初期化する
◎
Initialize context's canvas attribute to point to target.
</li>
	<li>
%文脈 の`出力~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).
</li>
	<li>
`~ImageBitmapRenderingContextの出力~bitmapを設定する$( %文脈 )
◎
Run the steps to set an ImageBitmapRenderingContext's output bitmap with context.
</li>
	<li>
%文脈 の`~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.
</li>
	<li>
~RET %文脈
◎
Return context.
</li>
</ol>
</div>

<hr>

<div class="algo">
<p>
`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.
</p>
<ol>
	<li>
~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.
</li>
	<li>
~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.
</li>
	<li>
`~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.
</li>
	<li>
%bitmap . `Detached$sl ~SET ~T
◎
Set the value of bitmap's [[Detached]] internal slot to true.
</li>
	<li>
%bitmap の`~bitmap~data$ ~SET ε
◎
Unset bitmap's bitmap data.
</li>
</ol>
</div>

					</section>
				</section>
				<section id="the-offscreencanvas-interface">
<h5 title="The OffscreenCanvas interface">4.12.5.3. `OffscreenCanvas^I ~interface</h5>

<pre class="idl">
typedef (`OffscreenCanvasRenderingContext2D$I or `ImageBitmapRenderingContext$I or `WebGLRenderingContext$I or `WebGL2RenderingContext$I or `GPUCanvasContext$I) `OffscreenRenderingContext@I;

dictionary `ImageEncodeOptions@I {
  DOMString `type@mb = "image/png";
  ~urdb `quality@mb;
};

enum `OffscreenRenderingContextId@I { `2d$l, `bitmaprenderer$l, `webgl$l, `webgl2$l, `webgpu$l };

[Exposed=(Window,Worker), `Transferable$]
interface `OffscreenCanvas@I : `EventTarget$I {
  `constructor＠#dom-offscreencanvas$([EnforceRange] unsigned long long %width, [EnforceRange] unsigned long long %height);

  attribute [EnforceRange] unsigned long long `width$oC;
  attribute [EnforceRange] unsigned long long `height$oC;

  `OffscreenRenderingContext$I? `getContext$oC(`OffscreenRenderingContextId$I %contextId, optional any %options = null);
  `ImageBitmap$I `transferToImageBitmap$oC();
  `Promise$&lt;`Blob$I&gt; `convertToBlob$oC(optional `ImageEncodeOptions$I %options = {});

  attribute `EventHandler$I `oncontextlost$m;
  attribute `EventHandler$I `oncontextrestored$m;
};
</pre>

<p class="note">注記：
`OffscreenCanvas$I は `EventTarget$I であるので、［
`OffscreenCanvasRenderingContext2D$I, ~WebGL
］どちらも，
`OffscreenCanvas^I に向けて~eventを発火し得る
— 前者は［
`contextlost$et, `contextrestored$et
］を発火でき，
後者は［
`webglcontextlost^et, `webglcontextrestored^et
］を発火できる。
`WEBGL$r
◎
OffscreenCanvas is an EventTarget, so both OffscreenCanvasRenderingContext2D and WebGL can fire events at it. OffscreenCanvasRenderingContext2D can fire contextlost and contextrestored, and WebGL can fire webglcontextlost and webglcontextrestored. [WEBGL]
</p>

<p>
`OffscreenCanvas$I ~objは、
描画~文脈を作成するために利用される。
それは、
`HTMLCanvasElement$I によく似るが，
~DOMには接続されない。
これにより、
~canvas描画~文脈を`~worker$内で利用するのもアリになる。
◎
OffscreenCanvas objects are used to create rendering contexts, much like an HTMLCanvasElement, but with no connection to the DOM. This makes it possible to use canvas rendering contexts in workers.
</p>

<p>
各 `OffscreenCanvas$I ~obj %O は、
`~placeholder~canvas要素@
への弱い参照を保持することもある
— それは概して、
~DOM内にある要素であって，
%O がそこに埋込まれる内容を供することになる。
%O の`~bitmap$ofCは、
%O に`関連な~agent$の`~event~loop$aG内で`描画を更新する$一部として，`~placeholder~canvas要素$に~pushされる。
◎
An OffscreenCanvas object may hold a weak reference to a placeholder canvas element, which is typically in the DOM, whose embedded content is provided by the OffscreenCanvas object. The bitmap of the OffscreenCanvas object is pushed to the placeholder canvas element as part of the OffscreenCanvas's relevant agent's event loop's update the rendering steps.
</p>

<dl class="domintro">
	<dt>%offscreenCanvas = `new OffscreenCanvas(width, height)$oC</dt>
	<dd>
新たな `OffscreenCanvas$I ~objを返す
— その`~placeholder~canvas要素$は ε にされ，その~bitmapの~sizeは %width, %height 引数から決定される。
◎
Returns a new OffscreenCanvas object that is not linked to a placeholder canvas element, and whose bitmap's size is determined by the width and height arguments.
</dd>

	<dt>%context = %offscreenCanvas.`getContext(contextId [, options ])$oC</dt>
	<dd>
`OffscreenCanvas$I ~obj上に描くための~APIを公開する~objを返す。
%contextId は、
欲される~APIを［
`2d$l,
`bitmaprenderer$l,
`webgl$l,
`webgl2$l,
`webgpu$l
］のいずれかとして指定する。
%options は、
その~APIにより取扱われる。
◎
Returns an object that exposes an API for drawing on the OffscreenCanvas object. contextId specifies the desired API: "2d", "bitmaprenderer", "webgl", "webgl2", or "webgpu". options is handled by that API.
</dd>
	<dd>
この仕様は、
下にて `2d$cC 文脈を定義する
— それは、
`canvas$e 要素から作成される `2d$l 文脈に類似するが別物である。
`WEBGL$r 仕様は、［
`webgl$l, `webgl2$l
］文脈を定義する。
`WEBGPU$r 仕様は、
`webgpu$l 文脈を定義する。
◎
This specification defines the "2d" context below, which is similar but distinct from the "2d" context that is created from a canvas element. The WebGL specifications define the "webgl" and "webgl2" contexts. WebGPU defines the "webgpu" context. [WEBGL] [WEBGPU]
</dd>
	<dd>
当の~canvasが すでに別種の文脈で初期化されている場合
（例： `webgl$l 文脈を取得してから `2d$l 文脈を取得しようと試行したとき）、
~NULLを返す。
◎
Returns null if the canvas has already been initialized with another context type (e.g., trying to get a "2d" context after getting a "webgl" context).
</dd>
</dl>

<p>
各 `OffscreenCanvas$I ~objは、
その作成-時に初期化される内部的な
`~bitmap@ofC
を有する。
その［
横幅／縦幅
］は、
~objの［
`width$oC ／ `height$oC
］属性の値に等しくされる。
この~bitmapを成す全~画素は、
初期~時は`透明な黒$にされる。
◎
An OffscreenCanvas object has an internal bitmap that is initialized when the object is created. The width and height of the bitmap are equal to the values of the width and height attributes of the OffscreenCanvas object. Initially, all the bitmap's pixels are transparent black.
</p>

<p>
各 `OffscreenCanvas$I ~objは、
`継承した言語@ofC
,
`継承した方向@ofC
を内部的に有する
— これらは、
当の~objの作成-時に設定される。
◎
An OffscreenCanvas object has an internal inherited language and inherited direction set when the OffscreenCanvas is created.
</p>

<p>
各 `OffscreenCanvas$I ~objは、
ある描画~文脈を束縛し得る。
そのような描画~文脈の有無, および その種類を追跡し続けるため、
~objは
`文脈~mode@ofC
を有する
— 初期~時は，
そのような描画~文脈は無いことを表す
`none@oM
］をとるとする。
それは、
この仕様に定義される~algoにより，次のいずれかに変更され得る
⇒＃
`2d@oM,
`bitmaprenderer@oM,
`webgl@oM,
`webgl2@oM,
`webgpu@oM,
`detached@oM
◎
An OffscreenCanvas object can have a rendering context bound to it. Initially, it does not have a bound rendering context. To keep track of whether it has a rendering context or not, and what kind of rendering context it is, an OffscreenCanvas object also has a context mode, which is initially none but can be changed to either 2d, bitmaprenderer, webgl, webgl2, webgpu, or detached by algorithms defined in this specification.
</p>

<div class="algo">
<p>
`new OffscreenCanvas(width, height)@oC
構築子~手続きは：
◎
The new OffscreenCanvas(width, height) constructor steps are:
</p>
<ol>
	<li>
コレの`~bitmap$ofC ~SET 次のように初期化された矩形な配列
⇒＃
全~画素が`透明な黒$,
横幅 ~SET %width,
縦幅 ~SET %height
◎
Initialize the bitmap of this to a rectangular array of transparent black pixels of the dimensions specified by width and height.
</li>
	<li>
コレの `width$oC 属性 ~SET %width
◎
Initialize the width of this to width.
</li>
	<li>
コレの `height$oC 属性 ~SET %height
◎
Initialize the height of this to height.
</li>
	<li>
コレの`継承した言語$ofC ~SET `明示的に未知$i
◎
Set this's inherited language to explicitly unknown.
</li>
	<li>
コレの`継承した方向$ofC ~SET `ltr^l
◎
Set this's inherited direction to "ltr".
</li>
	<li>
%大域~obj ~LET コレに`関連な大域~obj$
◎
Let global be the relevant global object of this.
</li>
	<li>
<p>
~IF［
%大域~obj は `Window$I ~objである
］：
◎
If global is a Window object:
</p>
		<ol>
			<li>
%要素 ~LET %大域~obj に`結付けられた文書$の`文書~要素$
◎
Let element be the document element of global's associated Document.
</li>
			<li>
~IF［
%要素 ~NEQ ~NULL
］
⇒
コレの
⇒＃
`継承した言語$ofC ~SET %要素 の`言語$
`継承した方向$ofC ~SET %要素 の`方向性$
◎
If element is not null:
• Set the inherited language of this to element's language.
• Set the inherited direction of this to element's directionality.
</li>
		</ol>
	</li>
</ol>
</div>

<p>
`OffscreenCanvas$I ~objは、
`転送-可能$である：
◎
OffscreenCanvas objects are transferable.＼
</p>
<ul>
	<li class="algo">
<p>
その`転送-手続き$は、
所与の
( %値, %~data保持体 )
に対し：
◎
Their transfer steps, given value and dataHolder, are as follows:
</p>
		<ol>
			<li>
~IF［
%値 の`文脈~mode$ofC ~NEQ `none$oM
］
⇒
~THROW `InvalidStateError$E
◎
If value's context mode is not equal to none, then throw an "InvalidStateError" DOMException.
</li>
			<li>
%値 の`文脈~mode$ofC ~SET `detached$oM
◎
Set value's context mode to detached.
</li>
			<li>
( %横幅, %縦幅 ) ~LET %値 の`~bitmap$ofCの寸法
◎
Let width and height be the dimensions of value's bitmap.
◎
↓ Let language and direction be the values of value's inherited language and inherited direction.
</li>
			<li>
%値 の`~bitmap$ofC ~SET ε
◎
Unset value's bitmap.
</li>
			<li>
%~data保持体 . `Width^sl ~SET %横幅,
◎
Set dataHolder.[[Width]] to width＼
</li>
			<li>
%~data保持体 . `Height^sl ~SET %縦幅
◎
and dataHolder.[[Height]] to height.
</li>
			<li>
%~data保持体 . `Language^sl ~SET %値 の`継承した言語$ofC
◎
Set dataHolder.[[Language]] to language＼
</li>
			<li>
%~data保持体 . `Direction^sl ~SET %値 の`継承した方向$ofC
◎
and dataHolder.[[Direction]] to direction.
</li>
			<li>
%~data保持体 . `PlaceholderCanvas^sl ~SET ［
%値 の`~placeholder~canvas要素$ ~NEQ ε ならば それを指す弱い参照 ／
~ELSE_ ~NULL
］
◎
Set dataHolder.[[PlaceholderCanvas]] to be a weak reference to value's placeholder canvas element, if value has one, or null if it does not.
</li>
		</ol>
	</li>
	<li class="algo">
<p>
その`転送-受信-時の手続き$は、
所与の
( %~data保持体, %値 )
に対し：
◎
Their transfer-receiving steps, given dataHolder and value, are:
</p>
		<ol>
			<li>
%値 の`~bitmap$ofC ~SET 次のように初期化された矩形な配列
⇒＃
全~画素が`透明な黒$,
横幅 ~SET %~data保持体 . `Width^sl,
縦幅 ~SET  %~data保持体 . `Height^sl
◎
Initialize value's bitmap to a rectangular array of transparent black pixels with width given by dataHolder.[[Width]] and height given by dataHolder.[[Height]].
</li>
			<li>
%値 の
⇒＃
`継承した言語$ofC ~SET %~data保持体 . `Language^sl,
`継承した方向$ofC ~SET %~data保持体 . `Direction^sl
◎
Set value's inherited language to dataHolder.[[Language]] and inherited direction to dataHolder.[[Direction]].
</li>
			<li>
~IF［
%~data保持体 . `PlaceholderCanvas^sl ~NEQ ~NULL
］
⇒
%値 の`~placeholder~canvas要素$ ~SET %~data保持体 . `PlaceholderCanvas^sl
（弱い参照の意味論も保守し続ける。）
◎
If dataHolder.[[PlaceholderCanvas]] is not null, set value's placeholder canvas element to dataHolder.[[PlaceholderCanvas]] (while maintaining the weak reference semantics).
</li>
		</ol>
	</li>
</ul>

<div class="algo">
<p>
`getContext(contextId, options)@oC
~method手続きは：
◎
The getContext(contextId, options) method of an OffscreenCanvas object, when invoked, must run these steps:
</p>
<ol>
	<li>
~IF［
%options は `object$c でない
］
⇒
%options ~SET ~NULL
◎
If options is not an object, then set options to null.
</li>
	<li>
%options ~SET `~JS値に変換する$( %options )
◎
Set options to the result of converting options to a JavaScript value.
</li>
	<li>
<p>
( コレの`文脈~mode$ofC, %contextId )
に応じて
⇒
~GOTO 次の表tの該当する~cellに与えられる~label：
</p>

<table><thead>
<tr><th rowspan="2" scope="col">`文脈~mode$ofC
<th colspan="4">%contextId

<tr>
<th>`2d@l
<th>`bitmaprenderer@l
<th>`webgl@l／`webgl2@l
<th>`webgpu@l
<tbody>

<tr><th>`none$oM
<td>`新~2D^i
<td>`新~offscreen~2D^i
<td>`新~WebGL^i
<td>`新~WebGPU^i

<tr><th>`2d$oM
<td>`前回と同じ^i
<td>`~NULL^i
<td>`~NULL^i
<td>`~NULL^i

<tr><th>`bitmaprenderer$oM
<td>`~NULL^i
<td>`前回と同じ^i
<td>`~NULL^i
<td>`~NULL^i

<tr><th>`webgl$oM／`webgl2$oM
<td>`~NULL^i
<td>`~NULL^i
<td>`前回と同じ^i
<td>`~NULL^i

<tr><th>`webgpu$oM
<td>`~NULL^i
<td>`~NULL^i
<td>`~NULL^i
<td>`前回と同じ^i

<tr><th>`detached$oM
<td>`投出^i
<td>`投出^i
<td>`投出^i
<td>`投出^i
</table>

		<dl class="switch">
			<dt>`投出^i</dt>
			<dd>
~THROW `InvalidStateError$E
</dd>

			<dt>`~NULL^i</dt>
			<dd>
~RET ~NULL
</dd>

			<dt>`前回と同じ^i</dt>
			<dd>
				<ol>
					<li>
~Assert：
［
コレ上でこの~methodが呼出されたのは初回でない
］~AND［
%contextId ~EQ 前回に呼出されたときに渡された %contextId 引数
］
</li>
					<li>
~RET この~methodが最後に呼出されたとき返した~obj
</li>
				</ol>
			</dd>

			<dt>`新~2D^i</dt>
			<dd>
				<ol>
					<li>
%文脈 ~LET `~offscreen~2D文脈を作成する$( コレ, %options )
</li>
					<li>
コレの`文脈~mode$ofC ~SET `2d$oM
</li>
					<li>
~RET %文脈 （ `OffscreenCanvasRenderingContext2D$I ~obj）
</li>
				</ol>
			</dd>

			<dt>`新~offscreen~2D^i</dt>
			<dd>
				<ol>
					<li>
%文脈 ~LET `~ImageBitmapRenderingContextを作成する$( コレ, %options )
</li>
					<li>
コレの`文脈~mode$ofC ~SET `bitmaprenderer$oM
</li>
					<li>
~RET %文脈 （ `ImageBitmapRenderingContext$I ~obj）
</li>
				</ol>
			</dd>

			<dt>`新~WebGL^i</dt>
			<dd>
				<ol>
					<li>
%文脈 ~LET 
`WEBGL$r `§ Context Creation＠~WEBGL/2.0/#2.1$
の指示書きに従って得した結果
</li>
					<li>
~IF［
%文脈 ~NEQ ~NULL
］
⇒
コレの`文脈~mode$ofC ~SET %文脈 に応じて
⇒＃
`WebGLRenderingContext$I ならば `webgl$oM ／
`WebGL2RenderingContext$I ならば `webgl2$oM
</li>
					<li>
~RET %文脈
</li>
				</ol>
			</dd>

			<dt>`新~WebGPU^i</dt>
			<dd>
				<ol>
					<li>
%文脈 ~LET
`WEBGPU$r `§ Canvas Rendering＠~WEBGPU#canvas-rendering$
の指示書きに従って得した結果
</li>
					<li>
~IF［
%文脈 ~NEQ ~NULL 【 %文脈 は `GPUCanvasContext$I である】
］
⇒
コレの`文脈~mode$ofC ~SET `webgpu$oM
</li>
					<li>
~RET %文脈
</li>
				</ol>
			</dd>
		</dl>
◎
Run the steps in the cell of the following table whose column header matches this OffscreenCanvas object's context mode and whose row header matches contextId:
◎
｜none｜2d｜bitmaprenderer｜webgl or webgl2｜webgpu｜detached
◎
"2d"｜
• Let context be the result of running the offscreen 2D context creation algorithm given this and options.
• Set this's context mode to 2d.
• Return context.
｜＼
Return the same object as was returned the last time the method was invoked with this same first argument.｜Return null.｜Return null.｜Return null.｜Throw an "InvalidStateError" DOMException.
◎
"bitmaprenderer"｜
• Let context be the result of running the ImageBitmapRenderingContext creation algorithm given this and options.
• Set this's context mode to bitmaprenderer.
• Return context.
｜＼
Return null.｜Return the same object as was returned the last time the method was invoked with this same first argument.｜Return null.｜Return null.｜Throw an "InvalidStateError" DOMException.
◎
"webgl" or "webgl2"｜
• Let context be the result of following the instructions given in the WebGL specifications' Context Creation sections. [WEBGL]
• If context is null, then return null; otherwise set this's context mode to webgl or webgl2.
• Return context.
｜＼
Return null.｜Return null.｜Return the same value as was returned the last time the method was invoked with this same first argument.｜Return null.｜Throw an "InvalidStateError" DOMException.
◎
"webgpu"｜
• Let context be the result of following the instructions given in WebGPU's Canvas Rendering section. [WEBGPU]
• If context is null, then return null; otherwise set this's context mode to webgpu.
• Return context.
｜＼
Return null.｜Return null.｜Return null.｜Return the same value as was returned the last time the method was invoked with this same first argument.｜Throw an "InvalidStateError" DOMException.
</li>
</ol>
</div>

<hr>

<dl class="domintro">
	<dt>%offscreenCanvas.`width$oC [ = %value ]</dt>
	<dt>%offscreenCanvas.`height$oC [ = %value ]</dt>
	<dd>
これらの属性は、
`OffscreenCanvas$I ~objの`~bitmap$ofCの寸法を返す。
◎
These attributes return the dimensions of the OffscreenCanvas object's bitmap.
</dd>
	<dd>
設定して、`~bitmap$ofC を［
指定された寸法の`透明な黒$にされた，新たな~bitmap
］に置換できる
（実質的に~sizeし直す）。
◎
They can be set, to replace the bitmap with a new, transparent black bitmap of the specified dimensions (effectively resizing it).
</dd>
</dl>

<div class="algo">
<p>
［
`width@oC
／
`height@oC
］設定子~手続きは：
◎
If either the width or height attributes of an OffscreenCanvas object are set (to a new value or to the same value as before)＼
</p>
<ol>
	<li>
<p>
~IF［
コレの`文脈~mode$ofC ~EQ `2d$oM
］：
</p>
		<ol>
			<li>
`描画~文脈を既定の状態に設定し直す$( コレの描画~文脈 )
</li>
			<li>
コレの`~bitmap$ofCを［
`width$oC, `height$oC
］属性の新たな値に~sizeし直す
</li>
		</ol>
◎
and the OffscreenCanvas object's context mode is 2d, then reset the rendering context to its default state and resize the OffscreenCanvas object's bitmap to the new values of the width and height attributes.
</li>
	<li>
~ELSE
⇒
［
`webgl$l ／ `webgl2$l ／ `webgpu$l
］文脈~用に~sizeし直す挙動は、［
`WEBGL$r ／ `WEBGL$r ／ `WEBGPU$r
］仕様に定義される。
◎
The resizing behavior for "webgl" and "webgl2" contexts is defined in the WebGL specifications. [WEBGL]
◎
The resizing behavior for "webgpu" context is defined in WebGPU. [WEBGPU]
</li>
</ol>

<p class="note">注記：
寸法が変更された `OffscreenCanvas$I ~obj %O が`~placeholder~canvas要素$ %要素 を有する場合、
%要素 の`生来な~size$が更新されるのは，
%O に`関連な~agent$の`~event~loop$aG内で`描画を更新する$間に限られる。
◎
If an OffscreenCanvas object whose dimensions were changed has a placeholder canvas element, then the placeholder canvas element's natural size will only be updated during the OffscreenCanvas's relevant agent's event loop's update the rendering steps.
</p>
</div>

<dl class="domintro">
	<dt>%promise = %offscreenCanvas.`convertToBlob( [options])$oC</dt>
	<dd>
次で充足されることになる~promiseを返す
⇒
`OffscreenCanvas$I ~obj内の画像を包含している~fileを表現する，新たな `Blob$I ~obj
◎
Returns a promise that will fulfill with a new Blob object representing a file containing the image in the OffscreenCanvas object.
</dd>
	<dd>
%options 辞書~引数は、
供されたなら，［
作成される画像~fileを符号化するときの~option
］を制御する。
その `type$mb ~member【！field】は、
~file形式を指定する。
この~member用の既定の値は `image/png$mt 型とする
— この型は、
要請された型が~supportされない場合にも利用される。
画像~形式が可変~品質を~supportする場合
（ `image/jpeg$mt など）、
`quality$mb ~memberは，結果の画像に欲される品質~levelを 0.0 以上 1.0 以下の数で指示する。
◎
The argument, if provided, is a dictionary that controls the encoding options of the image file to be created. The type field specifies the file format and has a default value of "image/png"; that type is also used if the requested type isn't supported. If the image format supports variable quality (such as "image/jpeg"), then the quality field is a number in the range 0.0 to 1.0 inclusive indicating the desired quality level for the resulting image.
</dd>

	<dt>%canvas.`transferToImageBitmap()$oC</dt>
	<dd>
`OffscreenCanvas$I ~obj内の画像を伴う，新たな `ImageBitmap$I ~objを返した上で、
`OffscreenCanvas$I ~obj内の画像は新たな~blank画像に置換する。
◎
Returns a newly created ImageBitmap object with the image in the OffscreenCanvas object. The image in the OffscreenCanvas object is replaced with a new blank image.
</dd>
</dl>

<div class="algo">
<p>
`convertToBlob(options)@oC
~method手続きは：
◎
The convertToBlob(options) method steps are:
</p>
<ol>
	<li>
~IF［
コレ . `Detached$sl ~EQ ~T
］
⇒
~RET `却下される~promise$( `InvalidStateError$E 例外 )
◎
If the value of this's [[Detached]] internal slot is true, then return a promise rejected with an "InvalidStateError" DOMException.
</li>
	<li>
~IF［
コレの`文脈~mode$ofC ~EQ `2d$oM
］~AND［
コレの描画~文脈【！＊】の`出力~bitmap$2Dの`生成元cleanか$ ~EQ ~F
］
⇒
~RET `却下される~promise$( `SecurityError$E 例外 )
◎
If this's context mode is 2d and the rendering context's output bitmap's origin-clean flag is set to false, then return a promise rejected with a "SecurityError" DOMException.
</li>
	<li>
~IF［
コレの`~bitmap$ofCを成す画素は無い
（すなわち、
横, 縦いずれかの寸法は 0 ）
］
⇒
~RET `却下される~promise$( `IndexSizeError$E 例外 )
◎
If this's bitmap has no pixels (i.e., either its horizontal dimension or its vertical dimension is zero), then return a promise rejected with an "IndexSizeError" DOMException.
</li>
	<li>
%~bitmap ~LET コレの`~bitmap$ofCの複製
◎
Let bitmap be a copy of this's bitmap.
</li>
	<li>
%結果 ~LET `新たな~promise$
◎
Let result be a new promise object.
</li>
	<li>
%大域~obj ~LET コレに`関連な大域~obj$
◎
Let global be this's relevant global object.
</li>
	<li>
<p>
この段は`並列的$に走らす：
◎
Run these steps in parallel:
</p>

		<ol>
			<li>
%file ~LET `~bitmapを~fileとして直列化する$( %~bitmap, %options[ "`type$mb" ], %options[ "`quality$mb" ] )
◎
Let file be a serialization of bitmap as a file, with options's type and quality if present.
</li>
			<li>
<p>
`大域~taskを~queueする$( `~canvas~blob直列化~task~source$, %大域~obj, 次の手続き )
◎
Queue a global task on the canvas blob serialization task source given global to run these steps:
</p>

<div class="algo">
<p>
手続きは：
◎
↑</p>
				<ol>
					<li>
~IF［
%file ~NEQ ~NULL
］
⇒
`~promiseを却下する$( %結果, `EncodingError$E 例外 )
◎
If file is null, then reject result with an "EncodingError" DOMException.
</li>
					<li>
<p>
~ELSE：
</p>
						<ol>
							<li>
%~blob ~LET `新たな~obj$( `Blob$I, %大域~obj に`関連な~realm$ )
</li>
							<li>
%~blob を %file を表現するよう初期化する
`FILEAPI$r
</li>
							<li>
`~promiseを解決する$( %結果, %~blob )
</li>
						</ol>
◎
Otherwise, resolve result with a new Blob object, created in global's relevant realm, representing file. [FILEAPI]
</li>
				</ol>
</div>
			</li>
		</ol>
	</li>
	<li>
~RET %結果
◎
Return result.
</li>
</ol>
</div>

<div class="algo">
<p>
`transferToImageBitmap()@oC
~method手続きは：
◎
The transferToImageBitmap() method, when invoked, must run the following steps:
</p>
<ol>
	<li>
~IF［
コレ . `Detached$sl ~EQ ~T
］
⇒
~THROW `InvalidStateError$E
◎
If the value of this OffscreenCanvas object's [[Detached]] internal slot is set to true, then throw an "InvalidStateError" DOMException.
</li>
	<li>
~IF［
コレの`文脈~mode$ofC ~EQ `none$oM
］
⇒
~THROW `InvalidStateError$E
◎
If this OffscreenCanvas object's context mode is set to none, then throw an "InvalidStateError" DOMException.
</li>
	<li>
%image ~LET `新たな~obj$( `ImageBitmap$I )
◎
Let image be a newly created ImageBitmap object＼
</li>
	<li>
%image を［
コレの`~bitmap$ofCと同じ下層の~bitmap~data
］を参照するよう初期化する
◎
that references the same underlying bitmap data as this OffscreenCanvas object's bitmap.
</li>
	<li>
<p>
コレの`~bitmap$ofC ~SET 次を伴う新たな~bitmapへの参照【！＊】：
◎
Set this OffscreenCanvas object's bitmap to reference a newly created bitmap＼
</p>
		<ul>
			<li>
寸法, 色~空間は %image のそれらと同じ
◎
of the same dimensions and color space as the previous bitmap,＼
</li>
			<li>
その全~画素を当の描画~文脈の`~alpha$2Dに応じて［
~T ならば`透明な黒$／
~F ならば`不透明な黒$
］に初期化する
◎
and with its pixels initialized to transparent black, or opaque black if the rendering context's alpha is false.
</li>
		</ul>

<p class="note">注記：
これは、
この `OffscreenCanvas$I の描画~文脈は `WebGLRenderingContext$I である場合，
`preserveDrawingBuffer$m の値による効果は無いことを意味する。
`WEBGL$r
◎
This means that if the rendering context of this OffscreenCanvas is a WebGLRenderingContext, the value of preserveDrawingBuffer will have no effect. [WEBGL]
</p>
	</li>
	<li>
~RET %image
◎
Return image.
</li>
</ol>
</div>

<p>
`OffscreenCanvas$I ~interfaceを実装しているすべての~objは、
以下に挙げる`~event~handler$, および
対応する`~event~handler~event型$を
`~event~handler~IDL属性$として~supportするモノトスル：
◎
The following are the event handlers (and their corresponding event handler event types) that must be supported, as event handler IDL attributes, by all objects implementing the OffscreenCanvas interface:
</p>

<table><thead>
<tr><th>`~event~handler$
<th>`~event~handler~event型$
<tbody>

<tr><td>`oncontextlost@m
<td>`contextlost$et

<tr><td>`oncontextrestored@m
<td>`contextrestored$et
</table>

					<section id="the-offscreen-2d-rendering-context">
<h6 title="The offscreen 2D rendering context">4.12.5.3.1. ~offscreen~2D描画~文脈</h6>

<pre class="idl">
[Exposed=(Window,Worker)]
interface `OffscreenCanvasRenderingContext2D@I {
  readonly attribute `OffscreenCanvas$I `canvas$o2d;
};

`OffscreenCanvasRenderingContext2D$I includes `CanvasSettings$I;
`OffscreenCanvasRenderingContext2D$I includes `CanvasState$I;
`OffscreenCanvasRenderingContext2D$I includes `CanvasTransform$I;
`OffscreenCanvasRenderingContext2D$I includes `CanvasCompositing$I;
`OffscreenCanvasRenderingContext2D$I includes `CanvasImageSmoothing$I;
`OffscreenCanvasRenderingContext2D$I includes `CanvasFillStrokeStyles$I;
`OffscreenCanvasRenderingContext2D$I includes `CanvasShadowStyles$I;
`OffscreenCanvasRenderingContext2D$I includes `CanvasFilters$I;
`OffscreenCanvasRenderingContext2D$I includes `CanvasRect$I;
`OffscreenCanvasRenderingContext2D$I includes `CanvasDrawPath$I;
`OffscreenCanvasRenderingContext2D$I includes `CanvasText$I;
`OffscreenCanvasRenderingContext2D$I includes `CanvasDrawImage$I;
`OffscreenCanvasRenderingContext2D$I includes `CanvasImageData$I;
`OffscreenCanvasRenderingContext2D$I includes `CanvasPathDrawingStyles$I;
`OffscreenCanvasRenderingContext2D$I includes `CanvasTextDrawingStyles$I;
`OffscreenCanvasRenderingContext2D$I includes `CanvasPath$I;
</pre>

<p>
`OffscreenCanvasRenderingContext2D$I ~objは、
`OffscreenCanvas$I ~objの`~bitmap$ofCを描くための描画~文脈である。
それは， `CanvasRenderingContext2D$I ~objに類似するが、
次に挙げる相違点がある：
◎
The OffscreenCanvasRenderingContext2D object is a rendering context for drawing to the bitmap of an OffscreenCanvas object. It is similar to the CanvasRenderingContext2D object, with the following differences:
</p>
<ul>
	<li>
`~UI特能＠#canvasuserinterface$は~supportしない。
◎
there is no support for user interface features;
</li>
	<li>
その `canvas$o2d 属性は、
`canvas$e 要素ではなく，
`OffscreenCanvas$I ~objを指す。
◎
its canvas attribute refers to an OffscreenCanvas object rather than a canvas element;
</li>
</ul>

<p>
各 `OffscreenCanvasRenderingContext2D$I ~obj %O は、
その
`~OffscreenCanvas~obj@
と称される，ある `OffscreenCanvas$I ~objから作成される。
◎
An OffscreenCanvasRenderingContext2D object has an associated OffscreenCanvas object, which is the OffscreenCanvas object from which the OffscreenCanvasRenderingContext2D object was created.
</p>

<dl class="domintro">

	<dt>%offscreenCanvas = %offscreenCanvasRenderingContext2D.`canvas$o2d</dt>
	<dd>
`~OffscreenCanvas~obj$を返す。
◎
Returns the associated OffscreenCanvas object.
</dd>
</dl>

<div class="algo">
<p>
`~offscreen~2D文脈を作成する@
~algoは、
所与の
( `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.
</p>

<ol>
	<li>
%設定群 ~LET `~IDL値に変換する$( %~option群, `CanvasRenderingContext2DSettings$I )
（例外投出あり）
◎
Let settings be the result of converting arg to the dictionary type CanvasRenderingContext2DSettings. (This can throw an exception.)
</li>
	<li>
%文脈 ~LET `新たな~obj$( `OffscreenCanvasRenderingContext2D$I )
◎
Let context be a new OffscreenCanvasRenderingContext2D object.
</li>
	<li>
%文脈 の`~OffscreenCanvas~obj$ ~SET %~target
◎
Set context's associated OffscreenCanvas object to target.
</li>
	<li>
`~canvas設定群の出力~bitmapを初期化する$( %文脈, %設定群 )
◎
Run the canvas settings output bitmap initialization algorithm, given context and settings.
</li>
	<li>
<p>
%文脈 の`出力~bitmap$2D ~LET 次のようにされた新たな~bitmap：
</p>
		<ul>
			<li>
寸法は %~target の ( `width$oC, `height$oC ) 属性で指定される
</li>
			<li>
全~画素を %文脈 の`~alpha$2Dに応じて［
~T ならば`透明な黒$／
~F ならば`不透明な黒$
］に初期化する
</li>
		</ul>
◎
Set context's output 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 output bitmap to transparent black. Otherwise, initialize the pixels to opaque black.
</li>
	<li>
%~target の~bitmap ~SET %文脈 の`出力~bitmap$2D
（~bitmapを %文脈 と共有する。）
◎
↑</li>
	<li>
~RET %文脈
◎
Return context.
</li>
</ol>
</div>

<p class="note">注記：
［
表示~内の`~placeholder~canvas要素$の内容を更新する目的
］においては、
実装には，［
`~window~event~loop$の~graphic更新-手続きを短絡する
］ことが奨励される。
このことは，例えば、
当の~bitmap内容を［
`~placeholder~canvas要素$の物理的な表示~所在に対応付けられている~graphics~buffer
］に直に複製できることも意味し得る。
この短絡する~approachに類するものは、
表示-待時間を有意に抑制し得る
— とりわけ、［
当の `OffscreenCanvas$I が`~worker~event~loop$から更新されていて，
`~placeholder~canvas要素$の`~window~event~loop$が~busyにある事例
］においては。
しかしながら，そのように短絡しても、
~scriptから観測-可能な副作用は生じ得ない。
このことは、［
要素が `CanvasImageSource$I として利用されている事例／
要素に対し［
`toDataURL()$m ／ `toBlob()$m
］が~callされた事例
］においては，~commitされた~bitmapは［
依然として，`~placeholder~canvas要素$へ送信される必要がある
］ことを意味する。
◎
Implementations are encouraged to short-circuit the graphics update steps of the window event loop for the purposes of updating the contents of a placeholder canvas element to the display. This could mean, for example, that the bitmap contents are copied directly to a graphics buffer that is mapped to the physical display location of the placeholder canvas element. This or similar short-circuiting approaches can significantly reduce display latency, especially in cases where the OffscreenCanvas is updated from a worker event loop and the window event loop of the placeholder canvas element is busy. However, such shortcuts cannot have any script-observable side-effects. This means that the committed bitmap still needs to be sent to the placeholder canvas element, in case the element is used as a CanvasImageSource, as an ImageBitmapSource, or in case toDataURL() or toBlob() are called on it.
</p>

<div class="algo">
`canvas@o2d
取得子~手続きは
⇒
~RET コレの`~OffscreenCanvas~obj$
◎
The canvas attribute, on getting, must return this OffscreenCanvasRenderingContext2D's associated OffscreenCanvas object.
</div>

					</section>
				</section>
				<section id="colour-spaces-and-colour-correction">
<h5 title="Color spaces and color space conversion">4.12.5.4. 色~空間とその変換</h5>

<p>
`canvas$e ~APIは、
~canvasの裏画像
（ `backing store^en, 裏で格納される画像~data）用の色~空間を指定するための仕組みを供する。
すべての~canvas~API用の，裏画像~用の既定の色~空間は、
`srgb$v とする。
◎
The canvas APIs provide mechanisms for specifying the color space of the canvas's backing store. The default backing store color space for all canvas APIs is 'srgb'.
</p>

<p>
~canvasを出力~機器に描画するときは、
~canvasの裏画像に対し`色~空間の変換＠~CSSCOLOR#color-conversion$を適用してから行うモノトスル。
この変換は、
次に一致するモノトスル
⇒
`img$e 要素【の~source画像】が［
~canvasの裏画像と同じ`色~空間$2Dを指定する色~profile
］を伴う場合に適用される色~空間の変換
◎
Color space conversion must be applied to the canvas's backing store when rendering the canvas to the output device. This color space conversion must be identical to the color space conversion that would be applied to an img element with a color profile that specifies the same color space as the canvas's backing store.
</p>

<p>
内容を~2D文脈に描くときは、
その前に，［
すべての入力を当の~2D文脈の`色~空間$2Dへ`変換する＠~CSSCOLOR#color-conversion$
］モノトスル。
［
~gradient色停の補間／~alpha混色
］は、［
当の`色~空間$2Dへ変換した後の色~値
］に対し遂行するモノトスル。
◎
When drawing content to a 2D context, all inputs must be converted to the context's color space before drawing. Interpolation of gradient color stops must be performed on color values after conversion to the context's color space. Alpha blending must be performed on values after conversion to the context's color space.
</p>

<p class="note">注記：
~2D文脈に対する入力において色~空間が未定義になるものは、
存在しない。
~CSS色~用の色~空間は、
`CSSCOLOR$r にて定義される。
色~profile情報を指定しない画像~用の色~空間は、
`CSSCOLOR$r `§ ~tag無しな色が成す色~空間＠~CSSCOLOR#untagged$
に指定されるとおり，
`srgb$v と見做される。
◎
There do not exist any inputs to a 2D context for which the color space is undefined. The color space for CSS colors is defined in CSS Color. The color space for images that specify no color profile information is assumed to be 'srgb', as specified in the Color Spaces of Untagged Colors section of CSS Color. [CSSCOLOR]
</p>

				</section>
				<section id="serialising-bitmaps-to-a-file">
<h5 title="Serializing bitmaps to a file">4.12.5.5. ~bitmapから~fileへの直列化-法</h5>

<div class="algo">
<p>
`~bitmapを~fileとして直列化する@
~algoは、
所与の
( %~bitmap, %型 （省略時は ε ）, %品質 （省略時は ε ） )
に対し
⇒
~RET 以下に従って［
%型 で与えられる形式による画像~file
］を作成した結果
— 作成する間に~errorが生じた場合は（内部的な符号化器~errorなど） ~NULL になるとする
◎
When a user agent is to create a serialization of the bitmap as a file, given a type and an optional quality, it must create an image file in the format given by type. If an error occurs during the creation of the image file (e.g. an internal encoder error), then the result of the serialization is null. [PNG]
</p>

<ul>
	<li>
画像~fileの画素~dataは、
%~bitmap の画素~dataを［
%~bitmap の 1 座標~空間~単位が 1 画像~画素になる
］よう拡縮したものになる。
利用する~file形式が，解像度~metadataの符号化法を~supportする場合、
画像~fileの解像度を 96dpi として与える
（ %~bitmap の 1 画素は 1 `px$css に等しくなる）。
◎
The image file's pixel data must be the bitmap's pixel data scaled to one image pixel per coordinate space unit, and if the file format used supports encoding resolution metadata, the resolution must be given as 96dpi (one image pixel per CSS pixel).
</li>
	<li>
<p>
%画像~形式 を次に従って決定する：
</p>
		<ul>
			<li>
%型 ~NEQ ε の場合、
%型 を`~ASCII小文字~化$した上で［
画像~fileに利用する形式を与える`~MIME型$
］として解釈する
— %型 に~parameterがある場合、
~supportしないものと扱う。
</li>
			<li>
%型 ~EQ ε の場合／
前項から得られた画像~形式を~supportしない場合、
~PNG形式 `PNG$r を利用する。
</li>
		</ul>

<p class="example">
例えば、
%型 ［
`image/png$mt は~PNG画像 ／
`image/jpeg$mt は~JPEG画像 ／
`image/svg+xml$mt は~SVG画像
］を生成することになる。
（~SVGに対しては、
~UAには［
~bitmapがどう生成されたか追跡するような
`unlikely, though potentially awesome^en
な特能
］が要求されることになる）。
</p>

◎
If type is supplied, then it must be interpreted as a MIME type giving the format to use. If the type has any parameters, then it must be treated as not supported.
◎
For example, the value "image/png" would mean to generate a PNG image, the value "image/jpeg" would mean to generate a JPEG image, and the value "image/svg+xml" would mean to generate an SVG image (which would require that the user agent track how the bitmap was generated, an unlikely, though potentially awesome, feature).
◎
User agents must support PNG ("image/png"). User agents may support other types. If the user agent does not support the requested type, then it must create the file using the PNG format. [PNG]
◎
User agents must convert the provided type to ASCII lowercase before establishing if they support that type.
</li>
	<li>
%画像~形式 が~alpha成分を~supportしない場合
⇒
画素~dataには次を利用する
⇒
`source-over$v 組成~演算子を利用して，`不透明な黒$にされた背景に組成した結果
◎
For image types that do not support an alpha component, the serialized image must be the bitmap image composited onto an opaque black background using the source-over compositing operator.
</li>
	<li>
<p>
%画像~形式 が色~profileを：
◎
↓</p>
		<ul class="switch">
			<li>
~supportする場合
⇒
直列化される画像には［
下層の~bitmapの色~空間を指示する色~profile
］を含める。
◎
For image types that support color profiles, the serialized image must include a color profile indicating the color space of the underlying bitmap.＼
</li>
			<li>
~supportしない場合
⇒
`relative-colorimetric$v 描画~意図を利用して `srgb$v 色~空間へ`変換して＠~CSSCOLOR#color-conversion$から直列化する。
◎
For image types that do not support color profiles, the serialized image must be converted to the 'srgb' color space using 'relative-colorimetric' rendering intent.
</li>
		</ul>

<p class="note">注記：
したがって，~2D文脈においては、［
`toDataURL()$m ／ `toBlob()$m
］~methodの出力を
— 適切な寸法を与える下で —
`drawImage()$2d ~methodを~callして~canvasに描画しても，可視な効果は
— ~canvasの色を より狭い色域に切り詰めること以外には —
無い。
◎
Thus, in the 2D context, calling the drawImage() method to render the output of the toDataURL() or toBlob() method to the canvas, given the appropriate dimensions, has no visible effect beyond, at most, clipping colors of the canvas to a more narrow gamut.
</p>
	</li>
	<li>
<p>
%画像~形式 が複数の~bit深度を~supportする場合
⇒
直列化される画像には、
下層の~bitmapの内容を最良に保全する~bit深度を利用する。
◎
For image types that support multiple bit depths, the serialized image must use the bit depth that best preserves content of the underlying bitmap.
</p>

<p class="example">
例えば，［
`色~型$2D ~EQ `float16$l
］を有する~2D文脈を %型 `image/png$mt へ直列化するとき、
結果の画像を成す各~画素を成す各~成分は 16 ~bitになる。
それでも、
この直列化は，有意な詳細を喪失することになる
（ ( 0.5 ~DIV 65535 ) 未満の値は，すべて 0 へ切り下げられ、
1 を超える値は，すべて 1 へ切り下げられよう）。
◎
For example, when serializing a 2D context that has color type of float16 to type "image/png", the resulting image would have 16 bits per sample. This serialization will still lose significant detail (all values less than 0.5/65535 would be clamped to 0, and all values greater than 1 would be clamped to 1).
</p>
	</li>
	<li>
<p>
%画像~形式 が可変~品質を~supportする場合
（ `image/jpeg$mt など）
⇒
次に与える値を欲される品質~levelとして扱う
⇒
次が満たされるならば %品質 ／
~ELSE_ %画像~形式 の既定の品質~値
⇒
［
%型 ~NEQ `image/png$mt
］~AND［
%品質 は `Number$jt である
］~AND［
0.0 ~LTE %品質 ~LTE 1.0
］
◎
If type is an image format that supports variable quality (such as "image/jpeg"), quality is given, and type is not "image/png", then, if quality is a Number in the range 0.0 to 1.0 inclusive, the user agent must treat quality as the desired quality level. Otherwise, the user agent must use its default quality value, as if the quality argument had not been given.
</p>

<p class="note">注記：
ここで［
%品質 を単純に~Web~IDL `double^c 型として宣言せずに，
型~test法を利用している
］のは、
歴史的な遺物である。
◎
The use of type-testing here, instead of simply declaring quality as a Web IDL double, is a historical artifact.
</p>
	</li>
</ul>

<p class="note">注記：
“品質” の解釈は、
実装~間で多少異なり得る。
%品質 が指定されていないときは、
実装に特有な既定
— ［ 
圧縮比, 画像~品質, 符号化にかかる時間
］の間で適度な妥協を表現する既定 —
が利用される。
◎
Different implementations can have slightly different interpretations of "quality". When the quality is not specified, an implementation-specific default is used that represents a reasonable compromise between compression ratio, image quality, and encoding time.
</p>
</div>

				</section>
				<section id="security-with-canvas-elements">
<h5 title="Security with canvas elements">4.12.5.6. `canvas^e 要素に関する~security</h5>

◎非規範的

<p>
<strong>情報~漏洩e</strong>は、
ある`生成元$からの~scriptが［
別の（`同一-生成元$でない）生成元からの画像の情報
］に~accessできる場合に生じ得る
（例： 画素を読取る）。
◎
Information leakage can occur if scripts from one origin can access information (e.g. read pixels) from images from another origin (one that isn't the same).
</p>

<p>
これを軽減するため、［
`canvas$e 要素／
`OffscreenCanvas$I ~obj／
`ImageBitmap$I ~obj
］で利用される各~bitmapは、
`生成元cleanか$を有するよう定義される。
この~flagは、
どの~bitmapにおいても，初期時は ~T に設定され、
非同一-生成元からの画像が利用された時点で ~F に設定される。
◎
To mitigate this, bitmaps used with canvas elements, OffscreenCanvas objects, and ImageBitmap objects are defined to have a flag indicating whether they are origin-clean. All bitmaps start with their origin-clean set to true. The flag is set to false when cross-origin images are used.
</p>

<p>
［
`toDataURL()$m ／ `toBlob()$m ／ `getImageData()$2d
］~methodは、
この~flagを検査して，
非同一-生成元~dataが漏洩されないよう `SecurityError$E を投出することになる。
◎
The toDataURL(), toBlob(), and getImageData() methods check the flag and will throw a "SecurityError" DOMException rather than leak cross-origin data.
</p>

<p>
`生成元cleanか$の値は、
~sourceの~bitmapから［
`createImageBitmap()$m により得られる新たな `ImageBitmap$I ~obj
］へ伝播する。
逆に，行先 `canvas$e 要素の~bitmapの`生成元cleanか$は、
~source画像が次を満たす場合には，
`drawImage()$2d により ~F に設定される
⇒
［
`ImageBitmap$I ~objである
］~AND［
その~bitmapの`生成元cleanか$ ~EQ ~F
］
◎
The value of the origin-clean flag is propagated from a source's bitmap to a new ImageBitmap object by createImageBitmap(). Conversely, a destination canvas element's bitmap will have its origin-clean flags set to false by drawImage if the source image is an ImageBitmap object whose bitmap has its origin-clean flag set to false.
</p>

<p>
ある種の状況では、
この~flagは設定し直され得る。
例えば，［
`CanvasRenderingContext2D$I を束縛している `canvas$e 要素
］の［
`width$a ／ `height$a
］内容~属性の値を変更したとき、
~bitmapは~clearされ，
その`生成元cleanか$は【 ~T に】設定し直される。
◎
The flag can be reset in certain situations; for example, when changing the value of the width or the height content attribute of the canvas element to which a CanvasRenderingContext2D is bound, the bitmap is cleared and its origin-clean flag is reset.
</p>

<p>
`ImageBitmapRenderingContext$I を利用するとき，
`生成元cleanか$の値は、
`transferFromImageBitmap()$m を介して `canvas$e へ転送されるときに `ImageBitmap$I ~objから伝播する。
◎
When using an ImageBitmapRenderingContext, the value of the origin-clean flag is propagated from ImageBitmap objects when they are transferred to the canvas via transferFromImageBitmap().
</p>

				</section>
				<section id="premultiplied-alpha-and-the-2d-rendering-context">
<h5 title="Premultiplied alpha and the 2D rendering context">4.12.5.7. 乗算済み~alphaと~2D描画~文脈</h5>

<p>
画像~内の透明度は、
`~alphaにより乗算済み@
（ `premultiplied alpha^en ）か，そうでない非-乗算済み
いずれかの仕方で表現される。
◎
Premultiplied alpha refers to one way of representing transparency in an image, the other being non-premultiplied alpha.
</p>

<p>
非-乗算済み~alphaの下では、
画素の
⇒＃
( ~red, ~green, ~blue ) 成分は，画素の色を表現する／
~alpha成分は，画素の不透明度を表現する
◎
Under non-premultiplied alpha, the red, green, and blue components of a pixel represent that pixel's color, and its alpha component represents that pixel's opacity.
</p>

<p>
一方で，`~alphaにより乗算済み$の下では、
画素の
⇒＃
( ~red, ~green, ~blue ) 成分は，画素が画像に加算する色の量を表現する／
~alpha成分は，画素がその背後にあるものを遮る量を表現する
◎
Under premultiplied alpha, however, the red, green, and blue components of a pixel represent the amounts of color that the pixel adds to the image, and its alpha component represents the amount that the pixel obscures whatever is behind it.
</p>

<div class="example">

<p>
一例として，各~色~成分は範囲 0 〜 255 （光度なし〜最高）に入ると見做すとき、
次の例に挙げる色は，次の仕方で表現される：
◎
For instance, assuming the color components range from 0 (off) to 255 (full intensity), these example colors are represented in the following ways:
</p>

<table class="grid-table" id="_ex-premultiplied"><thead>
<tr><th>
~CSS色~表現
◎
CSS color representation
<th>
乗算済み表現
◎
Premultiplied representation
<th>
非-乗算済み表現
◎
Non-premultiplied representation
<th>
色の記述
◎
Description of color
<th>
他の内容の上に混色された画像の色
◎
Image of color blended above other content
<tbody>

<tr><td>`rgba(255, 127, 0, 1)^v
<td>255, 127, 0, 255
<td>255, 127, 0, 255
<td>
完全に不透明な~orange
◎
Completely-opaque orange
<td>
<p class="alt" hidden id="_dgm-premultiplied-example-1">
背景を~~覆う不透明~orangeな真円
◎
An opaque orange circle sits atop a background
</p>

<tr><td>`rgba(255, 255, 0, 0.5)^v
<td>127, 127, 0, 127
<td>255, 255, 0, 127
<td>
半分だけ不透明な~yellow
◎
Halfway-opaque yellow
<td>
<p class="alt" hidden id="_dgm-premultiplied-example-2">
背景を~~覆う半~透明~yellowな真円
◎
A yellow circle, halfway transparent, sits atop a background
</p>

<tr><td>表現-不能
<td>255, 127, 0, 127
<td>表現-不能
<td>
加法的な半分だけ不透明な~orange
◎
Additive halfway-opaque orange
<td>
<p class="alt" hidden id="_dgm-premultiplied-example-3">
~orangeな真円は，それが~~覆う背景をいくぶん明るくする
◎
An orange circle somewhat brightens the background that it sits atop
</p>

<tr><td>表現-不能
<td>255, 127, 0, 0
<td>表現-不能
<td>
加法的な全部的に透明な~orange
◎
Additive fully-transparent orange
<td>
<p class="alt" hidden id="_dgm-premultiplied-example-4">
~orangeな真円は，それが~~覆う背景を完全に明るくする
◎
An orange circle completely brightens the background that it sits atop
</p>

<tr><td>`rgba(255, 127, 0, 0)^v
<td>0, 0, 0, 0
<td>255, 127, 0, 0
<td>
全部的に透明（ “不可視” ）な~orange
◎
Fully-transparent ("invisible") orange
<td>
<p class="alt" hidden id="_dgm-premultiplied-example-5">
背景を~~覆うものは何も無い
【！原文 empty は誤記】
◎
An empty background with nothing atop it
</p>
</table>
</div>

<!-- 余計？
rgba(0, 127, 255, 0)｜0, 0, 0, 0｜255, 127, 0, 0｜Fully-transparent ("invisible") turquoise｜An empty background with nothing atop it
 -->

<p>
`非-乗算済み色~値を乗算済み表現へ変換する@
ことは、
色の
( ~red, ~green, ~blue )
成分を~alpha成分で乗算することを孕む
（~alpha成分の範囲を
“全部的に透明” を 0, “全部的に不透明” を 1
に~~正規化する下で）。
◎
Converting a color value from a non-premultiplied representation to a premultiplied one involves multiplying the color's red, green, and blue components by its alpha component (remapping the range of the alpha component such that "fully transparent" is 0, and "fully opaque" is 1).
</p>

<p>
`乗算済み色~値を非-乗算済み表現へ変換する@
ことは、
上とは逆に，色の
( ~red, ~green, ~blue )
成分を~alpha成分で除算することを孕む。
◎
Converting a color value from a premultiplied representation to a non-premultiplied one involves the inverse: dividing the color's red, green, and blue components by its alpha component.
</p>

<p>
ある種の色は，`~alphaにより乗算済み$の下でしか表現できず
（一例として、
加法的な色【加法混色が可能な（色~空間に属する）色】
）、
他の色は，非-乗算済み~alphaの下でしか表現できない
（一例として、
不透明度が 0 で “不可視” な色であっても，
( ~red, ~green, ~blue )
値を保持する）。
~canvasの色は有限な精度を利用しており，除算や乗算により精度は必然的に劣化するので、
乗算済みと非-乗算済みの間で変換する演算は
— 全部的に不透明な色を除いて —
情報欠損を伴う演算である。
◎
As certain colors can only be represented under premultiplied alpha (for instance, additive colors), and others can only be represented under non-premultiplied alpha (for instance, "invisible" colors which hold certain red, green, and blue values even with no opacity); and division and multiplication using finite precision entails a loss of accuracy, converting between premultiplied and non-premultiplied alpha is a lossy operation on colors that are not fully opaque.
</p>

<p>
［
`CanvasRenderingContext2D$I ／ `OffscreenCanvasRenderingContext2D$I
］の`出力~bitmap$2Dは、
透明な色を`~alphaにより乗算済み$を利用して表現するモノトスル。
◎
A CanvasRenderingContext2D's output bitmap and an OffscreenCanvasRenderingContext2D's output bitmap must use premultiplied alpha to represent transparent colors.
</p>

<p class="note">注記：
~canvas~bitmapにおいては、
`~alphaにより乗算済み$を利用して色を表現することが重要になる
— 表現-可能な色の範囲に影響するので。
~CSS色は非-乗算済みであり，加法的な色を表現できないので、
加法的な色は，現時点では~canvas上には直に描けない
— それでも，一例として、
加法的な色を~WebGL~canvas上に描いてから，
それを `drawImage()$2d を介して~2D~canvas上に描くのはアリである。
◎
It is important for canvas bitmaps to represent colors using premultiplied alpha because it affects the range of representable colors. While additive colors cannot currently be drawn onto canvases directly because CSS colors are non-premultiplied and cannot represent them, it is still possible to, for instance, draw additive colors onto a WebGL canvas and then draw that WebGL canvas onto a 2D canvas via drawImage().
</p>
				</section>
			</section>
</main>