[html5] r7509 - [agiow] (0) First draft of a way to do canvas in workers. Affected topics: Canva [...]
whatwg at whatwg.org
whatwg at whatwg.org
Fri Nov 16 12:26:08 PST 2012
Author: ianh
Date: 2012-11-16 12:26:07 -0800 (Fri, 16 Nov 2012)
New Revision: 7509
Modified:
complete.html
index
source
Log:
[agiow] (0) First draft of a way to do canvas in workers.
Affected topics: Canvas, DOM APIs, HTML, Rendering, Security, Web Workers, Workers
Modified: complete.html
===================================================================
--- complete.html 2012-11-06 01:54:26 UTC (rev 7508)
+++ complete.html 2012-11-16 20:26:07 UTC (rev 7509)
@@ -248,7 +248,7 @@
<header class=head id=head><p><a class=logo href=http://www.whatwg.org/><img alt=WHATWG height=101 src=/images/logo width=101></a></p>
<hgroup><h1 class=allcaps>HTML</h1>
- <h2 class="no-num no-toc">Living Standard — Last Updated 6 November 2012</h2>
+ <h2 class="no-num no-toc">Living Standard — Last Updated 16 November 2012</h2>
</hgroup><dl><dt><strong>Web developer edition:</strong></dt>
<dd><strong><a href=http://developers.whatwg.org/>http://developers.whatwg.org/</a></strong></dd>
<dt>Multiple-page version:</dt>
@@ -609,31 +609,35 @@
<li><a href=#best-practices-for-implementors-of-media-elements><span class=secno>4.8.10.19 </span>Best practices for implementors of media elements</a></ol></li>
<li><a href=#the-canvas-element><span class=secno>4.8.11 </span>The <code>canvas</code> element</a>
<ol>
- <li><a href=#2dcontext><span class=secno>4.8.11.1 </span>The 2D context</a>
+ <li><a href=#proxying-canvases-to-workers><span class=secno>4.8.11.1 </span>Proxying canvases to workers</a></li>
+ <li><a href=#2dcontext><span class=secno>4.8.11.2 </span>The 2D rendering context</a>
<ol>
- <li><a href=#resolution><span class=secno>4.8.11.1.1 </span>Resolution</a></li>
- <li><a href=#the-canvas-state><span class=secno>4.8.11.1.2 </span>The canvas state</a></li>
- <li><a href=#drawingstyle-objects><span class=secno>4.8.11.1.3 </span><code>DrawingStyle</code> objects</a></li>
- <li><a href=#line-styles><span class=secno>4.8.11.1.4 </span>Line styles</a></li>
- <li><a href=#text-styles><span class=secno>4.8.11.1.5 </span>Text styles</a></li>
- <li><a href=#building-paths><span class=secno>4.8.11.1.6 </span>Building paths</a></li>
- <li><a href=#path-objects><span class=secno>4.8.11.1.7 </span><code>Path</code> objects</a></li>
- <li><a href=#transformations><span class=secno>4.8.11.1.8 </span>Transformations</a></li>
- <li><a href=#fill-and-stroke-styles><span class=secno>4.8.11.1.9 </span>Fill and stroke styles</a></li>
- <li><a href=#drawing-rectangles-to-the-canvas><span class=secno>4.8.11.1.10 </span>Drawing rectangles to the canvas</a></li>
- <li><a href=#drawing-text-to-the-canvas><span class=secno>4.8.11.1.11 </span>Drawing text to the canvas</a></li>
- <li><a href=#drawing-paths-to-the-canvas><span class=secno>4.8.11.1.12 </span>Drawing paths to the canvas</a></li>
- <li><a href=#drawing-images-to-the-canvas><span class=secno>4.8.11.1.13 </span>Drawing images to the canvas</a></li>
- <li><a href=#hit-regions><span class=secno>4.8.11.1.14 </span>Hit regions</a></li>
- <li><a href=#pixel-manipulation><span class=secno>4.8.11.1.15 </span>Pixel manipulation</a></li>
- <li><a href=#compositing><span class=secno>4.8.11.1.16 </span>Compositing</a></li>
- <li><a href=#image-smoothing><span class=secno>4.8.11.1.17 </span>Image smoothing</a></li>
- <li><a href=#shadows><span class=secno>4.8.11.1.18 </span>Shadows</a></li>
- <li><a href=#drawing-model><span class=secno>4.8.11.1.19 </span>Drawing model</a></li>
- <li><a href=#best-practices><span class=secno>4.8.11.1.20 </span>Best practices</a></li>
- <li><a href=#examples><span class=secno>4.8.11.1.21 </span>Examples</a></ol></li>
- <li><a href=#color-spaces-and-color-correction><span class=secno>4.8.11.2 </span>Color spaces and color correction</a></li>
- <li><a href=#security-with-canvas-elements><span class=secno>4.8.11.3 </span>Security with <code>canvas</code> elements</a></ol></li>
+ <li><a href=#implementation-notes><span class=secno>4.8.11.2.1 </span>Implementation notes</a></li>
+ <li><a href=#the-canvas-state><span class=secno>4.8.11.2.2 </span>The canvas state</a></li>
+ <li><a href=#drawingstyle-objects><span class=secno>4.8.11.2.3 </span><code>DrawingStyle</code> objects</a></li>
+ <li><a href=#line-styles><span class=secno>4.8.11.2.4 </span>Line styles</a></li>
+ <li><a href=#text-styles><span class=secno>4.8.11.2.5 </span>Text styles</a></li>
+ <li><a href=#building-paths><span class=secno>4.8.11.2.6 </span>Building paths</a></li>
+ <li><a href=#path-objects><span class=secno>4.8.11.2.7 </span><code>Path</code> objects</a></li>
+ <li><a href=#transformations><span class=secno>4.8.11.2.8 </span>Transformations</a></li>
+ <li><a href=#image-sources-for-2d-rendering-contexts><span class=secno>4.8.11.2.9 </span>Image sources for 2D rendering contexts</a></li>
+ <li><a href=#fill-and-stroke-styles><span class=secno>4.8.11.2.10 </span>Fill and stroke styles</a></li>
+ <li><a href=#drawing-rectangles-to-the-bitmap><span class=secno>4.8.11.2.11 </span>Drawing rectangles to the bitmap</a></li>
+ <li><a href=#drawing-text-to-the-bitmap><span class=secno>4.8.11.2.12 </span>Drawing text to the bitmap</a></li>
+ <li><a href=#drawing-paths-to-the-canvas><span class=secno>4.8.11.2.13 </span>Drawing paths to the canvas</a></li>
+ <li><a href=#drawing-images><span class=secno>4.8.11.2.14 </span>Drawing images</a></li>
+ <li><a href=#hit-regions><span class=secno>4.8.11.2.15 </span>Hit regions</a></li>
+ <li><a href=#pixel-manipulation><span class=secno>4.8.11.2.16 </span>Pixel manipulation</a></li>
+ <li><a href=#compositing><span class=secno>4.8.11.2.17 </span>Compositing</a></li>
+ <li><a href=#image-smoothing><span class=secno>4.8.11.2.18 </span>Image smoothing</a></li>
+ <li><a href=#shadows><span class=secno>4.8.11.2.19 </span>Shadows</a></li>
+ <li><a href=#drawing-model><span class=secno>4.8.11.2.20 </span>Drawing model</a></li>
+ <li><a href=#best-practices><span class=secno>4.8.11.2.21 </span>Best practices</a></li>
+ <li><a href=#examples><span class=secno>4.8.11.2.22 </span>Examples</a></ol></li>
+ <li><a href=#pixel-density><span class=secno>4.8.11.3 </span>Pixel density</a></li>
+ <li><a href=#color-spaces-and-color-correction><span class=secno>4.8.11.4 </span>Color spaces and color correction</a></li>
+ <li><a href=#serializing-bitmaps-to-a-file><span class=secno>4.8.11.5 </span>Serializing bitmaps to a file</a></li>
+ <li><a href=#security-with-canvas-elements><span class=secno>4.8.11.6 </span>Security with <code>canvas</code> elements</a></ol></li>
<li><a href=#the-map-element><span class=secno>4.8.12 </span>The <code>map</code> element</a></li>
<li><a href=#the-area-element><span class=secno>4.8.13 </span>The <code>area</code> element</a></li>
<li><a href=#image-maps><span class=secno>4.8.14 </span>Image maps</a>
@@ -976,11 +980,13 @@
<li><a href=#the-navigator-object><span class=secno>7.5.1 </span>The <code>Navigator</code> object</a>
<ol>
<li><a href=#client-identification><span class=secno>7.5.1.1 </span>Client identification</a></li>
- <li><a href=#custom-handlers><span class=secno>7.5.1.2 </span>Custom scheme and content handlers</a></li>
- <li><a href=#security-and-privacy><span class=secno>7.5.1.3 </span>Security and privacy</a></li>
- <li><a href=#sample-handler-impl><span class=secno>7.5.1.4 </span>Sample user interface</a></li>
- <li><a href=#manually-releasing-the-storage-mutex><span class=secno>7.5.1.5 </span>Manually releasing the storage mutex</a></ol></li>
- <li><a href=#the-external-interface><span class=secno>7.5.2 </span>The <code>External</code> interface</a></ol></ol></li>
+ <li><a href=#custom-handlers><span class=secno>7.5.1.2 </span>Custom scheme and content handlers</a>
+ <ol>
+ <li><a href=#security-and-privacy><span class=secno>7.5.1.2.1 </span>Security and privacy</a></li>
+ <li><a href=#sample-handler-impl><span class=secno>7.5.1.2.2 </span>Sample user interface</a></ol></li>
+ <li><a href=#manually-releasing-the-storage-mutex><span class=secno>7.5.1.3 </span>Manually releasing the storage mutex</a></ol></li>
+ <li><a href=#the-external-interface><span class=secno>7.5.2 </span>The <code>External</code> interface</a></ol></li>
+ <li><a href=#images><span class=secno>7.6 </span>Images</a></ol></li>
<li><a href=#editing><span class=secno>8 </span>User interaction</a>
<ol>
<li><a href=#the-hidden-attribute><span class=secno>8.1 </span>The <code>hidden</code> attribute</a></li>
@@ -1305,7 +1311,7 @@
<li><a href=#replaced-elements><span class=secno>14.4 </span>Replaced elements</a>
<ol>
<li><a href=#embedded-content-2><span class=secno>14.4.1 </span>Embedded content</a></li>
- <li><a href=#images><span class=secno>14.4.2 </span>Images</a></li>
+ <li><a href=#images-0><span class=secno>14.4.2 </span>Images</a></li>
<li><a href=#attributes-for-embedded-content-and-images><span class=secno>14.4.3 </span>Attributes for embedded content and images</a></li>
<li><a href=#image-maps-0><span class=secno>14.4.4 </span>Image maps</a></li>
<li><a href=#toolbars-0><span class=secno>14.4.5 </span>Toolbars</a></ol></li>
@@ -4229,13 +4235,15 @@
<dd>
- <p>This specification uses the following interfaces defined in the
+ <p>This specification uses the following features defined in the
File API specification: <a href=#refsFILEAPI>[FILEAPI]</a></p>
<ul class=brief><li><dfn id=blob><code>Blob</code></dfn></li>
<li><dfn id=file><code>File</code></dfn></li>
<li><dfn id=filelist><code>FileList</code></dfn></li>
-
+ <li><dfn id=blob.close()><code title=dom-Blob-close>Blob.close()</code></dfn></li>
+ <li><dfn id=blob.type><code title=dom-Blob-type>Blob.type</code></dfn></li>
+ <li>The concept of <dfn id=file-error-read title=file-error-read>read errors</dfn></li>
</ul><p>It also uses the following interface defined in the File System
API specification: <a href=#refsFILESYSTEMAPI>[FILESYSTEMAPI]</a></p>
@@ -4325,6 +4333,10 @@
<p>The term <dfn id=css-styling-attribute>CSS styling attribute</dfn> is defined in the
<cite>CSS Style Attributes</cite> specification. <a href=#refsCSSATTR>[CSSATTR]</a></p>
+ <p>The <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> object's use of fonts depends on the features
+ described in the CSS Fonts specification, including in particular
+ <dfn id=fontloader><code>FontLoader</code></dfn>. <a href=#refsCSSFONTS>[CSSFONTS]</a></p>
+
</dd>
@@ -4340,6 +4352,16 @@
</ul><!-- mention that the parser supports it? --></dd>
+ <dt>WebGL</dt>
+
+ <dd>
+
+ <p>The following interface is defined in the WebGL specification: <a href=#refsWEBGL>[WEBGL]</a></p>
+
+ <ul class=brief><li><dfn id=webglrenderingcontext><code>WebGLRenderingContext</code></dfn>
+ </ul></dd>
+
+
<!--TOPIC:HTML-->
<!-- mention that the parser supports mathml? -->
@@ -7199,11 +7221,9 @@
</ol></div>
- <hr><!--2DCANVAS--><p class=note>The <a href=#canvas-context-2d title=canvas-context-2d>2D graphics
- context</a> has a separate color syntax that also handles
- opacity.</p>
+ <hr><p class=note>The <a href=#canvas-context-2d title=canvas-context-2d>2D graphics context</a> has a separate
+ color syntax that also handles opacity.</p>
- <!--2DCANVAS-->
<h4 id=space-separated-tokens><span class=secno>2.5.7 </span>Space-separated tokens</h4>
@@ -9787,6 +9807,7 @@
<ul class=brief><li><code><a href=#messageport>MessagePort</a></code>
<li><code><a href=#arraybuffer>ArrayBuffer</a></code> <a href=#refsTYPEDARRAY>[TYPEDARRAY]</a>
+ <li><code><a href=#canvasproxy>CanvasProxy</a></code>
</ul><div class=impl>
<h4 id=safe-passing-of-structured-data><span class=secno>2.8.6 </span>Safe passing of structured data</h4>
@@ -9885,6 +9906,11 @@
algorithm</a> recursively with the value of the <code title=dom-imagedata-data><a href=#dom-imagedata-data>data</a></code> attribute on <var title="">input</var> as the new "<var title="">input</var>"
argument and <var title="">memory</var> as the new "<var title="">memory</var>" argument.</dd>
+ <dt>If <var title="">input</var> is an <code><a href=#imagebitmap>ImageBitmap</a></code> object</dt>
+
+ <dd><p>Let <var title="">output</var> be a newly constructed <code><a href=#imagebitmap>ImageBitmap</a></code> object
+ whose bitmap data is a copy of <var title="">input</var>'s bitmap data.</dd>
+
<!--(when we add this, make sure to throw DataCloneError if these objects are already closed)
<dt>If <var title="">input</var> is an <code>ArrayBuffer</code> object</dt>
@@ -24464,7 +24490,10 @@
height is the image's intrinsic height, and whose appearance is the
intrinsic appearance of the image.</p>
- <p>User agents may obtain images immediately or on demand.</p>
+ <p>In a <a href=#browsing-context>browsing context</a> where <a href=#concept-bc-noscript title=concept-bc-noscript>scripting is
+ disabled</a>, user agents may obtain images immediately or on demand. In a <a href=#browsing-context>browsing
+ context</a> where <a href=#concept-bc-noscript title=concept-bc-noscript>scripting is enabled</a>, user agents
+ must obtain images immediately.</p>
<p>A user agent that obtains images immediately must synchronously
<a href=#update-the-image-data>update the image data</a> of an <code><a href=#the-img-element>img</a></code> element
@@ -25273,8 +25302,8 @@
<p>The IDL attribute <dfn id=dom-img-complete title=dom-img-complete><code>complete</code></dfn> must return
true if any of the following conditions is true:</p>
- <ul class=brief><li>The <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute is omitted.
- <li>The <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute's value is the empty string.
+ <ul class=brief><li>Both the <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute and the <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code> attributes are omitted.
+ <li>The the <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code> attribute is omitted and the <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute's value is the empty string. <!-- we only have this hack for src="", not srcset=""; present but empty or bogus srcset="" still means complete=false if it's not in the img-error state -->
<li>The final <a href=#concept-task title=concept-task>task</a> that is <a href=#queue-a-task title="queue a task">queued</a> by the <a href=#networking-task-source>networking task source</a> once the resource has been <a href=#fetch title=fetch>fetched</a> has been <a href=#queue-a-task title="queue a task">queued</a>, but has not yet been run, and the <code><a href=#the-img-element>img</a></code> element is not in the <a href=#img-error title=img-error>broken</a> state.
<li>The <code><a href=#the-img-element>img</a></code> element is <a href=#img-all title=img-all>completely available</a>.
</ul><p>Otherwise, the attribute must return false.</p>
@@ -36136,17 +36165,22 @@
<dd><code title=attr-canvas-height><a href=#attr-canvas-height>height</a></code></dd>
<dt><a href=#element-dfn-dom title=element-dfn-dom>DOM interface</a>:</dt><!--ADD-TOPIC:DOM APIs-->
<dd>
- <pre class=idl>interface <dfn id=htmlcanvaselement>HTMLCanvasElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
+ <pre class=idl>typedef (<a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a> or <a href=#webglrenderingcontext>WebGLRenderingContext</a>) <dfn id=renderingcontext>RenderingContext</dfn>;
+
+interface <dfn id=htmlcanvaselement>HTMLCanvasElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
attribute unsigned long <a href=#dom-canvas-width title=dom-canvas-width>width</a>;
attribute unsigned long <a href=#dom-canvas-height title=dom-canvas-height>height</a>;
+ <a href=#renderingcontext>RenderingContext</a>? <a href=#dom-canvas-getcontext title=dom-canvas-getContext>getContext</a>(DOMString contextId, any... arguments);
+ boolean <a href=#dom-canvas-supportscontext title=dom-canvas-supportsContext>supportsContext</a>(DOMString contextId, any... arguments);
+
+ void <a href=#dom-canvas-setcontext title=dom-canvas-setContext>setContext</a>(<a href=#renderingcontext>RenderingContext</a> context);
+ <a href=#canvasproxy>CanvasProxy</a> <a href=#dom-canvas-transfercontroltoproxy title=dom-canvas-transferControlToProxy>transferControlToProxy</a>();
+
DOMString <a href=#dom-canvas-todataurl title=dom-canvas-toDataURL>toDataURL</a>(optional DOMString type, any... arguments);
DOMString <a href=#dom-canvas-todataurlhd title=dom-canvas-toDataURLHD>toDataURLHD</a>(optional DOMString type, any... arguments);
void <a href=#dom-canvas-toblob title=dom-canvas-toBlob>toBlob</a>(<a href=#filecallback>FileCallback</a>? _callback, optional DOMString type, any... arguments);
void <a href=#dom-canvas-toblobhd title=dom-canvas-toBlobHD>toBlobHD</a>(<a href=#filecallback>FileCallback</a>? _callback, optional DOMString type, any... arguments);
-
- object? <a href=#dom-canvas-getcontext title=dom-canvas-getContext>getContext</a>(DOMString contextId, any... arguments);
- boolean <a href=#dom-canvas-supportscontext title=dom-canvas-supportsContext>supportsContext</a>(DOMString contextId, any... arguments);
};</pre>
</dd>
</dl><!--REMOVE-TOPIC:DOM APIs--><p>The <code><a href=#the-canvas-element>canvas</a></code> element provides scripts with a resolution-dependent bitmap canvas,
@@ -36159,21 +36193,22 @@
CSS and supporting technologies such as XBL.</p>
<p>When authors use the <code><a href=#the-canvas-element>canvas</a></code> element, they must also provide content that, when
- presented to the user, conveys essentially the same function or purpose as the bitmap canvas. This
- content may be placed as content of the <code><a href=#the-canvas-element>canvas</a></code> element. The contents of the
- <code><a href=#the-canvas-element>canvas</a></code> element, if any, are the element's <a href=#fallback-content>fallback content</a>.</p>
+ presented to the user, conveys essentially the same function or purpose as the
+ <code><a href=#the-canvas-element>canvas</a></code>' bitmap. This content may be placed as content of the <code><a href=#the-canvas-element>canvas</a></code>
+ element. The contents of the <code><a href=#the-canvas-element>canvas</a></code> element, if any, are the element's <a href=#fallback-content>fallback
+ content</a>.</p>
- <p>In interactive visual media, if <a href=#concept-n-script title=concept-n-script>scripting is enabled</a> for
+ <hr><p>In interactive visual media, if <a href=#concept-n-script title=concept-n-script>scripting is enabled</a> for
the <code><a href=#the-canvas-element>canvas</a></code> element, and if support for <code><a href=#the-canvas-element>canvas</a></code> elements has been enabled,
the <code><a href=#the-canvas-element>canvas</a></code> element <a href=#represents>represents</a> <a href=#embedded-content>embedded content</a> consisting
- of a dynamically created image.</p>
+ of a dynamically created image, the element's bitmap.</p>
<p>In non-interactive, static, visual media, if the <code><a href=#the-canvas-element>canvas</a></code> element has been
- previously painted on (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 <code><a href=#the-canvas-element>canvas</a></code> element <a href=#represents>represents</a> <a href=#embedded-content>embedded content</a> with
- the current image and size. Otherwise, the element represents its <a href=#fallback-content>fallback content</a>
- instead.</p>
+ 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 <code><a href=#the-canvas-element>canvas</a></code> element <a href=#represents>represents</a>
+ <a href=#embedded-content>embedded content</a> with the element's current bitmap and size. Otherwise, the element
+ represents its <a href=#fallback-content>fallback content</a> instead.</p>
<p>In non-visual media, and in visual media if <a href=#concept-n-noscript title=concept-n-noscript>scripting is
disabled</a> for the <code><a href=#the-canvas-element>canvas</a></code> element or if support for <code><a href=#the-canvas-element>canvas</a></code> elements
@@ -36189,7 +36224,7 @@
elements in the <a href=#fallback-content>fallback content</a>. (Focus has no effect on mouse interaction events.)
<a href=#refsDOMEVENTS>[DOMEVENTS]</a></p>
- <p>The <code><a href=#the-canvas-element>canvas</a></code> element has two attributes to control the size of the coordinate space:
+ <hr><p>The <code><a href=#the-canvas-element>canvas</a></code> element has two attributes to control the size of the coordinate space:
<dfn id=attr-canvas-width title=attr-canvas-width><code>width</code></dfn> and <dfn id=attr-canvas-height title=attr-canvas-height><code>height</code></dfn>. These attributes, when specified, must have
values that are <a href=#valid-non-negative-integer title="valid non-negative integer">valid non-negative integers</a>. <span class=impl>The <a href=#rules-for-parsing-non-negative-integers>rules for parsing non-negative integers</a> must be used to obtain their
numeric values. If an attribute is missing, or if parsing its value returns an error, then the
@@ -36197,63 +36232,73 @@
attribute defaults to 300, and the <code title=attr-canvas-height><a href=#attr-canvas-height>height</a></code> attribute
defaults to 150.</p>
- <p>The intrinsic dimensions of the <code><a href=#the-canvas-element>canvas</a></code> element equal the size of the coordinate
- space, with the numbers interpreted in CSS pixels. However, the element can be sized arbitrarily
- by a style sheet. During rendering, the image is scaled to fit this layout size.</p>
+ <p>The intrinsic dimensions of the <code><a href=#the-canvas-element>canvas</a></code> element when it <a href=#represents>represents</a>
+ <a href=#embedded-content>embedded content</a> are equal to the dimensions of the element's bitmap.</p>
+ <p class=note>A <code><a href=#the-canvas-element>canvas</a></code> element can be sized arbitrarily by a style sheet, its
+ bitmap is then subject to the 'object-fit' CSS property. <a href=#refsCSSIMAGES>[CSSIMAGES]</a></p>
+
<div class=impl>
- <p>The size of the coordinate space does not necessarily represent the size of the actual bitmap
- that the user agent will use internally or during rendering. On high-definition displays, for
- instance, the user agent may internally use a bitmap with two device pixels per unit in the
- coordinate space, so that the rendering remains at high quality throughout.</p>
+ <hr><!--ADD-TOPIC:Security--><p>The bitmaps of <code><a href=#the-canvas-element>canvas</a></code> elements, as well as some of the bitmaps of rendering
+ contexts, such as those described in the section on the <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code>
+ object below, have an <dfn id=concept-canvas-origin-clean title=concept-canvas-origin-clean>origin-clean</dfn> flag, which can
+ be set to true or false. Initially, when the <code><a href=#the-canvas-element>canvas</a></code> element is created, its bitmap's
+ <a href=#concept-canvas-origin-clean title=concept-canvas-origin-clean>origin-clean</a> flag must be set to true.</p>
+<!--REMOVE-TOPIC:Security-->
- <p>When the <code><a href=#the-canvas-element>canvas</a></code> element is created, and subsequently whenever the <code title=attr-canvas-width><a href=#attr-canvas-width>width</a></code> and <code title=attr-canvas-height><a href=#attr-canvas-height>height</a></code>
- attributes are set (whether to a new value or to the previous value), the bitmap and any
- associated contexts must be cleared back to their initial state and reinitialized with the newly
- specified coordinate space dimensions.</p>
+ <p>A <code><a href=#the-canvas-element>canvas</a></code> bitmap can also have a <a href=#hit-region-list>hit region list</a>, as described in the
+ <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> section below.</p>
- <p>When the canvas is initialized, its bitmap must be cleared to transparent black.</p>
+ <p>A <code><a href=#the-canvas-element>canvas</a></code> 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 <code><a href=#the-canvas-element>canvas</a></code> also has a <dfn id=concept-canvas-context-mode title=concept-canvas-context-mode>canvas context mode</dfn>, which is initially <dfn id=concept-canvas-none title=concept-canvas-none>none</dfn> but can be changed to either <dfn id=concept-canvas-direct-2d title=concept-canvas-direct-2d>direct-2d</dfn>, <dfn id=concept-canvas-direct-webgl title=concept-canvas-direct-webgl>direct-webgl</dfn>, <dfn id=concept-canvas-indirect title=concept-canvas-indirect>indirect</dfn>, or <dfn id=concept-canvas-proxied title=concept-canvas-proxied>proxied</dfn> by algorithms defined in this specification.</p>
- <p>When a <code><a href=#the-canvas-element>canvas</a></code> element does not represent its <a href=#fallback-content>fallback content</a>, it
- <a href=#provides-a-paint-source>provides a paint source</a> whose width is the element's intrinsic width, whose height is
- the element's intrinsic height, and whose appearance is the element's bitmap.</p>
+ <p>When its <a href=#concept-canvas-context-mode title=concept-canvas-context-mode>canvas context mode</a> is <a href=#concept-canvas-none title=concept-canvas-none>none</a>, a <code><a href=#the-canvas-element>canvas</a></code> element has no rendering context,
+ and its bitmap must be fully transparent black with an intrinsic width equal to the numeric value
+ of the element's <code title=attr-canvas-width><a href=#attr-canvas-width>width</a></code> attribute and an intrinsic height
+ equal to the numeric value of the element's <code title=attr-canvas-height><a href=#attr-canvas-height>height</a></code>
+ attribute, those values being interpreted in CSS pixels, and being updated as the attributes are
+ set, changed, or removed.</p>
+ <p>When a <code><a href=#the-canvas-element>canvas</a></code> element represents <a href=#embedded-content>embedded content</a>, it <a href=#provides-a-paint-source>provides
+ a paint source</a> whose width is the element's intrinsic width, whose height is the element's
+ intrinsic height, and whose appearance is the element's bitmap.</p>
+
+ <p>Whenever the <code title=attr-canvas-width><a href=#attr-canvas-width>width</a></code> and <code title=attr-canvas-height><a href=#attr-canvas-height>height</a></code> content attributes are set, removed, changed, or
+ redundantly set to the value they already have, if the <a href=#concept-canvas-context-mode title=concept-canvas-context-mode>canvas context mode</a> is <a href=#concept-canvas-direct-2d title=concept-canvas-direct-2d>direct-2d</a><!-- (and the rendering context's <span
+ title="concept-canvas-context-bitmap-mode">context bitmap mode</span>, therefore, is <span
+ title="concept-canvas-fixed">fixed</span>)-->, the user agent must <a href=#concept-canvas-set-bitmap-dimensions title=concept-canvas-set-bitmap-dimensions>set bitmap dimensions</a> to the numeric values of
+ the <code title=attr-canvas-width><a href=#attr-canvas-width>width</a></code> and <code title=attr-canvas-height><a href=#attr-canvas-height>height</a></code> content attributes.</p>
+
<p>The <dfn id=dom-canvas-width title=dom-canvas-width><code>width</code></dfn> and <dfn id=dom-canvas-height title=dom-canvas-height><code>height</code></dfn> IDL attributes must <a href=#reflect>reflect</a> the
respective content attributes of the same name, with the same defaults.</p>
</div>
- <div class=example>
- <p>Only one square appears to be drawn in the following example:</p>
- <pre> // canvas is a reference to a <canvas> element
- var context = canvas.getContext('2d');
- context.fillRect(0,0,50,50);
- canvas.setAttribute('width', '300'); // clears the canvas
- context.fillRect(0,100,50,50);
- canvas.width = canvas.width; // clears the canvas
- context.fillRect(100,0,50,50); // only this square remains</pre>
- </div>
+ <p class=note>The bitmaps used with <code><a href=#the-canvas-element>canvas</a></code> elements can have arbitrary pixel
+ densities. Typically, the density will match that of the user's screen.</p>
<hr><!--ADD-TOPIC:DOM APIs--><dl class=domintro><dt><var title="">context</var> = <var title="">canvas</var> . <code title=dom-canvas-getContext><a href=#dom-canvas-getcontext>getContext</a></code>(<var title="">contextId</var> [, ... ])</dt>
<dd>
<p>Returns an object that exposes an API for drawing on the canvas. The first argument specifies
- the desired API. Subsequent arguments are handled by that API.</p>
+ the desired API, either "<code title=canvas-context-2d><a href=#canvas-context-2d>2d</a></code>" or "<code title=canvas-context-webgl><a href=#canvas-context-webgl>webgl</a></code>". Subsequent arguments are handled by that API.</p>
<p>This specification defines the "<code title=canvas-context-2d><a href=#canvas-context-2d>2d</a></code>" context below.
- There is also a specification that defines a "<code title=canvas-context-webgl>webgl</code>"
+ There is also a specification that defines a "<code title=canvas-context-webgl><a href=#canvas-context-webgl>webgl</a></code>"
context. <a href=#refsWEBGL>[WEBGL]</a></p>
- <p>The list of defined contexts is given on the <a href=http://wiki.whatwg.org/wiki/CanvasContexts>WHATWG Wiki CanvasContexts page</a>. <a href=#refsWHATWGWIKI>[WHATWGWIKI]</a>
+ <p>Returns null if the given context ID is not supported, if the canvas has already been
+ initialized with the other context type (e.g. trying to get a "<code title=canvas-context-2d><a href=#canvas-context-2d>2d</a></code>" context after getting a "<code title=canvas-context-webgl><a href=#canvas-context-webgl>webgl</a></code>" context).</p>
- <p>Returns null if the given context ID is not supported or if the canvas has already been
- initialized with some other (incompatible) context type (e.g. trying to get a "<code title=canvas-context-2d><a href=#canvas-context-2d>2d</a></code>" context after getting a "<code title=canvas-context-webgl>webgl</code>" context).</p>
+ <p>Throws an <code><a href=#invalidstateerror>InvalidStateError</a></code> if the <code title=dom-canvas-setContext><a href=#dom-canvas-setcontext>setContext()</a></code> or <code title=dom-canvas-transferControlToProxy><a href=#dom-canvas-transfercontroltoproxy>transferControlToProxy()</a></code> methods have been
+ used.</p>
</dd>
- <dt><var title="">context</var> = <var title="">canvas</var> . <code title=dom-canvas-supportsContext><a href=#dom-canvas-supportscontext>supportsContext</a></code>(<var title="">contextId</var> [, ... ])</dt>
+ <dt><var title="">supported</var> = <var title="">canvas</var> . <code title=dom-canvas-supportsContext><a href=#dom-canvas-supportscontext>supportsContext</a></code>(<var title="">contextId</var> [, ... ])</dt>
<dd>
@@ -36263,105 +36308,174 @@
<p>This return value is not a guarantee that <code title=dom-canvas-getContext><a href=#dom-canvas-getcontext>getContext()</a></code> will or will not return an object, as
conditions (e.g. availability of system resources) can vary over time.</p>
+ <p>Throws an <code><a href=#invalidstateerror>InvalidStateError</a></code> if the <code title=dom-canvas-setContext><a href=#dom-canvas-setcontext>setContext()</a></code> or <code title=dom-canvas-transferControlToProxy><a href=#dom-canvas-transfercontroltoproxy>transferControlToProxy()</a></code> methods have been
+ used.</p>
+
</dd>
+ <dt><var title="">canvas</var> . <code title=dom-canvas-setContext><a href=#dom-canvas-setcontext>setContext</a></code>(<var title="">context</var>)</dt>
+
+ <dd>
+
+ <p>Sets the <code><a href=#the-canvas-element>canvas</a></code>' rendering context to the given object.</p>
+
+ <p>Throws an <code><a href=#invalidstateerror>InvalidStateError</a></code> exception if the <code title=dom-canvas-getContext><a href=#dom-canvas-getcontext>getContext()</a></code> or <code title=dom-canvas-transferControlToProxy><a href=#dom-canvas-transfercontroltoproxy>transferControlToProxy()</a></code> methods have been
+ used.</p>
+
+ </dd>
+
</dl><div class=impl>
- <p>A <code><a href=#the-canvas-element>canvas</a></code> element can have a <dfn id=primary-context>primary context</dfn>, which is the first context
- to have been obtained for that element. When created, a <code><a href=#the-canvas-element>canvas</a></code> element must not have
- a <a href=#primary-context>primary context</a>.</p>
+ <p>There are two ways for a <code><a href=#the-canvas-element>canvas</a></code> element to acquire a rendering context: the
+ <code><a href=#the-canvas-element>canvas</a></code> element can provide one via the <code title=dom-canvas-getContext><a href=#dom-canvas-getcontext>getContext()</a></code> method, and one can be assigned to it via the
+ <code title=dom-canvas-setContext><a href=#dom-canvas-setcontext>setContext()</a></code> method. In addition, the whole issue of a
+ rendering context can be taken out of the <code><a href=#the-canvas-element>canvas</a></code> element's hands and passed to a
+ <code><a href=#canvasproxy>CanvasProxy</a></code> object, which itself can then be assigned a rendering context using its
+ <code title=dom-CanvasProxy-setContext><a href=#dom-canvasproxy-setcontext>setContext()</a></code> method.</p>
- <p>The <dfn id=dom-canvas-getcontext title=dom-canvas-getContext><code>getContext(<var title="">contextId</var>, <var title="">arguments...</var>)</code></dfn> method of the <code><a href=#the-canvas-element>canvas</a></code> element, when invoked,
- must run the following steps:</p>
+ <p>These three methods are mutually exclusive; calling any of the three makes the other two start
+ throwing <code><a href=#invalidstateerror>InvalidStateError</a></code> exceptions when called.</p>
- <ol><li><p>Let <var title="">contextId</var> be the first argument to the method.</li>
+ <p>Each rendering context has a <dfn id=concept-canvas-context-bitmap-mode title=concept-canvas-context-bitmap-mode>context bitmap
+ mode</dfn>, which is one of <dfn id=concept-canvas-fixed title=concept-canvas-fixed>fixed</dfn>, <dfn id=concept-canvas-unbound title=concept-canvas-unbound>unbound</dfn>, or <dfn id=concept-canvas-bound title=concept-canvas-bound>bound</dfn>.
+ Initially, rendering contexts must be in the <a href=#concept-canvas-bound title=concept-canvas-bound>unbound</a>
+ mode.</p>
- <li>
+ <hr><p>The <dfn id=dom-canvas-getcontext title=dom-canvas-getContext><code>getContext(<var title="">contextId</var>, <var title="">arguments...</var>)</code></dfn> method of the <code><a href=#the-canvas-element>canvas</a></code> element, when invoked,
+ must run the steps in the cell of the following table whose column header describes the
+ <code><a href=#the-canvas-element>canvas</a></code> element's <a href=#concept-canvas-context-mode title=concept-canvas-context-mode>canvas context mode</a>
+ and whose row header describes the method's first argument.</p>
- <p>If <var title="">contextId</var> is not the name of a context supported by the user agent,
- return null and abort these steps.</p>
+ <table><thead><tr><td>
+ <th><a href=#concept-canvas-none title=concept-canvas-none>none</a>
+ <th><a href=#concept-canvas-direct-2d title=concept-canvas-direct-2d>direct-2d</a>
+ <th><a href=#concept-canvas-direct-webgl title=concept-canvas-direct-webgl>direct-webgl</a>
+ <th><a href=#concept-canvas-indirect title=concept-canvas-indirect>indirect</a>
+ <th><a href=#concept-canvas-proxied title=concept-canvas-proxied>proxied</a>
+ <tbody><tr><th>"<dfn id=canvas-context-2d title=canvas-context-2d><code>2d</code></dfn>"
+ <td>
+ Set the <code><a href=#the-canvas-element>canvas</a></code> element's <a href=#concept-canvas-context-mode title=concept-canvas-context-mode>context
+ mode</a> to <a href=#concept-canvas-direct-2d title=concept-canvas-direct-2d>direct-2d</a>; follow the <a href=#2d-context-creation-algorithm>2D
+ context creation algorithm</a> defined in the section below, passing it the
+ <code><a href=#the-canvas-element>canvas</a></code> element, to obtain a <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> object; set
+ that object's <a href=#concept-canvas-context-bitmap-mode title=concept-canvas-context-bitmap-mode>context bitmap mode</a> to
+ <a href=#concept-canvas-fixed title=concept-canvas-fixed>fixed</a>, and return the
+ <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> object
+ <td>
+ Return the same object as was return the last time the method was invoked with this same
+ argument.
+ <td>
+ Return null.
+ <td>
+ Throw an <code><a href=#invalidstateerror>InvalidStateError</a></code> exception.
+ <td>
+ Throw an <code><a href=#invalidstateerror>InvalidStateError</a></code> exception.
- <p class=note>An example of this would be a user agent that theoretically supports the "<code title=canvas-context-webgl>webgl</code>" 3D context, in the case where the platform does not
- have hardware support for OpenGL and the user agent does not have a software OpenGL
- implementation. Despite the user agent recognising the "<code title=canvas-context-webgl>webgl</code>" name, it would return null at this step because that
- context is not, in practice, supported at the time of the call.</p>
+ <tr><th>"<dfn id=canvas-context-webgl title=canvas-context-webgl><code>webgl</code></dfn>", if the user agent supports the WebGL feature in its current configuration
+ <td>
+ Follow the instructions given in the WebGL specification's <i>Context Creation</i> section to
+ obtain either a <code><a href=#webglrenderingcontext>WebGLRenderingContext</a></code> or null; if the returned value is null,
+ then return null and abort these steps, otherwise, set the <code><a href=#the-canvas-element>canvas</a></code> element's <a href=#concept-canvas-context-mode title=concept-canvas-context-mode>context mode</a> to <a href=#concept-canvas-direct-webgl title=concept-canvas-direct-webgl>direct-webgl</a>, set the new
+ <code><a href=#webglrenderingcontext>WebGLRenderingContext</a></code> object's <a href=#concept-canvas-context-bitmap-mode title=concept-canvas-context-bitmap-mode>context bitmap mode</a> to <a href=#concept-canvas-fixed title=concept-canvas-fixed>fixed</a>, and return the <code><a href=#webglrenderingcontext>WebGLRenderingContext</a></code>
+ object‡ <a href=#refsWEBGL>[WEBGL]</a>
+ <td>
+ Return null.
+ <td>
+ Return the same object as was return the last time the method was invoked with this same
+ argument.
+ <td>
+ Throw an <code><a href=#invalidstateerror>InvalidStateError</a></code> exception.
+ <td>
+ Throw an <code><a href=#invalidstateerror>InvalidStateError</a></code> exception.
- </li>
+ <tr><th>A vendor-specific extension*
+ <td>
+ Behave as defined for the extension.
+ <td>
+ Behave as defined for the extension.
+ <td>
+ Behave as defined for the extension.
+ <td>
+ Throw an <code><a href=#invalidstateerror>InvalidStateError</a></code> exception.
+ <td>
+ Throw an <code><a href=#invalidstateerror>InvalidStateError</a></code> exception.
- <li><p>If the element has a <a href=#primary-context>primary context</a> and that context's entry in the <a href=http://wiki.whatwg.org/wiki/CanvasContexts>WHATWG Wiki CanvasContexts page</a> does not
- list <var title="">contextId</var> as a context with which it is compatible, return null and
- abort these steps. <a href=#refsWHATWGWIKI>[WHATWGWIKI]</a></li>
+ <tr><th>An unsupported value†
+ <td>
+ Return null.
+ <td>
+ Return null.
+ <td>
+ Return null.
+ <td>
+ Throw an <code><a href=#invalidstateerror>InvalidStateError</a></code> exception.
+ <td>
+ Throw an <code><a href=#invalidstateerror>InvalidStateError</a></code> exception.
+
+ </table><p class=tablenote><small>* Vendors may define experimental contexts using the syntax <code><var title="">vendorname</var>-<var title="">context</var></code>, for example,
+ <code>moz-3d</code>.</small></p>
- <li><p>If the element does not have a <a href=#primary-context>primary context</a>, let the element's
- <a href=#primary-context>primary context</a> be <var title="">contextId</var>.</li>
+ <p class=tablenote><small>† For example, the "<code title=canvas-context-webgl><a href=#canvas-context-webgl>webgl</a></code>" value in the case of a user agent having exhausted the
+ graphics hardware's abilities and having no software fallback implementation.</small></p>
- <li><p>If the <code title=dom-canvas-getContext><a href=#dom-canvas-getcontext>getContext()</a></code> method has already been
- invoked on this element for the same <var title="">contextId</var>, return the same object as was
- returned that time, and abort these steps. The additional arguments are ignored.</li>
+ <p class=tablenote><small>‡ The second (and subsequent) argument(s) to the method, if
+ any, are ignored in all cases except this one. See the WebGL specification for
+ details.</small></p>
- <li><p><dfn id=getcontext-return title=getContext-return>Return a new object for <var title="">contextId</var></dfn>, as defined by the specification given for <var title="">contextId</var>'s entry in the <a href=http://wiki.whatwg.org/wiki/CanvasContexts>WHATWG Wiki CanvasContexts page</a>. <a href=#refsWHATWGWIKI>[WHATWGWIKI]</a></li>
-
- </ol><p>The <dfn id=dom-canvas-supportscontext title=dom-canvas-supportsContext><code>supportsContext(<var title="">contextId</var>,
+ <hr><p>The <dfn id=dom-canvas-supportscontext title=dom-canvas-supportsContext><code>supportsContext(<var title="">contextId</var>,
<var title="">arguments...</var>)</code></dfn> method of the <code><a href=#the-canvas-element>canvas</a></code> element, when
invoked, must return false if calling <code title=dom-canvas-getContext><a href=#dom-canvas-getcontext>getContext()</a></code> on
the same object and with the same arguments would definitely return null at this time, and true
otherwise.</p>
- <p>New context types may be registered in the <a href=http://wiki.whatwg.org/wiki/CanvasContexts>WHATWG Wiki CanvasContexts page</a>. <a href=#refsWHATWGWIKI>[WHATWGWIKI]</a></p>
+ <hr><p>The <dfn id=dom-canvas-setcontext title=dom-canvas-setContext><code>setContext(<var title="">context</var>)</code></dfn> method of the <code><a href=#the-canvas-element>canvas</a></code> element, when invoked, must
+ run following the steps:</p>
- <p>Anyone is free to edit the WHATWG Wiki CanvasContexts page at any time to add a new context
- type. These new context types must be specified with the following information:</p>
+ <ol><li><p>If the <code><a href=#the-canvas-element>canvas</a></code> element's <a href=#concept-canvas-context-mode title=concept-canvas-context-mode>canvas
+ context mode</a> is neither <a href=#concept-canvas-none title=concept-canvas-none>none</a> nor <a href=#concept-canvas-indirect title=concept-canvas-indirect>indirect</a>, throw an <code><a href=#invalidstateerror>InvalidStateError</a></code> and
+ abort these steps.</li>
- <dl><dt>Keyword</dt>
+ <li><p>If <var title="">context</var>'s <a href=#concept-canvas-context-bitmap-mode title=concept-canvas-context-bitmap-mode>context
+ bitmap mode</a> is <a href=#concept-canvas-fixed title=concept-canvas-fixed>fixed</a>, then throw an
+ <code><a href=#invalidstateerror>InvalidStateError</a></code> and abort these steps.</li>
- <dd><p>The value of <var title="">contextID</var> that will return the object for the new
- API.</dd>
+ <li><p>If <var title="">context</var>'s <a href=#concept-canvas-context-bitmap-mode title=concept-canvas-context-bitmap-mode>context
+ bitmap mode</a> is <a href=#concept-canvas-bound title=concept-canvas-bound>bound</a>, then run <var title="">context</var>'s <a href=#concept-canvas-unbinding-steps title=concept-canvas-unbinding-steps>unbinding steps</a> and
+ set its <var title="">context</var>'s <a href=#concept-canvas-context-bitmap-mode title=concept-canvas-context-bitmap-mode>context
+ bitmap mode</a> to <a href=#concept-canvas-unbound title=concept-canvas-unbound>unbound</a>.</li>
+ <li><p>Run <var title="">context</var>'s <a href=#concept-canvas-binding-steps title=concept-canvas-binding-steps>binding
+ steps</a> to bind it to this <code><a href=#the-canvas-element>canvas</a></code> element.</li>
- <dt>Specification</dt>
+ <li><p>Set the <code><a href=#the-canvas-element>canvas</a></code> element's <a href=#concept-canvas-context-mode title=concept-canvas-context-mode>context
+ mode</a> to <a href=#concept-canvas-indirect title=concept-canvas-indirect>indirect</a> and the <var title="">context</var>'s <a href=#concept-canvas-context-bitmap-mode title=concept-canvas-context-bitmap-mode>context bitmap
+ mode</a> to <a href=#concept-canvas-bound title=concept-canvas-bound>bound</a>.</li>
- <dd><p>A link to a formal specification of the context type's API. It could be another page on
- the Wiki, or a link to an external page. If the type does not have a formal specification, an
- informal description can be substituted until such time as a formal specification is
- available.</dd>
+ </ol><hr></div>
-
- <dt>Compatible with</dt>
-
- <dd><p>The list of context types that are compatible with this one (i.e. that operate on the same
- underlying bitmap). This list must be transitive and symmetric; if one context type is defined as
- compatible with another, then all types it is compatible with must be compatible with all types
- the other is compatible with.</dd>
-
- </dl><p>Vendors may also define experimental contexts using the syntax <code><var title="">vendorname</var>-<var title="">context</var></code>, for example, <code>moz-3d</code>.
- Such contexts should be registered in the WHATWG Wiki CanvasContexts page.</p>
-
- </div>
-
- <hr><dl class=domintro><dt><var title="">url</var> = <var title="">canvas</var> . <code title=dom-canvas-toDataURL><a href=#dom-canvas-todataurl>toDataURL</a></code>( [ <var title="">type</var>, ... ] )</dt>
+ <dl class=domintro><dt><var title="">url</var> = <var title="">canvas</var> . <code title=dom-canvas-toDataURL><a href=#dom-canvas-todataurl>toDataURL</a></code>( [ <var title="">type</var>, ... ] )</dt>
<dt><var title="">url</var> = <var title="">canvas</var> . <code title=dom-canvas-toDataURLHD><a href=#dom-canvas-todataurlhd>toDataURLHD</a></code>( [ <var title="">type</var>, ... ] )</dt>
<dd>
- <p>Returns a <a href=#data-protocol title="data protocol"><code title="">data:</code> URL</a> for the image in the canvas.</p>
+ <p>Returns a <a href=#data-protocol title="data protocol"><code title="">data:</code> URL</a> for the image in
+ the canvas.</p>
- <p>The first argument, if provided, controls the type of the image
- to be returned (e.g. PNG or JPEG). The default is <code title="">image/png</code>; that type is also used if the given
- type isn't supported. The other arguments are specific to the
- type, and control the way that the image is generated, as given in
- the table below.</p>
+ <p>The first argument, if provided, controls the type of the image to be returned (e.g. PNG or
+ JPEG). The default is <code title="">image/png</code>; that type is also used if the given type
+ isn't supported. The other arguments are specific to the type, and control the way that the
+ image is generated, as given <a href=#canvas-serialization-arguments>in the table
+ below</a>.</p>
- <p>When trying to use types other than "<code>image/png</code>",
- 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 "<code title="">data:image/png,</code>" or "<code title="">data:image/png;</code>". 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
+ <p>When trying to use types other than "<code>image/png</code>", 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 "<code title="">data:image/png,</code>" or "<code title="">data:image/png;</code>". 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 "<code title="">data:,</code>".)</p>
- <p>The <code title=dom-canvas-toDataURL><a href=#dom-canvas-todataurl>toDataURL()</a></code>
- method returns the data at a resolution of 96dpi. The <code title=dom-canvas-toDataURLHD><a href=#dom-canvas-todataurlhd>toDataURLHD()</a></code> method returns
- it at the native canvas bitmap resolution.</p>
+ <p>The <code title=dom-canvas-toDataURL><a href=#dom-canvas-todataurl>toDataURL()</a></code> method returns the data at a
+ resolution of 96dpi. The <code title=dom-canvas-toDataURLHD><a href=#dom-canvas-todataurlhd>toDataURLHD()</a></code> method
+ returns it at the native canvas bitmap resolution.</p>
</dd>
@@ -36370,195 +36484,220 @@
<dd>
- <p>Creates a <code><a href=#blob>Blob</a></code> object representing a file
- containing the image in the canvas, and invokes a callback with a
- handle to that object.</p>
+ <p>Creates a <code><a href=#blob>Blob</a></code> object representing a file containing the image in the canvas,
+ and invokes a callback with a handle to that object.</p>
- <p>The second argument, if provided, controls the type of the
- image to be returned (e.g. PNG or JPEG). The default is <code title="">image/png</code>; that type is also used if the given
- type isn't supported. The other arguments are specific to the
- type, and control the way that the image is generated, as given in
- the table below.</p>
+ <p>The second argument, if provided, controls the type of the image to be returned (e.g. PNG or
+ JPEG). The default is <code title="">image/png</code>; that type is also used if the given type
+ isn't supported. The other arguments are specific to the type, and control the way that the
+ image is generated, as given <a href=#canvas-serialization-arguments>in the table
+ below</a>.</p>
- <p>The <code title=dom-canvas-toBlob><a href=#dom-canvas-toblob>toBlob()</a></code> method
- provides the data at a resolution of 96dpi. The <code title=dom-canvas-toBlobHD><a href=#dom-canvas-toblobhd>toBlobHD()</a></code> method provides it
- at the native canvas bitmap resolution.</p>
+ <p>The <code title=dom-canvas-toBlob><a href=#dom-canvas-toblob>toBlob()</a></code> method provides the data at a resolution
+ of 96dpi. The <code title=dom-canvas-toBlobHD><a href=#dom-canvas-toblobhd>toBlobHD()</a></code> method provides it at the
+ native canvas bitmap resolution.</p>
</dd>
</dl><div class=impl>
- <p>The <dfn id=dom-canvas-todataurl title=dom-canvas-toDataURL><code>toDataURL()</code></dfn> and <dfn id=dom-canvas-todataurlhd title=dom-canvas-toDataURLHD><code>toDataURLHD()</code></dfn>
- methods must run the following steps:</p>
+ <p>The <dfn id=dom-canvas-todataurl title=dom-canvas-toDataURL><code>toDataURL()</code></dfn> and <dfn id=dom-canvas-todataurlhd title=dom-canvas-toDataURLHD><code>toDataURLHD()</code></dfn> methods must run the following
+ steps:</p>
- <ol><!--ADD-TOPIC:Security--><li><p>If the <code><a href=#the-canvas-element>canvas</a></code> element's <i>origin-clean</i>
- flag is set to false, throw a <code><a href=#securityerror>SecurityError</a></code> exception
- and abort these steps.</p>
+ <ol><!--ADD-TOPIC:Security--><li><p>If the <code><a href=#the-canvas-element>canvas</a></code> element's bitmap's <a href=#concept-canvas-origin-clean title=concept-canvas-origin-clean>origin-clean</a> flag is set to false, throw a
+ <code><a href=#securityerror>SecurityError</a></code> exception and abort these steps.</p>
<!--REMOVE-TOPIC:Security-->
- <li><p>If the canvas has no pixels (i.e. either its horizontal
- dimension or its vertical dimension is zero) then return the string
- "<code title="">data:,</code>" and abort these steps. (This is the
- shortest <a href=#data-protocol title="data protocol"><code title="">data:</code>
- URL</a>; it represents the empty string in a <code title="">text/plain</code> resource.)</li>
+ <li><p>If the <code><a href=#the-canvas-element>canvas</a></code> element's bitmap has no pixels (i.e. either its horizontal
+ dimension or its vertical dimension is zero) then return the string "<code title="">data:,</code>" and abort these steps. (This is the shortest <a href=#data-protocol title="data
+ protocol"><code title="">data:</code> URL</a>; it represents the empty string in a <code title="">text/plain</code> resource.)</li>
- <li><p>Let <var title="">file</var> be <a href=#a-serialization-of-the-image-as-a-file>a serialization of the
- image as a file</a>, using the method's arguments (if any) as
- the <var title="">arguments</var>, and with the <var title="">native</var> flag set if the method is the <code title=dom-canvas-toDataURLHD><a href=#dom-canvas-todataurlhd>toDataURLHD()</a></code> method, and not
- otherwise.</li>
+ <li><p>Let <var title="">file</var> be <a href=#a-serialization-of-the-bitmap-as-a-file title="a serialization of the bitmap as a file">a
+ serialization of the <code>canvas</code> element's bitmap as a file</a>, using the method's
+ arguments (if any) as the <var title="">arguments</var>, and with the <var title="">native</var>
+ flag set if the method is the <code title=dom-canvas-toDataURLHD><a href=#dom-canvas-todataurlhd>toDataURLHD()</a></code> method,
+ and not otherwise.</li>
- <li><p>Return a <a href=#data-protocol title="data protocol"><code title="">data:</code> URL</a> representing <var title="">file</var>. <a href=#refsRFC2397>[RFC2397]</a></p>
+ <li><p>Return a <a href=#data-protocol title="data protocol"><code title="">data:</code> URL</a> representing
+ <var title="">file</var>. <a href=#refsRFC2397>[RFC2397]</a></p>
- <!-- should we explicitly require the URL to be base64-encoded and
- not have any parameters, to ensure the same exact URL is generated
- in each browser? -->
+ <!-- should we explicitly require the URL to be base64-encoded and not have any parameters, to
+ ensure the same exact URL is generated in each browser? -->
- </ol><p>The <dfn id=dom-canvas-toblob title=dom-canvas-toBlob><code>toBlob()</code></dfn>
- and <dfn id=dom-canvas-toblobhd title=dom-canvas-toBlobHD><code>toBlobHD()</code></dfn>
- methods must run the following steps:</p>
+ </ol><p>The <dfn id=dom-canvas-toblob title=dom-canvas-toBlob><code>toBlob()</code></dfn> and <dfn id=dom-canvas-toblobhd title=dom-canvas-toBlobHD><code>toBlobHD()</code></dfn> methods must run the following
+ steps:</p>
- <ol><!--ADD-TOPIC:Security--><li><p>If the <code><a href=#the-canvas-element>canvas</a></code> element's <i>origin-clean</i>
- flag is set to false, throw a <code><a href=#securityerror>SecurityError</a></code> exception
- and abort these steps.</p>
+ <ol><!--ADD-TOPIC:Security--><li><p>If the <code><a href=#the-canvas-element>canvas</a></code> element's bitmap's <a href=#concept-canvas-origin-clean title=concept-canvas-origin-clean>origin-clean</a> flag is set to false, throw a
+ <code><a href=#securityerror>SecurityError</a></code> exception and abort these steps.</p>
<!--REMOVE-TOPIC:Security-->
- <li><p>Let <var title="">callback</var> be the first
- argument.</li>
+ <li><p>Let <var title="">callback</var> be the first argument.</li>
- <li><p>Let <var title="">arguments</var> be the second and
- subsequent arguments to the method, if any.</li>
+ <li><p>Let <var title="">arguments</var> be the second and subsequent arguments to the method, if
+ any.</li>
<li>
- <p>If the canvas has no pixels (i.e. either its horizontal
+ <p>If the <code><a href=#the-canvas-element>canvas</a></code> element's bitmap has no pixels (i.e. either its horizontal
dimension or its vertical dimension is zero) then let <var title="">result</var> be null.</p>
- <p>Otherwise, let <var title="">result</var> be a
- <code><a href=#blob>Blob</a></code> object representing <a href=#a-serialization-of-the-image-as-a-file>a serialization of the
- image as a file</a>, using <var title="">arguments</var>, and
- with the <var title="">native</var> flag set if the method is the
- <code title=dom-canvas-toBlobHD><a href=#dom-canvas-toblobhd>toBlobHD()</a></code> method, and
- not otherwise. <a href=#refsFILEAPI>[FILEAPI]</a> </p>
+ <p>Otherwise, let <var title="">result</var> be a <code><a href=#blob>Blob</a></code> object representing <a href=#a-serialization-of-the-bitmap-as-a-file title="a serialization of the bitmap as a file">a serialization of the <code>canvas</code>
+ element's bitmap as a file</a>, using <var title="">arguments</var>, and with the <var title="">native</var> flag set if the method is the <code title=dom-canvas-toBlobHD><a href=#dom-canvas-toblobhd>toBlobHD()</a></code> method, and not otherwise. <a href=#refsFILEAPI>[FILEAPI]</a> </p>
</li>
- <li><p>Return, but continue running these steps
- asynchronously.</li>
+ <li><p>Return, but continue running these steps asynchronously.</li>
- <li><p>If <var title="">callback</var> is null, abort these
- steps.</li>
+ <li><p>If <var title="">callback</var> is null, abort these steps.</li>
- <li><p><a href=#queue-a-task>Queue a task</a> to invoke the
- <code><a href=#filecallback>FileCallback</a></code> <var title="">callback</var> with <var title="">result</var> as its argument. The <a href=#task-source>task source</a>
- for this task is the <dfn id=canvas-blob-serialization-task-source>canvas blob serialization task
- source</dfn>. <a href=#refsFILESYSTEMAPI>[FILESYSTEMAPI]</a></li>
+ <li><p><a href=#queue-a-task>Queue a task</a> to invoke the <code><a href=#filecallback>FileCallback</a></code> <var title="">callback</var> with <var title="">result</var> as its argument. The <a href=#task-source>task
+ source</a> for this task is the <dfn id=canvas-blob-serialization-task-source>canvas blob serialization task source</dfn>. <a href=#refsFILESYSTEMAPI>[FILESYSTEMAPI]</a></li>
- </ol><p>When a user agent is to create <dfn id=a-serialization-of-the-image-as-a-file>a serialization of the image
- as a file</dfn>, optionally with some given <var title="">arguments</var>, and optionally with a <var title="">native</var> flag set, it must create an image file in the
- format given by the first value of <var title="">arguments</var>,
- or, if there are no <var title="">arguments</var>, in the PNG
- format. <a href=#refsPNG>[PNG]</a></p>
+ </ol></div>
+ <!--REMOVE-TOPIC:DOM APIs-->
- <p>If the <var title="">native</var> flag is set, or if the canvas
- bitmap has one pixel per coordinate space unit, then the image file
- must have the same pixel data (before compression, if applicable) as
- the canvas bitmap, and if the file format used supports encoding
- resolution metadata, the resolution of the bitmap (device pixels per
- coordinate space units being interpreted as image pixels per CSS
- pixel) must be given as well.</p>
- <p>Otherwise, the image file's pixel data must be the canvas
- 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).</p>
+ <!--ADD-TOPIC:Workers-->
+ <h5 id=proxying-canvases-to-workers><span class=secno>4.8.11.1 </span>Proxying canvases to workers</h5>
- <p>If <var title="">arguments</var> is not empty, the first value
- must be interpreted as a <a href=#mime-type title="MIME type">MIME type</a>
- giving the format to use. If the type has any parameters, it must be
- treated as not supported.</p>
+ <p>Since DOM nodes cannot be accessed across worker boundaries, a proxy object is needed to enable
+ workers to render to <code><a href=#the-canvas-element>canvas</a></code> elements in <code><a href=#document>Document</a></code>s.</p>
- <p class=example>For example, the value "<code>image/png</code>"
- would mean to generate a PNG image, the value
- "<code>image/jpeg</code>" would mean to generate a JPEG image, and
- the value "<code>image/svg+xml</code>" would mean to generate an SVG
- image (which would probably require that the implementation actually
- keep enough information to reliably render an SVG image from the
- canvas).</p>
+ <pre class=idl>interface <dfn id=canvasproxy>CanvasProxy</dfn> {
+ void <a href=#dom-canvasproxy-setcontext title=dom-CanvasProxy-setContext>setContext</a>(<a href=#renderingcontext>RenderingContext</a> context);
+};
+<a href=#canvasproxy>CanvasProxy</a> implements <a href=#transferable>Transferable</a>;</pre>
- <p>User agents must support PNG ("<code>image/png</code>"). User
- agents may support other types. If the user agent does not support
- the requested type, it must create the file using the PNG format. <a href=#refsPNG>[PNG]</a></p>
+ <dl class=domintro><dt><var title="">canvasProxy</var> = <var title="">canvas</var> . <code title=dom-canvas-transferControlToProxy><a href=#dom-canvas-transfercontroltoproxy>transferControlToProxy</a></code>()</dt>
- <p>User agents must <a href=#converted-to-ascii-lowercase title="converted to ASCII
- lowercase">convert the provided type to ASCII lowercase</a>
- before establishing if they support that type.</p>
+ <dd>
- <p>For image types that do not support an alpha channel, the
- serialized image must be the canvas image composited onto a solid
- black background using the source-over operator.</p>
+ <p>Returns a <code><a href=#canvasproxy>CanvasProxy</a></code> object that can be used to transfer control for this
+ canvas over to another document (e.g. an <code><a href=#the-iframe-element>iframe</a></code> from another <a href=#origin>origin</a>)
+ or to a worker.</p>
- <p>If the first argument in <var title="">arguments</var> gives a
- type corresponding to one of the types given in the first column of
- the following table, and the user agent supports that type, then the
- subsequent arguments, if any, must be treated as described in the
- second cell of that row.</p>
+ <p>Throws an <code><a href=#invalidstateerror>InvalidStateError</a></code> exception if the <code title=dom-canvas-getContext><a href=#dom-canvas-getcontext>getContext()</a></code> or <code title=dom-canvas-setContext><a href=#dom-canvas-setcontext>setContext()</a></code> methods have been used.</p>
- </div>
+ </dd>
- <table><thead><tr><th> Type <th> Other arguments <th> Reference
- <tbody><tr><td> <code>image/jpeg</code>
- <td> The second argument<span class=impl>, if it</span> is a
- number in the range 0.0 to 1.0 inclusive<span class=impl>, must
- be</span> treated as the desired quality level. <span class=impl>If it is not a number or is outside that range, the
- user agent must use its default value, as if the argument had
- been omitted.</span>
- <td> <a href=#refsJPEG>[JPEG]</a>
- </table><div class=impl>
+ <dt><var title="">canvasProxy</var> . <code title=dom-CanvasProxy-setContext><a href=#dom-canvasproxy-setcontext>setContext</a></code>(<var title="">context</var>)</dt>
- <p>For the purposes of these rules, an argument is considered to be
- a number if it is converted to an IDL double value by the rules for
- handling arguments of type <code title="">any</code> in the Web IDL
- specification. <a href=#refsWEBIDL>[WEBIDL]</a></p>
+ <dd>
- <p>Other arguments must be ignored and must not cause the user agent
- to throw an exception. A future version of this specification will
- probably define other parameters to be passed to these methods to
- allow authors to more carefully control compression settings, image
- metadata, etc.</p>
+ <p>Sets the <code><a href=#canvasproxy>CanvasProxy</a></code> object's <code><a href=#the-canvas-element>canvas</a></code> element's rendering context to
+ the given object.</p>
- </div>
- <!--REMOVE-TOPIC:DOM APIs-->
+ <p>Throws an <code><a href=#invalidstateerror>InvalidStateError</a></code> exception if the <code><a href=#canvasproxy>CanvasProxy</a></code> has been
+ <a href=#transfer-a-transferable-object title="transfer a Transferable object">transfered</a>.</p>
+ </dd>
- <div data-component="HTML Canvas 2D Context (editor: Ian Hickson)">
+ </dl><hr><p>The <dfn id=dom-canvas-transfercontroltoproxy title=dom-canvas-transferControlToProxy><code>transferControlToProxy()</code></dfn>
+ method of the <code><a href=#the-canvas-element>canvas</a></code> element, when invoked, must run following the steps:</p>
- <h5 id=2dcontext><span class=secno>4.8.11.1 </span>The 2D context</h5>
+ <ol><li><p>If the <code><a href=#the-canvas-element>canvas</a></code> element's <a href=#concept-canvas-context-mode title=concept-canvas-context-mode>canvas
+ context mode</a> is not <a href=#concept-canvas-none title=concept-canvas-none>none</a>, throw an
+ <code><a href=#invalidstateerror>InvalidStateError</a></code> and abort these steps.</li>
- <!-- v2: we're on v5. suggestions for subsequent versions are marked v6, v7, v8. -->
+ <li><p>Set the <code><a href=#the-canvas-element>canvas</a></code> element's <a href=#concept-canvas-context-mode title=concept-canvas-context-mode>context
+ mode</a> to <a href=#concept-canvas-proxied title=concept-canvas-proxied>proxied</a>.</li>
- <p>This specification defines the <dfn id=canvas-context-2d title=canvas-context-2d><code>2d</code></dfn> context type, whose
- API is implemented using the <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code>
- interface.</p>
+ <li><p>Return a <code><a href=#canvasproxy>CanvasProxy</a></code> object bound to this <code><a href=#the-canvas-element>canvas</a></code>
+ element.</li>
- <div class=impl>
+ </ol><p>A <code><a href=#canvasproxy>CanvasProxy</a></code> object can be <a href=#concept-transferable-neutered title=concept-transferable-neutered>neutered</a> (like any <code><a href=#transferable>Transferable</a></code> object),
+ meaning it can no longer be <a href=#transfer-a-transferable-object title="transfer a Transferable object">transferred</a>, and
+ can be <dfn id=concept-canvasproxy-disabled title=concept-CanvasProxy-disabled>disabled</dfn>, meaning it can no longer be bound
+ to rendering contexts. When first created, a <code><a href=#canvasproxy>CanvasProxy</a></code> object must be neither.</p>
- <p>When the <code title=dom-canvas-getContext><a href=#dom-canvas-getcontext>getContext()</a></code>
- method of a <code><a href=#the-canvas-element>canvas</a></code> element is to <a href=#getcontext-return title=getContext-return>return a new object for the <var title="">contextId</var></a> <code title=canvas-context-2d><a href=#canvas-context-2d>2d</a></code>, the user agent must return a
- new <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> object. Any additional
- arguments are ignored.</p>
+ <p>A <code><a href=#canvasproxy>CanvasProxy</a></code> is created with a link to a <code><a href=#the-canvas-element>canvas</a></code> element. A
+ <code><a href=#canvasproxy>CanvasProxy</a></code> object that has not been <a href=#concept-canvasproxy-disabled title=concept-CanvasProxy-disabled>disabled</a> must have a strong reference to its canvas
+ element.</p>
+ <p>The <dfn id=dom-canvasproxy-setcontext title=dom-CanvasProxy-setContext><code>setContext(<var title="">context</var>)</code></dfn> method of <code><a href=#canvasproxy>CanvasProxy</a></code> objects, when invoked,
+ must run following the steps:</p>
+
+ <ol><li><p>If the <code><a href=#canvasproxy>CanvasProxy</a></code> object has been <a href=#concept-canvasproxy-disabled title=concept-CanvasProxy-disabled>disabled</a>, throw an <code><a href=#invalidstateerror>InvalidStateError</a></code> and
+ abort these steps.</li>
+
+ <li><p>If the <code><a href=#canvasproxy>CanvasProxy</a></code> object has not been <a href=#concept-transferable-neutered title=concept-transferable-neutered>neutered</a>, then <a href=#concept-transferable-neutered title=concept-transferable-neutered>neuter</a> it.</li>
+
+ <li><p>If <var title="">context</var>'s <a href=#concept-canvas-context-bitmap-mode title=concept-canvas-context-bitmap-mode>context
+ bitmap mode</a> is <a href=#concept-canvas-fixed title=concept-canvas-fixed>fixed</a>, then throw an
+ <code><a href=#invalidstateerror>InvalidStateError</a></code> and abort these steps.</li>
+
+ <li><p>If <var title="">context</var>'s <a href=#concept-canvas-context-bitmap-mode title=concept-canvas-context-bitmap-mode>context
+ bitmap mode</a> is <a href=#concept-canvas-bound title=concept-canvas-bound>bound</a>, then run <var title="">context</var>'s <a href=#concept-canvas-unbinding-steps title=concept-canvas-unbinding-steps>unbinding steps</a> and
+ set its <var title="">context</var>'s <a href=#concept-canvas-context-bitmap-mode title=concept-canvas-context-bitmap-mode>context
+ bitmap mode</a> to <a href=#concept-canvas-unbound title=concept-canvas-unbound>unbound</a>.</li>
+
+ <li><p>Run <var title="">context</var>'s <a href=#concept-canvas-binding-steps title=concept-canvas-binding-steps>binding
+ steps</a> to bind it to this <code><a href=#canvasproxy>CanvasProxy</a></code> object's <code><a href=#the-canvas-element>canvas</a></code>
+ element.</li>
+
+ <li><p>Set the <var title="">context</var>'s <a href=#concept-canvas-context-bitmap-mode title=concept-canvas-context-bitmap-mode>context bitmap mode</a> to <a href=#concept-canvas-bound title=concept-canvas-bound>bound</a>.</li>
+
+ </ol><p id=transferCanvasProxy>To <a href=#transfer-a-transferable-object title="transfer a Transferable object">transfer</a> a
+ <code><a href=#canvasproxy>CanvasProxy</a></code> object <var title="">old</var> to a new owner <var title="">owner</var>,
+ a user agent must create a new <code><a href=#canvasproxy>CanvasProxy</a></code> object linked to the same
+ <code><a href=#the-canvas-element>canvas</a></code> element as <var title="">old</var>, thus obtaining <var title="">new</var>,
+ must <a href=#concept-transferable-neutered title=concept-Transferable-neutered>neuter</a> and <a href=#concept-canvasproxy-disabled title=concept-CanvasProxy-disabled>disable</a> the <var title="">old</var> object, and must
+ finally return <var title="">new</var>.</p>
+
+ <div class=example>
+
+ <p>Here is a clock implemented on a worker. First, the main page:</p>
+
+ <pre><!DOCTYPE HTML>
+<title>Clock</title>
+<canvas></canvas> <!-- defaults to 300x150 -->
+<script>
+ var canvas = document.getElementsByTagName('canvas')[0];
+ var proxy = canvas.transferControlToProxy());
+ var worker = new Worker('clock.js');
+ worker.postMessage(proxy, [proxy]);
+</script></pre>
+
+ <p>Second, the worker:</p>
+
+ <pre>onmessage = function (event) {
+ var context = new CanvasRenderingContext2d();
+ event.data.setContext(context); // event.data is the CanvasProxy object
+ setInterval(function () {
+ context.clearRect(0, 0, context.width, context.height);
+ context.fillText(0, 100, new Date());
+ context.commit();
+ }, 1000);
+};</pre>
+
</div>
- <p>The 2D context represents a flat Cartesian surface whose origin
- (0,0) is at the top left corner, with the coordinate space having
- <var title="">x</var> values increasing when going right, and <var title="">y</var> values increasing when going down.</p>
+ <!--REMOVE-TOPIC:Workers-->
- <pre class=idl>interface <dfn id=canvasrenderingcontext2d>CanvasRenderingContext2D</dfn> {
+ <h5 id=2dcontext><span class=secno>4.8.11.2 </span>The 2D rendering context</h5>
+
+ <!-- v2: we're on v5. suggestions for subsequent versions are marked v6, v7, v8. -->
+
+ <pre class=idl>typedef (<a href=#htmlimageelement>HTMLImageElement</a> or
+ <a href=#htmlvideoelement>HTMLVideoElement</a> or
+ <a href=#htmlcanvaselement>HTMLCanvasElement</a> or
+ <a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a> or
+ <a href=#imagebitmap>ImageBitmap</a>) <dfn id=canvasimagesource>CanvasImageSource</dfn>;
+
+[<a href=#dom-context-2d title=dom-context-2d>Constructor</a>(optional unsigned long width, unsigned long height)]
+interface <dfn id=canvasrenderingcontext2d>CanvasRenderingContext2D</dfn> {
+
// back-reference to the canvas
readonly attribute <a href=#htmlcanvaselement>HTMLCanvasElement</a> <a href=#dom-context-2d-canvas title=dom-context-2d-canvas>canvas</a>;
+ // canvas dimensions
+ attribute unsigned long <a href=#dom-context-2d-width title=dom-context-2d-width>width</a>;
+ attribute unsigned long <a href=#dom-context-2d-height title=dom-context-2d-height>height</a>;
+
+ // for contexts that aren't directly <a href=#concept-canvas-fixed title=concept-canvas-fixed>fixed</a> to a specific canvas
+ void <a href=#dom-context-2d-commit title=dom-context-2d-commit>commit</a>(); // push the image to the <a href=#output-bitmap>output bitmap</a>
+
// state
void <a href=#dom-context-2d-save title=dom-context-2d-save>save</a>(); // push state on state stack
void <a href=#dom-context-2d-restore title=dom-context-2d-restore>restore</a>(); // pop state stack and restore state
@@ -36604,7 +36743,7 @@
attribute (DOMString or CanvasGradient or CanvasPattern) <a href=#dom-context-2d-fillstyle title=dom-context-2d-fillStyle>fillStyle</a>; // (default black)
<a href=#canvasgradient>CanvasGradient</a> <a href=#dom-context-2d-createlineargradient title=dom-context-2d-createLinearGradient>createLinearGradient</a>(double x0, double y0, double x1, double y1);
<a href=#canvasgradient>CanvasGradient</a> <a href=#dom-context-2d-createradialgradient title=dom-context-2d-createRadialGradient>createRadialGradient</a>(double x0, double y0, double r0, double x1, double y1, double r1);
- <a href=#canvaspattern>CanvasPattern</a> <a href=#dom-context-2d-createpattern title=dom-context-2d-createPattern>createPattern</a>((<a href=#htmlimageelement>HTMLImageElement</a> or <a href=#htmlcanvaselement>HTMLCanvasElement</a> or <a href=#htmlvideoelement>HTMLVideoElement</a>) image, DOMString repetition);
+ <a href=#canvaspattern>CanvasPattern</a> <a href=#dom-context-2d-createpattern title=dom-context-2d-createPattern>createPattern</a>(<a href=#canvasimagesource>CanvasImageSource</a> image, DOMString repetition);
<!--
// v8 we received one request from Ralf Richard G&oml;bel for a new kind of pattern: a hatch.
// basically it would be a series of dash styles, angles, line widths, and offsets
@@ -36646,9 +36785,9 @@
<a href=#textmetrics>TextMetrics</a> <a href=#dom-context-2d-measuretext title=dom-context-2d-measureText>measureText</a>(DOMString text);
// drawing images
- void <a href=#dom-context-2d-drawimage title=dom-context-2d-drawImage>drawImage</a>((<a href=#htmlimageelement>HTMLImageElement</a> or <a href=#htmlcanvaselement>HTMLCanvasElement</a> or <a href=#htmlvideoelement>HTMLVideoElement</a>) image, unrestricted double dx, unrestricted double dy);
- void <a href=#dom-context-2d-drawimage title=dom-context-2d-drawImage>drawImage</a>((<a href=#htmlimageelement>HTMLImageElement</a> or <a href=#htmlcanvaselement>HTMLCanvasElement</a> or <a href=#htmlvideoelement>HTMLVideoElement</a>) image, unrestricted double dx, unrestricted double dy, unrestricted double dw, unrestricted double dh);
- void <a href=#dom-context-2d-drawimage title=dom-context-2d-drawImage>drawImage</a>((<a href=#htmlimageelement>HTMLImageElement</a> or <a href=#htmlcanvaselement>HTMLCanvasElement</a> or <a href=#htmlvideoelement>HTMLVideoElement</a>) image, unrestricted double sx, unrestricted double sy, unrestricted double sw, unrestricted double sh, unrestricted double dx, unrestricted double dy, unrestricted double dw, unrestricted double dh);
+ void <a href=#dom-context-2d-drawimage title=dom-context-2d-drawImage>drawImage</a>(<a href=#canvasimagesource>CanvasImageSource</a> image, unrestricted double dx, unrestricted double dy);
+ void <a href=#dom-context-2d-drawimage title=dom-context-2d-drawImage>drawImage</a>(<a href=#canvasimagesource>CanvasImageSource</a> image, unrestricted double dx, unrestricted double dy, unrestricted double dw, unrestricted double dh);
+ void <a href=#dom-context-2d-drawimage title=dom-context-2d-drawImage>drawImage</a>(<a href=#canvasimagesource>CanvasImageSource</a> image, unrestricted double sx, unrestricted double sy, unrestricted double sw, unrestricted double sh, unrestricted double dx, unrestricted double dy, unrestricted double dw, unrestricted double dh);
// hit regions
void <a href=#dom-context-2d-addhitregion title=dom-context-2d-addHitRegion>addHitRegion</a>(<a href=#hitregionoptions>HitRegionOptions</a> options);
@@ -36685,6 +36824,7 @@
attribute DOMString <a href=#dom-context-2d-font title=dom-context-2d-font>font</a>; // (default 10px sans-serif)
attribute DOMString <a href=#dom-context-2d-textalign title=dom-context-2d-textAlign>textAlign</a>; // "start", "end", "left", "right", "center" (default: "start")
attribute DOMString <a href=#dom-context-2d-textbaseline title=dom-context-2d-textBaseline>textBaseline</a>; // "top", "hanging", "middle", "alphabetic", "ideographic", "bottom" (default: "alphabetic")
+ attribute DOMString <a href=#dom-context-2d-direction title=dom-context-2d-direction>direction</a>; // "ltr", "rtl"<!--, "auto"-->, "inherit" (default: "inherit")
};
[NoInterfaceObject]
@@ -36771,24 +36911,323 @@
methods, see https://bugzilla.mozilla.org/show_bug.cgi?id=623437
for an example, and its duplicates for more -->
- <dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-canvas><a href=#dom-context-2d-canvas>canvas</a></code></dt>
+ <dl class=domintro><dt><var title="">context</var> = <var title="">canvas</var> . <code title=dom-canvas-getContext><a href=#dom-canvas-getcontext>getContext</a></code>('2d')</dt>
<dd>
- <p>Returns the <code><a href=#the-canvas-element>canvas</a></code> element.</p>
+ <p>Returns a <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> object that is permanently bound to a particular <code><a href=#the-canvas-element>canvas</a></code> element.</p>
</dd>
+ <dt><var title="">context</var> = new <code title=dom-context-2d><a href=#dom-context-2d>CanvasRenderingContext2D</a></code>( [ <var title="">width</var>, <var title="">height</var> ] )</dt>
+
+ <dd>
+
+ <p>Returns an unbound <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> object with an implied bitmap with
+ the given dimensions in CSS pixels (300x150, if the arguments are omitted).</p>
+
+ </dd>
+
+ <dt><var title="">context</var> . <code title=dom-context-2d-canvas><a href=#dom-context-2d-canvas>canvas</a></code></dt>
+
+ <dd>
+
+ <p>Returns the <code><a href=#the-canvas-element>canvas</a></code> element, if the rendering context was obtained using the
+ <code title=dom-canvas-getContext><a href=#dom-canvas-getcontext>getContext()</a></code> method.</p>
+
+ </dd>
+
+ <dt><var title="">context</var> . <code title=dom-context-2d-width><a href=#dom-context-2d-width>width</a></code></dt>
+ <dt><var title="">context</var> . <code title=dom-context-2d-height><a href=#dom-context-2d-height>height</a></code></dt>
+
+ <dd>
+
+ <p>Return the dimensions of the bitmap, in CSS pixels.</p>
+
+ <p>Can be set, to update the bitmap's dimensions. If the rendering context is bound to a canvas,
+ this will also update the canvas' intrinsic dimensions.</p>
+
+ </dd>
+
+ <dt><var title="">context</var> . <code title=dom-context-2d-commit><a href=#dom-context-2d-commit>commit</a></code>()</dt>
+
+ <dd>
+
+ <p>If the rendering context is bound to a <code><a href=#the-canvas-element>canvas</a></code>, display the current frame.</p>
+
+ </dd>
+
</dl><div class=impl>
- <p>The <dfn id=dom-context-2d-canvas title=dom-context-2d-canvas><code>canvas</code></dfn>
- attribute must return the <code><a href=#the-canvas-element>canvas</a></code> element that the
- context paints on.</p>
+ <p>A <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> object can be obtained in two ways: the <code title=dom-canvas-getContext><a href=#dom-canvas-getcontext>getContext()</a></code> method on a <code><a href=#the-canvas-element>canvas</a></code> element (which
+ invokes the <a href=#2d-context-creation-algorithm>2D context creation algorithm</a>), and the <code title=dom-context-2d><a href=#dom-context-2d>CanvasRenderingContext2D()</a></code> constructor.</p>
- <p>Except where otherwise specified, for the 2D context interface,
- <strong>any method call with a numeric argument whose value is
- infinite or a NaN value must be ignored</strong>.</p>
+ <p>A <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> object has a <dfn id=scratch-bitmap>scratch bitmap</dfn> and can be bound
+ to an <dfn id=output-bitmap>output bitmap</dfn>. These are initialized when the object is created, and can be
+ subsequently adjusted when the rendering context is <a href=#concept-canvas-binding-steps title=concept-canvas-binding-steps>bound</a> or <a href=#concept-canvas-unbinding-steps title=concept-canvas-unbinding-steps>unbound</a>. In some cases, these bitmaps are the same
+ underlying bitmap. In general, the <a href=#scratch-bitmap>scratch bitmap</a> is what scripts interact with, and
+ the <a href=#output-bitmap>output bitmap</a> is what is being displayed. These bitmaps always have the same
+ dimensions.</p>
+<!--ADD-TOPIC:Security-->
+ <p>Each such bitmap has an <a href=#concept-canvas-origin-clean title=concept-canvas-origin-clean>origin-clean</a> flag,
+ which can be set to true or false. Initially, when one of these bitmaps is created, its <a href=#concept-canvas-origin-clean title=concept-canvas-origin-clean>origin-clean</a> flag must be set to true.</p>
+<!--REMOVE-TOPIC:Security-->
+
+ <p>These bitmaps also have a <a href=#hit-region-list>hit region list</a>, which is described in a later section.
+ Initially, this list is empty. <a href=#scratch-bitmap title="scratch bitmap">Scratch bitmaps</a> also have a
+ <dfn id=list-of-pending-interface-actions>list of pending interface actions</dfn>, which can contain instructions to draw the user's
+ attention to a location on the bitmap, and instructions to scroll to a location on the bitmap.
+ Initially, this list is also empty.</p>
+
+ <hr><p>The <dfn id=2d-context-creation-algorithm>2D context creation algorithm</dfn>, which is passed a <var title="">target</var> (a
+ <code><a href=#the-canvas-element>canvas</a></code> element), consists of running the following steps:</p>
+
+ <ol><li><p>Create a new <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> object.</li>
+
+ <li><p>Initialize its <code title=dom-context-2d-canvas><a href=#dom-context-2d-canvas>canvas</a></code> attribute to point to
+ <var title="">target</var>.</li>
+
+ <li><p>Let the new <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> object's <a href=#output-bitmap>output bitmap</a> and
+ <a href=#scratch-bitmap>scratch bitmap</a> both be the same bitmap as <var title="">target</var>'s bitmap (so
+ that they are shared).</li>
+
+ <li><p><a href=#concept-canvas-set-bitmap-dimensions title=concept-canvas-set-bitmap-dimensions>Set bitmap dimensions</a> to the
+ numeric values of <var title="">target</var>'s <code title=attr-canvas-width><a href=#attr-canvas-width>width</a></code> and
+ <code title=attr-canvas-height><a href=#attr-canvas-height>height</a></code> content attributes.</li>
+
+ <li><p>Return the new <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> object.</li>
+
+ </ol><hr><p>The <dfn id=dom-context-2d title=dom-context-2d><code>CanvasRenderingContext2D()</code></dfn> constructor, when
+ invoked, must run the following steps:</p>
+
+ <ol><li><p>Create a new <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> object.</li>
+
+ <li><p>Initialize its <code title=dom-context-2d-canvas><a href=#dom-context-2d-canvas>canvas</a></code> attribute to
+ null.</li>
+
+ <li><p>Let the new <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> object's <a href=#scratch-bitmap>scratch bitmap</a> be
+ a new bitmap.</li>
+
+ <li><p>If the constructor was called with arguments, let <var title="">width</var> and <var title="">height</var> be the first and second arguments, respectively. Otherwise, let <var title="">width</var> and <var title="">height</var> be 300 and 150, respectively.</li>
+
+ <li><p><a href=#concept-canvas-set-bitmap-dimensions title=concept-canvas-set-bitmap-dimensions>Set bitmap dimensions</a> to <var title="">width</var> and <var title="">height</var>.</li>
+
+ <li><p>Let the new <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> object have no <a href=#output-bitmap>output
+ bitmap</a>.</li>
+
+<!--
+ <li><p><span>Start autocommitting the scratch bitmap</span> for the new
+ <code>CanvasRenderingContext2D</code> object.</p></li>
+-->
+
+ <li><p>Return the new <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> object.</li>
+
+ </ol><hr><p>When the user agent is required to <dfn id=commit-the-scratch-bitmap>commit the scratch bitmap</dfn> for a rendering
+ context, it must run the following steps:
+
+ <ol><li><p>Let <var title="">bitmap copy</var> be a copy of the rendering context's <a href=#scratch-bitmap>scratch
+ bitmap</a>.</li>
+
+<!--ADD-TOPIC:Security-->
+ <li><p>Let <var title="">origin-clean flag copy</var> be a copy of the rendering context's
+ <a href=#scratch-bitmap>scratch bitmap</a>'s <a href=#concept-canvas-origin-clean title=concept-canvas-origin-clean>origin-clean</a>
+ flag.</li>
+<!--REMOVE-TOPIC:Security-->
+
+ <li><p>Let <var title="">hit region list copy</var> be a copy of the rendering context's
+ <a href=#scratch-bitmap>scratch bitmap</a>'s <a href=#hit-region-list>hit region list</a>.</li>
+
+ <li><p>Let <var title="">list of pending interface actions copy</var> be a copy of the rendering
+ context's <a href=#scratch-bitmap>scratch bitmap</a>'s <a href=#list-of-pending-interface-actions>list of pending interface actions</a>.</li>
+
+ <li><p>Empty the <a href=#scratch-bitmap>scratch bitmap</a>'s <a href=#list-of-pending-interface-actions>list of pending interface actions</a>.</li>
+
+ <li><p>If the rendering context has no <a href=#output-bitmap>output bitmap</a>, abort these steps.</li>
+
+ <li><p>Let <var title="">output bitmap</var> be the rendering context's <a href=#output-bitmap>output
+ bitmap</a>.</li>
+
+ <li>
+
+ <p><a href=#queue-a-task>Queue a task</a> from the <a href=#canvas-updating-task-source>canvas updating task source</a> of the
+ <a href=#output-bitmap>output bitmap</a>'s <code><a href=#the-canvas-element>canvas</a></code> element's <a href=#event-loop>event loop</a> to perform
+ the following substeps:</p>
+
+ <ol><li><p>Overwrite <var title="">output bitmap</var> with <var title="">bitmap
+ copy</var>.</li>
+
+<!--ADD-TOPIC:Security-->
+ <li><p>Overwrite <var title="">output bitmap</var>'s <a href=#concept-canvas-origin-clean title=concept-canvas-origin-clean>origin-clean</a> flag with <var title="">origin-clean
+ flag copy</var>.</li>
+<!--REMOVE-TOPIC:Security-->
+
+ <li><p>Overwrite <var title="">output bitmap</var>'s <a href=#hit-region-list>hit region list</a> with <var title="">hit region list copy</var>.</li>
+
+ <li><p>Follow the directions in the <var title="">list of pending interface actions
+ copy</var>.</li>
+
+ </ol></li>
+
+ </ol><p>The <dfn id=canvas-updating-task-source>canvas updating task source</dfn> is just used for the algorithm above.</p>
+
+<!--(right now we're requiring commit())
+ <p>When a user agent is to <dfn>start autocommitting the scratch bitmap</dfn> for a rendering
+ context, it must asynchronously start running the following algorithm. This algorithm interacts
+ closely with the <span>event loop</span> mechanism; in particular, it has a <span>synchronous
+ section</span> (which is triggered as part of the <span>event loop</span> algorithm). The steps in
+ that section are marked with ⌛.</p>
+
+ <ol>
+
+ <li><p><i>Top</i>: <span>Await a stable state</span>. The <span>synchronous section</span>
+ consists of the following steps. (The steps in the <span>synchronous section</span> are marked
+ with ⌛.)</p></li>
+
+ <li><p>⌛ <span>Commit the scratch bitmap</span> for the rendering context.</p></li>
+
+ <li><p>End the <span>synchronous section</span>, continuing the remaining steps
+ asynchronously.</p></li>
+
+ <li><p>Return to the step labeled <i>top</i>.</p></li>
+
+ </ol>
+-->
+
+ <p>The <dfn id=dom-context-2d-commit title=dom-context-2d-commit><code>commit()</code></dfn> method must run the
+ following steps:</p>
+
+ <ol><li><p>If the rendering context's <a href=#concept-canvas-context-bitmap-mode title=concept-canvas-context-bitmap-mode>context bitmap
+ mode</a> is <a href=#concept-canvas-bound title=concept-canvas-bound>fixed</a>, throw an
+ <code><a href=#invalidstateerror>InvalidStateError</a></code> exception and abort these steps.</li>
+
+ <li><p><a href=#commit-the-scratch-bitmap>Commit the scratch bitmap</a> for the rendering context.</li>
+
+ </ol><p class=note>The <a href=#scratch-bitmap>scratch bitmap</a> is only <a href=#commit-the-scratch-bitmap title="commit the scratch
+ bitmap">committed</a> when the <code title=dom-context-2d-commit><a href=#dom-context-2d-commit>commit()</a></code> method is
+ called. (This doesn't matter for <code><a href=#the-canvas-element>canvas</a></code> elements in <a href=#concept-canvas-direct-2d title=concept-canvas-direct-2d>direct-2d</a> mode, since there the <a href=#scratch-bitmap>scratch
+ bitmap</a> is also the <code><a href=#the-canvas-element>canvas</a></code> element's bitmap so every drawing operation is
+ immediately drawn.)</p>
+
+ <hr><p>When the user agent is to <dfn id=concept-canvas-set-bitmap-dimensions title=concept-canvas-set-bitmap-dimensions>set bitmap
+ dimensions</dfn> to <var title="">width</var> and <var title="">height</var>, it must run the
+ following steps:</p>
+
+ <ol><li><p><a href=#reset-the-rendering-context-to-its-default-state>Reset the rendering context to its default state</a>.</li>
+
+ <li><p>Clear the <a href=#scratch-bitmap>scratch bitmap</a>'s <a href=#hit-region-list>hit region list</a> and its <a href=#list-of-pending-interface-actions>list of
+ pending interface actions</a>.</li>
+
+ <li><p>Resize the <a href=#scratch-bitmap>scratch bitmap</a> to the new <var title="">width</var> and <var title="">height</var> and clear it to fully transparent black.</li>
+
+ <li><p>If the rendering context has an <a href=#output-bitmap>output bitmap</a>, and the <a href=#scratch-bitmap>scratch
+ bitmap</a> is a different bitmap than the <a href=#output-bitmap>output bitmap</a>, then resize the
+ <a href=#output-bitmap>output bitmap</a> to the new <var title="">width</var> and <var title="">height</var>
+ and clear it to fully transparent black.</li>
+
+ <li>
+
+ <p>If the rendering context's <a href=#concept-canvas-context-bitmap-mode title=concept-canvas-context-bitmap-mode>context bitmap
+ mode</a> is <a href=#concept-canvas-fixed title=concept-canvas-fixed>fixed</a>, then run these substeps:</p>
+
+ <ol><li><p>Let <var title="">canvas</var> be the <code><a href=#the-canvas-element>canvas</a></code> element to which the rendering
+ context's <code title=dom-context-2d-canvas><a href=#dom-context-2d-canvas>canvas</a></code> attribute was initialized.</li>
+
+ <li><p>If the rendering context's <a href=#concept-canvas-context-bitmap-mode title=concept-canvas-context-bitmap-mode>context
+ bitmap mode</a> is <a href=#concept-canvas-fixed title=concept-canvas-fixed>fixed</a> and the numeric value of
+ the <var title="">canvas</var>' <code title=attr-canvas-width><a href=#attr-canvas-width>width</a></code> content attribute
+ differs from <var title="">width</var>, then set <var title="">canvas</var>' <code title=attr-canvas-width><a href=#attr-canvas-width>width</a></code> content attribute to the shortest possible string
+ representing <var title="">width</var> as a <a href=#valid-non-negative-integer>valid non-negative integer</a>.</li>
+
+ <li><p>If the rendering context's <a href=#concept-canvas-context-bitmap-mode title=concept-canvas-context-bitmap-mode>context
+ bitmap mode</a> is <a href=#concept-canvas-fixed title=concept-canvas-fixed>fixed</a> and the numeric value of
+ the <var title="">canvas</var>' <code title=attr-canvas-height><a href=#attr-canvas-height>height</a></code> content attribute
+ differs from <var title="">height</var>, then set <var title="">canvas</var>' <code title=attr-canvas-height><a href=#attr-canvas-height>height</a></code> content attribute to the shortest possible string
+ representing <var title="">height</var> as a <a href=#valid-non-negative-integer>valid non-negative integer</a>.</li>
+
+ </ol></li>
+
+ </ol><div class=example>
+ <p>Only one square appears to be drawn in the following example:</p>
+ <pre>// canvas is a reference to a <canvas> element
+var context = canvas.getContext('2d');
+context.fillRect(0,0,50,50);
+canvas.setAttribute('width', '300'); // clears the canvas
+context.fillRect(0,100,50,50);
+canvas.width = canvas.width; // clears the canvas
+context.fillRect(100,0,50,50); // only this square remains</pre>
+ </div>
+
+ <hr><p>When the user agent is to run the <dfn id=concept-canvas-unbinding-steps title=concept-canvas-unbinding-steps>unbinding
+ steps</dfn> for a rendering context, it must run the following steps:</p>
+
+ <ol><li><p><a href=#reset-the-rendering-context-to-its-default-state>Reset the rendering context to its default state</a>.</li>
+
+ <li><p>Clear the <a href=#scratch-bitmap>scratch bitmap</a>'s <a href=#hit-region-list>hit region list</a> and its <a href=#list-of-pending-interface-actions>list of
+ pending interface actions</a>.</li>
+
+ <li><p>Clear the <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> object's <a href=#scratch-bitmap>scratch bitmap</a> to a
+ transparent black.</li>
+
+<!--ADD-TOPIC:Security-->
+ <li><p>Set the <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> object's <a href=#scratch-bitmap>scratch bitmap</a>'s <a href=#concept-canvas-origin-clean title=concept-canvas-origin-clean>origin-clean</a> flag to true.</li>
+<!--REMOVE-TOPIC:Security-->
+
+ <li><p>Let the <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> object have no <a href=#output-bitmap>output
+ bitmap</a>.</li>
+
+ </ol><p>When the user agent is to run the <dfn id=concept-canvas-binding-steps title=concept-canvas-binding-steps>binding steps</dfn>
+ to bind the rendering context to the <code><a href=#the-canvas-element>canvas</a></code> element <var title="">target</var>, it
+ must run the following steps:</p>
+
+ <ol><li><p><a href=#reset-the-rendering-context-to-its-default-state>Reset the rendering context to its default state</a>.</li>
+
+ <li><p>Clear the <a href=#scratch-bitmap>scratch bitmap</a>'s <a href=#hit-region-list>hit region list</a> and its <a href=#list-of-pending-interface-actions>list of
+ pending interface actions</a>.</li>
+
+ <li><p>Resize the <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> object's <a href=#scratch-bitmap>scratch bitmap</a> to
+ the dimensions of <var title="">target</var>'s bitmap and clear it to fully transparent
+ black.</li>
+
+<!--ADD-TOPIC:Security-->
+ <li><p>Set the <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> object's <a href=#scratch-bitmap>scratch bitmap</a>'s <a href=#concept-canvas-origin-clean title=concept-canvas-origin-clean>origin-clean</a> flag to true.</li>
+<!--REMOVE-TOPIC:Security-->
+
+ <li><p>Let the <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> object's <a href=#output-bitmap>output bitmap</a> be <var title="">target</var>'s bitmap.</li>
+
+ </ol><hr><p>The <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> 2D rendering context represents a flat linear
+ Cartesian surface whose origin (0,0) is at the top left corner, with the coordinate space having
+ <var title="">x</var> values increasing when going right, and <var title="">y</var> values
+ increasing when going down. The <var title="">x</var>-coordinate of the left-most edge is equal to
+ the width of the rendering context's <a href=#scratch-bitmap>scratch bitmap</a> in CSS pixels; similarly, the
+ <var title="">y</var>-coordinate of the bottom-most edge is equal to the height of the rendering
+ context's <a href=#scratch-bitmap>scratch bitmap</a> in CSS pixels.</p>
+
+ <p>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 two device pixels per unit in the
+ coordinate space, so that the rendering remains at high quality throughout. Anti-aliasing can
+ similarly be implemented using over-sampling with bitmaps of a higher resolution than the final
+ image on the display.</p>
+
+ <hr><p>The <dfn id=dom-context-2d-canvas title=dom-context-2d-canvas><code>canvas</code></dfn> attribute must return the
+ value it was initialized to when the object was created.</p>
+
+ <p>The <dfn id=dom-context-2d-width title=dom-context-2d-width><code>width</code></dfn> attribute, on getting, must
+ return the width of the rendering context's <a href=#scratch-bitmap>scratch bitmap</a>, in CSS pixels. On
+ setting, it must <a href=#concept-canvas-set-bitmap-dimensions title=concept-canvas-set-bitmap-dimensions>set bitmap dimensions</a>
+ to the new value and the current height of the rendering context's <a href=#scratch-bitmap>scratch bitmap</a> in
+ CSS pixels, respectively.</p>
+
+ <p>The <dfn id=dom-context-2d-height title=dom-context-2d-height><code>height</code></dfn> attribute, on getting, must
+ return the height of the rendering context's <a href=#scratch-bitmap>scratch bitmap</a>, in CSS pixels. On
+ setting, it must <a href=#concept-canvas-set-bitmap-dimensions title=concept-canvas-set-bitmap-dimensions>set bitmap dimensions</a>
+ to the current width of the rendering context's <a href=#scratch-bitmap>scratch bitmap</a> in CSS pixels and the
+ new value, respectively.</p>
+
+ <hr><p>Except where otherwise specified, for the 2D context interface, <strong>any method call with a
+ numeric argument whose value is infinite or a NaN value must be ignored</strong>.</p>
+
<!--
Philip Taylor wrote:
> My experience with some 3d canvas code is that infinities come up in
@@ -36801,94 +37240,84 @@
> exceptions when passing in non-finite arguments.
-->
- <p>Whenever the CSS value <code title="">currentColor</code> is used
- as a color in this API, the "computed value of the 'color' property"
- for the purposes of determining the computed value of the <code title="">currentColor</code> keyword is the computed value of the
- 'color' property on the element in question at the time that the
- color is specified (e.g. when the appropriate attribute is set, or
- when the method is called; not when the color is rendered or
- otherwise used). If the computed value of the 'color' property is
- undefined for a particular case (e.g. because the element is not
- <a href=#in-a-document>in a <code>Document</code></a>), then the "computed value
- of the 'color' property" for the purposes of determining the
- computed value of the <code title="">currentColor</code> keyword is
- fully opaque black. <a href=#refsCSSCOLOR>[CSSCOLOR]</a></p>
+ <p>Whenever the CSS value <code title="">currentColor</code> is used as a color in the
+ <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> API, the "computed value of the 'color' property" for the
+ purposes of determining the computed value of the <code title="">currentColor</code> keyword is
+ the value described by the appropriate entry in the following list:</p>
- <p>In the case of <code title=dom-canvasgradient-addColorStop><a href=#dom-canvasgradient-addcolorstop>addColorStop()</a></code> on
- <code><a href=#canvasgradient>CanvasGradient</a></code>, the "computed value of the 'color'
- property" for the purposes of determining the computed value of the
- <code title="">currentColor</code> keyword is always fully opaque
- black (there is no associated element). <a href=#refsCSSCOLOR>[CSSCOLOR]</a></p>
+ <dl><dt>If the rendering context's <a href=#concept-canvas-context-bitmap-mode title=concept-canvas-context-bitmap-mode>context bitmap
+ mode</a> is <a href=#concept-canvas-fixed title=concept-canvas-fixed>fixed</a> and the <code><a href=#the-canvas-element>canvas</a></code>
+ element is <a href=#being-rendered>being rendered</a></dt>
- <p class=note>This is because <code><a href=#canvasgradient>CanvasGradient</a></code> objects
- are <code><a href=#the-canvas-element>canvas</a></code>-neutral — a
- <code><a href=#canvasgradient>CanvasGradient</a></code> object created by one
- <code><a href=#the-canvas-element>canvas</a></code> 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>
+ <dd><p>The "computed value of the 'color' property" for the purposes of determining the computed
+ value of the <code title="">currentColor</code> keyword is the computed value of the 'color'
+ property on the <code><a href=#the-canvas-element>canvas</a></code> element at the time that the color is specified (e.g. when
+ the appropriate attribute is set, or when the method is called; not when the color is rendered or
+ otherwise used). <a href=#refsCSSCOLOR>[CSSCOLOR]</a></dd>
- <p class=note>Similar concerns exist with font-related properties;
- the rules for those are described in detail in the relevant section
- below.</p>
+ <dt>In all other cases</dt>
- </div>
+ <dd><p>The "computed value of the 'color' property" for the purposes of determining the computed
+ value of the <code title="">currentColor</code> keyword is fully opaque black. <a href=#refsCSSCOLOR>[CSSCOLOR]</a></dd>
+ </dl><p>In the case of <code title=dom-canvasgradient-addColorStop><a href=#dom-canvasgradient-addcolorstop>addColorStop()</a></code> on
+ <code><a href=#canvasgradient>CanvasGradient</a></code>, the "computed value of the 'color' property" for the purposes of
+ determining the computed value of the <code title="">currentColor</code> keyword is always fully
+ opaque black (there is no associated element). <a href=#refsCSSCOLOR>[CSSCOLOR]</a></p>
- <h6 id=resolution><span class=secno>4.8.11.1.1 </span>Resolution</h6>
+ <p class=note>This is because <code><a href=#canvasgradient>CanvasGradient</a></code> objects are
+ <code><a href=#the-canvas-element>canvas</a></code>-neutral — a <code><a href=#canvasgradient>CanvasGradient</a></code> object created by one
+ <code><a href=#the-canvas-element>canvas</a></code> 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>
- <p>The user agent may use a bitmap of any square resolution as the
- backing store for a canvas that uses the 2D context. Once a canvas
- has a bitmap, that canvas must keep its resolution for its
- lifetime.</p>
+ <p class=note>Similar concerns exist with font-related properties; the rules for those are
+ described in detail in the relevant section below.</p>
- <p class=note>In general, user agents are encouraged to use a
- resolution equal to the screen resolution. Ideally, the number of
- device pixels per CSS pixel would be a multiple of two. Several
- factors can affect the screen resolution: most prominently the
- actual display resolution, but also important is the current zoom
- level.</p>
+ </div>
- <p>All the bitmaps created during a single <a href=#concept-task title=concept-task>task</a> for canvases that use 2D contexts
- must have the same resolution.
- <a class=fingerprint href=#fingerprint><img alt="(This is a fingerprinting vector.)" src=http://images.whatwg.org/fingerprint.png></a>
- </p>
- <pre class=idl>partial interface <a href=#screen>Screen</a> {
- readonly attribute double <a href=#dom-screen-canvasresolution title=dom-screen-canvasResolution>canvasResolution</a>;
-};</pre>
+ <h6 id=implementation-notes><span class=secno>4.8.11.2.1 </span>Implementation notes</h6>
- <dl class=domintro><dt><var title="">window</var> . <code title=dom-Window-screen>screen</code> . <code title=dom-screen-canvasResolution><a href=#dom-screen-canvasresolution>canvasResolution</a></code></dt>
+ <p><i>This section is non-normative.</i></p>
- <dd>
+ <p>Although the way the specification is written it might sound like an implementation needs to
+ track up to four bitmaps per canvas or rendering context — one <a href=#scratch-bitmap>scratch bitmap</a>,
+ one <a href=#output-bitmap>output bitmap</a> for the rendering context, one bitmap for the <code><a href=#the-canvas-element>canvas</a></code>,
+ and one bitmap for the actually currently rendered image — user agents can in fact generally
+ optimise this to only one or two.</p>
- <p>Returns the resolution that has been, or will be, used for bitmaps during this <a href=#concept-task title=concept-task>task</a>.</p>
+ <p>The <a href=#scratch-bitmap>scratch bitmap</a>, when it isn't the same bitmap as the <a href=#output-bitmap>output
+ bitmap</a>, is only directly observable if it is read, and therefore 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 <code title=dom-context-2d-commit><a href=#dom-context-2d-commit>commit()</a></code>, <code title=dom-context-2d-drawImage><a href=#dom-context-2d-drawimage>drawImage()</a></code>, or the <code>ImageBitmap()</code>
+ constructor). In many cases, this will be more memory efficient.</p>
- </dd>
+ <p>The bitmap of a <code><a href=#the-canvas-element>canvas</a></code> element is the one bitmap that's pretty much always going
+ to be needed in practice. The <a href=#output-bitmap>output bitmap</a> of a rendering context, when it has one,
+ is always just an alias to a <code><a href=#the-canvas-element>canvas</a></code> element's bitmap.</p>
- </dl><div class=impl>
+ <p>Additional bitmaps are sometimes needed, e.g. to enable fast drawing when the canvas is being
+ painted at a different size than its intrinsic size, or to enable double buffering so that the
+ rendering commands from the <a href=#scratch-bitmap>scratch bitmap</a> can be applied without the rendering being
+ updated midway.</p>
- <p>The <dfn id=dom-screen-canvasresolution title=dom-screen-canvasResolution><code>canvasResolution</code></dfn>
- attribute of the <code><a href=#screen>Screen</a></code> object must return the
- resolution, in image pixels per coordinate space units, that any
- canvas bitmaps created during this <a href=#concept-task title=concept-task>task</a> will use (or have used). <a href=#refsCSSOMVIEW>[CSSOMVIEW]</a></p>
- </div>
+ <h6 id=the-canvas-state><span class=secno>4.8.11.2.2 </span>The canvas state</h6>
- <h6 id=the-canvas-state><span class=secno>4.8.11.1.2 </span>The canvas state</h6>
+ <p>Each <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> rendering context maintains a stack of drawing
+ states. <dfn id=drawing-state title="drawing state">Drawing states</dfn> consist of:</p>
- <p>Each context maintains a stack of drawing states. <dfn id=drawing-state title="drawing state">Drawing states</dfn> consist of:</p>
-
<ul class=brief><li>The current <a href=#transformations title=dom-context-2d-transformation>transformation matrix</a>.</li>
<li>The current <a href=#clipping-region>clipping region</a>.</li>
- <li>The current values of the following attributes: <code title=dom-context-2d-strokeStyle><a href=#dom-context-2d-strokestyle>strokeStyle</a></code>, <code title=dom-context-2d-fillStyle><a href=#dom-context-2d-fillstyle>fillStyle</a></code>, <code title=dom-context-2d-globalAlpha><a href=#dom-context-2d-globalalpha>globalAlpha</a></code>, <code title=dom-context-2d-lineWidth><a href=#dom-context-2d-linewidth>lineWidth</a></code>, <code title=dom-context-2d-lineCap><a href=#dom-context-2d-linecap>lineCap</a></code>, <code title=dom-context-2d-lineJoin><a href=#dom-context-2d-linejoin>lineJoin</a></code>, <code title=dom-context-2d-miterLimit><a href=#dom-context-2d-miterlimit>miterLimit</a></code>, <code title=dom-context-2d-lineDashOffset><a href=#dom-context-2d-linedashoffset>lineDashOffset</a></code>, <code title=dom-context-2d-shadowOffsetX><a href=#dom-context-2d-shadowoffsetx>shadowOffsetX</a></code>, <code title=dom-context-2d-shadowOffsetY><a href=#dom-context-2d
-shadowoffsety>shadowOffsetY</a></code>, <code title=dom-context-2d-shadowBlur><a href=#dom-context-2d-shadowblur>shadowBlur</a></code>, <code title=dom-context-2d-shadowColor><a href=#dom-context-2d-shadowcolor>shadowColor</a></code>, <code title=dom-context-2d-globalCompositeOperation><a href=#dom-context-2d-globalcompositeoperation>globalCompositeOperation</a></code>, <code title=dom-context-2d-font><a href=#dom-context-2d-font>font</a></code>, <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code>, <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code>, <code title=dom-context-2d-imageSmoothingEnabled><a href=#dom-context-2d-imagesmoothingenabled>imageSmoothingEnabled</a></code>.</li>
+ <li>The current values of the following attributes: <code title=dom-context-2d-strokeStyle><a href=#dom-context-2d-strokestyle>strokeStyle</a></code>, <code title=dom-context-2d-fillStyle><a href=#dom-context-2d-fillstyle>fillStyle</a></code>, <code title=dom-context-2d-globalAlpha><a href=#dom-context-2d-globalalpha>globalAlpha</a></code>, <code title=dom-context-2d-lineWidth><a href=#dom-context-2d-linewidth>lineWidth</a></code>, <code title=dom-context-2d-lineCap><a href=#dom-context-2d-linecap>lineCap</a></code>, <code title=dom-context-2d-lineJoin><a href=#dom-context-2d-linejoin>lineJoin</a></code>, <code title=dom-context-2d-miterLimit><a href=#dom-context-2d-miterlimit>miterLimit</a></code>, <code title=dom-context-2d-lineDashOffset><a href=#dom-context-2d-linedashoffset>lineDashOffset</a></code>, <code title=dom-context-2d-shadowOffsetX><a href=#dom-context-2d-shadowoffsetx>shadowOffsetX</a></code>, <code title=dom-context-2d-shadowOffsetY><a href=#dom-context-2d
-shadowoffsety>shadowOffsetY</a></code>, <code title=dom-context-2d-shadowBlur><a href=#dom-context-2d-shadowblur>shadowBlur</a></code>, <code title=dom-context-2d-shadowColor><a href=#dom-context-2d-shadowcolor>shadowColor</a></code>, <code title=dom-context-2d-globalCompositeOperation><a href=#dom-context-2d-globalcompositeoperation>globalCompositeOperation</a></code>, <code title=dom-context-2d-font><a href=#dom-context-2d-font>font</a></code>, <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code>, <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code>, <code title=dom-context-2d-direction><a href=#dom-context-2d-direction>direction</a></code>, <code title=dom-context-2d-imageSmoothingEnabled><a href=#dom-context-2d-imagesmoothingenabled>imageSmoothingEnabled</a></code>.</li>
<li>The current <a href=#dash-list>dash list</a>.</li>
- </ul><p class=note>The <a href=#current-default-path>current default path</a> and the
- current bitmap are not part of the drawing state. The <a href=#current-default-path>current
- default path</a> is persistent, and can only be reset using the
- <code title=dom-context-2d-beginPath><a href=#dom-context-2d-beginpath>beginPath()</a></code> method.
- The current bitmap is a property of the canvas, not the context.</p>
+ </ul><p class=note>The <a href=#current-default-path>current default path</a> and the rendering context's bitmaps are not
+ part of the drawing state. The <a href=#current-default-path>current default path</a> is persistent, and can only be
+ reset using the <code title=dom-context-2d-beginPath><a href=#dom-context-2d-beginpath>beginPath()</a></code> method. The bitmaps
+ depend on whether and how the rendering context is bound to a <code><a href=#the-canvas-element>canvas</a></code> element.</p>
<dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-save><a href=#dom-context-2d-save>save</a></code>()</dt>
@@ -36908,15 +37337,17 @@
</dl><div class=impl>
- <p>The <dfn id=dom-context-2d-save title=dom-context-2d-save><code>save()</code></dfn>
- method must push a copy of the current drawing state onto the
- drawing state stack.</p>
+ <p>The <dfn id=dom-context-2d-save title=dom-context-2d-save><code>save()</code></dfn> method must push a copy of the
+ current drawing state onto the drawing state stack.</p>
- <p>The <dfn id=dom-context-2d-restore title=dom-context-2d-restore><code>restore()</code></dfn> method
- must pop the top entry in the drawing state stack, and reset the
- drawing state it describes. If there is no saved state, the method
- must do nothing.</p>
+ <p>The <dfn id=dom-context-2d-restore title=dom-context-2d-restore><code>restore()</code></dfn> method must pop the top
+ entry in the drawing state stack, and reset the drawing state it describes. If there is no saved
+ state, the method must do nothing.</p>
+ <p>When the user agent is to <dfn id=reset-the-rendering-context-to-its-default-state>reset the rendering context to its default state</dfn>, it must
+ clear the drawing state stack and everything that <a href=#drawing-state>drawing state</a> consists of to
+ initial values.</p>
+
<!-- v7
idea from Mihai:
> 5. Drawing states should be saveable with IDs, and for easier restoring.
@@ -36938,7 +37369,7 @@
</div>
- <h6 id=drawingstyle-objects><span class=secno>4.8.11.1.3 </span><code><a href=#drawingstyle>DrawingStyle</a></code> objects</h6>
+ <h6 id=drawingstyle-objects><span class=secno>4.8.11.2.3 </span><code><a href=#drawingstyle>DrawingStyle</a></code> objects</h6>
<p>All the line styles (line width, caps, joins, and dash patterns)
and text styles (fonts) described in the next two sections apply to
@@ -36960,23 +37391,22 @@
</dl><div class=impl>
- <p>Each <code><a href=#drawingstyle>DrawingStyle</a></code> object has a <dfn id=styles-scope-node>styles scope
- node</dfn>.</p>
+ <p>Each <code><a href=#drawingstyle>DrawingStyle</a></code> object can have a <dfn id=styles-scope-object>styles scope object</dfn>.</p>
- <p>The <dfn id=dom-drawingstyle title=dom-DrawingStyle><code>DrawingStyle()</code></dfn>
- constructor, when invoked, must return a newly created
- <code><a href=#drawingstyle>DrawingStyle</a></code> object. If the constructor was passed an
- argument, then the <code><a href=#drawingstyle>DrawingStyle</a></code> object's <a href=#styles-scope-node>styles
- scope node</a> is that element. Otherwise, the object's
- <a href=#styles-scope-node>styles scope node</a> is the <code><a href=#document>Document</a></code> object
- of the <a href=#active-document>active document</a> of the <a href=#browsing-context>browsing
- context</a> of the <code><a href=#window>Window</a></code> object on which the
- interface object of the invoked constructor is found.</p>
+ <p>The <dfn id=dom-drawingstyle title=dom-DrawingStyle><code>DrawingStyle()</code></dfn> constructor, when invoked,
+ must return a newly created <code><a href=#drawingstyle>DrawingStyle</a></code> object. If the constructor was passed an
+ argument, then the <code><a href=#drawingstyle>DrawingStyle</a></code> object's <a href=#styles-scope-object>styles scope object</a> is that
+ element. Otherwise, if the <a href=#javascript-global-environment>JavaScript global environment</a> is a <a href=#document-environment>document
+ environment</a>, the object's <a href=#styles-scope-object>styles scope object</a> is the <code><a href=#document>Document</a></code>
+ object of the <a href=#active-document>active document</a> of the <a href=#browsing-context>browsing context</a> of the
+ <code><a href=#window>Window</a></code> object on which the interface object of the invoked constructor is found.
+ Otherwise, the <a href=#javascript-global-environment>JavaScript global environment</a> is a <a href=#worker-environment>worker environment</a>,
+ and the <a href=#styles-scope-object>styles scope object</a> is the worker.</p>
</div>
- <h6 id=line-styles><span class=secno>4.8.11.1.4 </span>Line styles</h6>
+ <h6 id=line-styles><span class=secno>4.8.11.2.4 </span>Line styles</h6>
<dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-lineWidth><a href=#dom-context-2d-linewidth>lineWidth</a></code> [ = <var title="">value</var> ]</dt>
<dt><var title="">styles</var> . <code title=dom-context-2d-lineWidth><a href=#dom-context-2d-linewidth>lineWidth</a></code> [ = <var title="">value</var> ]</dt>
@@ -37458,7 +37888,7 @@
hairline width with transform. ack Shaun Morris. --></div>
- <h6 id=text-styles><span class=secno>4.8.11.1.5 </span>Text styles</h6>
+ <h6 id=text-styles><span class=secno>4.8.11.2.5 </span>Text styles</h6>
<dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-font><a href=#dom-context-2d-font>font</a></code> [ = <var title="">value</var> ]</dt>
<dt><var title="">styles</var> . <code title=dom-context-2d-font><a href=#dom-context-2d-font>font</a></code> [ = <var title="">value</var> ]</dt>
@@ -37483,9 +37913,8 @@
<p>Returns the current text alignment settings.</p>
- <p>Can be set, to change the alignment. The possible values are
- <code title="">start</code>, <code title="">end</code>, <code title="">left</code>, <code title="">right</code>, and <code title="">center</code>. Other values are ignored. The default is
- <code title="">start</code>.</p>
+ <p>Can be set, to change the alignment. The possible values are and their meanings are given
+ below. Other values are ignored. The default is <code title="">start</code>.</p>
</dd>
@@ -37496,21 +37925,37 @@
<p>Returns the current baseline alignment settings.</p>
- <p>Can be set, to change the baseline alignment. The possible
- values and their meanings are given below. Other values are
- ignored. The default is <code title="">alphabetic</code>.</p>
+ <p>Can be set, to change the baseline alignment. The possible values and their meanings are
+ given below. Other values are ignored. The default is <code title=dom-concept-2d-textAlign-alphabetic>alphabetic</code>.</p>
</dd>
+ <dt><var title="">context</var> . <code title=dom-context-2d-direction><a href=#dom-context-2d-direction>direction</a></code> [ = <var title="">value</var> ]</dt>
+ <dt><var title="">styles</var> . <code title=dom-context-2d-direction><a href=#dom-context-2d-direction>direction</a></code> [ = <var title="">value</var> ]</dt>
+
+ <dd>
+
+ <p>Returns the current directionality.</p>
+
+ <p>Can be set, to change the directionality. The possible values and their meanings are given
+ below. Other values are ignored. The default is <code title=dom-concept-2d-textAlign-inherit>inherit</code>.</p>
+
+ </dd>
+
</dl><div class=impl>
- <p>Objects that implement the <code><a href=#canvasdrawingstyles>CanvasDrawingStyles</a></code>
- interface have attributes (defined in this section) that control how
- text is laid out (rasterized or outlined) by the object. Such
- objects also have a <dfn id=font-style-source-node>font style source node</dfn>. For
- <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> objects, this is the
- <code><a href=#the-canvas-element>canvas</a></code> element. For <code><a href=#drawingstyle>DrawingStyle</a></code> objects,
- it's the <a href=#styles-scope-node>styles scope node</a>.</p>
+ <p>Objects that implement the <code><a href=#canvasdrawingstyles>CanvasDrawingStyles</a></code> 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 <dfn id=font-style-source-object>font style source object</dfn>. For
+ <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> objects whose <a href=#concept-canvas-context-bitmap-mode title=concept-canvas-context-bitmap-mode>context bitmap mode</a> is <a href=#concept-canvas-fixed title=concept-canvas-fixed>fixed</a>, this is their <code><a href=#the-canvas-element>canvas</a></code> element; for other
+ <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> objects, if the <a href=#javascript-global-environment>JavaScript global environment</a>
+ is a <a href=#document-environment>document environment</a>, the object's <a href=#font-style-source-object>font style source object</a> is the
+ <code><a href=#document>Document</a></code> object of the <a href=#active-document>active document</a> of the <a href=#browsing-context>browsing
+ context</a> of the <code><a href=#window>Window</a></code> object on which the interface object of the
+ <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> object is found; otherwise the <a href=#javascript-global-environment>JavaScript global
+ environment</a> is a <a href=#worker-environment>worker environment</a> and the <a href=#font-style-source-object>font style source
+ object</a> is the worker. For <code><a href=#drawingstyle>DrawingStyle</a></code> objects, it's the <a href=#styles-scope-object>styles scope
+ object</a>.</p>
<p>The <dfn id=dom-context-2d-font title=dom-context-2d-font><code>font</code></dfn> IDL
attribute, on setting, must be parsed the same way as the 'font'
@@ -37524,15 +37969,13 @@
'initial'), then it must be ignored, without assigning a new font
value. <a href=#refsCSS>[CSS]</a></p>
- <p>Font names must be interpreted in the context of the <a href=#font-style-source-node>font
- style source node</a>'s stylesheets when the font is to be used;
- any fonts embedded using <code title="">@font-face</code> that are
- visible to that element must therefore be available once they are
- loaded. (If a reference font is used before it is fully loaded, or
- if the <a href=#font-style-source-node>font style source node</a> 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.) <a href=#refsCSSFONTS>[CSSFONTS]</a></p>
+ <p>Font names must be interpreted in the context of the <a href=#font-style-source-object>font style source object</a> when
+ the font is to be used; any fonts embedded using <code title="">@font-face</code> or loaded using
+ the <code><a href=#fontloader>FontLoader</a></code> that are visible to the <a href=#font-style-source-object>font style source object</a> must
+ therefore be available once they are loaded. If a font is used before it is fully loaded, or if
+ the <a href=#font-style-source-object>font style source object</a> 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. <a href=#refsCSSFONTS>[CSSFONTS]</a></p>
<p>Only vector fonts should be used by the user agent; if a user
agent were to use bitmap fonts then transformations would likely
@@ -37557,52 +38000,61 @@
</div>
- <p>When the object implementing the <code><a href=#canvasdrawingstyles>CanvasDrawingStyles</a></code>
- interface is created, the font of the context must be set to 10px
- sans-serif. 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
+ <p>When the object implementing the <code><a href=#canvasdrawingstyles>CanvasDrawingStyles</a></code> interface is created, the
+ font of the context must be set to 10px sans-serif. 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 <a href=#font-style-source-object>font style
+ source object</a> at the time that the attribute is set, if it is an element. 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 <a href=#font-style-source-object>font style
+ source object</a> at the time that the attribute is set, if it is an element. If the computed
+ values are undefined for a particular case (e.g. because the <a href=#font-style-source-object>font style source object</a>
+ is not an element or is not <a href=#being-rendered>being rendered</a>), then the relative keywords must be
+ interpreted relative to the normal-weight 10px sans-serif default.</p>
+ <p>The <dfn id=dom-context-2d-textalign title=dom-context-2d-textAlign><code>textAlign</code></dfn> IDL attribute, on
+ getting, must return the current value. On setting, if the value is one of <code title=dom-concept-2d-textAlign-start><a href=#dom-concept-2d-textalign-start>start</a></code>, <code title=dom-concept-2d-textAlign-end><a href=#dom-concept-2d-textalign-end>end</a></code>, <code title=dom-concept-2d-textAlign-left><a href=#dom-concept-2d-textalign-left>left</a></code>, <code title=dom-concept-2d-textAlign-right><a href=#dom-concept-2d-textalign-right>right</a></code>, or <code title=dom-concept-2d-textAlign-center><a href=#dom-concept-2d-textalign-center>center</a></code>, then the value must be changed to the new
+ value. Otherwise, the new value must be ignored. When the object implementing the
+ <code><a href=#canvasdrawingstyles>CanvasDrawingStyles</a></code> interface is created, the <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code> attribute must initially have the value <code title=dom-concept-2d-textAlign-start><a href=#dom-concept-2d-textalign-start>start</a></code>.</p>
- of the 'font-size' property of the <a href=#font-style-source-node>font style source
- node</a> at the time that the attribute is set, if that is an
- element. 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 <a href=#font-style-source-node>font
- style source node</a> at the time that the attribute is set, if
- that is an element. If the computed values are undefined for a
- particular case (e.g. because the <a href=#font-style-source-node>font style source
- node</a> is not an element or is not <a href=#in-a-document>in a
- <code>Document</code></a>), then the relative keywords must be
- interpreted relative to the normal-weight 10px sans-serif
- default.</p>
+ <p>The <dfn id=dom-context-2d-textbaseline title=dom-context-2d-textBaseline><code>textBaseline</code></dfn> IDL attribute, on
+ getting, must return the current value. On setting, if the value is one of <code title=dom-context-2d-textBaseline-top><a href=#dom-context-2d-textbaseline-top>top</a></code>, <code title=dom-context-2d-textBaseline-hanging><a href=#dom-context-2d-textbaseline-hanging>hanging</a></code>, <code title=dom-context-2d-textBaseline-middle><a href=#dom-context-2d-textbaseline-middle>middle</a></code>, <code title=dom-context-2d-textBaseline-alphabetic><a href=#dom-context-2d-textbaseline-alphabetic>alphabetic</a></code>, <code title=dom-context-2d-textBaseline-ideographic><a href=#dom-context-2d-textbaseline-ideographic>ideographic</a></code>, or <code title=dom-context-2d-textBaseline-bottom><a href=#dom-context-2d-textbaseline-bottom>bottom</a></code>, then the value must be changed to the
+ new value. Otherwise, the new value must be ignored. When the object implementing the
+ <code><a href=#canvasdrawingstyles>CanvasDrawingStyles</a></code> interface is created, the <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code> attribute must initially have the value
+ <code title=dom-context-2d-textBaseline-alphabetic><a href=#dom-context-2d-textbaseline-alphabetic>alphabetic</a></code>.</p>
- <p>The <dfn id=dom-context-2d-textalign title=dom-context-2d-textAlign><code>textAlign</code></dfn> IDL
- attribute, on getting, must return the current value. On setting, if
- the value is one of <code title="">start</code>, <code title="">end</code>, <code title="">left</code>, <code title="">right</code>, or <code title="">center</code>, then the
- value must be changed to the new value. Otherwise, the new value
- must be ignored. When the object implementing the
- <code><a href=#canvasdrawingstyles>CanvasDrawingStyles</a></code> interface is created, the <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code> attribute must
- initially have the value <code title="">start</code>.</p>
+ <p>The <dfn id=dom-context-2d-direction title=dom-context-2d-direction><code>direction</code></dfn> IDL attribute, on
+ getting, must return the current value. On setting, if the value is one of <code title=dom-context-2d-direction-ltr>ltr</code>, <code title=dom-context-2d-direction-rtl>rtl</code>, <!--<code
+ title="dom-context-2d-direction-auto">auto</code>,--> or or <code title=dom-context-2d-direction-inherit>inherit</code>, then the value must be changed to the new
+ value. Otherwise, the new value must be ignored. When the object implementing the
+ <code><a href=#canvasdrawingstyles>CanvasDrawingStyles</a></code> interface is created, the <code title=dom-context-2d-direction><a href=#dom-context-2d-direction>direction</a></code> attribute must initially have the value <code title=dom-context-2d-direction-inherit>inherit</code>.</p>
- <p>The <dfn id=dom-context-2d-textbaseline title=dom-context-2d-textBaseline><code>textBaseline</code></dfn>
- IDL attribute, on getting, must return the current value. On
- setting, if the value is one of <code title=dom-context-2d-textBaseline-top><a href=#dom-context-2d-textbaseline-top>top</a></code>, <code title=dom-context-2d-textBaseline-hanging><a href=#dom-context-2d-textbaseline-hanging>hanging</a></code>, <code title=dom-context-2d-textBaseline-middle><a href=#dom-context-2d-textbaseline-middle>middle</a></code>, <code title=dom-context-2d-textBaseline-alphabetic><a href=#dom-context-2d-textbaseline-alphabetic>alphabetic</a></code>,
- <code title=dom-context-2d-textBaseline-ideographic><a href=#dom-context-2d-textbaseline-ideographic>ideographic</a></code>,
- or <code title=dom-context-2d-textBaseline-bottom><a href=#dom-context-2d-textbaseline-bottom>bottom</a></code>,
- then the value must be changed to the new value. Otherwise, the new
- value must be ignored. When the object implementing the
- <code><a href=#canvasdrawingstyles>CanvasDrawingStyles</a></code> interface is created, the <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code> attribute
- must initially have the value <code title="">alphabetic</code>.</p>
-
</div>
- <p>The <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code>
+ <p>The <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textBaseline</a></code> attribute's allowed keywords are
+ as follows:</p>
+
+ <dl><dt><dfn id=dom-concept-2d-textalign-start title=dom-concept-2d-textAlign-start><code>start</code></dfn>
+ <dd><p>Align to the start edge of the text (left side in left-to-right text, right side in
+ right-to-left text).</dd>
+
+ <dt><dfn id=dom-concept-2d-textalign-end title=dom-concept-2d-textAlign-end><code>end</code></dfn>
+ <dd><p>Align to the end edge of the text (right side in left-to-right text, left side in
+ right-to-left text).</dd>
+
+ <dt><dfn id=dom-concept-2d-textalign-left title=dom-concept-2d-textAlign-left><code>left</code></dfn>
+ <dd><p>Align to the left.</dd>
+
+ <dt><dfn id=dom-concept-2d-textalign-right title=dom-concept-2d-textAlign-right><code>right</code></dfn>
+ <dd><p>Align to the right.</dd>
+
+ <dt><dfn id=dom-concept-2d-textalign-center title=dom-concept-2d-textAlign-center><code>center</code></dfn>
+ <dd><p>Align to the center.</dd>
+
+ </dl><p>The <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code>
attribute's allowed keywords correspond to alignment points in the
font:</p>
- <!-- this is filler to make sure the TCP packet boundary doesn't fall in the middle of one of the NCRs below -->
- <!-- (because otherwise the parser in anolis screws it up) -->
<p><img alt="The top of the em square 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 top of the em square and the bottom of the em square, the alphabetic baseline is where characters like Á, ÿ, f, and Ω are anchored, the ideographic baseline is where glyphs like 私 and 達 are anchored, and the bottom of the em square 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 the em square." height=300 src=http://images.whatwg.org/baselines.png width=738></p>
<p>The keywords map to these alignment points as follows:</p>
@@ -37625,15 +38077,34 @@
<dt><dfn id=dom-context-2d-textbaseline-bottom title=dom-context-2d-textBaseline-bottom><code>bottom</code></dfn>
<dd>The bottom of the em square</dd>
- </dl><p>The <dfn id=text-preparation-algorithm>text preparation algorithm</dfn> is as follows. It takes
- as input a string <var title="">text</var>, a
- <code><a href=#canvasdrawingstyles>CanvasDrawingStyles</a></code> object <var title="">target</var>,
- and an optional length <var title="">maxWidth</var>. It returns an
- array of glyph shapes, each positioned on a common coordinate space,
- and a <var title="">physical alignment</var> whose value is one of
- <i>left</i>, <i>right</i>, and <i title="">center</i>. (Most callers of this
- algorithm ignore the <var title="">physical alignment</var>.)</p>
+ </dl><p>The <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textBaseline</a></code> attribute's allowed keywords are
+ as follows:</p>
+ <dl><dt><dfn id=dom-concept-2d-direction-ltr title=dom-concept-2d-direction-ltr><code>ltr</code></dfn>
+
+ <dd><p>Treat input to the <a href=#text-preparation-algorithm>text preparation algorithm</a> as left-to-right text.</dd>
+
+ <dt><dfn id=dom-concept-2d-direction-rtl title=dom-concept-2d-direction-rtl><code>rtl</code></dfn>
+
+ <dd><p>Treat input to the <a href=#text-preparation-algorithm>text preparation algorithm</a> as right-to-left text.</dd>
+
+<!--
+ <dt><dfn title="dom-concept-2d-direction-auto"><code>auto</code></dfn>
+
+ <dd><p>Determine the direction from the input to the <span>text preparation algorithm</span>.</p></dd>
+-->
+
+ <dt><dfn id=dom-concept-2d-direction-inherit title=dom-concept-2d-direction-inherit><code>inherit</code></dfn>
+
+ <dd><p>Default to the directionality of the <code><a href=#the-canvas-element>canvas</a></code> element or <code><a href=#document>Document</a></code>
+ as appropriate.</dd>
+
+ </dl><p>The <dfn id=text-preparation-algorithm>text preparation algorithm</dfn> is as follows. It takes as input a string <var title="">text</var>, a <code><a href=#canvasdrawingstyles>CanvasDrawingStyles</a></code> object <var title="">target</var>, and an
+ optional length <var title="">maxWidth</var>. It returns an array of glyph shapes, each positioned
+ on a common coordinate space, a <var title="">physical alignment</var> whose value is one of
+ <i>left</i>, <i>right</i>, and <i title="">center</i>, and an inline box. (Most callers of this
+ algorithm ignore the <var title="">physical alignment</var> and the inline box.)</p>
+
<ol><li><p>If <var title="">maxWidth</var> was provided but is less
than or equal to zero, return an empty array.</li>
@@ -37648,25 +38119,37 @@
<p>Apply the appropriate step from the following list to determine
the value of <var title="">direction</var>:</p>
- <dl class=switch><dt>If the <var title="">target</var> object's <a href=#font-style-source-node>font style
- source node</a> is an element</dt>
+ <dl class=switch><dt>If the <var title="">target</var> object's <code title=dom-context-2d-direction><a href=#dom-context-2d-direction>direction</a></code> attribute has the value "<code title=dom-context-2d-direction-ltr>ltr</code>"</dt>
+ <dd>Let <var title="">direction</var> be '<a href=#concept-ltr title=concept-ltr>ltr</a>'.</dd>
- <dd>Let <var title="">direction</var> be <a href=#the-directionality>the
- directionality</a> of the <var title="">target</var> object's
- <a href=#font-style-source-node>font style source node</a>.</dd>
+ <dt>If the <var title="">target</var> object's <code title=dom-context-2d-direction><a href=#dom-context-2d-direction>direction</a></code> attribute has the value "<code title=dom-context-2d-direction-rtl>rtl</code>"</dt>
+ <dd>Let <var title="">direction</var> be '<a href=#concept-rtl title=concept-rtl>rtl</a>'.</dd>
- <dt>If the <var title="">target</var> object's <a href=#font-style-source-node>font style
- source node</a> is a <code><a href=#document>Document</a></code> and that
- <code><a href=#document>Document</a></code> has a root element child</dt>
+<!--
+ <dt>If the <var title="">target</var> object's <code
+ title="dom-context-2d-direction">direction</code> attribute has the value "<code
+ title="dom-context-2d-direction-auto">auto</code>"</dt>
+ <dd>
+ Find the first character in <var title="">text</var> of bidirectional character type L, AL, or
+ R, if any. If such a character is found and it is of bidirectional character type AL or R,
+ then let <var title="">direction</var> be '<span title="concept-rtl">rtl</span>'; otherwise,
+ let <var title="">direction</var> be '<span title="concept-rtl">rtl</span>'. <a
+ href="#refsBIDI">[BIDI]</a>
+ </dd>
+-->
- <dd>Let <var title="">direction</var> be <a href=#the-directionality>the
- directionality</a> of the <var title="">target</var> object's
- <a href=#font-style-source-node>font style source node</a>'s root element child.</dd>
+ <dt>If the <var title="">target</var> object's <a href=#font-style-source-object>font style source object</a>
+ is an element</dt>
- <dt>If the <var title="">target</var> object's <a href=#font-style-source-node>font style
- source node</a> is a <code><a href=#document>Document</a></code> and that
- <code><a href=#document>Document</a></code> has no root element child</dt>
+ <dd>Let <var title="">direction</var> be <a href=#the-directionality>the directionality</a> of the <var title="">target</var> object's <a href=#font-style-source-object>font style source object</a>.</dd>
+ <dt>If the <var title="">target</var> object's <a href=#font-style-source-object>font style source object</a>
+ is a <code><a href=#document>Document</a></code> and that <code><a href=#document>Document</a></code> has a root element child</dt>
+
+ <dd>Let <var title="">direction</var> be <a href=#the-directionality>the directionality</a> of the <var title="">target</var> object's <a href=#font-style-source-object>font style source object</a>'s root element child.</dd>
+
+ <dt>Otherwise</dt>
+
<dd>Let <var title="">direction</var> be '<a href=#concept-ltr title=concept-ltr>ltr</a>'.</dd>
</dl></li>
@@ -37700,14 +38183,14 @@
<p>Horizontal position:</p>
<dl><dt>If <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code> is
- <code title="">left</code></dt>
+ <code title=dom-concept-2d-textAlign-left><a href=#dom-concept-2d-textalign-left>left</a></code></dt>
<dt>If <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code> is
- <code title="">start</code> and <var title="">direction</var> is
+ <code title=dom-concept-2d-textAlign-start><a href=#dom-concept-2d-textalign-start>start</a></code> and <var title="">direction</var> is
'ltr'</dt>
<dt>If <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code> is
- <code title="">end</code> and <var title="">direction</var> is
+ <code title=dom-concept-2d-textAlign-end><a href=#dom-concept-2d-textalign-end>end</a></code> and <var title="">direction</var> is
'rtl'</dt>
<dd>Let the <var title="">anchor point</var>'s horizontal
@@ -37715,14 +38198,14 @@
<dt>If <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code> is
- <code title="">right</code></dt>
+ <code title=dom-concept-2d-textAlign-right><a href=#dom-concept-2d-textalign-right>right</a></code></dt>
<dt>If <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code> is
- <code title="">end</code> and <var title="">direction</var> is
+ <code title=dom-concept-2d-textAlign-end><a href=#dom-concept-2d-textalign-end>end</a></code> and <var title="">direction</var> is
'ltr'</dt>
<dt>If <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code> is
- <code title="">start</code> and <var title="">direction</var> is
+ <code title=dom-concept-2d-textAlign-start><a href=#dom-concept-2d-textalign-start>start</a></code> and <var title="">direction</var> is
'rtl'</dt>
<dd>Let the <var title="">anchor point</var>'s horizontal
@@ -37730,7 +38213,7 @@
<dt>If <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code> is
- <code title="">center</code></dt>
+ <code title=dom-concept-2d-textAlign-center><a href=#dom-concept-2d-textalign-center>center</a></code></dt>
<dd>Let the <var title="">anchor point</var>'s horizontal
position be half way between the left and right edges of the
@@ -37793,11 +38276,10 @@
</li>
- <li><p>Return <var title="">result</var>, and, for callers that
- need it, <var title="">physical alignment</var> as the alignment
- value.</li>
+ <li><p>Return <var title="">result</var>, <var title="">physical alignment</var>, and the inline
+ box.</li>
- </ol><h6 id=building-paths><span class=secno>4.8.11.1.6 </span>Building paths</h6>
+ </ol><h6 id=building-paths><span class=secno>4.8.11.2.6 </span>Building paths</h6>
<p>Each object implementing the <code><a href=#canvaspathmethods>CanvasPathMethods</a></code>
interface has a <a href=#concept-path title=concept-path>path</a>. A <dfn id=concept-path title=concept-path>path</dfn> has a list of zero or more subpaths.
@@ -38372,7 +38854,7 @@
- <h6 id=path-objects><span class=secno>4.8.11.1.7 </span><code><a href=#path>Path</a></code> objects</h6>
+ <h6 id=path-objects><span class=secno>4.8.11.2.7 </span><code><a href=#path>Path</a></code> objects</h6>
<p><code><a href=#path>Path</a></code> objects can be used to declare paths that are
then later used on <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> objects. In
@@ -38671,9 +39153,8 @@
</ol></div>
+ <h6 id=transformations><span class=secno>4.8.11.2.8 </span><dfn title=dom-context-2d-transformation>Transformations</dfn></h6>
- <h6 id=transformations><span class=secno>4.8.11.1.8 </span><dfn title=dom-context-2d-transformation>Transformations</dfn></h6>
-
<p>Each <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> object has a
<i>current transformation matrix</i>, as well as methods (described
in this section) to manipulate it. When a
@@ -38829,9 +39310,82 @@
+ <h6 id=image-sources-for-2d-rendering-contexts><span class=secno>4.8.11.2.9 </span>Image sources for 2D rendering contexts</h6>
- <h6 id=fill-and-stroke-styles><span class=secno>4.8.11.1.9 </span>Fill and stroke styles</h6>
+ <p>Several methods in the <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> API take the union type
+ <code><a href=#canvasimagesource>CanvasImageSource</a></code> as an argument.</p>
+ <p>This union type allows objects implementing any of the following interfaces to be used as image
+ sources:</p>
+
+ <ul><li><code><a href=#htmlimageelement>HTMLImageElement</a></code> (<code><a href=#the-img-element>img</a></code> elements)</li>
+
+ <li><code><a href=#htmlvideoelement>HTMLVideoElement</a></code> (<code><a href=#the-video-element>video</a></code> elements)</li>
+
+ <li><code><a href=#htmlcanvaselement>HTMLCanvasElement</a></code> (<code><a href=#the-canvas-element>canvas</a></code> elements)</li>
+
+ <li><code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code></li>
+
+ <li><code>BitmapImage</code></li>
+
+ <!-- v3: supporting ImageData object might make sense (when resizing as well as filtering) - ack Charles Pritchard -->
+
+ </ul><p>When a user agent is required to <dfn id=check-the-usability-of-the-image-argument>check the usability of the <var title="">image</var>
+ argument</dfn>, where <var title="">image</var> is a <code><a href=#canvasimagesource>CanvasImageSource</a></code> object, the
+ user agent must run these steps, which return either <i>good</i>, <i>bad</i>, or
+ <i>aborted</i>:</p>
+
+ <ol><li><p>If the <var title="">image</var> argument is an <code><a href=#htmlimageelement>HTMLImageElement</a></code> object that
+ is not <a href=#img-good title=img-good>fully decodable</a>, or if the <var title="">image</var>
+ argument is an <code><a href=#htmlvideoelement>HTMLVideoElement</a></code> object whose <code title=dom-media-readyState><a href=#dom-media-readystate>readyState</a></code> attribute is either <code title=dom-media-HAVE_NOTHING><a href=#dom-media-have_nothing>HAVE_NOTHING</a></code> or <code title=dom-media-HAVE_METADATA><a href=#dom-media-have_metadata>HAVE_METADATA</a></code>, then return <i>bad</i> and abort these
+ steps.</li>
+
+ <li><p>If the <var title="">image</var> argument is an <code><a href=#htmlcanvaselement>HTMLCanvasElement</a></code> object with
+ either a horizontal dimension or a vertical dimension equal to zero, then the implementation
+ throw an <code><a href=#invalidstateerror>InvalidStateError</a></code> exception and return <i>aborted</i>.</p>
+
+ </ol><p>When a <code><a href=#canvasimagesource>CanvasImageSource</a></code> object represents an <code><a href=#htmlimageelement>HTMLImageElement</a></code>, the
+ element's image must be used as the source image.</p>
+
+ <p>Specifically, when a <code><a href=#canvasimagesource>CanvasImageSource</a></code> object represents an animated image in an
+ <code><a href=#htmlimageelement>HTMLImageElement</a></code>, the user agent must use the poster frame of the animation, or, if
+ there is no poster frame, the first frame of the animation, when rendering the image for
+ <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> APIs.</p>
+
+ <p>When a <code><a href=#canvasimagesource>CanvasImageSource</a></code> object represents an <code><a href=#htmlvideoelement>HTMLVideoElement</a></code>, then
+ the frame at the <a href=#current-playback-position>current playback position</a> when the method with the argument is
+ invoked must be used as the source image when rendering the image for
+ <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> APIs, and the source image's dimensions must be the <a href=#concept-video-intrinsic-width title=concept-video-intrinsic-width>intrinsic width</a> and <a href=#concept-video-intrinsic-height title=concept-video-intrinsic-height>intrinsic height</a> of the <a href=#media-resource>media resource</a>
+ (i.e. after any aspect-ratio correction has been applied).</p>
+
+ <p>When a <code><a href=#canvasimagesource>CanvasImageSource</a></code> object represents an <code><a href=#htmlcanvaselement>HTMLCanvasElement</a></code>, the
+ element's bitmap must be used as the source image.</p>
+
+ <p>When a <code><a href=#canvasimagesource>CanvasImageSource</a></code> object represents a <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code>, the
+ object's <a href=#scratch-bitmap>scratch bitmap</a> must be used as the source image.</p>
+
+ <p>When a <code><a href=#canvasimagesource>CanvasImageSource</a></code> object represents an element that is <a href=#being-rendered>being
+ rendered</a> 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. <code title=attr-dim-width><a href=#attr-dim-width>width</a></code> and
+ <code title=attr-dim-height><a href=#attr-dim-height>height</a></code> attributes on the source element have no effect on how
+ the object is interpreted when rendering the image for <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code>
+ APIs).</p>
+
+ <p>When a <code><a href=#canvasimagesource>CanvasImageSource</a></code> object represents a <code>BitmapImage</code>, the
+ object's bitmap image data must be used as the source image.</p>
+
+<!--ADD-TOPIC:Security-->
+ <p><dfn id=the-image-argument-is-not-origin-clean>The <var title="">image argument</var> is not origin-clean</dfn> if it is an
+ <code><a href=#htmlimageelement>HTMLImageElement</a></code> or <code><a href=#htmlvideoelement>HTMLVideoElement</a></code> whose <a href=#origin>origin</a> is not
+ the <a href=#same-origin title="same origin">same</a> as the <a href=#entry-script>entry script</a>'s <a href=#origin>origin</a>,
+ or if it is an <code><a href=#htmlcanvaselement>HTMLCanvasElement</a></code> whose bitmap's <a href=#concept-canvas-origin-clean title=concept-canvas-origin-clean>origin-clean</a> flag is false, or if it is a
+ <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> object whose <a href=#scratch-bitmap>scratch bitmap</a>'s <a href=#concept-canvas-origin-clean title=concept-canvas-origin-clean>origin-clean</a> flag is false.</p>
+<!--REMOVE-TOPIC:Security-->
+
+
+
+ <h6 id=fill-and-stroke-styles><span class=secno>4.8.11.2.10 </span>Fill and stroke styles</h6>
+
<dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-fillStyle><a href=#dom-context-2d-fillstyle>fillStyle</a></code> [ = <var title="">value</var> ]</dt>
<dd>
@@ -38895,15 +39449,18 @@
attribute represents the color or style to use for the lines around
the shapes.</p>
- <p>Both attributes can be either strings,
- <code><a href=#canvasgradient>CanvasGradient</a></code>s, or <code><a href=#canvaspattern>CanvasPattern</a></code>s. On
- setting, strings must be <a href=#parsed-as-a-css-color-value title="parsed as a CSS <color>
- value">parsed as CSS <color> values</a> and the color
- assigned, and <code><a href=#canvasgradient>CanvasGradient</a></code> and
- <code><a href=#canvaspattern>CanvasPattern</a></code> objects must be assigned themselves. <a href=#refsCSSCOLOR>[CSSCOLOR]</a> If the value is a string but
- cannot be <a href=#parsed-as-a-css-color-value>parsed as a CSS <color> value</a>, then it
- must be ignored, and the attribute must retain its previous
- value.</p>
+ <p>Both attributes can be either strings, <code><a href=#canvasgradient>CanvasGradient</a></code>s, or
+ <code><a href=#canvaspattern>CanvasPattern</a></code>s. On setting, strings must be <a href=#parsed-as-a-css-color-value title="parsed as a CSS
+ <color> value">parsed as CSS <color> values</a> and the color assigned, and
+ <code><a href=#canvasgradient>CanvasGradient</a></code> and <code><a href=#canvaspattern>CanvasPattern</a></code> objects must be assigned themselves. <a href=#refsCSSCOLOR>[CSSCOLOR]</a> If the value is a string but cannot be <a href=#parsed-as-a-css-color-value>parsed as a CSS
+ <color> value</a>, then it must be ignored, and the attribute must retain its previous
+ value.
+<!--ADD-TOPIC:Security-->
+ If the new value is a <code><a href=#canvaspattern>CanvasPattern</a></code> object that is marked as <a href=#concept-canvas-pattern-not-origin-clean title=concept-canvas-pattern-not-origin-clean>not origin-clean</a>, then the <a href=#scratch-bitmap>scratch
+ bitmap</a>'s <a href=#concept-canvas-origin-clean title=concept-canvas-origin-clean>origin-clean</a> flag must be set to
+ false.
+<!--REMOVE-TOPIC:Security-->
+ </p>
<p>When set to a <code><a href=#canvaspattern>CanvasPattern</a></code> or
<code><a href=#canvasgradient>CanvasGradient</a></code> object, the assignment is
@@ -38939,9 +39496,8 @@
<p>When the context is created, the <code title=dom-context-2d-fillStyle><a href=#dom-context-2d-fillstyle>fillStyle</a></code> and <code title=dom-context-2d-strokeStyle><a href=#dom-context-2d-strokestyle>strokeStyle</a></code> attributes
must initially have the string value <code title="">#000000</code>.</p>
- <p>When the value is a color, it must not be affected by the
- transformation matrix when used to draw on the canvas.</p> <!-- so
- singular matrices don't affect solid color fillStyles -->
+ <p>When the value is a color, it must not be affected by the transformation matrix when used to
+ draw on bitmaps.</p> <!-- so singular matrices don't affect solid color fillStyles -->
</div>
@@ -39064,7 +39620,7 @@
starting with the value of <var title="">ω</var> nearest to
positive infinity and ending with the value of <var title="">ω</var> nearest to negative infinity, draw the
circumference of the circle with radius <span title="">r(<var title="">ω</var>)</span> at position (<span title="">x(<var title="">ω</var>)</span>, <span title="">y(<var title="">ω</var>)</span>), with the color at <var title="">ω</var>, but only painting on the parts of the
- canvas that have not yet been painted on by earlier circles in this
+ 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>This effectively creates a cone, touched by the two
@@ -39114,51 +39670,45 @@
</dl><div class=impl>
- <p>To create objects of this type, the <dfn id=dom-context-2d-createpattern title=dom-context-2d-createPattern><code>createPattern(<var title="">image</var>, <var title="">repetition</var>)</code></dfn>
- method is used. The first argument gives the image to use as the
- pattern (either an <code><a href=#htmlimageelement>HTMLImageElement</a></code>,
- <code><a href=#htmlcanvaselement>HTMLCanvasElement</a></code>, or <code><a href=#htmlvideoelement>HTMLVideoElement</a></code>
- object). Modifying this image after calling the <code title=dom-context-2d-createPattern><a href=#dom-context-2d-createpattern>createPattern()</a></code> method
- must not affect the pattern. The second argument must be a string
- with one of the following values: <code title="">repeat</code>,
- <code title="">repeat-x</code>, <code title="">repeat-y</code>,
- <code title="">no-repeat</code>. If the empty string is specified,
- <code title="">repeat</code> must be assumed. If an unrecognized value
- is given, then the user agent must throw a <code><a href=#syntaxerror>SyntaxError</a></code>
- exception. User agents must recognize the four values described above
- exactly (e.g. they must not do case folding). Except as specified
- below, the method must return a <code><a href=#canvaspattern>CanvasPattern</a></code> object
- suitably initialized.</p>
+ <p>To create objects of this type, the <dfn id=dom-context-2d-createpattern title=dom-context-2d-createPattern><code>createPattern(<var title="">image</var>, <var title="">repetition</var>)</code></dfn> method is used. When the method is invoked, the user agent
+ must run the following steps:</p>
- <p>The <var title="">image</var> argument is an instance of either
- <code><a href=#htmlimageelement>HTMLImageElement</a></code>, <code><a href=#htmlcanvaselement>HTMLCanvasElement</a></code>, or
- <code><a href=#htmlvideoelement>HTMLVideoElement</a></code>.</p> <!-- drawImage() has an equivalent
- paragraph -->
+ <ol><li><p>Let <var title="">image</var> be the first argument and <var title="">repetition</var> be
+ the second argument.</li>
- <p>If the <var title="">image</var> argument is an
- <code><a href=#htmlimageelement>HTMLImageElement</a></code> object that is not <a href=#img-good title=img-good>fully decodable</a>, or if the <var title="">image</var> argument is an <code><a href=#htmlvideoelement>HTMLVideoElement</a></code>
- object whose <code title=dom-media-readyState><a href=#dom-media-readystate>readyState</a></code>
- attribute is either <code title=dom-media-HAVE_NOTHING><a href=#dom-media-have_nothing>HAVE_NOTHING</a></code> or <code title=dom-media-HAVE_METADATA><a href=#dom-media-have_metadata>HAVE_METADATA</a></code>, then the
- implementation must return null.</p> <!-- drawImage() has an
- equivalent paragraph -->
+ <li><p><a href=#check-the-usability-of-the-image-argument>Check the usability of the <var title="">image</var> argument</a>. If this
+ returns <i>aborted</i>, then an exception has been thrown and the method doesn't return anything;
+ abort these steps. If it returns <i>bad</i>, then return null and abort these steps. Otherwise it
+ returns <i>good</i>; continue with these steps.</li>
- <p>If the <var title="">image</var> argument is an
- <code><a href=#htmlcanvaselement>HTMLCanvasElement</a></code> object with either a horizontal
- dimension or a vertical dimension equal to zero, then the
- implementation must throw an <code><a href=#invalidstateerror>InvalidStateError</a></code>
- exception.</p>
- <!-- drawImage() has an equivalent paragraph -->
+ <li><p>If <var title="">repetition</var> is the empty string, let it be "<code title="">repeat</code>".</p>
- <p>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 transform.</p>
+ <li><p>If <var title="">repetition</var> is not a <a href=#case-sensitive>case-sensitive</a> match for one of
+ "<code title="">repeat</code>", "<code title="">repeat-x</code>", "<code title="">repeat-y</code>", or "<code title="">no-repeat</code>", throw a <code><a href=#syntaxerror>SyntaxError</a></code>
+ exception and abort these steps.</li>
- <p>When the <dfn id=dom-canvaspattern-settransform title=dom-canvaspattern-setTransform><code>setTransform()</code></dfn>
- method is invoked on the pattern, the user agent must replace the
- pattern's transformation matrix with the one described by the
- <code><a href=#svgmatrix>SVGMatrix</a></code> object provided as an argument to the
- method.</p>
+ <li><p>Create a new <code><a href=#canvaspattern>CanvasPattern</a></code> object with the image <var title="">image</var>
+ and the repetition behavior given by <var title="">repetition</var>.</li>
+<!--ADD-TOPIC:Security-->
+ <li><p>If <a href=#the-image-argument-is-not-origin-clean>the <var title="">image argument</var> is not origin-clean</a>, then mark the
+ <code><a href=#canvaspattern>CanvasPattern</a></code> object as <dfn id=concept-canvas-pattern-not-origin-clean title=concept-canvas-pattern-not-origin-clean>not
+ origin-clean</dfn>.</li>
+<!--REMOVE-TOPIC:Security-->
+
+ <li><p>Return the <code><a href=#canvaspattern>CanvasPattern</a></code> object.</li>
+
+ </ol><p>Modifying the <var title="">image</var> used when creating a <code><a href=#canvaspattern>CanvasPattern</a></code> object
+ after calling the <code title=dom-context-2d-createPattern><a href=#dom-context-2d-createpattern>createPattern()</a></code> method must
+ not affect the pattern(s) rendered by the <code><a href=#canvaspattern>CanvasPattern</a></code> object.</p>
+
+ <p>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 transform.</p>
+
+ <p>When the <dfn id=dom-canvaspattern-settransform title=dom-canvaspattern-setTransform><code>setTransform()</code></dfn> method
+ is invoked on the pattern, the user agent must replace the pattern's transformation matrix with
+ the one described by the <code><a href=#svgmatrix>SVGMatrix</a></code> object provided as an argument to the method.</p>
+
<p>When a pattern is to be rendered within an area, the user agent
must run the following steps to determine what is rendered:</p>
@@ -39166,27 +39716,21 @@
<li>
- <p>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, then place
- repeated copies of this image horizontally to the left and right,
- if the <code>repeat-x</code> string was specified, or vertically
- up and down, if the <code>repeat-y</code> string was specified, or
- in all four directions all over the bitmap, if the
- <code>repeat</code> string was specified.</p>
+ <p>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, then
+ place repeated copies of this image horizontally to the left and right, if the repetition
+ behavior is "<code title="">repeat-x</code>", or vertically up and down, if the repetition
+ behavior is "<code title="">repeat-y</code>", or in all four directions all over the bitmap, if
+ the repetition behavior is "<code title="">repeat</code>".</p>
- <p>If the original image data is a bitmap image, the value painted
- at a point in the area of the repetitions is computed by filtering
- the original image data. If the <code title=dom-context-2d-imageSmoothingEnabled><a href=#dom-context-2d-imagesmoothingenabled>imageSmoothingEnabled</a></code>
- attribute is set to true, then the user agent may use any
- filtering algorithm (for example bilinear interpolation or
- nearest-neighbor). If the <code title=dom-context-2d-imageSmoothingEnabled><a href=#dom-context-2d-imagesmoothingenabled>imageSmoothingEnabled</a></code>
- attribute is set to false, the image must be rendered using
- nearest-neighbor interpolation. 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 <var title="">repetition</var>.)
+ <p>If the original image data is a bitmap image, the value painted at a point in the area of the
+ repetitions is computed by filtering the original image data. If the <code title=dom-context-2d-imageSmoothingEnabled><a href=#dom-context-2d-imagesmoothingenabled>imageSmoothingEnabled</a></code> attribute is set to
+ true, then the user agent may use any filtering algorithm (for example bilinear interpolation or
+ nearest-neighbor). If the <code title=dom-context-2d-imageSmoothingEnabled><a href=#dom-context-2d-imagesmoothingenabled>imageSmoothingEnabled</a></code> attribute is set to
+ false, the image must be rendered using nearest-neighbor interpolation. 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.)</p>
<!-- drawImage() has similar paragraphs with different rules -->
</li>
@@ -39204,27 +39748,7 @@
<li><p>The resulting bitmap is what is to be rendered, with the
same origin and same scale.</li>
- </ol><p>When the <code title=dom-context-2d-createPattern><a href=#dom-context-2d-createpattern>createPattern()</a></code> method
- is passed an animated image as its <var title="">image</var>
- argument, the user agent must use the poster frame of the animation,
- or, if there is no poster frame, the first frame of the
- animation.</p>
- <!-- drawImage() has an equivalent paragraph -->
-
- <p>When the <var title="">image</var> argument is an
- <code><a href=#htmlvideoelement>HTMLVideoElement</a></code>, then the frame at the <a href=#current-playback-position>current
- playback position</a> must be used as the source image, and the
- source image's dimensions must be the <a href=#concept-video-intrinsic-width title=concept-video-intrinsic-width>intrinsic width</a> and
- <a href=#concept-video-intrinsic-height title=concept-video-intrinsic-height>intrinsic height</a>
- of the <a href=#media-resource>media resource</a> (i.e. after any aspect-ratio
- correction has been applied).</p>
- <!-- drawImage() has an equivalent paragraph -->
-
- </div>
-
- <div class=impl>
-
- <hr><p>If a radial gradient or repeated pattern is used when the
+ </ol><hr><p>If a radial gradient or repeated pattern is used when the
transformation matrix is singular, 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).
@@ -39236,7 +39760,7 @@
- <h6 id=drawing-rectangles-to-the-canvas><span class=secno>4.8.11.1.10 </span>Drawing rectangles to the canvas</h6>
+ <h6 id=drawing-rectangles-to-the-bitmap><span class=secno>4.8.11.2.11 </span>Drawing rectangles to the bitmap</h6>
<p>There are three methods that immediately draw rectangles to the
bitmap. They each take four arguments; the first two give the <var title="">x</var> and <var title="">y</var> coordinates of the top
@@ -39264,7 +39788,7 @@
<dd>
- <p>Clears all pixels on the canvas in the given rectangle to transparent black.</p>
+ <p>Clears all pixels on the bitmap in the given rectangle to transparent black.</p>
</dd>
@@ -39272,7 +39796,7 @@
<dd>
- <p>Paints the given rectangle onto the canvas, using the current fill style.</p>
+ <p>Paints the given rectangle onto the bitmap, using the current fill style.</p>
</dd>
@@ -39280,7 +39804,7 @@
<dd>
- <p>Paints the box that outlines the given rectangle onto the canvas, using the current stroke style.</p>
+ <p>Paints the box that outlines the given rectangle onto the bitmap, using the current stroke style.</p>
</dd>
@@ -39288,14 +39812,14 @@
<p>The <dfn id=dom-context-2d-clearrect title=dom-context-2d-clearRect><code>clearRect(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</code></dfn> method must run the following steps:</p>
- <ol><li><p>Let <var title="">pixels</var> be the set of pixels in the
- specified rectangle that also intersect the current <a href=#clipping-region>clipping
- region</a>.</li>
+ <ol><li><p>Let <var title="">pixels</var> be the set of pixels in
+ the specified rectangle that also intersect the current
+ <a href=#clipping-region>clipping region</a>.</li>
<li><p>Clear the pixels in <var title="">pixels</var> to a fully
transparent black, erasing any previous image.</li>
- <li><p><a href=#clear-regions-that-cover-the-pixels>Clear regions that cover the pixels</a> in <var title="">pixels</var> in the <code><a href=#the-canvas-element>canvas</a></code> element.</li>
+ <li><p><a href=#clear-regions-that-cover-the-pixels>Clear regions that cover the pixels</a> in <var title="">pixels</var> on the <a href=#scratch-bitmap>scratch bitmap</a>.</li>
</ol><p class=note>If either height or width are zero, this method has
no effect, since the set of pixels would be empty.</p>
@@ -39325,7 +39849,7 @@
- <h6 id=drawing-text-to-the-canvas><span class=secno>4.8.11.1.11 </span>Drawing text to the canvas</h6>
+ <h6 id=drawing-text-to-the-bitmap><span class=secno>4.8.11.2.12 </span>Drawing text to the bitmap</h6>
<dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-fillText><a href=#dom-context-2d-filltext>fillText</a></code>(<var title="">text</var>, <var title="">x</var>, <var title="">y</var> [, <var title="">maxWidth</var> ] )</dt>
<dt><var title="">context</var> . <code title=dom-context-2d-strokeText><a href=#dom-context-2d-stroketext>strokeText</a></code>(<var title="">text</var>, <var title="">x</var>, <var title="">y</var> [, <var title="">maxWidth</var> ] )</dt>
@@ -39367,8 +39891,8 @@
</dl><div class=impl>
- <p>The <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> interface provides the
- following methods for rendering text directly to the canvas.</p>
+ <p>The <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> interface provides the following methods for
+ rendering text.</p>
<p>The <dfn id=dom-context-2d-filltext title=dom-context-2d-fillText><code>fillText()</code></dfn> and
<dfn id=dom-context-2d-stroketext title=dom-context-2d-strokeText><code>strokeText()</code></dfn>
@@ -39412,6 +39936,16 @@
</li>
+<!--ADD-TOPIC:Security-->
+ <li><p>If the <a href=#text-preparation-algorithm>text preparation algorithm</a> used a font that has an <a href=#origin>origin</a>
+ that is not the <a href=#same-origin title="same origin">same</a> as the <a href=#entry-script>entry script</a>'s
+ <a href=#origin>origin</a> (even if "using a font" means just checking if that font has a particular
+ glyph in it before falling back to another font), then set the <a href=#scratch-bitmap>scratch bitmap</a>'s
+ <a href=#concept-canvas-origin-clean title=concept-canvas-origin-clean>origin-clean</a> flag to false.</li> <!--
+ because fonts could consider sensitive material, I guess; and because that sensitivity could
+ extend to whether or not a particular glyph is in the font in the first place. -->
+<!--REMOVE-TOPIC:Security-->
+
</ol><!--v6DVT - this is commented out until CSS can get its act together
enough to actual specify vertical text rendering (how long have we
been waiting now?)
@@ -39419,7 +39953,7 @@
WHEN EDITING THIS, FIX THE PARTS MARKED "XXX" BELOW
ALSO NOTE THAT THIS PROBABLY NEEDS ENTIRELY REVISITING NOW THAT WE
-HAVE REJIGGED HOW TEXT WORKS IN v5
+HAVE REJIGGED HOW TEXT WORKS IN v5 (e.g. remember security)
<p>The <dfn
title="dom-context-2d-fillVerticalText"><code>fillVerticalText()</code></dfn>
@@ -39565,19 +40099,11 @@
</ol>
-v6DVT (also check for '- -' bits in the part above) --><p>The <dfn id=dom-context-2d-measuretext title=dom-context-2d-measureText><code>measureText()</code></dfn>
- method takes one argument, <var title="">text</var>. When the method
- is invoked, the user agent must replace all the <a href=#space-character title="space
- character">space characters</a> in <var title="">text</var> with
- U+0020 SPACE characters, and then must form a hypothetical
- infinitely-wide CSS line box containing a single inline box
- containing the text <var title="">text</var>, with all the
- properties at their initial values except the 'white-space' property
- of the inline element set to 'pre' and the 'font' property of the
- inline element set to the current font of the context as given by
- the <code title=dom-context-2d-font><a href=#dom-context-2d-font>font</a></code> attribute, and
- must then create a new <code><a href=#textmetrics>TextMetrics</a></code> object with its
- attributes set as described in the following list.
+v6DVT (also check for '- -' bits in the part above) --><p>The <dfn id=dom-context-2d-measuretext title=dom-context-2d-measureText><code>measureText()</code></dfn> method takes one
+ argument, <var title="">text</var>. When the method is invoked, the user agent must run the
+ <a href=#text-preparation-algorithm>text preparation algorithm</a>, passing it <var title="">text</var> and the
+ <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> object, and then using the returned inline box must create a
+ new <code><a href=#textmetrics>TextMetrics</a></code> object with its attributes set as described in the following list.
<!--ADD-TOPIC:Security-->
If doing these measurements requires using a font that has an
<a href=#origin>origin</a> that is not the <a href=#same-origin title="same
@@ -39667,7 +40193,7 @@
- <h6 id=drawing-paths-to-the-canvas><span class=secno>4.8.11.1.12 </span>Drawing paths to the canvas</h6>
+ <h6 id=drawing-paths-to-the-canvas><span class=secno>4.8.11.2.13 </span>Drawing paths to the canvas</h6>
<p>The context always has a <dfn id=current-default-path>current default path</dfn>. There
is only one <a href=#current-default-path>current default path</a>, it is not part of the
@@ -39867,13 +40393,22 @@
<li>
- <p>Optionally, <a href=#inform>inform the user</a> that the
- focus is at the location given by the intended path. User agents
- may wait until the next time the <a href=#event-loop>event loop</a> reaches
- its "update the rendering" step to optionally inform the user.</p>
+ <p>Optionally, run the appropriate step from the following list:</p>
- </li>
+ <dl><dt>If the <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> object's <a href=#concept-canvas-context-bitmap-mode title=concept-canvas-context-bitmap-mode>context bitmap mode</a> is <a href=#concept-canvas-fixed title=concept-canvas-fixed>fixed</a></dt>
+ <dd><p><a href=#inform>Inform the user</a> that the focus is at the location given by the
+ intended path. User agents may wait until the next time the <a href=#event-loop>event loop</a> reaches its
+ "update the rendering" step to optionally inform the user.</dd>
+
+ <dt>Otherwise</dt>
+
+ <dd><p>Add instructions to the <a href=#scratch-bitmap>scratch bitmap</a>'s <a href=#list-of-pending-interface-actions>list of pending interface
+ actions</a> that <a href=#inform>inform the user</a> that the focus is at the location of
+ the bitmap given by the intended path.</dd>
+
+ </dl></li>
+
</ol><p>The <dfn id=dom-context-2d-drawcustomfocusring title=dom-context-2d-drawCustomFocusRing><code>drawCustomFocusRing(<var title="">element</var>)</code></dfn> method, when invoked, must run
the following steps:</p>
@@ -39900,17 +40435,28 @@
<li>
- <p>Optionally, <a href=#inform>inform the user</a> that the
- focus is at the location given by the intended path. User agents
- may wait until the next time the <a href=#event-loop>event loop</a> reaches
- its "update the rendering" step to optionally inform the user.</p>
+ <p>Optionally, run the appropriate step from the following list:</p>
- </li>
+ <dl><dt>If the <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> object's <a href=#concept-canvas-context-bitmap-mode title=concept-canvas-context-bitmap-mode>context bitmap mode</a> is <a href=#concept-canvas-fixed title=concept-canvas-fixed>fixed</a></dt>
+ <dd><p><a href=#inform>Inform the user</a> that the focus is at the location given by the
+ intended path. The user agent may wait until the next time the <a href=#event-loop>event loop</a> reaches
+ its "update the rendering" step to optionally inform the user.</dd>
+
+ <dt>Otherwise</dt>
+
+ <dd><p>Add instructions to the <a href=#scratch-bitmap>scratch bitmap</a>'s <a href=#list-of-pending-interface-actions>list of pending interface
+ actions</a> that <a href=#inform>inform the user</a> that the focus is at the location of
+ the bitmap given by the intended path.</dd>
+
+ </dl></li>
+
<li><p>Return <var title="">result</var>.</li>
</ol><p>The <dfn id=dom-context-2d-scrollpathintoview title=dom-context-2d-scrollPathIntoView><code>scrollPathIntoView()</code></dfn>
- method, when invoked, must run the following steps:</p>
+ method, when invoked, if the <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> object's <a href=#concept-canvas-context-bitmap-mode title=concept-canvas-context-bitmap-mode>context bitmap mode</a> is <a href=#concept-canvas-fixed title=concept-canvas-fixed>fixed</a>, must run the following steps; and otherwise, must add
+ instructions to the <a href=#scratch-bitmap>scratch bitmap</a>'s <a href=#list-of-pending-interface-actions>list of pending interface actions</a>
+ that run the following steps:</p>
<ol><li><p>Let <var title="">the specified rectangle</var> be the
rectangle of the bounding box of the intended path.</li>
@@ -39922,11 +40468,11 @@
<li><p><a href=#scroll-an-element-into-view title="scroll an element into view">Scroll <var title="">notional child</var> into view</a> with the <var title="">align to top flag</var> set.</p>
- <li><p>Optionally, <a href=#inform>inform the user</a> that the
- caret and/or selection cover <var title="">the specified
- rectangle</var> of the canvas. User agents may wait until the next
- time the <a href=#event-loop>event loop</a> reaches its "update the rendering"
- step to optionally inform the user.</li>
+ <li><p>Optionally, <a href=#inform>inform the user</a> that the caret and/or selection cover
+ <var title="">the specified rectangle</var> of the canvas. If the
+ <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> object's <a href=#concept-canvas-context-bitmap-mode title=concept-canvas-context-bitmap-mode>context bitmap mode</a> was <a href=#concept-canvas-fixed title=concept-canvas-fixed>fixed</a> when the method was invoked, the user agent may wait
+ until the next time the <a href=#event-loop>event loop</a> reaches its "update the rendering" step to
+ optionally inform the user.</li>
</ol><p class=note id=inform>"Inform the user", as used in this
section, could mean calling a system accessibility API, which would
@@ -40058,20 +40604,19 @@
- <h6 id=drawing-images-to-the-canvas><span class=secno>4.8.11.1.13 </span>Drawing images to the canvas</h6>
+ <h6 id=drawing-images><span class=secno>4.8.11.2.14 </span>Drawing images</h6>
- <p>To draw images onto the canvas, the <dfn id=dom-context-2d-drawimage title=dom-context-2d-drawImage><code>drawImage</code></dfn> method
+ <p>To draw images, the <dfn id=dom-context-2d-drawimage title=dom-context-2d-drawImage><code>drawImage</code></dfn> method
can be used.</p>
+ <div class=impl>
+
<p>This method can be invoked with three different sets of arguments:</p>
<ul class=brief><li><code title="">drawImage(<var title="">image</var>, <var title="">dx</var>, <var title="">dy</var>)</code>
<li><code title="">drawImage(<var title="">image</var>, <var title="">dx</var>, <var title="">dy</var>, <var title="">dw</var>, <var title="">dh</var>)</code>
<li><code title="">drawImage(<var title="">image</var>, <var title="">sx</var>, <var title="">sy</var>, <var title="">sw</var>, <var title="">sh</var>, <var title="">dx</var>, <var title="">dy</var>, <var title="">dw</var>, <var title="">dh</var>)</code>
- </ul><!-- v3: drawImage() of an ImageData object might make sense (when resizing as well as filtering) - ack Charles Pritchard --><p>Each of those three can take either an
- <code><a href=#htmlimageelement>HTMLImageElement</a></code>, an <code><a href=#htmlcanvaselement>HTMLCanvasElement</a></code>, or
- an <code><a href=#htmlvideoelement>HTMLVideoElement</a></code> for the <var title="">image</var>
- argument.</p>
+ </ul></div>
<dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-drawImage><a href=#dom-context-2d-drawimage>drawImage</a></code>(<var title="">image</var>, <var title="">dx</var>, <var title="">dy</var>)</dt>
<dt><var title="">context</var> . <code title=dom-context-2d-drawImage><a href=#dom-context-2d-drawimage>drawImage</a></code>(<var title="">image</var>, <var title="">dx</var>, <var title="">dy</var>, <var title="">dw</var>, <var title="">dh</var>)</dt>
@@ -40096,141 +40641,108 @@
</dl><div class=impl>
- <p>If not specified, the <var title="">dw</var> and <var title="">dh</var> arguments must default to the values of <var title="">sw</var> and <var title="">sh</var>, interpreted such that
- one CSS pixel in the image is treated as one unit in the canvas
- coordinate space. If the <var title="">sx</var>, <var title="">sy</var>, <var title="">sw</var>, and <var title="">sh</var> arguments are omitted, they must default to 0, 0,
- the image's intrinsic width in image pixels, and the image's
- intrinsic height in image pixels, respectively. If the image has no
- intrinsic dimensions, the <i>concrete object size</i> must be used
- instead, as determined using the CSS "<a href=http://dev.w3.org/csswg/css3-images/#default-sizing>Concrete
- Object Size Resolution</a>" algorithm, with the <i>specified
- size</i> having neither a definite width nor height, nor any
- additional contraints, the object's intrinsic properties being those
- of the <var title="">image</var> argument, and the <i>default object
- size</i> being the size of the <code><a href=#the-canvas-element>canvas</a></code> element. <a href=#refsCSSIMAGES>[CSSIMAGES]</a></p>
+ <p>When the <code title=dom-context-2d-drawImage><a href=#dom-context-2d-drawimage>drawImage()</a></code> method is invoked, the user
+ agent must run the following steps:</p>
- <p>The <var title="">image</var> argument is an instance of either
- <code><a href=#htmlimageelement>HTMLImageElement</a></code>, <code><a href=#htmlcanvaselement>HTMLCanvasElement</a></code>, or
- <code><a href=#htmlvideoelement>HTMLVideoElement</a></code>.</p> <!-- createPattern() has an
- equivalent paragraph -->
+ <ol><li><p><a href=#check-the-usability-of-the-image-argument>Check the usability of the <var title="">image</var> argument</a>. If this
+ returns <i>aborted</i>, then an exception has been thrown and the method doesn't return anything;
+ abort these steps. If it returns <i>bad</i>, then abort these steps without drawing anything.
+ Otherwise it returns <i>good</i>; continue with these steps.</li>
- <p>If the <var title="">image</var> argument is an
- <code><a href=#htmlimageelement>HTMLImageElement</a></code> object that is not <a href=#img-good title=img-good>fully decodable</a>, or if the <var title="">image</var> argument is an <code><a href=#htmlvideoelement>HTMLVideoElement</a></code>
- object whose <code title=dom-media-readyState><a href=#dom-media-readystate>readyState</a></code>
- attribute is either <code title=dom-media-HAVE_NOTHING><a href=#dom-media-have_nothing>HAVE_NOTHING</a></code> or <code title=dom-media-HAVE_METADATA><a href=#dom-media-have_metadata>HAVE_METADATA</a></code>, then the
- implementation must return without drawing anything.</p> <!--
- createPattern() has an equivalent paragraph -->
+ <li>
- <p>If the <var title="">image</var> argument is an
- <code><a href=#htmlcanvaselement>HTMLCanvasElement</a></code> object with either a horizontal
- dimension or a vertical dimension equal to zero, then the
- implementation must throw an <code><a href=#invalidstateerror>InvalidStateError</a></code>
- exception.</p>
- <!-- createPattern() has an equivalent paragraph -->
+ <p>Establish the source and destination rectangles as follows:</p>
- <p>The source rectangle is the rectangle whose corners are the four
- points (<var title="">sx</var>, <var title="">sy</var>), (<span title=""><var title="">sx</var>+<var title="">sw</var></span>, <var title="">sy</var>), (<span title=""><var title="">sx</var>+<var title="">sw</var></span>, <span title=""><var title="">sy</var>+<var title="">sh</var></span>), (<var title="">sx</var>, <span title=""><var title="">sy</var>+<var title="">sh</var></span>).</p>
+ <p>If not specified, the <var title="">dw</var> and <var title="">dh</var> arguments must
+ default to the values of <var title="">sw</var> and <var title="">sh</var>, interpreted such
+ that one CSS pixel in the image is treated as one unit in the <a href=#scratch-bitmap>scratch bitmap</a>'s
+ coordinate space. If the <var title="">sx</var>, <var title="">sy</var>, <var title="">sw</var>,
+ and <var title="">sh</var> arguments are omitted, they must default to 0, 0, the image's
+ intrinsic width in image pixels, and the image's intrinsic height in image pixels, respectively.
+ If the image has no intrinsic dimensions, the <i>concrete object size</i> must be used instead,
+ as determined using the CSS "<a href=http://dev.w3.org/csswg/css3-images/#default-sizing>Concrete Object Size Resolution</a>"
+ algorithm, with the <i>specified size</i> having neither a definite width nor height, nor any
+ additional contraints, the object's intrinsic properties being those of the <var title="">image</var> argument, and the <i>default object size</i> being the size of the
+ <a href=#scratch-bitmap>scratch bitmap</a>. <a href=#refsCSSIMAGES>[CSSIMAGES]</a></p>
- <p>If one of the <var title="">sw</var> or <var title="">sh</var>
- arguments is zero, the implementation must throw an
- <code><a href=#indexsizeerror>IndexSizeError</a></code> exception.</p>
+ <p>The source rectangle is the rectangle whose corners are the four points (<var title="">sx</var>, <var title="">sy</var>), (<span title=""><var title="">sx</var>+<var title="">sw</var></span>, <var title="">sy</var>), (<span title=""><var title="">sx</var>+<var title="">sw</var></span>, <span title=""><var title="">sy</var>+<var title="">sh</var></span>),
+ (<var title="">sx</var>, <span title=""><var title="">sy</var>+<var title="">sh</var></span>).</p>
- <p>The destination rectangle is the rectangle whose corners are the
- four points (<var title="">dx</var>, <var title="">dy</var>),
- (<span title=""><var title="">dx</var>+<var title="">dw</var></span>, <var title="">dy</var>), (<span title=""><var title="">dx</var>+<var title="">dw</var></span>, <span title=""><var title="">dy</var>+<var title="">dh</var></span>), (<var title="">dx</var>, <span title=""><var title="">dy</var>+<var title="">dh</var></span>).</p>
+ <p>The destination rectangle is the rectangle whose corners are the four points (<var title="">dx</var>, <var title="">dy</var>), (<span title=""><var title="">dx</var>+<var title="">dw</var></span>, <var title="">dy</var>), (<span title=""><var title="">dx</var>+<var title="">dw</var></span>, <span title=""><var title="">dy</var>+<var title="">dh</var></span>),
+ (<var title="">dx</var>, <span title=""><var title="">dy</var>+<var title="">dh</var></span>).</p>
- <p>When the source rectangle is outside the source image, it must be
- clipped to the source image, and the destination rectangle must be
- clipped in the same proportion.</p>
+ <p>When the source rectangle is outside the source image, it must be clipped to the source
+ image, and the destination rectangle must be clipped in the same proportion.</p>
- <p>When <code title=dom-context-2d-drawImage><a href=#dom-context-2d-drawimage>drawImage()</a></code> is
- invoked, the region of the image specified by the source rectangle
- must be painted on the region of the canvas specified by the
- destination rectangle, after applying the <a href=#transformations title=dom-context-2d-transformation>current transformation
- matrix</a> to the points of the destination rectangle.</p>
+ </li>
- <p>The original image data of the source image must be used, not the
- image as it is rendered (e.g. <code title=attr-dim-width><a href=#attr-dim-width>width</a></code> and <code title=attr-dim-height><a href=#attr-dim-height>height</a></code> attributes on the source
- element have no effect). The image data must be processed in the
- original direction, even if the dimensions given are negative. <!--
- remove that last sentence if it causes confusion. Someone once
- suggested that 5,5,-2,-2 was different than 3,3,2,2; this is trying
- to clarify that this is no the case. --></p>
+ <li><p>If one of the <var title="">sw</var> or <var title="">sh</var> arguments is zero, throw an
+ <code><a href=#indexsizeerror>IndexSizeError</a></code> exception and abort these steps.</li>
- <p>If the <code title=dom-context-2d-imageSmoothingEnabled><a href=#dom-context-2d-imagesmoothingenabled>imageSmoothingEnabled</a></code>
- attribute is set to true, then the user agent should attempt to
- apply a smoothing algorithm to the image data when it is scaled.
- Otherwise, the image must be rendered using nearest-neighbor
- interpolation.</p>
+ <li>
- <p class=note>This specification does not define the precise
- algorithm to use when scaling an image when the <code title=dom-context-2d-imageSmoothingEnabled><a href=#dom-context-2d-imagesmoothingenabled>imageSmoothingEnabled</a></code>
- attribute is set to true.</p>
+ <p>Paint the region of the <var title="">image</var> argument specified by the source rectangle
+ on the region of the rendering context's <a href=#scratch-bitmap>scratch bitmap</a> specified by the
+ destination rectangle, after applying the <a href=#transformations title=dom-context-2d-transformation>current
+ transformation matrix</a> to the points of the destination rectangle.</p>
- <p class=note>When a canvas is drawn onto itself, the <a href=#drawing-model>drawing
- model</a> requires the source to be copied before the image is drawn
- back onto the canvas, so it is possible to copy parts of a canvas
- onto overlapping parts of itself.</p>
+ <p>The image data must be processed in the original direction, even if the dimensions given are
+ negative. <!-- note: that last sentence has several times been needed to correct people who
+ suggested that 5,5,-2,-2 was different than 3,3,2,2 --></p>
- <p>If the original image data is a bitmap image, 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.)</p>
- <!-- see CORE-32111 and:
- http://krijnhoetmer.nl/irc-logs/whatwg/20100818#l-737
- http://www.w3.org/Bugs/Public/show_bug.cgi?id=10799#c11
- -->
- <!-- createPattern() has a similar paragraph with different rules -->
+ <p>If the <code title=dom-context-2d-imageSmoothingEnabled><a href=#dom-context-2d-imagesmoothingenabled>imageSmoothingEnabled</a></code>
+ attribute is set to true, then the user agent should attempt to apply a smoothing algorithm to
+ the image data when it is scaled. Otherwise, the image must be rendered using nearest-neighbor
+ interpolation.</p>
- <p>When the <code title=dom-context-2d-drawImage><a href=#dom-context-2d-drawimage>drawImage()</a></code> method
- is passed an animated image as its <var title="">image</var>
- argument, the user agent must use the poster frame of the animation,
- or, if there is no poster frame, the first frame of the
- animation.</p>
- <!-- createPattern() has an equivalent paragraph -->
+ <p class=note>This specification does not define the precise algorithm to use when scaling an
+ image when the <code title=dom-context-2d-imageSmoothingEnabled><a href=#dom-context-2d-imagesmoothingenabled>imageSmoothingEnabled</a></code>
+ attribute is set to true.</p>
- <p>When the <var title="">image</var> argument is an
- <code><a href=#htmlvideoelement>HTMLVideoElement</a></code>, then the frame at the <a href=#current-playback-position>current
- playback position</a> must be used as the source image, and the
- source image's dimensions must be the <a href=#concept-video-intrinsic-width title=concept-video-intrinsic-width>intrinsic width</a> and
- <a href=#concept-video-intrinsic-height title=concept-video-intrinsic-height>intrinsic height</a>
- of the <a href=#media-resource>media resource</a> (i.e. after any aspect-ratio
- correction has been applied).</p>
- <!-- createPattern() has an equivalent paragraph -->
+ <p class=note>When a <code><a href=#the-canvas-element>canvas</a></code> or <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> object is
+ drawn onto itself, the <a href=#drawing-model>drawing model</a> requires the source to be copied before the
+ image is drawn, so it is possible to copy parts of a <code><a href=#the-canvas-element>canvas</a></code> or <a href=#scratch-bitmap>scratch
+ bitmap</a> onto overlapping parts of itself.</p>
- <p>Images are painted without affecting the current path, and are
- subject to <a href=#shadows title=shadows>shadow effects</a>, <a href=#dom-context-2d-globalalpha title=dom-context-2d-globalAlpha>global alpha</a>, the
- <a href=#clipping-region>clipping region</a>, and <a href=#dom-context-2d-globalcompositeoperation title=dom-context-2d-globalCompositeOperation>global composition
- operators</a>.</p>
+ <p>If the original image data is a bitmap image, 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.)</p>
+ <!-- see CORE-32111 and:
+ http://krijnhoetmer.nl/irc-logs/whatwg/20100818#l-737
+ http://www.w3.org/Bugs/Public/show_bug.cgi?id=10799#c11
+ -->
+ <!-- createPattern() has a similar paragraph with different rules -->
- </div>
+ <p>Images are painted without affecting the current path, and are subject to <a href=#shadows title=shadows>shadow effects</a>, <a href=#dom-context-2d-globalalpha title=dom-context-2d-globalAlpha>global
+ alpha</a>, the <a href=#clipping-region>clipping region</a>, and <a href=#dom-context-2d-globalcompositeoperation title=dom-context-2d-globalCompositeOperation>global composition operators</a>.</p>
+ </li>
- <h6 id=hit-regions><span class=secno>4.8.11.1.14 </span>Hit regions</h6>
+<!--ADD-TOPIC:Security-->
+ <li><p>If <a href=#the-image-argument-is-not-origin-clean>the <var title="">image argument</var> is not origin-clean</a>, set the
+ <a href=#scratch-bitmap>scratch bitmap</a>'s <a href=#concept-canvas-origin-clean title=concept-canvas-origin-clean>origin-clean</a> flag
+ to false.</li>
+<!--REMOVE-TOPIC:Security-->
- <p>Each <code><a href=#the-canvas-element>canvas</a></code> element whose <a href=#primary-context>primary
- context</a> is a <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> object
- must have a <dfn id=hit-region-list>hit region list</dfn> associated with its
+ </ol></div>
+
+
+ <h6 id=hit-regions><span class=secno>4.8.11.2.15 </span>Hit regions</h6>
+
+ <p>A <dfn id=hit-region-list>hit region list</dfn> is a list of <a href=#hit-region title="hit region">hit regions</a> for a
bitmap.</p>
- <p>The <a href=#hit-region-list>hit region list</a> is a list of <a href=#hit-region title="hit
- region">hit regions</a>.</p>
+ <p>Each <dfn id=hit-region>hit region</dfn> consists of the following information:</p>
- <p>Each <dfn id=hit-region>hit region</dfn> consists of the following
- information:</p>
+ <ul><li><p>A <dfn id="hit-region's-set-of-pixels" title="hit region's set of pixels">set of pixels</dfn> on the bitmap for which this
+ region is responsible.</li>
- <ul><li><p>A <dfn id="hit-region's-set-of-pixels" title="hit region's set of pixels">set of
- pixels</dfn> on the <code><a href=#the-canvas-element>canvas</a></code> element's bitmap for which
- this region is responsible.</li>
+ <li><p>A <dfn id="hit-region's-bounding-circumference" title="hit region's bounding circumference">bounding circumference</dfn> on the
+ bitmap that surrounds the <a href="#hit-region's-set-of-pixels">hit region's set of pixels</a> as they stood when it was
+ created.</li>
- <li><p>A <dfn id="hit-region's-bounding-circumference" title="hit region's bounding circumference">bounding
- circumference</dfn> on the <code><a href=#the-canvas-element>canvas</a></code> element's bitmap
- that surrounds the <a href="#hit-region's-set-of-pixels">hit region's set of pixels</a> as they
- stood when it was created.</li>
-
<li><p>Optionally, a non-empty string representing an <dfn id="hit-region's-id" title="hit region's ID">ID</dfn> for distinguishing the region
from others.</li>
@@ -40254,11 +40766,11 @@
control">control</a>, or an <a href="#hit-region's-unbacked-region-description" title="hit region's unbacked
region description">unbacked region description</a>.</p>
- <p>A <dfn id="hit-region's-control" title="hit region's control">control</dfn> is just a
- reference to an <code><a href=#element>Element</a></code> node, to which, in certain
- conditions, the user agent will route events, and from which the
- user agent will determine the state of the hit region for the
- purposes of accessibility tools.</p>
+ <p>A <dfn id="hit-region's-control" title="hit region's control">control</dfn> is just a reference to an
+ <code><a href=#element>Element</a></code> node, to which, in certain conditions, the user agent will route events,
+ and from which the user agent will determine the state of the hit region for the purposes of
+ accessibility tools. (The control is ignored when it is not a descendant of the
+ <code><a href=#the-canvas-element>canvas</a></code> element.)</p>
<p>An <dfn id="hit-region's-unbacked-region-description" title="hit region's unbacked region
description">unbacked region description</dfn> consists of the
@@ -40278,8 +40790,7 @@
<dd>
- <p>Adds a hit region to the canvas bitmap. The argument is an
- object with the following members:</p>
+ <p>Adds a hit region to the bitmap. The argument is an object with the following members:</p>
<dl><dt><code title=dom-HitRegionOptions-path>path</code> (default null)
@@ -40337,14 +40848,14 @@
ID in the mouse events.</li>
<li>With a control, they can make routing events to DOM elements
- automatic, allowing e.g. clicks on a canvas to automatically
+ automatic, allowing e.g. clicks on a <code><a href=#the-canvas-element>canvas</a></code> to automatically
submit a form via a <code><a href=#the-button-element>button</a></code> element.</li>
<li>With a label, they can make it easier for users to explore a
- canvas without seeing it, e.g. by touch on a mobile device.</li>
+ <code><a href=#the-canvas-element>canvas</a></code> without seeing it, e.g. by touch on a mobile device.</li>
<li>With a cursor, they can make it easier for different regions
- of the canvas to have different cursors, with the user agent
+ of the <code><a href=#the-canvas-element>canvas</a></code> to have different cursors, with the user agent
automatically switching between them.</li>
</ul></dd>
@@ -40373,16 +40884,14 @@
<a href=#hit-region>hit region</a> for which <var title="">A</var> is an
<a href=#ancestor-region>ancestor region</a>.</p>
- <p><dfn id=the-region-identified-by-the-id>The region identified by the ID</dfn> <var title="">ID</var> in a <code><a href=#the-canvas-element>canvas</a></code> element <var title="">ancestor</var> is the value returned by the following
- algorithm (which can return a <a href=#hit-region>hit region</a> or
- nothing):</p>
+ <p><dfn id=the-region-identified-by-the-id>The region identified by the ID</dfn> <var title="">ID</var> in a bitmap <var title="">bitmap</var> is the value returned by the following algorithm (which can return a
+ <a href=#hit-region>hit region</a> or nothing):</p>
<ol><li><p>If <var title="">ID</var> is null, return nothing and abort
these steps.</li>
<li><p>Let <var title="">list</var> be the <a href=#hit-region-list>hit region
- list</a> associated with <var title="">ancestor</var>'s
- bitmap.</li>
+ list</a> associated with <var title="">bitmap</var>.</li>
<li><p>If there is a <a href=#hit-region>hit region</a> in <var title="">list</var> whose <a href="#hit-region's-id" title="hit region's ID">ID</a>
is a <a href=#case-sensitive>case-sensitive</a> match for <var title="">ID</var>,
@@ -40391,17 +40900,12 @@
<li><p>Otherwise, return nothing.</li>
- </ol><p><dfn id=the-region-representing-the-control>The region representing the control</dfn> <var title="">control</var> for a <code><a href=#the-canvas-element>canvas</a></code> element <var title="">ancestor</var> is the value returned by the following
- algorithm (which can return a <a href=#hit-region>hit region</a> or
- nothing):</p>
+ </ol><p><dfn id=the-region-representing-the-control>The region representing the control</dfn> <var title="">control</var> for a bitmap <var title="">bitmap</var> is the value returned by the following algorithm (which can return a
+ <a href=#hit-region>hit region</a> or nothing):</p>
- <ol><li><p>If <var title="">control</var> is not a descendant of <var title="">ancestor</var>, then return nothing and abort these
- steps.</li>
+ <ol><li><p>Let <var title="">list</var> be the <a href=#hit-region-list>hit region
+ list</a> associated with <var title="">bitmap</var>.</li>
- <li><p>Let <var title="">list</var> be the <a href=#hit-region-list>hit region
- list</a> associated with <var title="">ancestor</var>'s
- bitmap.</li>
-
<li><p>If there is a <a href=#hit-region>hit region</a> in <var title="">list</var> whose <a href="#hit-region's-control" title="hit region's
control">control</a> is <var title="">control</var>, then
return that <a href=#hit-region>hit region</a> and abort these
@@ -40436,17 +40940,13 @@
region's parent">parent</a>, then let <var title="">region</var> be that <a href="#hit-region's-parent">hit region's parent</a>,
and return to the step labeled <i>loop</i>.</li>
- <li><p>Otherwise, return the used value of the 'cursor' property
- for the <code><a href=#the-canvas-element>canvas</a></code> element. <a href=#refsCSSUI>[CSSUI]</a></li>
+ <li><p>Otherwise, return the used value of the 'cursor' property for the <code><a href=#the-canvas-element>canvas</a></code>
+ element, if any; if there isn't one, return 'auto'. <a href=#refsCSSUI>[CSSUI]</a></li>
- </ol><p><dfn id=the-region-for-a-pixel>The region for a pixel</dfn> <var title="">pixel</var> on a
- <code><a href=#the-canvas-element>canvas</a></code> element <var title="">ancestor</var> is the
- value returned by the following algorithm (which can return a
+ </ol><p><dfn id=the-region-for-a-pixel>The region for a pixel</dfn> <var title="">pixel</var> on a bitmap <var title="">bitmap</var> is the value returned by the following algorithm (which can return a
<a href=#hit-region>hit region</a> or nothing):</p>
- <ol><li><p>Let <var title="">list</var> be the <a href=#hit-region-list>hit region
- list</a> associated with <var title="">ancestor</var>'s
- bitmap.</li>
+ <ol><li><p>Let <var title="">list</var> be the <a href=#hit-region-list>hit region list</a> associated with <var title="">bitmap</var>.</li>
<li><p>If there is a <a href=#hit-region>hit region</a> in <var title="">list</var> whose <a href="#hit-region's-set-of-pixels" title="hit region's set of
pixels">set of pixels</a> contains <var title="">pixel</var>,
@@ -40455,26 +40955,20 @@
<li><p>Otherwise, return nothing.</li>
- </ol><p>To <dfn id=clear-regions-that-cover-the-pixels>clear regions that cover the pixels</dfn> <var title="">pixels</var> on a <code><a href=#the-canvas-element>canvas</a></code> element <var title="">ancestor</var>, the user agent must run the following
- steps:</p>
+ </ol><p>To <dfn id=clear-regions-that-cover-the-pixels>clear regions that cover the pixels</dfn> <var title="">pixels</var> on a bitmap <var title="">bitmap</var>, the user agent must run the following steps:</p>
- <ol><li><p>Let <var title="">list</var> be the <a href=#hit-region-list>hit region
- list</a> associated with <var title="">ancestor</var>'s
- bitmap.</li>
+ <ol><li><p>Let <var title="">list</var> be the <a href=#hit-region-list>hit region list</a> associated with <var title="">bitmap</var>.</li>
<li><p>Remove all pixels in <var title="">pixels</var> from the
<a href="#hit-region's-set-of-pixels" title="hit region's set of pixels">set of pixels</a> of
each <a href=#hit-region>hit region</a> in <var title="">list</var>.</li>
- <li><p><a href=#garbage-collect-the-regions>Garbage-collect the regions</a> of <var title="">ancestor</var>.</li>
+ <li><p><a href=#garbage-collect-the-regions>Garbage-collect the regions</a> of <var title="">bitmap</var>.</li>
- </ol><p>To <dfn id=garbage-collect-the-regions>garbage-collect the regions</dfn> of a
- <code><a href=#the-canvas-element>canvas</a></code> element <var title="">ancestor</var>, the user
+ </ol><p>To <dfn id=garbage-collect-the-regions>garbage-collect the regions</dfn> of a bitmap <var title="">bitmap</var>, the user
agent must run the following steps:</p>
- <ol><li><p>Let <var title="">list</var> be the <a href=#hit-region-list>hit region
- list</a> associated with <var title="">ancestor</var>'s
- bitmap.</li>
+ <ol><li><p>Let <var title="">list</var> be the <a href=#hit-region-list>hit region list</a> associated with <var title="">bitmap</var>.</li>
<li><p><i>Loop</i>: Let <var title="">victim</var> be the first
<a href=#hit-region>hit region</a> in <var title="">list</var> to have an
@@ -40491,10 +40985,10 @@
<li><p>Jump back to the step labeled <i>loop</i>.</li>
- </ol><p class=note>Adding a new region and calling <code title=dom-context-2d-clearRect><a href=#dom-context-2d-clearrect>clearRect()</a></code> are the two ways
- this clearing algorithm can be invoked. Resizing the canvas also
- clears the <a href=#hit-region-list>hit region list</a> (since it clears the canvas
- back to its initial state).</p>
+ </ol><p class=note>Adding a new region and calling <code title=dom-context-2d-clearRect><a href=#dom-context-2d-clearrect>clearRect()</a></code> are the two ways this clearing algorithm can
+ be invoked. The <a href=#hit-region-list>hit region list</a> itself is also reset when the rendering context is
+ reset, e.g. when a <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> object is bound to or unbound from a
+ <code><a href=#the-canvas-element>canvas</a></code>, or when the dimensions of the bitmap are changed.</p>
<hr><p>When the <dfn id=dom-context-2d-addhitregion title=dom-context-2d-addHitRegion><code>addHitRegion()</code></dfn>
method is invoked, the user agent must run the following steps:</p>
@@ -40529,7 +41023,7 @@
<li><p>If the <var title="">arguments</var> object's <code title=dom-HitRegionOptions-id>id</code> member is not null, then
let <var title="">previous region for this ID</var> be <a href=#the-region-identified-by-the-id>the
region identified by the ID</a> given by the <code title=dom-HitRegionOptions-id>id</code> member's value in this
- <code><a href=#the-canvas-element>canvas</a></code> element, if any. If the <code title=dom-HitRegionOptions-id>id</code> member is null or no such
+ <a href=#scratch-bitmap>scratch bitmap</a>, if any. If the <code title=dom-HitRegionOptions-id>id</code> member is null or no such
region currently exists, let <var title="">previous region for this
ID</var> be null.</li>
@@ -40539,7 +41033,7 @@
<li><p>If the <var title="">arguments</var> object's <code title=dom-HitRegionOptions-parent>parent</code> member is not
null, then let <var title="">parent region</var> be <a href=#the-region-identified-by-the-id>the
region identified by the ID</a> given by the <code title=dom-HitRegionOptions-parent>parent</code> member's value in
- this <code><a href=#the-canvas-element>canvas</a></code> element, if any. If the <code title=dom-HitRegionOptions-parent>parent</code> member is null or
+ the <a href=#scratch-bitmap>scratch bitmap</a>, if any. If the <code title=dom-HitRegionOptions-parent>parent</code> member is null or
no such region currently exists, let <var title="">parent
region</var> be null.</li>
@@ -40703,7 +41197,7 @@
null, then let <var title="">previous region for the control</var>
be <a href=#the-region-representing-the-control>the region representing the control</a> given by the
<code title=dom-HitRegionOptions-control>control</code> member's
- value for this <code><a href=#the-canvas-element>canvas</a></code> element, if any. If the <code title=dom-HitRegionOptions-control>control</code> member is null
+ value for this <a href=#scratch-bitmap>scratch bitmap</a>, if any. If the <code title=dom-HitRegionOptions-control>control</code> member is null
or no such region currently exists, let <var title="">previous
region for the control</var> be null.</li>
@@ -40716,50 +41210,40 @@
its descendants, as we know that our parent isn't part of that
subtree. -->
- <li><p>If there is a <var title="">previous region with this
- control</var>, remove it from the <code><a href=#the-canvas-element>canvas</a></code> element's
- <a href=#hit-region-list>hit region list</a>; then, if it had a <a href="#hit-region's-parent" title="hit
- region's parent">parent</a> region, decrement that <a href="#hit-region's-child-count">hit
- region's child count</a> by one.</li> <!-- we garbage
- collect the regions below -->
+ <li><p>If there is a <var title="">previous region with this control</var>, remove it from the
+ <a href=#scratch-bitmap>scratch bitmap</a>'s <a href=#hit-region-list>hit region list</a>; then, if it had a <a href="#hit-region's-parent" title="hit
+ region's parent">parent</a> region, decrement that <a href="#hit-region's-child-count">hit region's child count</a> by
+ one.</li> <!-- we garbage collect the regions below -->
- <li><p>If there is a <var title="">previous region with this
- ID</var>, remove it, and all <a href=#hit-region title="hit region">hit
- regions</a> for which it is an <a href=#ancestor-region>ancestor region</a>,
- from the <code><a href=#the-canvas-element>canvas</a></code> element's <a href=#hit-region-list>hit region
- list</a>; then, if it had a <a href="#hit-region's-parent" title="hit region's
- parent">parent</a> region, decrement that <a href="#hit-region's-child-count">hit region's
- child count</a> by one.</li> <!-- we garbage collect the
- regions below -->
+ <li><p>If there is a <var title="">previous region with this ID</var>, remove it, and all <a href=#hit-region title="hit region">hit regions</a> for which it is an <a href=#ancestor-region>ancestor region</a>, from the
+ <a href=#scratch-bitmap>scratch bitmap</a>'s <a href=#hit-region-list>hit region list</a>; then, if it had a <a href="#hit-region's-parent" title="hit
+ region's parent">parent</a> region, decrement that <a href="#hit-region's-child-count">hit region's child count</a> by
+ one.</li> <!-- we garbage collect the regions below -->
<li><p>If there is a <var title="">parent region</var>, increment
its <a href="#hit-region's-child-count">hit region's child count</a> by one.</li>
- <li><p><a href=#clear-regions-that-cover-the-pixels>Clear regions that cover the pixels</a> in <var title="">region</var>'s <a href="#hit-region's-set-of-pixels" title="hit region's set of
- pixels">set of pixels</a> on this <code><a href=#the-canvas-element>canvas</a></code>
- element.</li> <!-- this is what garbage collects the earlier
- regions -->
+ <li><p><a href=#clear-regions-that-cover-the-pixels>Clear regions that cover the pixels</a> in <var title="">region</var>'s <a href="#hit-region's-set-of-pixels" title="hit region's set of pixels">set of pixels</a> on this <a href=#scratch-bitmap>scratch
+ bitmap</a>.</li> <!-- this is what garbage collects the earlier regions -->
- <li><p>Add <var title="">region</var> to the <code><a href=#the-canvas-element>canvas</a></code>
- element's <a href=#hit-region-list>hit region list</a>.</li>
+ <li><p>Add <var title="">region</var> to the <a href=#scratch-bitmap>scratch bitmap</a>'s element's <a href=#hit-region-list>hit
+ region list</a>.</li>
</ol><p>When the <dfn id=dom-context-2d-removehitregion title=dom-context-2d-removeHitRegion><code>removeHitRegion()</code></dfn>
method is invoked, the user agent must run the following steps:</p>
- <ol><li><p>Let <var title="">region</var> be <a href=#the-region-identified-by-the-id>the region
- identified by the ID</a> given by the method's argument in this
- <code><a href=#the-canvas-element>canvas</a></code> element, if any. If no such region currently
- exists, abort these steps.</li>
+ <ol><li><p>Let <var title="">region</var> be <a href=#the-region-identified-by-the-id>the region identified by the ID</a> given by
+ the method's argument in the rendering context's <a href=#scratch-bitmap>scratch bitmap</a>. If no such region
+ currently exists, abort these steps.</li>
- <li><p>Remove <var title="">region</var>, and all <a href=#hit-region title="hit
- region">hit regions</a> for which it is an <a href=#ancestor-region>ancestor
- region</a>, from the <code><a href=#the-canvas-element>canvas</a></code> element's <a href=#hit-region-list>hit
- region list</a>; then, if it had a <a href="#hit-region's-parent" title="hit region's
- parent">parent</a> region, decrement that <a href="#hit-region's-child-count">hit region's
- child count</a> by one.</li> <!-- we garbage collect the
- regions below -->
+ <li><p>Remove <var title="">region</var>, and all <a href=#hit-region title="hit region">hit regions</a> for
+ which it is an <a href=#ancestor-region>ancestor region</a>, from the rendering context's <a href=#scratch-bitmap>scratch
+ bitmap</a>'s <a href=#hit-region-list>hit region list</a>; then, if it had a <a href="#hit-region's-parent" title="hit region's
+ parent">parent</a> region, decrement that <a href="#hit-region's-child-count">hit region's child count</a> by
+ one.</li> <!-- we garbage collect the regions below -->
- <li><p><a href=#garbage-collect-the-regions>Garbage-collect the regions</a> of <var title="">ancestor</var>.</li>
+ <li><p><a href=#garbage-collect-the-regions>Garbage-collect the regions</a> of the rendering context's <a href=#scratch-bitmap>scratch
+ bitmap</a>.</li>
</ol></div>
@@ -40793,11 +41277,10 @@
ID</a> if the mouse was over a hit region when the event was
fired.</p>
- <p>When a <code><a href=#mouseevent>MouseEvent</a></code> is to be fired at a
- <code><a href=#the-canvas-element>canvas</a></code> element by the user agent in response to a
- pointing device action, the user agent must instead follow these
- steps. If these steps say to <i>act as normal</i>, that means that
- the event must be fired as it would have had these requirements not
+ <p>When a <code><a href=#mouseevent>MouseEvent</a></code> is to be fired at a <code><a href=#the-canvas-element>canvas</a></code> element by the user
+ agent in response to a pointing device action, if the <code><a href=#the-canvas-element>canvas</a></code> element has a <a href=#hit-region-list>hit
+ region list</a>, the user agent must instead follow these steps. If these steps say to <i>act
+ as normal</i>, that means that the event must be fired as it would have had these requirements not
been applied.</p>
<ol><li><p>If the pointing device is not indicating a pixel on the
@@ -40809,7 +41292,7 @@
<li><p>Let <var title="">region</var> be the <a href=#hit-region>hit
region</a> that is <a href=#the-region-for-a-pixel title="the region for a pixel">the
region for the pixel</a> <var title="">pixel</var> on this
- <code><a href=#the-canvas-element>canvas</a></code> element, if any.</li>
+ <code><a href=#the-canvas-element>canvas</a></code> element's bitmap, if any.</li>
<li><p>If there is no <var title="">region</var>, then act as
normal and abort these steps.</li>
@@ -40821,8 +41304,9 @@
event object's <code title=dom-MouseEvent-region><a href=#dom-mouseevent-region>region</a></code>
attribute to <var title="">id</var>.</li>
- <li><p>Let <var title="">control</var> be the <var title="">region</var>'s <a href="#hit-region's-control" title="hit region's
- control">control</a>, if any.</li>
+ <li><p>Let <var title="">control</var> be the <a href=#the-control-represented-by-a-region title="the control represented by a
+ region">control represented by</a> <var title="">region</var> for this <code><a href=#the-canvas-element>canvas</a></code>
+ element, if any.</li>
<li><p>If there is a <var title="">control</var>, then target the
event object at <var title="">control</var> instead of the
@@ -40831,12 +41315,10 @@
<li><p>Continue dispatching the event, but with the updated event
object and target as given in the above steps.</li>
- </ol><hr><p>When a user's pointing device cursor is positioned over a
- <code><a href=#the-canvas-element>canvas</a></code> element, user agents should render the pointing
- device cursor according to the cursor specification described by
- <a href=#the-cursor-for-a-hit-region title="the cursor for a hit region">the cursor for the hit
- region</a> that is <a href=#the-region-for-a-pixel title="the region for a pixel">the
- region for the pixel</a> that the pointing device designates.</p>
+ </ol><hr><p>When a user's pointing device cursor is positioned over a <code><a href=#the-canvas-element>canvas</a></code> element, user
+ agents should render the pointing device cursor according to the cursor specification described by
+ <a href=#the-cursor-for-a-hit-region title="the cursor for a hit region">the cursor for the hit region</a> that is <a href=#the-region-for-a-pixel title="the region for a pixel">the region for the pixel</a> that the pointing device designates
+ on the <code><a href=#the-canvas-element>canvas</a></code> element's bitmap.</p>
<hr><p>User agents are encouraged to make use of the information present
in a <code><a href=#the-canvas-element>canvas</a></code> element's <a href=#hit-region-list>hit region list</a> to
@@ -40853,26 +41335,23 @@
region's bounding circumference</a> gives the region of the
screen to use when representing the node (if appropriate).</p>
- <p>The semantics of a <a href=#hit-region>hit region</a> for the purposes of
- this virtual DOM tree are those of the <a href="#hit-region's-control">hit region's
- control</a>, if it has one, or else of a non-interactive element
- whose ARIA role, if any, is that given by the <a href="#hit-region's-aria-role">hit region's
- ARIA role</a>, and whose textual representation, if any, is given
- by the <a href="#hit-region's-label">hit region's label</a>.</p>
+ <p>The semantics of a <a href=#hit-region>hit region</a> for the purposes of this virtual DOM tree are those
+ of the <a href=#the-control-represented-by-a-region title="the control represented by a region">the control represented by the
+ region</a>, if it has one, or else of a non-interactive element whose ARIA role, if any, is
+ that given by the <a href="#hit-region's-aria-role">hit region's ARIA role</a>, and whose textual representation, if any,
+ is given by the <a href="#hit-region's-label">hit region's label</a>.</p>
- <p>For the purposes of accessibility tools, when an element <var title="">C</var> is a descendant of a <code><a href=#the-canvas-element>canvas</a></code> element
- and there is <a href=#the-region-representing-the-control title="the region representing the control">a
- region representing the control</a> <var title="">C</var> for that
- <code><a href=#the-canvas-element>canvas</a></code> element, then the element's position relative to
- the document should be presented as if it was that region in the
- <code><a href=#the-canvas-element>canvas</a></code> element's virtual DOM tree.</p>
+ <p>For the purposes of accessibility tools, when an element <var title="">C</var> is a descendant
+ of a <code><a href=#the-canvas-element>canvas</a></code> element and there is <a href=#the-region-representing-the-control title="the region representing the control">a
+ region representing the control</a> <var title="">C</var> for that <code><a href=#the-canvas-element>canvas</a></code>
+ element's bitmap, then the element's position relative to the document should be presented as if
+ it was that region in the <code><a href=#the-canvas-element>canvas</a></code> element's virtual DOM tree.</p>
- <p>The semantics of a <a href=#hit-region>hit region</a> for the purposes of
- this virtual DOM tree are those of the <a href="#hit-region's-control">hit region's
- control</a>, if it has one, or else of a non-interactive element
- whose ARIA role, if any, is that given by the <a href="#hit-region's-aria-role">hit region's
- ARIA role</a>, and whose textual representation, if any, is given
- by the <a href="#hit-region's-label">hit region's label</a>.</p>
+ <p>The semantics of a <a href=#hit-region>hit region</a> for the purposes of this virtual DOM tree are those
+ of the <a href=#the-control-represented-by-a-region title="the control represented by a region">the control represented by the
+ region</a>, if it has one, or else of a non-interactive element whose ARIA role, if any, is
+ that given by the <a href="#hit-region's-aria-role">hit region's ARIA role</a>, and whose textual representation, if any,
+ is given by the <a href="#hit-region's-label">hit region's label</a>.</p>
<p class=note>Thus, for instance, a user agent on a touch-screen
device could provide haptic feedback when the user croses over a
@@ -40890,7 +41369,7 @@
</div>
- <h6 id=pixel-manipulation><span class=secno>4.8.11.1.15 </span><dfn>Pixel manipulation</dfn></h6>
+ <h6 id=pixel-manipulation><span class=secno>4.8.11.2.16 </span><dfn>Pixel manipulation</dfn></h6>
<dl class=domintro><dt><var title="">imagedata</var> = <var title="">context</var> . <code title=dom-context-2d-createImageData><a href=#dom-context-2d-createimagedata>createImageData</a></code>(<var title="">sw</var>, <var title="">sh</var>)</dt>
@@ -40928,8 +41407,8 @@
<dd>
- <p>Returns an <code><a href=#imagedata>ImageData</a></code> object containing the image
- data for the given rectangle of the canvas.</p>
+ <p>Returns an <code><a href=#imagedata>ImageData</a></code> object containing the image data for the given rectangle of
+ the bitmap.</p>
<p>Throws an <code><a href=#indexsizeerror>IndexSizeError</a></code> exception if the either
of the width or height arguments are zero.</p>
@@ -40943,8 +41422,8 @@
<dd>
- <p>Returns an <code><a href=#imagedata>ImageData</a></code> object containing the image
- data for the given rectangle of the canvas.</p>
+ <p>Returns an <code><a href=#imagedata>ImageData</a></code> object containing the image data for the given rectangle of
+ the bitmap.</p>
<p>Throws an <code><a href=#indexsizeerror>IndexSizeError</a></code> exception if the either
of the width or height arguments are zero.</p>
@@ -40980,9 +41459,8 @@
<dd>
- <p>Paints the data from the given <code><a href=#imagedata>ImageData</a></code> object
- onto the canvas. If a dirty rectangle is provided, only the pixels
- from that rectangle are painted.</p>
+ <p>Paints the data from the given <code><a href=#imagedata>ImageData</a></code> object onto the bitmap. If a dirty
+ rectangle is provided, only the pixels from that rectangle are painted.</p>
<p>The <code title=dom-context-2d-globalAlpha><a href=#dom-context-2d-globalalpha>globalAlpha</a></code>
and <code title=dom-context-2d-globalCompositeOperation><a href=#dom-context-2d-globalcompositeoperation>globalCompositeOperation</a></code>
@@ -40994,8 +41472,7 @@
<p>Throws a <code><a href=#notsupportederror>NotSupportedError</a></code> exception if any of the
arguments are not finite.</p>
- <p>Each pixel in the image data is mapped to one coordinate space
- unit on the canvas.</p>
+ <p>Each pixel in the image data is mapped to one coordinate space unit on the bitmap.</p>
</dd>
@@ -41003,10 +41480,9 @@
<dd>
- <p>Paints the data from the given <code><a href=#imagedata>ImageData</a></code> object
- onto the canvas, at the canvas bitmap's native resolution. If a
- dirty rectangle is provided, only the pixels from that rectangle
- are painted.</p>
+ <p>Paints the data from the given <code><a href=#imagedata>ImageData</a></code> object onto the bitmap, at the bitmap's
+ native pixel density. If a dirty rectangle is provided, only the pixels from that rectangle are
+ painted.</p>
<p>The <code title=dom-context-2d-globalAlpha><a href=#dom-context-2d-globalalpha>globalAlpha</a></code>
and <code title=dom-context-2d-globalCompositeOperation><a href=#dom-context-2d-globalcompositeoperation>globalCompositeOperation</a></code>
@@ -41039,49 +41515,42 @@
with transparent black.</p>
<p>When the <dfn id=dom-context-2d-createimagedatahd title=dom-context-2d-createImageDataHD><code>createImageDataHD()</code></dfn>
- method is invoked (with its two arguments <var title="">sw</var> and
- <var title="">sh</var>) it must return a new <code><a href=#imagedata>ImageData</a></code>
- object representing a rectangle with a width in equal to the
- absolute magnitude of <var title="">sw</var> multiplied by <var title="">scale</var> and a height equal to the absolute magnitude of
- <var title="">sh</var> multiplied by <var title="">scale</var>,
- where <var title="">scale</var> is the number of pixels in the
- canvas bitmap per coordinate space units. The <code><a href=#imagedata>ImageData</a></code>
- object returned must be filled with transparent black.</p>
+ method is invoked (with its two arguments <var title="">sw</var> and <var title="">sh</var>) it
+ must return a new <code><a href=#imagedata>ImageData</a></code> object representing a rectangle with a width in equal to
+ the absolute magnitude of <var title="">sw</var> multiplied by <var title="">scale</var> and a
+ height equal to the absolute magnitude of <var title="">sh</var> multiplied by <var title="">scale</var>, where <var title="">scale</var> is the number of pixels in the <a href=#scratch-bitmap>scratch
+ bitmap</a> per coordinate space units. The <code><a href=#imagedata>ImageData</a></code> object returned must be
+ filled with transparent black.</p>
- <p>The <dfn id=dom-context-2d-getimagedata title=dom-context-2d-getImageData><code>getImageData(<var title="">sx</var>, <var title="">sy</var>, <var title="">sw</var>,
- <var title="">sh</var>)</code></dfn> method must, if either the <var title="">sw</var> or <var title="">sh</var> arguments are zero,
- throw an <code><a href=#indexsizeerror>IndexSizeError</a></code> exception; otherwise,
+ <p>The <dfn id=dom-context-2d-getimagedata title=dom-context-2d-getImageData><code>getImageData(<var title="">sx</var>, <var title="">sy</var>, <var title="">sw</var>, <var title="">sh</var>)</code></dfn> method must, if
+ either the <var title="">sw</var> or <var title="">sh</var> arguments are zero, throw an
+ <code><a href=#indexsizeerror>IndexSizeError</a></code> exception; otherwise,
<!--ADD-TOPIC:Security-->
- if the <code><a href=#the-canvas-element>canvas</a></code> element's <i>origin-clean</i> flag is set
- to false, it must throw a <code><a href=#securityerror>SecurityError</a></code> exception;
+ if the <a href=#scratch-bitmap>scratch bitmap</a>'s <a href=#concept-canvas-origin-clean title=concept-canvas-origin-clean>origin-clean</a>
+ flag is set to false, it must throw a <code><a href=#securityerror>SecurityError</a></code> exception;
<!--REMOVE-TOPIC:Security-->
- otherwise, it must return an <code><a href=#imagedata>ImageData</a></code> object with
- width <var title="">sw</var> and height <var title="">sh</var>
- representing the canvas bitmap for the area of the canvas denoted by
- the rectangle whose corners are the four points (<var title="">sx</var>, <var title="">sy</var>), (<span title=""><var title="">sx</var>+<var title="">sw</var></span>, <var title="">sy</var>), (<span title=""><var title="">sx</var>+<var title="">sw</var></span>, <span title=""><var title="">sy</var>+<var title="">sh</var></span>), (<var title="">sx</var>, <span title=""><var title="">sy</var>+<var title="">sh</var></span>), in
- canvas coordinate space units. If the canvas bitmap does not
- represent each coordinate space unit square using exactly one pixel,
- the value of each pixel in the returned abject must be derived from
- the value(s) of the pixel(s) in the canvas bitmap that correspond to
- the same coordinate. Pixels outside the canvas must be returned as
- transparent black. Pixels must be returned as non-premultiplied
+ otherwise, it must return an <code><a href=#imagedata>ImageData</a></code> object with width <var title="">sw</var> and
+ height <var title="">sh</var> representing the <a href=#scratch-bitmap>scratch bitmap</a> for the area of that
+ bitmap denoted by the rectangle whose corners are the four points (<var title="">sx</var>, <var title="">sy</var>), (<span title=""><var title="">sx</var>+<var title="">sw</var></span>, <var title="">sy</var>), (<span title=""><var title="">sx</var>+<var title="">sw</var></span>, <span title=""><var title="">sy</var>+<var title="">sh</var></span>), (<var title="">sx</var>, <span title=""><var title="">sy</var>+<var title="">sh</var></span>), in the bitmap's coordinate space
+ units. If the bitmap does not represent each coordinate space unit square using exactly one pixel,
+ the value of each pixel in the returned abject must be derived from the value(s) of the pixel(s)
+ in the bitmap that correspond to the same coordinate. Pixels outside the <a href=#scratch-bitmap>scratch
+ bitmap</a> must be returned as transparent black. Pixels must be returned as non-premultiplied
alpha values.</p>
- <p>The <dfn id=dom-context-2d-getimagedatahd title=dom-context-2d-getImageDataHD><code>getImageDataHD(<var title="">sx</var>, <var title="">sy</var>, <var title="">sw</var>,
- <var title="">sh</var>)</code></dfn> method must, if either the <var title="">sw</var> or <var title="">sh</var> arguments are zero,
- throw an <code><a href=#indexsizeerror>IndexSizeError</a></code> exception; otherwise,
+ <p>The <dfn id=dom-context-2d-getimagedatahd title=dom-context-2d-getImageDataHD><code>getImageDataHD(<var title="">sx</var>,
+ <var title="">sy</var>, <var title="">sw</var>, <var title="">sh</var>)</code></dfn> method must,
+ if either the <var title="">sw</var> or <var title="">sh</var> arguments are zero, throw an
+ <code><a href=#indexsizeerror>IndexSizeError</a></code> exception; otherwise,
<!--ADD-TOPIC:Security-->
- if the <code><a href=#the-canvas-element>canvas</a></code> element's <i>origin-clean</i> flag is set
- to false, it must throw a <code><a href=#securityerror>SecurityError</a></code> exception;
+ if the <a href=#scratch-bitmap>scratch bitmap</a>'s <a href=#concept-canvas-origin-clean title=concept-canvas-origin-clean>origin-clean</a>
+ flag is set to false, it must throw a <code><a href=#securityerror>SecurityError</a></code> exception;
<!--REMOVE-TOPIC:Security-->
- otherwise, it must return an <code><a href=#imagedata>ImageData</a></code> object with
- width <var title="">sw</var> multiplied by <var title="">scale</var>
- and height <var title="">sh</var> multiplied by <var title="">scale</var> representing the canvas bitmap data for the
- area of the canvas denoted by the rectangle whose corners are the
- four points (<var title="">sx</var>, <var title="">sy</var>), (<span title=""><var title="">sx</var>+<var title="">sw</var></span>, <var title="">sy</var>), (<span title=""><var title="">sx</var>+<var title="">sw</var></span>, <span title=""><var title="">sy</var>+<var title="">sh</var></span>), (<var title="">sx</var>, <span title=""><var title="">sy</var>+<var title="">sh</var></span>), in
- canvas coordinate space units. Pixels outside the canvas must be
- returned as transparent black. Pixels must be returned as
- non-premultiplied alpha values.</p>
+ otherwise, it must return an <code><a href=#imagedata>ImageData</a></code> object with width <var title="">sw</var>
+ multiplied by <var title="">scale</var> and height <var title="">sh</var> multiplied by <var title="">scale</var> representing the <a href=#scratch-bitmap>scratch bitmap</a> for the area of that bitmap
+ denoted by the rectangle whose corners are the four points (<var title="">sx</var>, <var title="">sy</var>), (<span title=""><var title="">sx</var>+<var title="">sw</var></span>, <var title="">sy</var>), (<span title=""><var title="">sx</var>+<var title="">sw</var></span>, <span title=""><var title="">sy</var>+<var title="">sh</var></span>), (<var title="">sx</var>, <span title=""><var title="">sy</var>+<var title="">sh</var></span>), in the bitmap's coordinate space
+ units. Pixels outside the <a href=#scratch-bitmap>scratch bitmap</a> must be returned as transparent black.
+ Pixels must be returned as non-premultiplied alpha values.</p>
<p>New <code><a href=#imagedata>ImageData</a></code> objects must be initialized so that
their <dfn id=dom-imagedata-width title=dom-imagedata-width><code>width</code></dfn>
@@ -41107,10 +41576,9 @@
consecutive indices starting with 0 for the top left pixel's red
component. <a href=#refsTYPEDARRAY>[TYPEDARRAY]</a></p>
- <p>The <dfn id=dom-context-2d-putimagedata title=dom-context-2d-putImageData><code>putImageData()</code></dfn>
- and <dfn id=dom-context-2d-putimagedatahd title=dom-context-2d-putImageDataHD><code>putImageDataHD()</code></dfn>
- methods write data from <code><a href=#imagedata>ImageData</a></code> structures back to
- the canvas. Their arguments are: <var title="">imagedata</var>, <var title="">dx</var>, <var title="">dy</var>, <var title="">dirtyX</var>, <var title="">dirtyY</var>, <var title="">dirtyWidth</var>, and <var title="">dirtyHeight</var>.</p>
+ <p>The <dfn id=dom-context-2d-putimagedata title=dom-context-2d-putImageData><code>putImageData()</code></dfn> and <dfn id=dom-context-2d-putimagedatahd title=dom-context-2d-putImageDataHD><code>putImageDataHD()</code></dfn> methods write data from
+ <code><a href=#imagedata>ImageData</a></code> structures back to the rendering context's <a href=#scratch-bitmap>scratch bitmap</a>.
+ Their arguments are: <var title="">imagedata</var>, <var title="">dx</var>, <var title="">dy</var>, <var title="">dirtyX</var>, <var title="">dirtyY</var>, <var title="">dirtyWidth</var>, and <var title="">dirtyHeight</var>.</p>
<p>When the last four arguments to these methods are omitted, they
must be assumed to have the values 0, 0, the <code title=dom-imagedata-width><a href=#dom-imagedata-width>width</a></code> member of the <var title="">imagedata</var> structure, and the <code title=dom-imagedata-height><a href=#dom-imagedata-height>height</a></code> member of the <var title="">imagedata</var> structure, respectively.</p>
@@ -41151,7 +41619,7 @@
<p>If, after those changes, either <var title="">dirtyWidth</var>
or <var title="">dirtyHeight</var> is negative or zero, stop these
- steps without affecting the canvas.</p>
+ steps without affecting any bitmaps.</p>
</li>
@@ -41163,17 +41631,16 @@
<dd>
- <p>Draw the region of the image data in the horizontal rectangle
- whose top left corner is at (<var title="">dirtyX</var>,<var title="">dirtyY</var>) and whose bottom right corner is at
- (<span title=""><var title="">dirtyX</var>+<var title="">dirtyWidth</var></span>,<span title=""><var title="">dirtyY</var>+<var title="">dirtyHeight</var></span>)
- onto the canvas, aligned such that the top left of the rectangle
- is at coordinate (<var title="">dx</var>,<var title="">dy</var>).</p>
+ <p>Draw the region of the image data in the horizontal rectangle whose top left corner is at
+ (<var title="">dirtyX</var>,<var title="">dirtyY</var>) and whose bottom right corner is at
+ (<span title=""><var title="">dirtyX</var>+<var title="">dirtyWidth</var></span>,<span title=""><var title="">dirtyY</var>+<var title="">dirtyHeight</var></span>) onto the rendering
+ context's <a href=#scratch-bitmap>scratch bitmap</a>, aligned such that the top left of the rectangle is at
+ coordinate (<var title="">dx</var>,<var title="">dy</var>).</p>
<p>If the <code title=dom-context-2d-imageSmoothingEnabled><a href=#dom-context-2d-imagesmoothingenabled>imageSmoothingEnabled</a></code>
- attribute is set to true, then the user agent should attempt to
- apply a smoothing algorithm to the image data if the canvas does
- not have exactly one device pixel per coordinate space unit in
- the canvas bitmap.</p>
+ attribute is set to true, then the user agent should attempt to apply a smoothing algorithm to
+ the image data if the <a href=#scratch-bitmap>scratch bitmap</a> does not have exactly one device pixel per
+ coordinate space unit.</p>
</dd>
@@ -41183,21 +41650,20 @@
<ol><li>
- <p>Let <var title="">dx<sub>device</sub></var> be the x-coordinate
- of the device pixel in the canvas bitmap corresponding to the <var title="">dx</var> coordinate in the canvas coordinate space.</p>
+ <p>Let <var title="">dx<sub>device</sub></var> be the x-coordinate of the device pixel in
+ the <a href=#scratch-bitmap>scratch bitmap</a> corresponding to the <var title="">dx</var> coordinate in
+ the <a href=#scratch-bitmap>scratch bitmap</a>'s coordinate space.</p>
- <p>Let <var title="">dy<sub>device</sub></var> be the y-coordinate
- of the device pixel in the canvas bitmap corresponding to the <var title="">dy</var> coordinate in the canvas coordinate space.</p>
+ <p>Let <var title="">dy<sub>device</sub></var> be the y-coordinate of the device pixel in
+ the <a href=#scratch-bitmap>scratch bitmap</a> corresponding to the <var title="">dy</var> coordinate in
+ the <a href=#scratch-bitmap>scratch bitmap</a>'s coordinate space.</p>
</li>
- <li><p>For all integer values of <var title="">x</var>
- and <var title="">y</var> where <span title=""><var title="">dirtyX</var> ≤ <var title="">x</var> < <span title=""><var title="">dirtyX</var>+<var title="">dirtyWidth</var></span></span>
- and <span title=""><var title="">dirtyY</var> ≤ <var title="">y</var> < <span title=""><var title="">dirtyY</var>+<var title="">dirtyHeight</var></span></span>, copy the four channels of
- the pixel with coordinate (<var title="">x</var>, <var title="">y</var>) in the <var title="">imagedata</var> data
- structure to the pixel with coordinate (<span title=""><var title="">dx<sub>device</sub></var>+<var title="">x</var></span>,
- <span title=""><var title="">dy<sub>device</sub></var>+<var title="">y</var></span>) in the canvas bitmap of the
- canvas.</li>
+ <li><p>For all integer values of <var title="">x</var> and <var title="">y</var> where <span title=""><var title="">dirtyX</var> ≤ <var title="">x</var> < <span title=""><var title="">dirtyX</var>+<var title="">dirtyWidth</var></span></span> and <span title=""><var title="">dirtyY</var> ≤ <var title="">y</var> < <span title=""><var title="">dirtyY</var>+<var title="">dirtyHeight</var></span></span>, copy the
+ four channels of the pixel with coordinate (<var title="">x</var>, <var title="">y</var>) in
+ the <var title="">imagedata</var> data structure to the pixel with coordinate (<span title=""><var title="">dx<sub>device</sub></var>+<var title="">x</var></span>, <span title=""><var title="">dy<sub>device</sub></var>+<var title="">y</var></span>) in the
+ rendering context's <a href=#scratch-bitmap>scratch bitmap</a>.</li>
</ol></dd>
@@ -41337,7 +41803,7 @@
- <h6 id=compositing><span class=secno>4.8.11.1.16 </span>Compositing</h6>
+ <h6 id=compositing><span class=secno>4.8.11.2.17 </span>Compositing</h6>
<dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-globalAlpha><a href=#dom-context-2d-globalalpha>globalAlpha</a></code> [ = <var title="">value</var> ]</dt>
@@ -41370,24 +41836,21 @@
<!-- conformance criteria for painting are described in the "drawing
model" section below -->
- <p>The <dfn id=dom-context-2d-globalalpha title=dom-context-2d-globalAlpha><code>globalAlpha</code></dfn>
- attribute gives an alpha value that is applied to shapes and images
- before they are composited onto the canvas. The value must be in the
- range from 0.0 (fully transparent) to 1.0 (no additional
- transparency). If an attempt is made to set the attribute to a value
- outside this range, including Infinity and Not-a-Number (NaN)
- values, the attribute must retain its previous value. When the
+ <p>The <dfn id=dom-context-2d-globalalpha title=dom-context-2d-globalAlpha><code>globalAlpha</code></dfn> attribute gives an
+ alpha value that is applied to shapes and images before they are composited onto the <a href=#scratch-bitmap>scratch
+ bitmap</a>. The value must be in the range from 0.0 (fully transparent) to 1.0 (no additional
+ transparency). If an attempt is made to set the attribute to a value outside this range, including
+ Infinity and Not-a-Number (NaN) values, the attribute must retain its previous value. When the
context is created, the <code title=dom-context-2d-globalAlpha><a href=#dom-context-2d-globalalpha>globalAlpha</a></code> attribute must
initially have the value 1.0.</p>
<p>The <dfn id=dom-context-2d-globalcompositeoperation title=dom-context-2d-globalCompositeOperation><code>globalCompositeOperation</code></dfn>
- attribute sets how shapes and images are drawn onto the existing
- bitmap, once they have had <code title=dom-context-2d-globalAlpha><a href=#dom-context-2d-globalalpha>globalAlpha</a></code> and the
- current transformation matrix applied. It must be set to a value
- from the following list. In the descriptions below, the source
- image, <var title="">A</var>, is the shape or image being rendered,
- and the destination image, <var title="">B</var>, is the current
- state of the bitmap.</p>
+ attribute sets how shapes and images are drawn onto the <a href=#scratch-bitmap>scratch bitmap</a>, once they
+ have had <code title=dom-context-2d-globalAlpha><a href=#dom-context-2d-globalalpha>globalAlpha</a></code> and the current
+ transformation matrix applied. It must be set to a value from the following list. In the
+ descriptions below, the source image, <var title="">A</var>, is the shape or image being rendered,
+ and the destination image, <var title="">B</var>, is the current state of the <a href=#scratch-bitmap>scratch
+ bitmap</a>.</p>
</div>
@@ -41498,7 +41961,7 @@
- <h6 id=image-smoothing><span class=secno>4.8.11.1.17 </span>Image smoothing</h6>
+ <h6 id=image-smoothing><span class=secno>4.8.11.2.18 </span>Image smoothing</h6>
<dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-imageSmoothingEnabled><a href=#dom-context-2d-imagesmoothingenabled>imageSmoothingEnabled</a></code> [ = <var title="">value</var> ]</dt>
@@ -41524,7 +41987,7 @@
</div>
- <h6 id=shadows><span class=secno>4.8.11.1.18 </span><dfn>Shadows</dfn></h6>
+ <h6 id=shadows><span class=secno>4.8.11.2.19 </span><dfn>Shadows</dfn></h6>
<p>All drawing operations are affected by the four global shadow
attributes.</p>
@@ -41665,7 +42128,7 @@
<div class=impl>
- <h6 id=drawing-model><span class=secno>4.8.11.1.19 </span><dfn>Drawing model</dfn></h6>
+ <h6 id=drawing-model><span class=secno>4.8.11.2.20 </span><dfn>Drawing model</dfn></h6>
<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>
@@ -41683,21 +42146,22 @@
<li><p><a href=#when-shadows-are-drawn>When shadows are drawn</a>, multiply the alpha
component of every pixel in <var title="">B</var> by <code title=dom-context-2d-globalAlpha><a href=#dom-context-2d-globalalpha>globalAlpha</a></code>.</li>
- <li><p><a href=#when-shadows-are-drawn>When shadows are drawn</a>, composite <var title="">B</var> within the <a href=#clipping-region>clipping region</a> over the
- current canvas bitmap using the current composition
- operator.</li>
+ <li><p><a href=#when-shadows-are-drawn>When shadows are drawn</a>, composite <var title="">B</var> within the
+ <a href=#clipping-region>clipping region</a> over the current <a href=#scratch-bitmap>scratch bitmap</a> using the current
+ composition operator.</li>
<li><p>Multiply the alpha component of every pixel in <var title="">A</var> by <code title=dom-context-2d-globalAlpha><a href=#dom-context-2d-globalalpha>globalAlpha</a></code>.</li>
- <li><p>Composite <var title="">A</var> within the <a href=#clipping-region>clipping
- region</a> over the current canvas bitmap using the current
- composition operator.</li>
+ <li><p>Composite <var title="">A</var> within the <a href=#clipping-region>clipping region</a> over the current
+ <a href=#scratch-bitmap>scratch bitmap</a> using the current composition operator.</li>
</ol></div>
- <h6 id=best-practices><span class=secno>4.8.11.1.20 </span>Best practices</h6>
+
+ <h6 id=best-practices><span class=secno>4.8.11.2.21 </span>Best practices</h6>
+
<p><i>This section is non-normative.</i></p>
<p>When a canvas is interactive, authors should include focusable
@@ -41758,7 +42222,7 @@
attribute.</p>
- <h6 id=examples><span class=secno>4.8.11.1.21 </span>Examples</h6>
+ <h6 id=examples><span class=secno>4.8.11.2.22 </span>Examples</h6>
<p><i>This section is non-normative.</i></p>
@@ -41811,16 +42275,54 @@
- </div><!--data-component-->
+ <h5 id=pixel-density><span class=secno>4.8.11.3 </span>Pixel density</h5>
+ <p>The user agent may use any square pixel density for the bitmaps of a <code><a href=#the-canvas-element>canvas</a></code> and
+ its rendering contexts. Once a <code><a href=#the-canvas-element>canvas</a></code> has a bitmap, that canvas must keep its
+ resolution for its lifetime.</p>
+
+ <p class=note>In general, user agents are encouraged to use a pixel density equal to the screen
+ pixel density. Ideally, the number of device pixels per CSS pixel would be a multiple of two.
+ Several factors can affect the screen pixel density: most prominently the actual display pixel
+ density, but also important is the current zoom level.</p>
+
+ <p>All the bitmaps created during a single <a href=#concept-task title=concept-task>task</a> for
+ <code><a href=#the-canvas-element>canvas</a></code> elements and <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> objects must have the same
+ pixel density.
+ <a class=fingerprint href=#fingerprint><img alt="(This is a fingerprinting vector.)" src=http://images.whatwg.org/fingerprint.png></a>
+ </p>
+
+ <pre class=idl>partial interface <a href=#screen>Screen</a> {
+ readonly attribute double <a href=#dom-screen-canvasresolution title=dom-screen-canvasResolution>canvasResolution</a>;
+};</pre>
+
+ <dl class=domintro><dt><var title="">window</var> . <code title=dom-Window-screen>screen</code> . <code title=dom-screen-canvasResolution><a href=#dom-screen-canvasresolution>canvasResolution</a></code></dt>
+
+ <dd>
+
+ <p>Returns the pixel density that has been, or will be, used for bitmaps during this <a href=#concept-task title=concept-task>task</a>.</p>
+
+ </dd>
+
+ </dl><div class=impl>
+
+ <p>The <dfn id=dom-screen-canvasresolution title=dom-screen-canvasResolution><code>canvasResolution</code></dfn> attribute of
+ the <code><a href=#screen>Screen</a></code> object must return the pixel density, in image pixels per coordinate space
+ units, that any <code><a href=#the-canvas-element>canvas</a></code> and <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> bitmaps created
+ during this <a href=#concept-task title=concept-task>task</a> will use (or have used). <a href=#refsCSSOMVIEW>[CSSOMVIEW]</a></p>
+
+ </div>
+
+
+
<div class=impl>
- <h5 id=color-spaces-and-color-correction><span class=secno>4.8.11.2 </span>Color spaces and color correction</h5>
+ <h5 id=color-spaces-and-color-correction><span class=secno>4.8.11.4 </span>Color spaces and color correction</h5>
<p>The <code><a href=#the-canvas-element>canvas</a></code> APIs must perform color correction at only two points: when rendering
- images with their own gamma correction and color space information onto the canvas, to convert the
- image to the color space used by the canvas (e.g. using the 2D Context's <code title=dom-context-2d-drawImage><a href=#dom-context-2d-drawimage>drawImage()</a></code> method with an <code><a href=#htmlimageelement>HTMLImageElement</a></code>
+ images with their own gamma correction and color space information onto a bitmap, to convert the
+ image to the color space used by the bitmaps (e.g. using the 2D Context's <code title=dom-context-2d-drawImage><a href=#dom-context-2d-drawimage>drawImage()</a></code> method with an <code><a href=#htmlimageelement>HTMLImageElement</a></code>
object), and when rendering the actual canvas bitmap to the output device.</p>
<p class=note>Thus, in the 2D context, colors used to draw shapes onto the canvas will exactly
@@ -41848,76 +42350,94 @@
</div>
-<!--ADD-TOPIC:Security-->
+
+ <h5 id=serializing-bitmaps-to-a-file><span class=secno>4.8.11.5 </span>Serializing bitmaps to a file</h5>
+
<div class=impl>
- <h5 id=security-with-canvas-elements><span class=secno>4.8.11.3 </span>Security with <code><a href=#the-canvas-element>canvas</a></code> elements</h5>
+ <p>When a user agent is to create <dfn id=a-serialization-of-the-bitmap-as-a-file>a serialization of the bitmap as a file</dfn>, optionally
+ with some given <var title="">arguments</var>, and optionally with a <var title="">native</var>
+ flag set, it must create an image file in the format given by the first value of <var title="">arguments</var>, or, if there are no <var title="">arguments</var>, in the PNG format. <a href=#refsPNG>[PNG]</a></p>
- <p><strong>Information leakage</strong> can occur if scripts from
- one <a href=#origin>origin</a> can access information (e.g. read pixels)
- from images from another origin (one that isn't the <a href=#same-origin title="same origin">same</a>).</p>
+ <p>If the <var title="">native</var> flag is set, or if the bitmap has one pixel per coordinate
+ space unit, then the image file must have the same pixel data (before compression, if applicable)
+ as the bitmap, and if the file format used supports encoding resolution metadata, the resolution
+ of that bitmap (device pixels per coordinate space units being interpreted as image pixels per CSS
+ pixel) must be given as well.</p>
- <p>To mitigate this, <code><a href=#the-canvas-element>canvas</a></code> elements are defined to
- have a flag indicating whether they are <i>origin-clean</i>. All
- <code><a href=#the-canvas-element>canvas</a></code> elements must start with their
- <i>origin-clean</i> set to true. The flag must be set to false if
- any of the following actions occur:</p>
+ <p>Otherwise, 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).</p>
- <ul><li><p>The element's 2D context's <code title=dom-context-2d-drawImage><a href=#dom-context-2d-drawimage>drawImage()</a></code> method is
- called with an <code><a href=#htmlimageelement>HTMLImageElement</a></code> or an
- <code><a href=#htmlvideoelement>HTMLVideoElement</a></code> whose <a href=#origin>origin</a> is not the
- <a href=#same-origin title="same origin">same</a> as that of the
- <code><a href=#document>Document</a></code> object that owns the <code><a href=#the-canvas-element>canvas</a></code>
- element.</li>
+ <p>If <var title="">arguments</var> is not empty, the first value must be interpreted as a <a href=#mime-type title="MIME type">MIME type</a> giving the format to use. If the type has any parameters, it
+ must be treated as not supported.</p>
- <li><p>The element's 2D context's <code title=dom-context-2d-drawImage><a href=#dom-context-2d-drawimage>drawImage()</a></code> method is
- called with an <code><a href=#htmlcanvaselement>HTMLCanvasElement</a></code> whose
- <i>origin-clean</i> flag is false.</li>
+ <p class=example>For example, the value "<code>image/png</code>" would mean to generate a PNG
+ image, the value "<code>image/jpeg</code>" would mean to generate a JPEG image, and the value
+ "<code>image/svg+xml</code>" 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).</p>
- <li><p>The element's 2D context's <code title=dom-context-2d-fillStyle><a href=#dom-context-2d-fillstyle>fillStyle</a></code> attribute is set
- to a <code><a href=#canvaspattern>CanvasPattern</a></code> object that was created from an
- <code><a href=#htmlimageelement>HTMLImageElement</a></code> or an <code><a href=#htmlvideoelement>HTMLVideoElement</a></code>
- whose <a href=#origin>origin</a> was not the <a href=#same-origin title="same
- origin">same</a> as that of the <code><a href=#document>Document</a></code> object
- that owns the <code><a href=#the-canvas-element>canvas</a></code> element when the pattern was
- created.</li>
+ <p>User agents must support PNG ("<code>image/png</code>"). User agents may support other types.
+ If the user agent does not support the requested type, it must create the file using the PNG
+ format. <a href=#refsPNG>[PNG]</a></p>
- <li><p>The element's 2D context's <code title=dom-context-2d-fillStyle><a href=#dom-context-2d-fillstyle>fillStyle</a></code> attribute is set
- to a <code><a href=#canvaspattern>CanvasPattern</a></code> object that was created from an
- <code><a href=#htmlcanvaselement>HTMLCanvasElement</a></code> whose <i>origin-clean</i> flag was
- false when the pattern was created.</li>
+ <p>User agents must <a href=#converted-to-ascii-lowercase title="converted to ASCII lowercase">convert the provided type to ASCII
+ lowercase</a> before establishing if they support that type.</p>
- <li><p>The element's 2D context's <code title=dom-context-2d-strokeStyle><a href=#dom-context-2d-strokestyle>strokeStyle</a></code> attribute is
- set to a <code><a href=#canvaspattern>CanvasPattern</a></code> object that was created from an
- <code><a href=#htmlimageelement>HTMLImageElement</a></code> or an <code><a href=#htmlvideoelement>HTMLVideoElement</a></code>
- whose <a href=#origin>origin</a> was not the <a href=#same-origin title="same
- origin">same</a> as that of the <code><a href=#document>Document</a></code> object
- that owns the <code><a href=#the-canvas-element>canvas</a></code> element when the pattern was
- created.</li>
+ <p>For image types that do not support an alpha channel, the serialized image must be the bitmap
+ image composited onto a solid black background using the source-over operator.</p>
- <li><p>The element's 2D context's <code title=dom-context-2d-strokeStyle><a href=#dom-context-2d-strokestyle>strokeStyle</a></code> attribute is
- set to a <code><a href=#canvaspattern>CanvasPattern</a></code> object that was created from an
- <code><a href=#htmlcanvaselement>HTMLCanvasElement</a></code> whose <i>origin-clean</i> flag was
- false when the pattern was created.</li>
+ <p>If the first argument in <var title="">arguments</var> gives a type corresponding to one of the
+ types given in the first column of the following table, and the user agent supports that type,
+ then the subsequent arguments, if any, must be treated as described in the second cell of that
+ row.</p>
- <li><p>The element's 2D context's <code title=dom-context-2d-fillText><a href=#dom-context-2d-filltext>fillText()</a></code> or <code title=dom-context-2d-fillText><a href=#dom-context-2d-filltext>strokeText()</a></code> methods are
- invoked and consider using a font that has an <a href=#origin>origin</a>
- that is not the <a href=#same-origin title="same origin">same</a> as that of
- the <code><a href=#document>Document</a></code> object that owns the <code><a href=#the-canvas-element>canvas</a></code>
- element. (The font doesn't even have to be used; all that matters
- is whether the font was considered for any of the glyphs
- drawn.)</li> <!-- because fonts could consider sensitive
- material, I guess; and because that sensitivity could extend to
- whether or not a particular glyph is in the font in the first
- place. -->
+ </div>
- </ul><p>The <code title=dom-canvas-toDataURL><a href=#dom-canvas-todataurl>toDataURL()</a></code>, <code title=dom-canvas-toDataURLHD><a href=#dom-canvas-todataurlhd>toDataURLHD()</a></code>, <code title=dom-canvas-toBlob><a href=#dom-canvas-toblob>toBlob()</a></code>, <code title=dom-context-2d-getImageData><a href=#dom-context-2d-getimagedata>getImageData()</a></code>, and <code title=dom-context-2d-getImageDataHD><a href=#dom-context-2d-getimagedatahd>getImageDataHD()</a></code>
+ <table id=canvas-serialization-arguments><caption>Arguments for serialization methods</caption>
+ <thead><tr><th> Type <th> Other arguments <th> Reference
+ <tbody><tr><td> <code>image/jpeg</code>
+ <td> The second argument<span class=impl>, if it</span> is a number in the range 0.0 to 1.0
+ inclusive<span class=impl>, must be</span> treated as the desired quality level. <span class=impl>If it is not a number or is outside that range, the user agent must use its
+ default value, as if the argument had been omitted.</span>
+ <td> <a href=#refsJPEG>[JPEG]</a>
+ </table><div class=impl>
+
+ <p>For the purposes of these rules, an argument is considered to be a number if it is converted to
+ an IDL double value by the rules for handling arguments of type <code title="">any</code> in the
+ Web IDL specification. <a href=#refsWEBIDL>[WEBIDL]</a></p>
+
+ <p>Other arguments must be ignored and must not cause the user agent to throw an exception. A
+ future version of this specification will probably define other parameters to be passed to these
+ methods to allow authors to more carefully control compression settings, image metadata, etc.</p>
+
+ </div>
+
+
+<!--ADD-TOPIC:Security-->
+ <div class=impl>
+
+ <h5 id=security-with-canvas-elements><span class=secno>4.8.11.6 </span>Security with <code><a href=#the-canvas-element>canvas</a></code> elements</h5>
+
+ <p><i>This section is non-normative.</i></p>
+
+ <p><strong>Information leakage</strong> can occur if scripts from
+ one <a href=#origin>origin</a> can access information (e.g. read pixels)
+ from images from another origin (one that isn't the <a href=#same-origin title="same origin">same</a>).</p>
+
+ <p>To mitigate this, bitmaps used with <code><a href=#the-canvas-element>canvas</a></code> elements are defined to have a flag
+ indicating whether they are <a href=#concept-canvas-origin-clean title=concept-canvas-origin-clean>origin-clean</a>. All
+ bitmaps start with their <a href=#concept-canvas-origin-clean title=concept-canvas-origin-clean>origin-clean</a> set to
+ true. The flag is set to false when cross-origin images or fonts are used.</p>
+
+ <p>The <code title=dom-canvas-toDataURL><a href=#dom-canvas-todataurl>toDataURL()</a></code>, <code title=dom-canvas-toDataURLHD><a href=#dom-canvas-todataurlhd>toDataURLHD()</a></code>, <code title=dom-canvas-toBlob><a href=#dom-canvas-toblob>toBlob()</a></code>, <code title=dom-context-2d-getImageData><a href=#dom-context-2d-getimagedata>getImageData()</a></code>, and <code title=dom-context-2d-getImageDataHD><a href=#dom-context-2d-getimagedatahd>getImageDataHD()</a></code>
methods check the flag and will throw a <code><a href=#securityerror>SecurityError</a></code>
exception rather than leak cross-origin data.</p>
- <p class=note>Even resetting the canvas state by changing its
- <code title=attr-canvas-width><a href=#attr-canvas-width>width</a></code> or <code title=attr-canvas-height><a href=#attr-canvas-height>height</a></code> attributes doesn't reset
- the <i>origin-clean</i> flag.</p>
+ <p>The flag can be reset in certain situations; for example, when a
+ <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> is bound to a new <code><a href=#the-canvas-element>canvas</a></code>, the bitmap is cleared
+ and its flag reset.</p>
</div>
<!--REMOVE-TOPIC:Security-->
@@ -67586,8 +68106,7 @@
<td>none
<td>none
- </table><p><small>† This case is only possible if the <code title=attr-iframe-sandbox><a href=#attr-iframe-sandbox>sandbox</a></code> attribute also allows
- scripts.</small></p>
+ </table><p class=tablenote><small>† This case is only possible if the <code title=attr-iframe-sandbox><a href=#attr-iframe-sandbox>sandbox</a></code> attribute also allows scripts.</small></p>
<div class=impl>
@@ -74877,18 +75396,16 @@
<p>An <a href=#event-loop>event loop</a> must continually run through the
following steps for as long as it exists:</p>
- <ol><li><p>Run the oldest <a href=#concept-task title=concept-task>task</a> on one
- of the <a href=#event-loop>event loop</a>'s <a href=#task-queue title="task queue">task
- queues</a>, ignoring tasks whose associated
- <code><a href=#document>Document</a></code>s are not <a href=#fully-active>fully active</a>. The user
- agent may pick any <a href=#task-queue>task queue</a>.</li>
+ <ol><li><p>Run the oldest <a href=#concept-task title=concept-task>task</a> on one of the <a href=#event-loop>event
+ loop</a>'s <a href=#task-queue title="task queue">task queues</a>, if any, ignoring tasks whose
+ associated <code><a href=#document>Document</a></code>s are not <a href=#fully-active>fully active</a>. The user agent may pick any
+ <a href=#task-queue>task queue</a>.</li>
- <!-- warning! if you renumber these steps, make sure to update the
- "spin the event loop" algorithm below! -->
+ <!-- warning! if you renumber these steps, make sure to update the "spin the event loop"
+ algorithm below! -->
- <li><p>If the <a href=#storage-mutex>storage mutex</a> is now owned by the
- <a href=#event-loop>event loop</a>, release it so that it is once again
- free.</li>
+ <li><p>If the <a href=#storage-mutex>storage mutex</a> is now owned by the <a href=#event-loop>event loop</a>, release it
+ so that it is once again free.</li>
<li><p>Remove that task from its <a href=#task-queue>task queue</a>.</li>
@@ -74927,17 +75444,16 @@
<li><p>Let the <a href=#running-mutation-observers>running mutation observers</a> flag be
false.</li>
- </ol><hr><p>When the user agent is to <dfn id=provide-a-stable-state>provide a stable state</dfn>, if
- any asynchronously-running algorithms are <dfn id=await-a-stable-state title="await a stable
- state">awaiting a stable state</dfn>, then the user agent must run
- their <dfn id=synchronous-section>synchronous section</dfn> and then resume running their
- asynchronous algorithm (if appropriate).</p>
+ </ol><hr><p>When the user agent is to <dfn id=provide-a-stable-state>provide a stable state</dfn>, if any asynchronously-running
+ algorithms are <dfn id=await-a-stable-state title="await a stable state">awaiting a stable state</dfn>, then the user
+ agent must run their <dfn id=synchronous-section>synchronous section</dfn> and then resume running their asynchronous
+ algorithm (if appropriate).</p>
- <p class=note>A <a href=#synchronous-section>synchronous section</a> never mutates
- the DOM, runs any script, or has any other side-effects.</p>
+ <p class=note>A <a href=#synchronous-section>synchronous section</a> never mutates the DOM, runs any script, or has
+ any side-effects detectable from another <a href=#synchronous-section>synchronous section</a>, and thus <a href=#synchronous-section title="synchronous section">synchronous sections</a> can be run in any order.</p>
- <p class=note>Steps in <a href=#synchronous-section title="synchronous
- section">synchronous sections</a> are marked with ⌛.</p>
+ <p class=note>Steps in <a href=#synchronous-section title="synchronous section">synchronous sections</a> are marked
+ with ⌛.</p>
<hr><p>When an algorithm says to <dfn id=spin-the-event-loop>spin the event loop</dfn> until
a condition <var title="">goal</var> is met, the user agent must run
@@ -77432,7 +77948,7 @@
<!--ADD-TOPIC:Security-->
<div class=impl>
- <h5 id=security-and-privacy><span class=secno>7.5.1.3 </span>Security and privacy</h5>
+ <h6 id=security-and-privacy><span class=secno>7.5.1.2.1 </span>Security and privacy</h6>
<p>These mechanisms can introduce a number of concerns, in
particular privacy concerns.</p>
@@ -77517,7 +78033,7 @@
<div class=impl>
- <h5 id=sample-handler-impl><span class=secno>7.5.1.4 </span>Sample user interface</h5>
+ <h6 id=sample-handler-impl><span class=secno>7.5.1.2.2 </span>Sample user interface</h6>
<p><i>This section is non-normative.</i></p>
@@ -77563,7 +78079,7 @@
- <h5 id=manually-releasing-the-storage-mutex><span class=secno>7.5.1.5 </span>Manually releasing the storage mutex</h5>
+ <h5 id=manually-releasing-the-storage-mutex><span class=secno>7.5.1.3 </span>Manually releasing the storage mutex</h5>
<pre class=idl>[NoInterfaceObject]
interface <dfn id=navigatorstorageutils>NavigatorStorageUtils</dfn> {
@@ -77735,10 +78251,242 @@
<li><p>Return 1.</li>
</ol></div>
-<!--TOPIC:HTML-->
+<!--TOPIC:Canvas-->
+ <h3 id=images><span class=secno>7.6 </span>Images</h3>
+
+ <pre class=idl>interface <dfn id=imagebitmap>ImageBitmap</dfn> {
+ // opaque object
+};
+
+callback <dfn id=imagebitmapcallback>ImageBitmapCallback</dfn> = void (<a href=#imagebitmap>ImageBitmap</a> image);
+
+[NoInterfaceObject]
+interface <dfn id=imagebitmapfactories>ImageBitmapFactories</dfn> {
+ void <a href=#dom-createimagebitmap title=dom-createImageBitmap>createImageBitmap</a>(<a href=#htmlimageelement>HTMLImageElement</a> image, <a href=#imagebitmapcallback>ImageBitmapCallback</a> _callback);
+ void <a href=#dom-createimagebitmap title=dom-createImageBitmap>createImageBitmap</a>(<a href=#htmlvideoelement>HTMLVideoElement</a> image, <a href=#imagebitmapcallback>ImageBitmapCallback</a> _callback);
+ void <a href=#dom-createimagebitmap title=dom-createImageBitmap>createImageBitmap</a>(<a href=#htmlcanvaselement>HTMLCanvasElement</a> image, <a href=#imagebitmapcallback>ImageBitmapCallback</a> _callback);
+ void <a href=#dom-createimagebitmap title=dom-createImageBitmap>createImageBitmap</a>(<a href=#blob>Blob</a> image, <a href=#imagebitmapcallback>ImageBitmapCallback</a> _callback);
+ void <a href=#dom-createimagebitmap title=dom-createImageBitmap>createImageBitmap</a>(<a href=#imagedata>ImageData</a> image, <a href=#imagebitmapcallback>ImageBitmapCallback</a> _callback);
+ void <a href=#dom-createimagebitmap title=dom-createImageBitmap>createImageBitmap</a>(<a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a> image, <a href=#imagebitmapcallback>ImageBitmapCallback</a> _callback);
+};
+<a href=#window>Window</a> implements <a href=#imagebitmapfactories>ImageBitmapFactories</a>;
+<a href=#workerutils>WorkerUtils</a> implements <a href=#imagebitmapfactories>ImageBitmapFactories</a>;</pre>
+
+ <p>An <code><a href=#imagebitmap>ImageBitmap</a></code> object represents a bitmap image that can be painted to a canvas
+ without undue latency.</p>
+
+ <p class=note>The exact judgement of what is undue latency of this is left up to the
+ implementer, but in general if making use of the bitmap requires network I/O, or even local disk
+ I/O, then the latency is probably undue; whereas if it only requires a blocking read from a GPU or
+ system RAM, the latency is probably acceptable.</p>
+
+ <dl class=domintro><dt><var title="">Window</var> . <code title=dom-createImageBitmap><a href=#dom-createimagebitmap>createImageBitmap</a></code>(<var title="">image</var>, <var title="">callback</var>)</dt>
+
+ <dd>
+
+ <p>Takes <var title="">image</var>, which can be an <code><a href=#the-img-element>img</a></code> element,
+ <code><a href=#the-video-element>video</a></code>, or <code><a href=#the-canvas-element>canvas</a></code> element, a <code><a href=#blob>Blob</a></code> object, an
+ <code><a href=#imagedata>ImageData</a></code> object, or a <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> object, and
+ asynchronously calls <var title="">callback</var> with a new <code><a href=#imagebitmap>ImageBitmap</a></code> as its
+ argument when it has created one.</p>
+
+ <p>If no <code><a href=#imagebitmap>ImageBitmap</a></code> object can be constructed, for example because the provided
+ <var title="">image</var> data is not actually an image, then the <var title="">callback</var>
+ is invoked with null as the value instead.</p>
+
+ <p>Throws an <code><a href=#invalidstateerror>InvalidStateError</a></code> exception if the source image is not in a valid
+ state (e.g. an <code><a href=#the-img-element>img</a></code> element that hasn't finished loading, or a
+ <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> object whose bitmap data has zero length along one or both
+ dimensions). Throws a <code><a href=#securityerror>SecurityError</a></code> exception if the script is not allowed to
+ access the image data of the source image (e.g. a <code><a href=#the-video-element>video</a></code> that is
+ <a href=#cors-cross-origin>CORS-cross-origin</a>, or a <code><a href=#the-canvas-element>canvas</a></code> being drawn on by a script in a worker
+ from another <a href=#origin>origin</a>).</p>
+
+ </dd>
+
+ </dl><div class=impl>
+
+ <p>An <code><a href=#imagebitmap>ImageBitmap</a></code> object always has associated bitmap data, with a width and a
+ height. However, it is possible for this data to be corrupted. If an <code><a href=#imagebitmap>ImageBitmap</a></code>
+ object's media data can be decoded without errors, it is said to be <dfn id=concept-imagebitmap-good title=concept-ImageBitmap-good>fully decodable</dfn>.</p>
+
+ <p>An <code><a href=#imagebitmap>ImageBitmap</a></code> object can be obtained from a variety of different objects, using
+ the <dfn id=dom-createimagebitmap title=dom-createImageBitmap><code>createImageBitmap()</code></dfn> method. This method
+ takes two arguments, <var title="">image</var> and <var title="">callback</var>. When invoked, the
+ method must act as follows:</p>
+ <!-- the canvas createPattern() and drawImage() methods have similar requirements -->
+
+ <dl><dt>If <var title="">image</var> is an <code><a href=#the-img-element>img</a></code> element
+
+ <dd>
+
+ <ol><li><p>If the <code><a href=#the-img-element>img</a></code> element is not <a href=#img-all title=img-all>completely
+ available</a>, then throw an <code><a href=#invalidstateerror>InvalidStateError</a></code> exception and abort these
+ steps.</li>
+
+<!--ADD-TOPIC:Security-->
+ <li><p>If the <a href=#origin>origin</a> of the <code><a href=#the-img-element>img</a></code> element's image is not the <a href=#same-origin>same
+ origin</a> as the <a href=#entry-script>entry script</a>'s <a href=#origin>origin</a>, then throw a
+ <code><a href=#securityerror>SecurityError</a></code> exception and abort these steps.</li>
+<!--REMOVE-TOPIC:Security-->
+
+ <li><p>If the <code><a href=#the-img-element>img</a></code> element's media data is not a bitmap (e.g. it's a vector
+ graphic), then throw an <code><a href=#invalidstateerror>InvalidStateError</a></code> exception and abort these
+ steps.</li>
+
+ <li><p>Create a new <code><a href=#imagebitmap>ImageBitmap</a></code> object.</li>
+
+ <li><p>Let the <code><a href=#imagebitmap>ImageBitmap</a></code> object's bitmap data be a copy of the <code><a href=#the-img-element>img</a></code>
+ element's media data. If this is an animated image, the <code><a href=#imagebitmap>ImageBitmap</a></code> object's
+ bitmap data must only consist of the animation's poster frame, or, if there is no poster frame,
+ the first frame of the animation.</li>
+
+ <li><p>Return, but continue running these steps asynchronously.</li>
+
+ <li><p><a href=#queue-a-task>Queue a task</a> to invoke <var title="">callback</var> with the new
+ <code><a href=#imagebitmap>ImageBitmap</a></code> object as its argument.</li>
+
+ </ol></dd>
+
+ <dt>If <var title="">image</var> is a <code><a href=#the-video-element>video</a></code> element
+
+ <dd>
+
+ <ol><li><p>If the <code><a href=#the-video-element>video</a></code> element's <code title=dom-media-networkState><a href=#dom-media-networkstate>networkState</a></code> attribute is <code title=dom-media-NETWORK_EMPTY><a href=#dom-media-network_empty>NETWORK_EMPTY</a></code>, then throw an
+ <code><a href=#invalidstateerror>InvalidStateError</a></code> exception and abort these steps.</li>
+
+<!--ADD-TOPIC:Security-->
+ <li><p>If the <a href=#origin>origin</a> of the <code><a href=#the-video-element>video</a></code> element is not the <a href=#same-origin>same
+ origin</a> as the <a href=#entry-script>entry script</a>'s <a href=#origin>origin</a>, then throw a
+ <code><a href=#securityerror>SecurityError</a></code> exception and abort these steps.</li>
+<!--REMOVE-TOPIC:Security-->
+
+ <li><p>If the <code><a href=#the-video-element>video</a></code> element's <code title=dom-media-readyState><a href=#dom-media-readystate>readyState</a></code>
+ attribute is either <code title=dom-media-HAVE_NOTHING><a href=#dom-media-have_nothing>HAVE_NOTHING</a></code> or <code title=dom-media-HAVE_METADATA><a href=#dom-media-have_metadata>HAVE_METADATA</a></code>, then throw an
+ <code><a href=#invalidstateerror>InvalidStateError</a></code> exception and abort these steps.</li>
+
+ <li><p>Create a new <code><a href=#imagebitmap>ImageBitmap</a></code> object.</li>
+
+ <li><p>Let the <code><a href=#imagebitmap>ImageBitmap</a></code> object's bitmap data be a copy of the frame at the
+ <a href=#current-playback-position>current playback position</a>, at the <a href=#media-resource>media resource</a>'s <a href=#concept-video-intrinsic-width title=concept-video-intrinsic-width>intrinsic width</a> and <a href=#concept-video-intrinsic-height title=concept-video-intrinsic-height>intrinsic height</a> (i.e. after any aspect-ratio
+ correction has been applied).</p>
+
+ <li><p>Return, but continue running these steps asynchronously.</li>
+
+ <li><p><a href=#queue-a-task>Queue a task</a> to invoke <var title="">callback</var> with the new
+ <code><a href=#imagebitmap>ImageBitmap</a></code> object as its argument.</li>
+
+ </ol></dd>
+
+ <dt>If <var title="">image</var> is a <code><a href=#the-canvas-element>canvas</a></code> element
+
+ <dd>
+
+ <ol><!--ADD-TOPIC:Security--><li><p>If the <code><a href=#the-canvas-element>canvas</a></code> element's bitmap data does not have its <a href=#concept-canvas-origin-clean title=concept-canvas-origin-clean>origin-clean</a> flag set, then throw an
+ <code><a href=#invalidstateerror>InvalidStateError</a></code> exception and abort these steps.</li>
+<!--REMOVE-TOPIC:Security-->
+
+ <li><p>If the <code><a href=#the-canvas-element>canvas</a></code> element's bitmap has either a horizontal dimension or a
+ vertical dimension equal to zero, then throw an <code><a href=#invalidstateerror>InvalidStateError</a></code> exception and
+ abort these steps.</li>
+
+ <li><p>Create a new <code><a href=#imagebitmap>ImageBitmap</a></code> object.</li>
+
+ <li><p>Let the <code><a href=#imagebitmap>ImageBitmap</a></code> object's bitmap data be a copy of the
+ <code><a href=#the-canvas-element>canvas</a></code> element's bitmap data.</li>
+
+ <li><p>Return, but continue running these steps asynchronously.</li>
+
+ <li><p><a href=#queue-a-task>Queue a task</a> to invoke <var title="">callback</var> with the new
+ <code><a href=#imagebitmap>ImageBitmap</a></code> object as its argument.</li>
+
+ </ol></dd>
+
+
+ <dt>If <var title="">image</var> is a <code><a href=#blob>Blob</a></code> object
+
+ <dd>
+
+ <ol><li><p>If the <code><a href=#blob>Blob</a></code> object has been neutered through the <code title=dom-Blob-close>close</code> method, then throw an <code><a href=#invalidstateerror>InvalidStateError</a></code>
+ exception and abort these steps.</li>
+
+ <li><p>Return, but continue running these steps asynchronously.</li>
+
+ <li><p>Read the <code><a href=#blob>Blob</a></code> object's data. If an <a href=#file-error-read title=file-error-read>error
+ occurs during reading of the object</a>, then <a href=#queue-a-task>queue a task</a> to invoke <var title="">callback</var> with null as the argument, and abort these steps.</li>
+
+ <li><p>Apply the <a href=#content-type-sniffing:-image title="Content-Type sniffing: image">image sniffing rules</a> to
+ determine the file format of the image data, with MIME type of the <code><a href=#blob>Blob</a></code> (as given
+ by the <code><a href=#blob>Blob</a></code> object's <code title=dom-Blob-type>type</code> attribute) giving the
+ official type.</li>
+
+ <li><p>If the image data is not in a supported file format (e.g. it's not actually an image at
+ all), or if the image data is corrupted in some fatal way such that the image dimensions cannot
+ be obtained, <a href=#queue-a-task>queue a task</a> to invoke <var title="">callback</var> with null as the
+ argument, and abort these steps.</li>
+
+ <li><p>Create a new <code><a href=#imagebitmap>ImageBitmap</a></code> object.</li>
+
+ <li><p>Let the <code><a href=#imagebitmap>ImageBitmap</a></code> object's bitmap data be the image data read from the
+ <code><a href=#blob>Blob</a></code> object. If this is an animated image, the <code><a href=#imagebitmap>ImageBitmap</a></code> object's
+ bitmap data must only consist of the animation's poster frame, or, if there is no poster frame,
+ the first frame of the animation.</li>
+
+ <li><p><a href=#queue-a-task>Queue a task</a> to invoke <var title="">callback</var> with the new
+ <code><a href=#imagebitmap>ImageBitmap</a></code> object as its argument.</li>
+
+ </ol></dd>
+
+
+ <dt>If <var title="">image</var> is an <code><a href=#imagedata>ImageData</a></code> object
+
+ <dd>
+
+ <ol><li><p>Create a new <code><a href=#imagebitmap>ImageBitmap</a></code> object.</li>
+
+ <li><p>Let the <code><a href=#imagebitmap>ImageBitmap</a></code> object's bitmap data be the image data given by the
+ <code><a href=#imagedata>ImageData</a></code> object.</li>
+
+ <li><p>Return, but continue running these steps asynchronously.</li>
+
+ <li><p><a href=#queue-a-task>Queue a task</a> to invoke <var title="">callback</var> with the new
+ <code><a href=#imagebitmap>ImageBitmap</a></code> object as its argument.</li>
+
+ </ol></dd>
+
+ <dt>If <var title="">image</var> is a <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> object
+
+ <dd>
+
+ <ol><!--ADD-TOPIC:Security--><li><p>If the <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> object's <a href=#scratch-bitmap>scratch bitmap</a> does
+ not have its <a href=#concept-canvas-origin-clean title=concept-canvas-origin-clean>origin-clean</a> flag set, then throw
+ an <code><a href=#invalidstateerror>InvalidStateError</a></code> exception and abort these steps.</li>
+<!--REMOVE-TOPIC:Security-->
+
+ <li><p>If the <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> object's <a href=#scratch-bitmap>scratch bitmap</a> has
+ either a horizontal dimension or a vertical dimension equal to zero, then throw an
+ <code><a href=#invalidstateerror>InvalidStateError</a></code> exception and abort these steps.</li>
+
+ <li><p>Create a new <code><a href=#imagebitmap>ImageBitmap</a></code> object.</li>
+
+ <li><p>Let the <code><a href=#imagebitmap>ImageBitmap</a></code> object's bitmap data be a copy of the
+ <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> object's <a href=#scratch-bitmap>scratch bitmap</a>.</li>
+
+ <li><p>Return, but continue running these steps asynchronously.</li>
+
+ <li><p><a href=#queue-a-task>Queue a task</a> to invoke <var title="">callback</var> with the new
+ <code><a href=#imagebitmap>ImageBitmap</a></code> object as its argument.</li>
+
+ </ol></dd>
+
+ </dl></div>
+
+
+<!--TOPIC:HTML-->
+
<h2 id=editing><span class=secno>8 </span><dfn>User interaction</dfn></h2>
@@ -83583,9 +84331,9 @@
<a href=#workerutils>WorkerUtils</a> implements <a href=#windowbase64>WindowBase64</a>;</pre>
- <p>The DOM APIs (<code><a href=#node>Node</a></code> objects, <code><a href=#document>Document</a></code>
- objects, etc) are not available to workers in this version of this
- specification.</p>
+ <p>The DOM APIs — specifically, all the interfaces defind in the DOM Core specification
+ other than exceptions — must not be <a href=#expose title=expose>exposed</a> if the
+ <a href=#javascript-global-environment>JavaScript global environment</a> is a <a href=#worker-environment>worker environment</a>. <a href=#hrefDOMCORE>[DOMCORE]</a></p>
<h4 id=importing-scripts-and-libraries><span class=secno>9.3.1 </span>Importing scripts and libraries</h4>
@@ -97538,8 +98286,8 @@
<tr><td>7
<td>x<!---->xx-large
<td><i>see below</i>
- </table><p>The 'x<!---->xx-large' value is a non-CSS value used here to
- indicate a font size 50% larger than 'xx-large'.</p>
+ </table><p class=tablenote><small>The 'x<!---->xx-large' value is a non-CSS value used here to
+ indicate a font size 50% larger than 'xx-large'.</small></p>
</li>
@@ -98364,10 +99112,11 @@
<code><a href=#the-video-element>video</a></code> elements are expected to be treated as replaced
elements.</p>
- <p>A <code><a href=#the-canvas-element>canvas</a></code> element that <a href=#represents>represents</a>
- <a href=#embedded-content>embedded content</a> is expected to be treated as a
- replaced element. Other <code><a href=#the-canvas-element>canvas</a></code> elements are expected to
- be treated as ordinary elements in the rendering model.</p>
+ <p>A <code><a href=#the-canvas-element>canvas</a></code> element that <a href=#represents>represents</a> <a href=#embedded-content>embedded content</a> is
+ expected to be treated as a replaced element; the contents of such elements are the element's
+ bitmap, if any, or else a transparent black bitmap with the same intrinsic dimensions as the
+ element. Other <code><a href=#the-canvas-element>canvas</a></code> elements are expected to be treated as ordinary elements in the
+ rendering model.</p>
<p>An <code><a href=#the-object-element>object</a></code> element that <a href=#represents>represents</a> an
image, plugin, or <a href=#nested-browsing-context>nested browsing context</a> is expected
@@ -98436,7 +99185,7 @@
<!--TOPIC:Rendering-->
<div class=impl>
- <h4 id=images><span class=secno>14.4.2 </span>Images</h4>
+ <h4 id=images-0><span class=secno>14.4.2 </span>Images</h4>
<p>When an <code><a href=#the-img-element>img</a></code> element or an <code><a href=#the-input-element>input</a></code> element
when its <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in
@@ -103187,7 +103936,8 @@
<td>empty</td>
<td><a href=#global-attributes title="global attributes">globals</a></td>
<td><code><a href=#htmlelement>HTMLElement</a></code></td>
- </table><p>An asterisk (*) in a cell indicates that the actual rules are more complicated than indicated in the table above.</p>
+ </table><p class=tablenote><small>An asterisk (*) in a cell indicates that the actual rules are more
+ complicated than indicated in the table above.</small></p>
<p>† Categories in the "Parents" column refer to parents that
list the given categories in their content model, not to elements
@@ -104342,7 +105092,8 @@
<td> How the value of the form control is to be wrapped for <a href=#form-submission>form submission</a>
<td> "<code title=attr-textarea-wrap-soft><a href=#attr-textarea-wrap-soft>soft</a></code>";
"<code title=attr-textarea-wrap-hard><a href=#attr-textarea-wrap-hard>hard</a></code>"
- </table><p>An asterisk (*) in a cell indicates that the actual rules are more complicated than indicated in the table above.</p>
+ </table><p class=tablenote><small>An asterisk (*) in a cell indicates that the actual rules are more
+ complicated than indicated in the table above.</small></p>
<hr><table id=ix-event-handlers><caption>List of event handler content attributes</caption>
<thead><tr><th> Attribute
@@ -105093,6 +105844,7 @@
<li><code><a href=#canvasgradient>CanvasGradient</a></code>
<li><code><a href=#canvaspathmethods>CanvasPathMethods</a></code>
<li><code><a href=#canvaspattern>CanvasPattern</a></code>
+ <li><code><a href=#canvasproxy>CanvasProxy</a></code>
<li><code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code>
<li><code><a href=#closeevent>CloseEvent</a></code>
<li><code><a href=#domelementmap>DOMElementMap</a></code>
@@ -105188,6 +105940,8 @@
<li><code><a href=#htmlvideoelement>HTMLVideoElement</a></code>
<li><code><a href=#hashchangeevent>HashChangeEvent</a></code>
<li><code><a href=#history-0>History</a></code>
+ <li><code><a href=#imagebitmap>ImageBitmap</a></code>
+ <li><code><a href=#imagebitmapfactories>ImageBitmapFactories</a></code>
<li><code><a href=#imagedata>ImageData</a></code>
<li><code><a href=#location>Location</a></code>
<li><code><a href=#mediacontroller>MediaController</a></code>
@@ -105327,7 +106081,7 @@
<dd><cite><a href=http://dev.w3.org/csswg/css3-color/>CSS Color Module Level 3</a></cite>, T. Çelik, C. Lilley, L. Baron. W3C.</dd>
<dt id=refsCSSFONTS>[CSSFONTS]</dt>
- <dd><cite><a href=http://www.w3.org/TR/css3-fonts/>CSS Fonts Module Level 3</a></cite>, J. Daggett. W3C.</dd>
+ <dd><cite><a href=http://dev.w3.org/csswg/css3-fonts/>CSS Fonts Module Level 3</a></cite>, J. Daggett. W3C.</dd>
<dt id=refsCSSIMAGES>[CSSIMAGES]</dt>
<dd><cite><a href=http://dev.w3.org/csswg/css4-images/>CSS Image Values and Replaced Content Module</a></cite>, E. Etemad, T. Atkins. W3C.</dd>
Modified: index
===================================================================
--- index 2012-11-06 01:54:26 UTC (rev 7508)
+++ index 2012-11-16 20:26:07 UTC (rev 7509)
@@ -248,7 +248,7 @@
<header class=head id=head><p><a class=logo href=http://www.whatwg.org/><img alt=WHATWG height=101 src=/images/logo width=101></a></p>
<hgroup><h1 class=allcaps>HTML</h1>
- <h2 class="no-num no-toc">Living Standard — Last Updated 6 November 2012</h2>
+ <h2 class="no-num no-toc">Living Standard — Last Updated 16 November 2012</h2>
</hgroup><dl><dt><strong>Web developer edition:</strong></dt>
<dd><strong><a href=http://developers.whatwg.org/>http://developers.whatwg.org/</a></strong></dd>
<dt>Multiple-page version:</dt>
@@ -609,31 +609,35 @@
<li><a href=#best-practices-for-implementors-of-media-elements><span class=secno>4.8.10.19 </span>Best practices for implementors of media elements</a></ol></li>
<li><a href=#the-canvas-element><span class=secno>4.8.11 </span>The <code>canvas</code> element</a>
<ol>
- <li><a href=#2dcontext><span class=secno>4.8.11.1 </span>The 2D context</a>
+ <li><a href=#proxying-canvases-to-workers><span class=secno>4.8.11.1 </span>Proxying canvases to workers</a></li>
+ <li><a href=#2dcontext><span class=secno>4.8.11.2 </span>The 2D rendering context</a>
<ol>
- <li><a href=#resolution><span class=secno>4.8.11.1.1 </span>Resolution</a></li>
- <li><a href=#the-canvas-state><span class=secno>4.8.11.1.2 </span>The canvas state</a></li>
- <li><a href=#drawingstyle-objects><span class=secno>4.8.11.1.3 </span><code>DrawingStyle</code> objects</a></li>
- <li><a href=#line-styles><span class=secno>4.8.11.1.4 </span>Line styles</a></li>
- <li><a href=#text-styles><span class=secno>4.8.11.1.5 </span>Text styles</a></li>
- <li><a href=#building-paths><span class=secno>4.8.11.1.6 </span>Building paths</a></li>
- <li><a href=#path-objects><span class=secno>4.8.11.1.7 </span><code>Path</code> objects</a></li>
- <li><a href=#transformations><span class=secno>4.8.11.1.8 </span>Transformations</a></li>
- <li><a href=#fill-and-stroke-styles><span class=secno>4.8.11.1.9 </span>Fill and stroke styles</a></li>
- <li><a href=#drawing-rectangles-to-the-canvas><span class=secno>4.8.11.1.10 </span>Drawing rectangles to the canvas</a></li>
- <li><a href=#drawing-text-to-the-canvas><span class=secno>4.8.11.1.11 </span>Drawing text to the canvas</a></li>
- <li><a href=#drawing-paths-to-the-canvas><span class=secno>4.8.11.1.12 </span>Drawing paths to the canvas</a></li>
- <li><a href=#drawing-images-to-the-canvas><span class=secno>4.8.11.1.13 </span>Drawing images to the canvas</a></li>
- <li><a href=#hit-regions><span class=secno>4.8.11.1.14 </span>Hit regions</a></li>
- <li><a href=#pixel-manipulation><span class=secno>4.8.11.1.15 </span>Pixel manipulation</a></li>
- <li><a href=#compositing><span class=secno>4.8.11.1.16 </span>Compositing</a></li>
- <li><a href=#image-smoothing><span class=secno>4.8.11.1.17 </span>Image smoothing</a></li>
- <li><a href=#shadows><span class=secno>4.8.11.1.18 </span>Shadows</a></li>
- <li><a href=#drawing-model><span class=secno>4.8.11.1.19 </span>Drawing model</a></li>
- <li><a href=#best-practices><span class=secno>4.8.11.1.20 </span>Best practices</a></li>
- <li><a href=#examples><span class=secno>4.8.11.1.21 </span>Examples</a></ol></li>
- <li><a href=#color-spaces-and-color-correction><span class=secno>4.8.11.2 </span>Color spaces and color correction</a></li>
- <li><a href=#security-with-canvas-elements><span class=secno>4.8.11.3 </span>Security with <code>canvas</code> elements</a></ol></li>
+ <li><a href=#implementation-notes><span class=secno>4.8.11.2.1 </span>Implementation notes</a></li>
+ <li><a href=#the-canvas-state><span class=secno>4.8.11.2.2 </span>The canvas state</a></li>
+ <li><a href=#drawingstyle-objects><span class=secno>4.8.11.2.3 </span><code>DrawingStyle</code> objects</a></li>
+ <li><a href=#line-styles><span class=secno>4.8.11.2.4 </span>Line styles</a></li>
+ <li><a href=#text-styles><span class=secno>4.8.11.2.5 </span>Text styles</a></li>
+ <li><a href=#building-paths><span class=secno>4.8.11.2.6 </span>Building paths</a></li>
+ <li><a href=#path-objects><span class=secno>4.8.11.2.7 </span><code>Path</code> objects</a></li>
+ <li><a href=#transformations><span class=secno>4.8.11.2.8 </span>Transformations</a></li>
+ <li><a href=#image-sources-for-2d-rendering-contexts><span class=secno>4.8.11.2.9 </span>Image sources for 2D rendering contexts</a></li>
+ <li><a href=#fill-and-stroke-styles><span class=secno>4.8.11.2.10 </span>Fill and stroke styles</a></li>
+ <li><a href=#drawing-rectangles-to-the-bitmap><span class=secno>4.8.11.2.11 </span>Drawing rectangles to the bitmap</a></li>
+ <li><a href=#drawing-text-to-the-bitmap><span class=secno>4.8.11.2.12 </span>Drawing text to the bitmap</a></li>
+ <li><a href=#drawing-paths-to-the-canvas><span class=secno>4.8.11.2.13 </span>Drawing paths to the canvas</a></li>
+ <li><a href=#drawing-images><span class=secno>4.8.11.2.14 </span>Drawing images</a></li>
+ <li><a href=#hit-regions><span class=secno>4.8.11.2.15 </span>Hit regions</a></li>
+ <li><a href=#pixel-manipulation><span class=secno>4.8.11.2.16 </span>Pixel manipulation</a></li>
+ <li><a href=#compositing><span class=secno>4.8.11.2.17 </span>Compositing</a></li>
+ <li><a href=#image-smoothing><span class=secno>4.8.11.2.18 </span>Image smoothing</a></li>
+ <li><a href=#shadows><span class=secno>4.8.11.2.19 </span>Shadows</a></li>
+ <li><a href=#drawing-model><span class=secno>4.8.11.2.20 </span>Drawing model</a></li>
+ <li><a href=#best-practices><span class=secno>4.8.11.2.21 </span>Best practices</a></li>
+ <li><a href=#examples><span class=secno>4.8.11.2.22 </span>Examples</a></ol></li>
+ <li><a href=#pixel-density><span class=secno>4.8.11.3 </span>Pixel density</a></li>
+ <li><a href=#color-spaces-and-color-correction><span class=secno>4.8.11.4 </span>Color spaces and color correction</a></li>
+ <li><a href=#serializing-bitmaps-to-a-file><span class=secno>4.8.11.5 </span>Serializing bitmaps to a file</a></li>
+ <li><a href=#security-with-canvas-elements><span class=secno>4.8.11.6 </span>Security with <code>canvas</code> elements</a></ol></li>
<li><a href=#the-map-element><span class=secno>4.8.12 </span>The <code>map</code> element</a></li>
<li><a href=#the-area-element><span class=secno>4.8.13 </span>The <code>area</code> element</a></li>
<li><a href=#image-maps><span class=secno>4.8.14 </span>Image maps</a>
@@ -976,11 +980,13 @@
<li><a href=#the-navigator-object><span class=secno>7.5.1 </span>The <code>Navigator</code> object</a>
<ol>
<li><a href=#client-identification><span class=secno>7.5.1.1 </span>Client identification</a></li>
- <li><a href=#custom-handlers><span class=secno>7.5.1.2 </span>Custom scheme and content handlers</a></li>
- <li><a href=#security-and-privacy><span class=secno>7.5.1.3 </span>Security and privacy</a></li>
- <li><a href=#sample-handler-impl><span class=secno>7.5.1.4 </span>Sample user interface</a></li>
- <li><a href=#manually-releasing-the-storage-mutex><span class=secno>7.5.1.5 </span>Manually releasing the storage mutex</a></ol></li>
- <li><a href=#the-external-interface><span class=secno>7.5.2 </span>The <code>External</code> interface</a></ol></ol></li>
+ <li><a href=#custom-handlers><span class=secno>7.5.1.2 </span>Custom scheme and content handlers</a>
+ <ol>
+ <li><a href=#security-and-privacy><span class=secno>7.5.1.2.1 </span>Security and privacy</a></li>
+ <li><a href=#sample-handler-impl><span class=secno>7.5.1.2.2 </span>Sample user interface</a></ol></li>
+ <li><a href=#manually-releasing-the-storage-mutex><span class=secno>7.5.1.3 </span>Manually releasing the storage mutex</a></ol></li>
+ <li><a href=#the-external-interface><span class=secno>7.5.2 </span>The <code>External</code> interface</a></ol></li>
+ <li><a href=#images><span class=secno>7.6 </span>Images</a></ol></li>
<li><a href=#editing><span class=secno>8 </span>User interaction</a>
<ol>
<li><a href=#the-hidden-attribute><span class=secno>8.1 </span>The <code>hidden</code> attribute</a></li>
@@ -1305,7 +1311,7 @@
<li><a href=#replaced-elements><span class=secno>14.4 </span>Replaced elements</a>
<ol>
<li><a href=#embedded-content-2><span class=secno>14.4.1 </span>Embedded content</a></li>
- <li><a href=#images><span class=secno>14.4.2 </span>Images</a></li>
+ <li><a href=#images-0><span class=secno>14.4.2 </span>Images</a></li>
<li><a href=#attributes-for-embedded-content-and-images><span class=secno>14.4.3 </span>Attributes for embedded content and images</a></li>
<li><a href=#image-maps-0><span class=secno>14.4.4 </span>Image maps</a></li>
<li><a href=#toolbars-0><span class=secno>14.4.5 </span>Toolbars</a></ol></li>
@@ -4229,13 +4235,15 @@
<dd>
- <p>This specification uses the following interfaces defined in the
+ <p>This specification uses the following features defined in the
File API specification: <a href=#refsFILEAPI>[FILEAPI]</a></p>
<ul class=brief><li><dfn id=blob><code>Blob</code></dfn></li>
<li><dfn id=file><code>File</code></dfn></li>
<li><dfn id=filelist><code>FileList</code></dfn></li>
-
+ <li><dfn id=blob.close()><code title=dom-Blob-close>Blob.close()</code></dfn></li>
+ <li><dfn id=blob.type><code title=dom-Blob-type>Blob.type</code></dfn></li>
+ <li>The concept of <dfn id=file-error-read title=file-error-read>read errors</dfn></li>
</ul><p>It also uses the following interface defined in the File System
API specification: <a href=#refsFILESYSTEMAPI>[FILESYSTEMAPI]</a></p>
@@ -4325,6 +4333,10 @@
<p>The term <dfn id=css-styling-attribute>CSS styling attribute</dfn> is defined in the
<cite>CSS Style Attributes</cite> specification. <a href=#refsCSSATTR>[CSSATTR]</a></p>
+ <p>The <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> object's use of fonts depends on the features
+ described in the CSS Fonts specification, including in particular
+ <dfn id=fontloader><code>FontLoader</code></dfn>. <a href=#refsCSSFONTS>[CSSFONTS]</a></p>
+
</dd>
@@ -4340,6 +4352,16 @@
</ul><!-- mention that the parser supports it? --></dd>
+ <dt>WebGL</dt>
+
+ <dd>
+
+ <p>The following interface is defined in the WebGL specification: <a href=#refsWEBGL>[WEBGL]</a></p>
+
+ <ul class=brief><li><dfn id=webglrenderingcontext><code>WebGLRenderingContext</code></dfn>
+ </ul></dd>
+
+
<!--TOPIC:HTML-->
<!-- mention that the parser supports mathml? -->
@@ -7199,11 +7221,9 @@
</ol></div>
- <hr><!--2DCANVAS--><p class=note>The <a href=#canvas-context-2d title=canvas-context-2d>2D graphics
- context</a> has a separate color syntax that also handles
- opacity.</p>
+ <hr><p class=note>The <a href=#canvas-context-2d title=canvas-context-2d>2D graphics context</a> has a separate
+ color syntax that also handles opacity.</p>
- <!--2DCANVAS-->
<h4 id=space-separated-tokens><span class=secno>2.5.7 </span>Space-separated tokens</h4>
@@ -9787,6 +9807,7 @@
<ul class=brief><li><code><a href=#messageport>MessagePort</a></code>
<li><code><a href=#arraybuffer>ArrayBuffer</a></code> <a href=#refsTYPEDARRAY>[TYPEDARRAY]</a>
+ <li><code><a href=#canvasproxy>CanvasProxy</a></code>
</ul><div class=impl>
<h4 id=safe-passing-of-structured-data><span class=secno>2.8.6 </span>Safe passing of structured data</h4>
@@ -9885,6 +9906,11 @@
algorithm</a> recursively with the value of the <code title=dom-imagedata-data><a href=#dom-imagedata-data>data</a></code> attribute on <var title="">input</var> as the new "<var title="">input</var>"
argument and <var title="">memory</var> as the new "<var title="">memory</var>" argument.</dd>
+ <dt>If <var title="">input</var> is an <code><a href=#imagebitmap>ImageBitmap</a></code> object</dt>
+
+ <dd><p>Let <var title="">output</var> be a newly constructed <code><a href=#imagebitmap>ImageBitmap</a></code> object
+ whose bitmap data is a copy of <var title="">input</var>'s bitmap data.</dd>
+
<!--(when we add this, make sure to throw DataCloneError if these objects are already closed)
<dt>If <var title="">input</var> is an <code>ArrayBuffer</code> object</dt>
@@ -24464,7 +24490,10 @@
height is the image's intrinsic height, and whose appearance is the
intrinsic appearance of the image.</p>
- <p>User agents may obtain images immediately or on demand.</p>
+ <p>In a <a href=#browsing-context>browsing context</a> where <a href=#concept-bc-noscript title=concept-bc-noscript>scripting is
+ disabled</a>, user agents may obtain images immediately or on demand. In a <a href=#browsing-context>browsing
+ context</a> where <a href=#concept-bc-noscript title=concept-bc-noscript>scripting is enabled</a>, user agents
+ must obtain images immediately.</p>
<p>A user agent that obtains images immediately must synchronously
<a href=#update-the-image-data>update the image data</a> of an <code><a href=#the-img-element>img</a></code> element
@@ -25273,8 +25302,8 @@
<p>The IDL attribute <dfn id=dom-img-complete title=dom-img-complete><code>complete</code></dfn> must return
true if any of the following conditions is true:</p>
- <ul class=brief><li>The <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute is omitted.
- <li>The <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute's value is the empty string.
+ <ul class=brief><li>Both the <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute and the <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code> attributes are omitted.
+ <li>The the <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code> attribute is omitted and the <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute's value is the empty string. <!-- we only have this hack for src="", not srcset=""; present but empty or bogus srcset="" still means complete=false if it's not in the img-error state -->
<li>The final <a href=#concept-task title=concept-task>task</a> that is <a href=#queue-a-task title="queue a task">queued</a> by the <a href=#networking-task-source>networking task source</a> once the resource has been <a href=#fetch title=fetch>fetched</a> has been <a href=#queue-a-task title="queue a task">queued</a>, but has not yet been run, and the <code><a href=#the-img-element>img</a></code> element is not in the <a href=#img-error title=img-error>broken</a> state.
<li>The <code><a href=#the-img-element>img</a></code> element is <a href=#img-all title=img-all>completely available</a>.
</ul><p>Otherwise, the attribute must return false.</p>
@@ -36136,17 +36165,22 @@
<dd><code title=attr-canvas-height><a href=#attr-canvas-height>height</a></code></dd>
<dt><a href=#element-dfn-dom title=element-dfn-dom>DOM interface</a>:</dt><!--ADD-TOPIC:DOM APIs-->
<dd>
- <pre class=idl>interface <dfn id=htmlcanvaselement>HTMLCanvasElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
+ <pre class=idl>typedef (<a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a> or <a href=#webglrenderingcontext>WebGLRenderingContext</a>) <dfn id=renderingcontext>RenderingContext</dfn>;
+
+interface <dfn id=htmlcanvaselement>HTMLCanvasElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
attribute unsigned long <a href=#dom-canvas-width title=dom-canvas-width>width</a>;
attribute unsigned long <a href=#dom-canvas-height title=dom-canvas-height>height</a>;
+ <a href=#renderingcontext>RenderingContext</a>? <a href=#dom-canvas-getcontext title=dom-canvas-getContext>getContext</a>(DOMString contextId, any... arguments);
+ boolean <a href=#dom-canvas-supportscontext title=dom-canvas-supportsContext>supportsContext</a>(DOMString contextId, any... arguments);
+
+ void <a href=#dom-canvas-setcontext title=dom-canvas-setContext>setContext</a>(<a href=#renderingcontext>RenderingContext</a> context);
+ <a href=#canvasproxy>CanvasProxy</a> <a href=#dom-canvas-transfercontroltoproxy title=dom-canvas-transferControlToProxy>transferControlToProxy</a>();
+
DOMString <a href=#dom-canvas-todataurl title=dom-canvas-toDataURL>toDataURL</a>(optional DOMString type, any... arguments);
DOMString <a href=#dom-canvas-todataurlhd title=dom-canvas-toDataURLHD>toDataURLHD</a>(optional DOMString type, any... arguments);
void <a href=#dom-canvas-toblob title=dom-canvas-toBlob>toBlob</a>(<a href=#filecallback>FileCallback</a>? _callback, optional DOMString type, any... arguments);
void <a href=#dom-canvas-toblobhd title=dom-canvas-toBlobHD>toBlobHD</a>(<a href=#filecallback>FileCallback</a>? _callback, optional DOMString type, any... arguments);
-
- object? <a href=#dom-canvas-getcontext title=dom-canvas-getContext>getContext</a>(DOMString contextId, any... arguments);
- boolean <a href=#dom-canvas-supportscontext title=dom-canvas-supportsContext>supportsContext</a>(DOMString contextId, any... arguments);
};</pre>
</dd>
</dl><!--REMOVE-TOPIC:DOM APIs--><p>The <code><a href=#the-canvas-element>canvas</a></code> element provides scripts with a resolution-dependent bitmap canvas,
@@ -36159,21 +36193,22 @@
CSS and supporting technologies such as XBL.</p>
<p>When authors use the <code><a href=#the-canvas-element>canvas</a></code> element, they must also provide content that, when
- presented to the user, conveys essentially the same function or purpose as the bitmap canvas. This
- content may be placed as content of the <code><a href=#the-canvas-element>canvas</a></code> element. The contents of the
- <code><a href=#the-canvas-element>canvas</a></code> element, if any, are the element's <a href=#fallback-content>fallback content</a>.</p>
+ presented to the user, conveys essentially the same function or purpose as the
+ <code><a href=#the-canvas-element>canvas</a></code>' bitmap. This content may be placed as content of the <code><a href=#the-canvas-element>canvas</a></code>
+ element. The contents of the <code><a href=#the-canvas-element>canvas</a></code> element, if any, are the element's <a href=#fallback-content>fallback
+ content</a>.</p>
- <p>In interactive visual media, if <a href=#concept-n-script title=concept-n-script>scripting is enabled</a> for
+ <hr><p>In interactive visual media, if <a href=#concept-n-script title=concept-n-script>scripting is enabled</a> for
the <code><a href=#the-canvas-element>canvas</a></code> element, and if support for <code><a href=#the-canvas-element>canvas</a></code> elements has been enabled,
the <code><a href=#the-canvas-element>canvas</a></code> element <a href=#represents>represents</a> <a href=#embedded-content>embedded content</a> consisting
- of a dynamically created image.</p>
+ of a dynamically created image, the element's bitmap.</p>
<p>In non-interactive, static, visual media, if the <code><a href=#the-canvas-element>canvas</a></code> element has been
- previously painted on (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 <code><a href=#the-canvas-element>canvas</a></code> element <a href=#represents>represents</a> <a href=#embedded-content>embedded content</a> with
- the current image and size. Otherwise, the element represents its <a href=#fallback-content>fallback content</a>
- instead.</p>
+ 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 <code><a href=#the-canvas-element>canvas</a></code> element <a href=#represents>represents</a>
+ <a href=#embedded-content>embedded content</a> with the element's current bitmap and size. Otherwise, the element
+ represents its <a href=#fallback-content>fallback content</a> instead.</p>
<p>In non-visual media, and in visual media if <a href=#concept-n-noscript title=concept-n-noscript>scripting is
disabled</a> for the <code><a href=#the-canvas-element>canvas</a></code> element or if support for <code><a href=#the-canvas-element>canvas</a></code> elements
@@ -36189,7 +36224,7 @@
elements in the <a href=#fallback-content>fallback content</a>. (Focus has no effect on mouse interaction events.)
<a href=#refsDOMEVENTS>[DOMEVENTS]</a></p>
- <p>The <code><a href=#the-canvas-element>canvas</a></code> element has two attributes to control the size of the coordinate space:
+ <hr><p>The <code><a href=#the-canvas-element>canvas</a></code> element has two attributes to control the size of the coordinate space:
<dfn id=attr-canvas-width title=attr-canvas-width><code>width</code></dfn> and <dfn id=attr-canvas-height title=attr-canvas-height><code>height</code></dfn>. These attributes, when specified, must have
values that are <a href=#valid-non-negative-integer title="valid non-negative integer">valid non-negative integers</a>. <span class=impl>The <a href=#rules-for-parsing-non-negative-integers>rules for parsing non-negative integers</a> must be used to obtain their
numeric values. If an attribute is missing, or if parsing its value returns an error, then the
@@ -36197,63 +36232,73 @@
attribute defaults to 300, and the <code title=attr-canvas-height><a href=#attr-canvas-height>height</a></code> attribute
defaults to 150.</p>
- <p>The intrinsic dimensions of the <code><a href=#the-canvas-element>canvas</a></code> element equal the size of the coordinate
- space, with the numbers interpreted in CSS pixels. However, the element can be sized arbitrarily
- by a style sheet. During rendering, the image is scaled to fit this layout size.</p>
+ <p>The intrinsic dimensions of the <code><a href=#the-canvas-element>canvas</a></code> element when it <a href=#represents>represents</a>
+ <a href=#embedded-content>embedded content</a> are equal to the dimensions of the element's bitmap.</p>
+ <p class=note>A <code><a href=#the-canvas-element>canvas</a></code> element can be sized arbitrarily by a style sheet, its
+ bitmap is then subject to the 'object-fit' CSS property. <a href=#refsCSSIMAGES>[CSSIMAGES]</a></p>
+
<div class=impl>
- <p>The size of the coordinate space does not necessarily represent the size of the actual bitmap
- that the user agent will use internally or during rendering. On high-definition displays, for
- instance, the user agent may internally use a bitmap with two device pixels per unit in the
- coordinate space, so that the rendering remains at high quality throughout.</p>
+ <hr><!--ADD-TOPIC:Security--><p>The bitmaps of <code><a href=#the-canvas-element>canvas</a></code> elements, as well as some of the bitmaps of rendering
+ contexts, such as those described in the section on the <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code>
+ object below, have an <dfn id=concept-canvas-origin-clean title=concept-canvas-origin-clean>origin-clean</dfn> flag, which can
+ be set to true or false. Initially, when the <code><a href=#the-canvas-element>canvas</a></code> element is created, its bitmap's
+ <a href=#concept-canvas-origin-clean title=concept-canvas-origin-clean>origin-clean</a> flag must be set to true.</p>
+<!--REMOVE-TOPIC:Security-->
- <p>When the <code><a href=#the-canvas-element>canvas</a></code> element is created, and subsequently whenever the <code title=attr-canvas-width><a href=#attr-canvas-width>width</a></code> and <code title=attr-canvas-height><a href=#attr-canvas-height>height</a></code>
- attributes are set (whether to a new value or to the previous value), the bitmap and any
- associated contexts must be cleared back to their initial state and reinitialized with the newly
- specified coordinate space dimensions.</p>
+ <p>A <code><a href=#the-canvas-element>canvas</a></code> bitmap can also have a <a href=#hit-region-list>hit region list</a>, as described in the
+ <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> section below.</p>
- <p>When the canvas is initialized, its bitmap must be cleared to transparent black.</p>
+ <p>A <code><a href=#the-canvas-element>canvas</a></code> 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 <code><a href=#the-canvas-element>canvas</a></code> also has a <dfn id=concept-canvas-context-mode title=concept-canvas-context-mode>canvas context mode</dfn>, which is initially <dfn id=concept-canvas-none title=concept-canvas-none>none</dfn> but can be changed to either <dfn id=concept-canvas-direct-2d title=concept-canvas-direct-2d>direct-2d</dfn>, <dfn id=concept-canvas-direct-webgl title=concept-canvas-direct-webgl>direct-webgl</dfn>, <dfn id=concept-canvas-indirect title=concept-canvas-indirect>indirect</dfn>, or <dfn id=concept-canvas-proxied title=concept-canvas-proxied>proxied</dfn> by algorithms defined in this specification.</p>
- <p>When a <code><a href=#the-canvas-element>canvas</a></code> element does not represent its <a href=#fallback-content>fallback content</a>, it
- <a href=#provides-a-paint-source>provides a paint source</a> whose width is the element's intrinsic width, whose height is
- the element's intrinsic height, and whose appearance is the element's bitmap.</p>
+ <p>When its <a href=#concept-canvas-context-mode title=concept-canvas-context-mode>canvas context mode</a> is <a href=#concept-canvas-none title=concept-canvas-none>none</a>, a <code><a href=#the-canvas-element>canvas</a></code> element has no rendering context,
+ and its bitmap must be fully transparent black with an intrinsic width equal to the numeric value
+ of the element's <code title=attr-canvas-width><a href=#attr-canvas-width>width</a></code> attribute and an intrinsic height
+ equal to the numeric value of the element's <code title=attr-canvas-height><a href=#attr-canvas-height>height</a></code>
+ attribute, those values being interpreted in CSS pixels, and being updated as the attributes are
+ set, changed, or removed.</p>
+ <p>When a <code><a href=#the-canvas-element>canvas</a></code> element represents <a href=#embedded-content>embedded content</a>, it <a href=#provides-a-paint-source>provides
+ a paint source</a> whose width is the element's intrinsic width, whose height is the element's
+ intrinsic height, and whose appearance is the element's bitmap.</p>
+
+ <p>Whenever the <code title=attr-canvas-width><a href=#attr-canvas-width>width</a></code> and <code title=attr-canvas-height><a href=#attr-canvas-height>height</a></code> content attributes are set, removed, changed, or
+ redundantly set to the value they already have, if the <a href=#concept-canvas-context-mode title=concept-canvas-context-mode>canvas context mode</a> is <a href=#concept-canvas-direct-2d title=concept-canvas-direct-2d>direct-2d</a><!-- (and the rendering context's <span
+ title="concept-canvas-context-bitmap-mode">context bitmap mode</span>, therefore, is <span
+ title="concept-canvas-fixed">fixed</span>)-->, the user agent must <a href=#concept-canvas-set-bitmap-dimensions title=concept-canvas-set-bitmap-dimensions>set bitmap dimensions</a> to the numeric values of
+ the <code title=attr-canvas-width><a href=#attr-canvas-width>width</a></code> and <code title=attr-canvas-height><a href=#attr-canvas-height>height</a></code> content attributes.</p>
+
<p>The <dfn id=dom-canvas-width title=dom-canvas-width><code>width</code></dfn> and <dfn id=dom-canvas-height title=dom-canvas-height><code>height</code></dfn> IDL attributes must <a href=#reflect>reflect</a> the
respective content attributes of the same name, with the same defaults.</p>
</div>
- <div class=example>
- <p>Only one square appears to be drawn in the following example:</p>
- <pre> // canvas is a reference to a <canvas> element
- var context = canvas.getContext('2d');
- context.fillRect(0,0,50,50);
- canvas.setAttribute('width', '300'); // clears the canvas
- context.fillRect(0,100,50,50);
- canvas.width = canvas.width; // clears the canvas
- context.fillRect(100,0,50,50); // only this square remains</pre>
- </div>
+ <p class=note>The bitmaps used with <code><a href=#the-canvas-element>canvas</a></code> elements can have arbitrary pixel
+ densities. Typically, the density will match that of the user's screen.</p>
<hr><!--ADD-TOPIC:DOM APIs--><dl class=domintro><dt><var title="">context</var> = <var title="">canvas</var> . <code title=dom-canvas-getContext><a href=#dom-canvas-getcontext>getContext</a></code>(<var title="">contextId</var> [, ... ])</dt>
<dd>
<p>Returns an object that exposes an API for drawing on the canvas. The first argument specifies
- the desired API. Subsequent arguments are handled by that API.</p>
+ the desired API, either "<code title=canvas-context-2d><a href=#canvas-context-2d>2d</a></code>" or "<code title=canvas-context-webgl><a href=#canvas-context-webgl>webgl</a></code>". Subsequent arguments are handled by that API.</p>
<p>This specification defines the "<code title=canvas-context-2d><a href=#canvas-context-2d>2d</a></code>" context below.
- There is also a specification that defines a "<code title=canvas-context-webgl>webgl</code>"
+ There is also a specification that defines a "<code title=canvas-context-webgl><a href=#canvas-context-webgl>webgl</a></code>"
context. <a href=#refsWEBGL>[WEBGL]</a></p>
- <p>The list of defined contexts is given on the <a href=http://wiki.whatwg.org/wiki/CanvasContexts>WHATWG Wiki CanvasContexts page</a>. <a href=#refsWHATWGWIKI>[WHATWGWIKI]</a>
+ <p>Returns null if the given context ID is not supported, if the canvas has already been
+ initialized with the other context type (e.g. trying to get a "<code title=canvas-context-2d><a href=#canvas-context-2d>2d</a></code>" context after getting a "<code title=canvas-context-webgl><a href=#canvas-context-webgl>webgl</a></code>" context).</p>
- <p>Returns null if the given context ID is not supported or if the canvas has already been
- initialized with some other (incompatible) context type (e.g. trying to get a "<code title=canvas-context-2d><a href=#canvas-context-2d>2d</a></code>" context after getting a "<code title=canvas-context-webgl>webgl</code>" context).</p>
+ <p>Throws an <code><a href=#invalidstateerror>InvalidStateError</a></code> if the <code title=dom-canvas-setContext><a href=#dom-canvas-setcontext>setContext()</a></code> or <code title=dom-canvas-transferControlToProxy><a href=#dom-canvas-transfercontroltoproxy>transferControlToProxy()</a></code> methods have been
+ used.</p>
</dd>
- <dt><var title="">context</var> = <var title="">canvas</var> . <code title=dom-canvas-supportsContext><a href=#dom-canvas-supportscontext>supportsContext</a></code>(<var title="">contextId</var> [, ... ])</dt>
+ <dt><var title="">supported</var> = <var title="">canvas</var> . <code title=dom-canvas-supportsContext><a href=#dom-canvas-supportscontext>supportsContext</a></code>(<var title="">contextId</var> [, ... ])</dt>
<dd>
@@ -36263,105 +36308,174 @@
<p>This return value is not a guarantee that <code title=dom-canvas-getContext><a href=#dom-canvas-getcontext>getContext()</a></code> will or will not return an object, as
conditions (e.g. availability of system resources) can vary over time.</p>
+ <p>Throws an <code><a href=#invalidstateerror>InvalidStateError</a></code> if the <code title=dom-canvas-setContext><a href=#dom-canvas-setcontext>setContext()</a></code> or <code title=dom-canvas-transferControlToProxy><a href=#dom-canvas-transfercontroltoproxy>transferControlToProxy()</a></code> methods have been
+ used.</p>
+
</dd>
+ <dt><var title="">canvas</var> . <code title=dom-canvas-setContext><a href=#dom-canvas-setcontext>setContext</a></code>(<var title="">context</var>)</dt>
+
+ <dd>
+
+ <p>Sets the <code><a href=#the-canvas-element>canvas</a></code>' rendering context to the given object.</p>
+
+ <p>Throws an <code><a href=#invalidstateerror>InvalidStateError</a></code> exception if the <code title=dom-canvas-getContext><a href=#dom-canvas-getcontext>getContext()</a></code> or <code title=dom-canvas-transferControlToProxy><a href=#dom-canvas-transfercontroltoproxy>transferControlToProxy()</a></code> methods have been
+ used.</p>
+
+ </dd>
+
</dl><div class=impl>
- <p>A <code><a href=#the-canvas-element>canvas</a></code> element can have a <dfn id=primary-context>primary context</dfn>, which is the first context
- to have been obtained for that element. When created, a <code><a href=#the-canvas-element>canvas</a></code> element must not have
- a <a href=#primary-context>primary context</a>.</p>
+ <p>There are two ways for a <code><a href=#the-canvas-element>canvas</a></code> element to acquire a rendering context: the
+ <code><a href=#the-canvas-element>canvas</a></code> element can provide one via the <code title=dom-canvas-getContext><a href=#dom-canvas-getcontext>getContext()</a></code> method, and one can be assigned to it via the
+ <code title=dom-canvas-setContext><a href=#dom-canvas-setcontext>setContext()</a></code> method. In addition, the whole issue of a
+ rendering context can be taken out of the <code><a href=#the-canvas-element>canvas</a></code> element's hands and passed to a
+ <code><a href=#canvasproxy>CanvasProxy</a></code> object, which itself can then be assigned a rendering context using its
+ <code title=dom-CanvasProxy-setContext><a href=#dom-canvasproxy-setcontext>setContext()</a></code> method.</p>
- <p>The <dfn id=dom-canvas-getcontext title=dom-canvas-getContext><code>getContext(<var title="">contextId</var>, <var title="">arguments...</var>)</code></dfn> method of the <code><a href=#the-canvas-element>canvas</a></code> element, when invoked,
- must run the following steps:</p>
+ <p>These three methods are mutually exclusive; calling any of the three makes the other two start
+ throwing <code><a href=#invalidstateerror>InvalidStateError</a></code> exceptions when called.</p>
- <ol><li><p>Let <var title="">contextId</var> be the first argument to the method.</li>
+ <p>Each rendering context has a <dfn id=concept-canvas-context-bitmap-mode title=concept-canvas-context-bitmap-mode>context bitmap
+ mode</dfn>, which is one of <dfn id=concept-canvas-fixed title=concept-canvas-fixed>fixed</dfn>, <dfn id=concept-canvas-unbound title=concept-canvas-unbound>unbound</dfn>, or <dfn id=concept-canvas-bound title=concept-canvas-bound>bound</dfn>.
+ Initially, rendering contexts must be in the <a href=#concept-canvas-bound title=concept-canvas-bound>unbound</a>
+ mode.</p>
- <li>
+ <hr><p>The <dfn id=dom-canvas-getcontext title=dom-canvas-getContext><code>getContext(<var title="">contextId</var>, <var title="">arguments...</var>)</code></dfn> method of the <code><a href=#the-canvas-element>canvas</a></code> element, when invoked,
+ must run the steps in the cell of the following table whose column header describes the
+ <code><a href=#the-canvas-element>canvas</a></code> element's <a href=#concept-canvas-context-mode title=concept-canvas-context-mode>canvas context mode</a>
+ and whose row header describes the method's first argument.</p>
- <p>If <var title="">contextId</var> is not the name of a context supported by the user agent,
- return null and abort these steps.</p>
+ <table><thead><tr><td>
+ <th><a href=#concept-canvas-none title=concept-canvas-none>none</a>
+ <th><a href=#concept-canvas-direct-2d title=concept-canvas-direct-2d>direct-2d</a>
+ <th><a href=#concept-canvas-direct-webgl title=concept-canvas-direct-webgl>direct-webgl</a>
+ <th><a href=#concept-canvas-indirect title=concept-canvas-indirect>indirect</a>
+ <th><a href=#concept-canvas-proxied title=concept-canvas-proxied>proxied</a>
+ <tbody><tr><th>"<dfn id=canvas-context-2d title=canvas-context-2d><code>2d</code></dfn>"
+ <td>
+ Set the <code><a href=#the-canvas-element>canvas</a></code> element's <a href=#concept-canvas-context-mode title=concept-canvas-context-mode>context
+ mode</a> to <a href=#concept-canvas-direct-2d title=concept-canvas-direct-2d>direct-2d</a>; follow the <a href=#2d-context-creation-algorithm>2D
+ context creation algorithm</a> defined in the section below, passing it the
+ <code><a href=#the-canvas-element>canvas</a></code> element, to obtain a <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> object; set
+ that object's <a href=#concept-canvas-context-bitmap-mode title=concept-canvas-context-bitmap-mode>context bitmap mode</a> to
+ <a href=#concept-canvas-fixed title=concept-canvas-fixed>fixed</a>, and return the
+ <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> object
+ <td>
+ Return the same object as was return the last time the method was invoked with this same
+ argument.
+ <td>
+ Return null.
+ <td>
+ Throw an <code><a href=#invalidstateerror>InvalidStateError</a></code> exception.
+ <td>
+ Throw an <code><a href=#invalidstateerror>InvalidStateError</a></code> exception.
- <p class=note>An example of this would be a user agent that theoretically supports the "<code title=canvas-context-webgl>webgl</code>" 3D context, in the case where the platform does not
- have hardware support for OpenGL and the user agent does not have a software OpenGL
- implementation. Despite the user agent recognising the "<code title=canvas-context-webgl>webgl</code>" name, it would return null at this step because that
- context is not, in practice, supported at the time of the call.</p>
+ <tr><th>"<dfn id=canvas-context-webgl title=canvas-context-webgl><code>webgl</code></dfn>", if the user agent supports the WebGL feature in its current configuration
+ <td>
+ Follow the instructions given in the WebGL specification's <i>Context Creation</i> section to
+ obtain either a <code><a href=#webglrenderingcontext>WebGLRenderingContext</a></code> or null; if the returned value is null,
+ then return null and abort these steps, otherwise, set the <code><a href=#the-canvas-element>canvas</a></code> element's <a href=#concept-canvas-context-mode title=concept-canvas-context-mode>context mode</a> to <a href=#concept-canvas-direct-webgl title=concept-canvas-direct-webgl>direct-webgl</a>, set the new
+ <code><a href=#webglrenderingcontext>WebGLRenderingContext</a></code> object's <a href=#concept-canvas-context-bitmap-mode title=concept-canvas-context-bitmap-mode>context bitmap mode</a> to <a href=#concept-canvas-fixed title=concept-canvas-fixed>fixed</a>, and return the <code><a href=#webglrenderingcontext>WebGLRenderingContext</a></code>
+ object‡ <a href=#refsWEBGL>[WEBGL]</a>
+ <td>
+ Return null.
+ <td>
+ Return the same object as was return the last time the method was invoked with this same
+ argument.
+ <td>
+ Throw an <code><a href=#invalidstateerror>InvalidStateError</a></code> exception.
+ <td>
+ Throw an <code><a href=#invalidstateerror>InvalidStateError</a></code> exception.
- </li>
+ <tr><th>A vendor-specific extension*
+ <td>
+ Behave as defined for the extension.
+ <td>
+ Behave as defined for the extension.
+ <td>
+ Behave as defined for the extension.
+ <td>
+ Throw an <code><a href=#invalidstateerror>InvalidStateError</a></code> exception.
+ <td>
+ Throw an <code><a href=#invalidstateerror>InvalidStateError</a></code> exception.
- <li><p>If the element has a <a href=#primary-context>primary context</a> and that context's entry in the <a href=http://wiki.whatwg.org/wiki/CanvasContexts>WHATWG Wiki CanvasContexts page</a> does not
- list <var title="">contextId</var> as a context with which it is compatible, return null and
- abort these steps. <a href=#refsWHATWGWIKI>[WHATWGWIKI]</a></li>
+ <tr><th>An unsupported value†
+ <td>
+ Return null.
+ <td>
+ Return null.
+ <td>
+ Return null.
+ <td>
+ Throw an <code><a href=#invalidstateerror>InvalidStateError</a></code> exception.
+ <td>
+ Throw an <code><a href=#invalidstateerror>InvalidStateError</a></code> exception.
+
+ </table><p class=tablenote><small>* Vendors may define experimental contexts using the syntax <code><var title="">vendorname</var>-<var title="">context</var></code>, for example,
+ <code>moz-3d</code>.</small></p>
- <li><p>If the element does not have a <a href=#primary-context>primary context</a>, let the element's
- <a href=#primary-context>primary context</a> be <var title="">contextId</var>.</li>
+ <p class=tablenote><small>† For example, the "<code title=canvas-context-webgl><a href=#canvas-context-webgl>webgl</a></code>" value in the case of a user agent having exhausted the
+ graphics hardware's abilities and having no software fallback implementation.</small></p>
- <li><p>If the <code title=dom-canvas-getContext><a href=#dom-canvas-getcontext>getContext()</a></code> method has already been
- invoked on this element for the same <var title="">contextId</var>, return the same object as was
- returned that time, and abort these steps. The additional arguments are ignored.</li>
+ <p class=tablenote><small>‡ The second (and subsequent) argument(s) to the method, if
+ any, are ignored in all cases except this one. See the WebGL specification for
+ details.</small></p>
- <li><p><dfn id=getcontext-return title=getContext-return>Return a new object for <var title="">contextId</var></dfn>, as defined by the specification given for <var title="">contextId</var>'s entry in the <a href=http://wiki.whatwg.org/wiki/CanvasContexts>WHATWG Wiki CanvasContexts page</a>. <a href=#refsWHATWGWIKI>[WHATWGWIKI]</a></li>
-
- </ol><p>The <dfn id=dom-canvas-supportscontext title=dom-canvas-supportsContext><code>supportsContext(<var title="">contextId</var>,
+ <hr><p>The <dfn id=dom-canvas-supportscontext title=dom-canvas-supportsContext><code>supportsContext(<var title="">contextId</var>,
<var title="">arguments...</var>)</code></dfn> method of the <code><a href=#the-canvas-element>canvas</a></code> element, when
invoked, must return false if calling <code title=dom-canvas-getContext><a href=#dom-canvas-getcontext>getContext()</a></code> on
the same object and with the same arguments would definitely return null at this time, and true
otherwise.</p>
- <p>New context types may be registered in the <a href=http://wiki.whatwg.org/wiki/CanvasContexts>WHATWG Wiki CanvasContexts page</a>. <a href=#refsWHATWGWIKI>[WHATWGWIKI]</a></p>
+ <hr><p>The <dfn id=dom-canvas-setcontext title=dom-canvas-setContext><code>setContext(<var title="">context</var>)</code></dfn> method of the <code><a href=#the-canvas-element>canvas</a></code> element, when invoked, must
+ run following the steps:</p>
- <p>Anyone is free to edit the WHATWG Wiki CanvasContexts page at any time to add a new context
- type. These new context types must be specified with the following information:</p>
+ <ol><li><p>If the <code><a href=#the-canvas-element>canvas</a></code> element's <a href=#concept-canvas-context-mode title=concept-canvas-context-mode>canvas
+ context mode</a> is neither <a href=#concept-canvas-none title=concept-canvas-none>none</a> nor <a href=#concept-canvas-indirect title=concept-canvas-indirect>indirect</a>, throw an <code><a href=#invalidstateerror>InvalidStateError</a></code> and
+ abort these steps.</li>
- <dl><dt>Keyword</dt>
+ <li><p>If <var title="">context</var>'s <a href=#concept-canvas-context-bitmap-mode title=concept-canvas-context-bitmap-mode>context
+ bitmap mode</a> is <a href=#concept-canvas-fixed title=concept-canvas-fixed>fixed</a>, then throw an
+ <code><a href=#invalidstateerror>InvalidStateError</a></code> and abort these steps.</li>
- <dd><p>The value of <var title="">contextID</var> that will return the object for the new
- API.</dd>
+ <li><p>If <var title="">context</var>'s <a href=#concept-canvas-context-bitmap-mode title=concept-canvas-context-bitmap-mode>context
+ bitmap mode</a> is <a href=#concept-canvas-bound title=concept-canvas-bound>bound</a>, then run <var title="">context</var>'s <a href=#concept-canvas-unbinding-steps title=concept-canvas-unbinding-steps>unbinding steps</a> and
+ set its <var title="">context</var>'s <a href=#concept-canvas-context-bitmap-mode title=concept-canvas-context-bitmap-mode>context
+ bitmap mode</a> to <a href=#concept-canvas-unbound title=concept-canvas-unbound>unbound</a>.</li>
+ <li><p>Run <var title="">context</var>'s <a href=#concept-canvas-binding-steps title=concept-canvas-binding-steps>binding
+ steps</a> to bind it to this <code><a href=#the-canvas-element>canvas</a></code> element.</li>
- <dt>Specification</dt>
+ <li><p>Set the <code><a href=#the-canvas-element>canvas</a></code> element's <a href=#concept-canvas-context-mode title=concept-canvas-context-mode>context
+ mode</a> to <a href=#concept-canvas-indirect title=concept-canvas-indirect>indirect</a> and the <var title="">context</var>'s <a href=#concept-canvas-context-bitmap-mode title=concept-canvas-context-bitmap-mode>context bitmap
+ mode</a> to <a href=#concept-canvas-bound title=concept-canvas-bound>bound</a>.</li>
- <dd><p>A link to a formal specification of the context type's API. It could be another page on
- the Wiki, or a link to an external page. If the type does not have a formal specification, an
- informal description can be substituted until such time as a formal specification is
- available.</dd>
+ </ol><hr></div>
-
- <dt>Compatible with</dt>
-
- <dd><p>The list of context types that are compatible with this one (i.e. that operate on the same
- underlying bitmap). This list must be transitive and symmetric; if one context type is defined as
- compatible with another, then all types it is compatible with must be compatible with all types
- the other is compatible with.</dd>
-
- </dl><p>Vendors may also define experimental contexts using the syntax <code><var title="">vendorname</var>-<var title="">context</var></code>, for example, <code>moz-3d</code>.
- Such contexts should be registered in the WHATWG Wiki CanvasContexts page.</p>
-
- </div>
-
- <hr><dl class=domintro><dt><var title="">url</var> = <var title="">canvas</var> . <code title=dom-canvas-toDataURL><a href=#dom-canvas-todataurl>toDataURL</a></code>( [ <var title="">type</var>, ... ] )</dt>
+ <dl class=domintro><dt><var title="">url</var> = <var title="">canvas</var> . <code title=dom-canvas-toDataURL><a href=#dom-canvas-todataurl>toDataURL</a></code>( [ <var title="">type</var>, ... ] )</dt>
<dt><var title="">url</var> = <var title="">canvas</var> . <code title=dom-canvas-toDataURLHD><a href=#dom-canvas-todataurlhd>toDataURLHD</a></code>( [ <var title="">type</var>, ... ] )</dt>
<dd>
- <p>Returns a <a href=#data-protocol title="data protocol"><code title="">data:</code> URL</a> for the image in the canvas.</p>
+ <p>Returns a <a href=#data-protocol title="data protocol"><code title="">data:</code> URL</a> for the image in
+ the canvas.</p>
- <p>The first argument, if provided, controls the type of the image
- to be returned (e.g. PNG or JPEG). The default is <code title="">image/png</code>; that type is also used if the given
- type isn't supported. The other arguments are specific to the
- type, and control the way that the image is generated, as given in
- the table below.</p>
+ <p>The first argument, if provided, controls the type of the image to be returned (e.g. PNG or
+ JPEG). The default is <code title="">image/png</code>; that type is also used if the given type
+ isn't supported. The other arguments are specific to the type, and control the way that the
+ image is generated, as given <a href=#canvas-serialization-arguments>in the table
+ below</a>.</p>
- <p>When trying to use types other than "<code>image/png</code>",
- 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 "<code title="">data:image/png,</code>" or "<code title="">data:image/png;</code>". 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
+ <p>When trying to use types other than "<code>image/png</code>", 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 "<code title="">data:image/png,</code>" or "<code title="">data:image/png;</code>". 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 "<code title="">data:,</code>".)</p>
- <p>The <code title=dom-canvas-toDataURL><a href=#dom-canvas-todataurl>toDataURL()</a></code>
- method returns the data at a resolution of 96dpi. The <code title=dom-canvas-toDataURLHD><a href=#dom-canvas-todataurlhd>toDataURLHD()</a></code> method returns
- it at the native canvas bitmap resolution.</p>
+ <p>The <code title=dom-canvas-toDataURL><a href=#dom-canvas-todataurl>toDataURL()</a></code> method returns the data at a
+ resolution of 96dpi. The <code title=dom-canvas-toDataURLHD><a href=#dom-canvas-todataurlhd>toDataURLHD()</a></code> method
+ returns it at the native canvas bitmap resolution.</p>
</dd>
@@ -36370,195 +36484,220 @@
<dd>
- <p>Creates a <code><a href=#blob>Blob</a></code> object representing a file
- containing the image in the canvas, and invokes a callback with a
- handle to that object.</p>
+ <p>Creates a <code><a href=#blob>Blob</a></code> object representing a file containing the image in the canvas,
+ and invokes a callback with a handle to that object.</p>
- <p>The second argument, if provided, controls the type of the
- image to be returned (e.g. PNG or JPEG). The default is <code title="">image/png</code>; that type is also used if the given
- type isn't supported. The other arguments are specific to the
- type, and control the way that the image is generated, as given in
- the table below.</p>
+ <p>The second argument, if provided, controls the type of the image to be returned (e.g. PNG or
+ JPEG). The default is <code title="">image/png</code>; that type is also used if the given type
+ isn't supported. The other arguments are specific to the type, and control the way that the
+ image is generated, as given <a href=#canvas-serialization-arguments>in the table
+ below</a>.</p>
- <p>The <code title=dom-canvas-toBlob><a href=#dom-canvas-toblob>toBlob()</a></code> method
- provides the data at a resolution of 96dpi. The <code title=dom-canvas-toBlobHD><a href=#dom-canvas-toblobhd>toBlobHD()</a></code> method provides it
- at the native canvas bitmap resolution.</p>
+ <p>The <code title=dom-canvas-toBlob><a href=#dom-canvas-toblob>toBlob()</a></code> method provides the data at a resolution
+ of 96dpi. The <code title=dom-canvas-toBlobHD><a href=#dom-canvas-toblobhd>toBlobHD()</a></code> method provides it at the
+ native canvas bitmap resolution.</p>
</dd>
</dl><div class=impl>
- <p>The <dfn id=dom-canvas-todataurl title=dom-canvas-toDataURL><code>toDataURL()</code></dfn> and <dfn id=dom-canvas-todataurlhd title=dom-canvas-toDataURLHD><code>toDataURLHD()</code></dfn>
- methods must run the following steps:</p>
+ <p>The <dfn id=dom-canvas-todataurl title=dom-canvas-toDataURL><code>toDataURL()</code></dfn> and <dfn id=dom-canvas-todataurlhd title=dom-canvas-toDataURLHD><code>toDataURLHD()</code></dfn> methods must run the following
+ steps:</p>
- <ol><!--ADD-TOPIC:Security--><li><p>If the <code><a href=#the-canvas-element>canvas</a></code> element's <i>origin-clean</i>
- flag is set to false, throw a <code><a href=#securityerror>SecurityError</a></code> exception
- and abort these steps.</p>
+ <ol><!--ADD-TOPIC:Security--><li><p>If the <code><a href=#the-canvas-element>canvas</a></code> element's bitmap's <a href=#concept-canvas-origin-clean title=concept-canvas-origin-clean>origin-clean</a> flag is set to false, throw a
+ <code><a href=#securityerror>SecurityError</a></code> exception and abort these steps.</p>
<!--REMOVE-TOPIC:Security-->
- <li><p>If the canvas has no pixels (i.e. either its horizontal
- dimension or its vertical dimension is zero) then return the string
- "<code title="">data:,</code>" and abort these steps. (This is the
- shortest <a href=#data-protocol title="data protocol"><code title="">data:</code>
- URL</a>; it represents the empty string in a <code title="">text/plain</code> resource.)</li>
+ <li><p>If the <code><a href=#the-canvas-element>canvas</a></code> element's bitmap has no pixels (i.e. either its horizontal
+ dimension or its vertical dimension is zero) then return the string "<code title="">data:,</code>" and abort these steps. (This is the shortest <a href=#data-protocol title="data
+ protocol"><code title="">data:</code> URL</a>; it represents the empty string in a <code title="">text/plain</code> resource.)</li>
- <li><p>Let <var title="">file</var> be <a href=#a-serialization-of-the-image-as-a-file>a serialization of the
- image as a file</a>, using the method's arguments (if any) as
- the <var title="">arguments</var>, and with the <var title="">native</var> flag set if the method is the <code title=dom-canvas-toDataURLHD><a href=#dom-canvas-todataurlhd>toDataURLHD()</a></code> method, and not
- otherwise.</li>
+ <li><p>Let <var title="">file</var> be <a href=#a-serialization-of-the-bitmap-as-a-file title="a serialization of the bitmap as a file">a
+ serialization of the <code>canvas</code> element's bitmap as a file</a>, using the method's
+ arguments (if any) as the <var title="">arguments</var>, and with the <var title="">native</var>
+ flag set if the method is the <code title=dom-canvas-toDataURLHD><a href=#dom-canvas-todataurlhd>toDataURLHD()</a></code> method,
+ and not otherwise.</li>
- <li><p>Return a <a href=#data-protocol title="data protocol"><code title="">data:</code> URL</a> representing <var title="">file</var>. <a href=#refsRFC2397>[RFC2397]</a></p>
+ <li><p>Return a <a href=#data-protocol title="data protocol"><code title="">data:</code> URL</a> representing
+ <var title="">file</var>. <a href=#refsRFC2397>[RFC2397]</a></p>
- <!-- should we explicitly require the URL to be base64-encoded and
- not have any parameters, to ensure the same exact URL is generated
- in each browser? -->
+ <!-- should we explicitly require the URL to be base64-encoded and not have any parameters, to
+ ensure the same exact URL is generated in each browser? -->
- </ol><p>The <dfn id=dom-canvas-toblob title=dom-canvas-toBlob><code>toBlob()</code></dfn>
- and <dfn id=dom-canvas-toblobhd title=dom-canvas-toBlobHD><code>toBlobHD()</code></dfn>
- methods must run the following steps:</p>
+ </ol><p>The <dfn id=dom-canvas-toblob title=dom-canvas-toBlob><code>toBlob()</code></dfn> and <dfn id=dom-canvas-toblobhd title=dom-canvas-toBlobHD><code>toBlobHD()</code></dfn> methods must run the following
+ steps:</p>
- <ol><!--ADD-TOPIC:Security--><li><p>If the <code><a href=#the-canvas-element>canvas</a></code> element's <i>origin-clean</i>
- flag is set to false, throw a <code><a href=#securityerror>SecurityError</a></code> exception
- and abort these steps.</p>
+ <ol><!--ADD-TOPIC:Security--><li><p>If the <code><a href=#the-canvas-element>canvas</a></code> element's bitmap's <a href=#concept-canvas-origin-clean title=concept-canvas-origin-clean>origin-clean</a> flag is set to false, throw a
+ <code><a href=#securityerror>SecurityError</a></code> exception and abort these steps.</p>
<!--REMOVE-TOPIC:Security-->
- <li><p>Let <var title="">callback</var> be the first
- argument.</li>
+ <li><p>Let <var title="">callback</var> be the first argument.</li>
- <li><p>Let <var title="">arguments</var> be the second and
- subsequent arguments to the method, if any.</li>
+ <li><p>Let <var title="">arguments</var> be the second and subsequent arguments to the method, if
+ any.</li>
<li>
- <p>If the canvas has no pixels (i.e. either its horizontal
+ <p>If the <code><a href=#the-canvas-element>canvas</a></code> element's bitmap has no pixels (i.e. either its horizontal
dimension or its vertical dimension is zero) then let <var title="">result</var> be null.</p>
- <p>Otherwise, let <var title="">result</var> be a
- <code><a href=#blob>Blob</a></code> object representing <a href=#a-serialization-of-the-image-as-a-file>a serialization of the
- image as a file</a>, using <var title="">arguments</var>, and
- with the <var title="">native</var> flag set if the method is the
- <code title=dom-canvas-toBlobHD><a href=#dom-canvas-toblobhd>toBlobHD()</a></code> method, and
- not otherwise. <a href=#refsFILEAPI>[FILEAPI]</a> </p>
+ <p>Otherwise, let <var title="">result</var> be a <code><a href=#blob>Blob</a></code> object representing <a href=#a-serialization-of-the-bitmap-as-a-file title="a serialization of the bitmap as a file">a serialization of the <code>canvas</code>
+ element's bitmap as a file</a>, using <var title="">arguments</var>, and with the <var title="">native</var> flag set if the method is the <code title=dom-canvas-toBlobHD><a href=#dom-canvas-toblobhd>toBlobHD()</a></code> method, and not otherwise. <a href=#refsFILEAPI>[FILEAPI]</a> </p>
</li>
- <li><p>Return, but continue running these steps
- asynchronously.</li>
+ <li><p>Return, but continue running these steps asynchronously.</li>
- <li><p>If <var title="">callback</var> is null, abort these
- steps.</li>
+ <li><p>If <var title="">callback</var> is null, abort these steps.</li>
- <li><p><a href=#queue-a-task>Queue a task</a> to invoke the
- <code><a href=#filecallback>FileCallback</a></code> <var title="">callback</var> with <var title="">result</var> as its argument. The <a href=#task-source>task source</a>
- for this task is the <dfn id=canvas-blob-serialization-task-source>canvas blob serialization task
- source</dfn>. <a href=#refsFILESYSTEMAPI>[FILESYSTEMAPI]</a></li>
+ <li><p><a href=#queue-a-task>Queue a task</a> to invoke the <code><a href=#filecallback>FileCallback</a></code> <var title="">callback</var> with <var title="">result</var> as its argument. The <a href=#task-source>task
+ source</a> for this task is the <dfn id=canvas-blob-serialization-task-source>canvas blob serialization task source</dfn>. <a href=#refsFILESYSTEMAPI>[FILESYSTEMAPI]</a></li>
- </ol><p>When a user agent is to create <dfn id=a-serialization-of-the-image-as-a-file>a serialization of the image
- as a file</dfn>, optionally with some given <var title="">arguments</var>, and optionally with a <var title="">native</var> flag set, it must create an image file in the
- format given by the first value of <var title="">arguments</var>,
- or, if there are no <var title="">arguments</var>, in the PNG
- format. <a href=#refsPNG>[PNG]</a></p>
+ </ol></div>
+ <!--REMOVE-TOPIC:DOM APIs-->
- <p>If the <var title="">native</var> flag is set, or if the canvas
- bitmap has one pixel per coordinate space unit, then the image file
- must have the same pixel data (before compression, if applicable) as
- the canvas bitmap, and if the file format used supports encoding
- resolution metadata, the resolution of the bitmap (device pixels per
- coordinate space units being interpreted as image pixels per CSS
- pixel) must be given as well.</p>
- <p>Otherwise, the image file's pixel data must be the canvas
- 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).</p>
+ <!--ADD-TOPIC:Workers-->
+ <h5 id=proxying-canvases-to-workers><span class=secno>4.8.11.1 </span>Proxying canvases to workers</h5>
- <p>If <var title="">arguments</var> is not empty, the first value
- must be interpreted as a <a href=#mime-type title="MIME type">MIME type</a>
- giving the format to use. If the type has any parameters, it must be
- treated as not supported.</p>
+ <p>Since DOM nodes cannot be accessed across worker boundaries, a proxy object is needed to enable
+ workers to render to <code><a href=#the-canvas-element>canvas</a></code> elements in <code><a href=#document>Document</a></code>s.</p>
- <p class=example>For example, the value "<code>image/png</code>"
- would mean to generate a PNG image, the value
- "<code>image/jpeg</code>" would mean to generate a JPEG image, and
- the value "<code>image/svg+xml</code>" would mean to generate an SVG
- image (which would probably require that the implementation actually
- keep enough information to reliably render an SVG image from the
- canvas).</p>
+ <pre class=idl>interface <dfn id=canvasproxy>CanvasProxy</dfn> {
+ void <a href=#dom-canvasproxy-setcontext title=dom-CanvasProxy-setContext>setContext</a>(<a href=#renderingcontext>RenderingContext</a> context);
+};
+<a href=#canvasproxy>CanvasProxy</a> implements <a href=#transferable>Transferable</a>;</pre>
- <p>User agents must support PNG ("<code>image/png</code>"). User
- agents may support other types. If the user agent does not support
- the requested type, it must create the file using the PNG format. <a href=#refsPNG>[PNG]</a></p>
+ <dl class=domintro><dt><var title="">canvasProxy</var> = <var title="">canvas</var> . <code title=dom-canvas-transferControlToProxy><a href=#dom-canvas-transfercontroltoproxy>transferControlToProxy</a></code>()</dt>
- <p>User agents must <a href=#converted-to-ascii-lowercase title="converted to ASCII
- lowercase">convert the provided type to ASCII lowercase</a>
- before establishing if they support that type.</p>
+ <dd>
- <p>For image types that do not support an alpha channel, the
- serialized image must be the canvas image composited onto a solid
- black background using the source-over operator.</p>
+ <p>Returns a <code><a href=#canvasproxy>CanvasProxy</a></code> object that can be used to transfer control for this
+ canvas over to another document (e.g. an <code><a href=#the-iframe-element>iframe</a></code> from another <a href=#origin>origin</a>)
+ or to a worker.</p>
- <p>If the first argument in <var title="">arguments</var> gives a
- type corresponding to one of the types given in the first column of
- the following table, and the user agent supports that type, then the
- subsequent arguments, if any, must be treated as described in the
- second cell of that row.</p>
+ <p>Throws an <code><a href=#invalidstateerror>InvalidStateError</a></code> exception if the <code title=dom-canvas-getContext><a href=#dom-canvas-getcontext>getContext()</a></code> or <code title=dom-canvas-setContext><a href=#dom-canvas-setcontext>setContext()</a></code> methods have been used.</p>
- </div>
+ </dd>
- <table><thead><tr><th> Type <th> Other arguments <th> Reference
- <tbody><tr><td> <code>image/jpeg</code>
- <td> The second argument<span class=impl>, if it</span> is a
- number in the range 0.0 to 1.0 inclusive<span class=impl>, must
- be</span> treated as the desired quality level. <span class=impl>If it is not a number or is outside that range, the
- user agent must use its default value, as if the argument had
- been omitted.</span>
- <td> <a href=#refsJPEG>[JPEG]</a>
- </table><div class=impl>
+ <dt><var title="">canvasProxy</var> . <code title=dom-CanvasProxy-setContext><a href=#dom-canvasproxy-setcontext>setContext</a></code>(<var title="">context</var>)</dt>
- <p>For the purposes of these rules, an argument is considered to be
- a number if it is converted to an IDL double value by the rules for
- handling arguments of type <code title="">any</code> in the Web IDL
- specification. <a href=#refsWEBIDL>[WEBIDL]</a></p>
+ <dd>
- <p>Other arguments must be ignored and must not cause the user agent
- to throw an exception. A future version of this specification will
- probably define other parameters to be passed to these methods to
- allow authors to more carefully control compression settings, image
- metadata, etc.</p>
+ <p>Sets the <code><a href=#canvasproxy>CanvasProxy</a></code> object's <code><a href=#the-canvas-element>canvas</a></code> element's rendering context to
+ the given object.</p>
- </div>
- <!--REMOVE-TOPIC:DOM APIs-->
+ <p>Throws an <code><a href=#invalidstateerror>InvalidStateError</a></code> exception if the <code><a href=#canvasproxy>CanvasProxy</a></code> has been
+ <a href=#transfer-a-transferable-object title="transfer a Transferable object">transfered</a>.</p>
+ </dd>
- <div data-component="HTML Canvas 2D Context (editor: Ian Hickson)">
+ </dl><hr><p>The <dfn id=dom-canvas-transfercontroltoproxy title=dom-canvas-transferControlToProxy><code>transferControlToProxy()</code></dfn>
+ method of the <code><a href=#the-canvas-element>canvas</a></code> element, when invoked, must run following the steps:</p>
- <h5 id=2dcontext><span class=secno>4.8.11.1 </span>The 2D context</h5>
+ <ol><li><p>If the <code><a href=#the-canvas-element>canvas</a></code> element's <a href=#concept-canvas-context-mode title=concept-canvas-context-mode>canvas
+ context mode</a> is not <a href=#concept-canvas-none title=concept-canvas-none>none</a>, throw an
+ <code><a href=#invalidstateerror>InvalidStateError</a></code> and abort these steps.</li>
- <!-- v2: we're on v5. suggestions for subsequent versions are marked v6, v7, v8. -->
+ <li><p>Set the <code><a href=#the-canvas-element>canvas</a></code> element's <a href=#concept-canvas-context-mode title=concept-canvas-context-mode>context
+ mode</a> to <a href=#concept-canvas-proxied title=concept-canvas-proxied>proxied</a>.</li>
- <p>This specification defines the <dfn id=canvas-context-2d title=canvas-context-2d><code>2d</code></dfn> context type, whose
- API is implemented using the <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code>
- interface.</p>
+ <li><p>Return a <code><a href=#canvasproxy>CanvasProxy</a></code> object bound to this <code><a href=#the-canvas-element>canvas</a></code>
+ element.</li>
- <div class=impl>
+ </ol><p>A <code><a href=#canvasproxy>CanvasProxy</a></code> object can be <a href=#concept-transferable-neutered title=concept-transferable-neutered>neutered</a> (like any <code><a href=#transferable>Transferable</a></code> object),
+ meaning it can no longer be <a href=#transfer-a-transferable-object title="transfer a Transferable object">transferred</a>, and
+ can be <dfn id=concept-canvasproxy-disabled title=concept-CanvasProxy-disabled>disabled</dfn>, meaning it can no longer be bound
+ to rendering contexts. When first created, a <code><a href=#canvasproxy>CanvasProxy</a></code> object must be neither.</p>
- <p>When the <code title=dom-canvas-getContext><a href=#dom-canvas-getcontext>getContext()</a></code>
- method of a <code><a href=#the-canvas-element>canvas</a></code> element is to <a href=#getcontext-return title=getContext-return>return a new object for the <var title="">contextId</var></a> <code title=canvas-context-2d><a href=#canvas-context-2d>2d</a></code>, the user agent must return a
- new <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> object. Any additional
- arguments are ignored.</p>
+ <p>A <code><a href=#canvasproxy>CanvasProxy</a></code> is created with a link to a <code><a href=#the-canvas-element>canvas</a></code> element. A
+ <code><a href=#canvasproxy>CanvasProxy</a></code> object that has not been <a href=#concept-canvasproxy-disabled title=concept-CanvasProxy-disabled>disabled</a> must have a strong reference to its canvas
+ element.</p>
+ <p>The <dfn id=dom-canvasproxy-setcontext title=dom-CanvasProxy-setContext><code>setContext(<var title="">context</var>)</code></dfn> method of <code><a href=#canvasproxy>CanvasProxy</a></code> objects, when invoked,
+ must run following the steps:</p>
+
+ <ol><li><p>If the <code><a href=#canvasproxy>CanvasProxy</a></code> object has been <a href=#concept-canvasproxy-disabled title=concept-CanvasProxy-disabled>disabled</a>, throw an <code><a href=#invalidstateerror>InvalidStateError</a></code> and
+ abort these steps.</li>
+
+ <li><p>If the <code><a href=#canvasproxy>CanvasProxy</a></code> object has not been <a href=#concept-transferable-neutered title=concept-transferable-neutered>neutered</a>, then <a href=#concept-transferable-neutered title=concept-transferable-neutered>neuter</a> it.</li>
+
+ <li><p>If <var title="">context</var>'s <a href=#concept-canvas-context-bitmap-mode title=concept-canvas-context-bitmap-mode>context
+ bitmap mode</a> is <a href=#concept-canvas-fixed title=concept-canvas-fixed>fixed</a>, then throw an
+ <code><a href=#invalidstateerror>InvalidStateError</a></code> and abort these steps.</li>
+
+ <li><p>If <var title="">context</var>'s <a href=#concept-canvas-context-bitmap-mode title=concept-canvas-context-bitmap-mode>context
+ bitmap mode</a> is <a href=#concept-canvas-bound title=concept-canvas-bound>bound</a>, then run <var title="">context</var>'s <a href=#concept-canvas-unbinding-steps title=concept-canvas-unbinding-steps>unbinding steps</a> and
+ set its <var title="">context</var>'s <a href=#concept-canvas-context-bitmap-mode title=concept-canvas-context-bitmap-mode>context
+ bitmap mode</a> to <a href=#concept-canvas-unbound title=concept-canvas-unbound>unbound</a>.</li>
+
+ <li><p>Run <var title="">context</var>'s <a href=#concept-canvas-binding-steps title=concept-canvas-binding-steps>binding
+ steps</a> to bind it to this <code><a href=#canvasproxy>CanvasProxy</a></code> object's <code><a href=#the-canvas-element>canvas</a></code>
+ element.</li>
+
+ <li><p>Set the <var title="">context</var>'s <a href=#concept-canvas-context-bitmap-mode title=concept-canvas-context-bitmap-mode>context bitmap mode</a> to <a href=#concept-canvas-bound title=concept-canvas-bound>bound</a>.</li>
+
+ </ol><p id=transferCanvasProxy>To <a href=#transfer-a-transferable-object title="transfer a Transferable object">transfer</a> a
+ <code><a href=#canvasproxy>CanvasProxy</a></code> object <var title="">old</var> to a new owner <var title="">owner</var>,
+ a user agent must create a new <code><a href=#canvasproxy>CanvasProxy</a></code> object linked to the same
+ <code><a href=#the-canvas-element>canvas</a></code> element as <var title="">old</var>, thus obtaining <var title="">new</var>,
+ must <a href=#concept-transferable-neutered title=concept-Transferable-neutered>neuter</a> and <a href=#concept-canvasproxy-disabled title=concept-CanvasProxy-disabled>disable</a> the <var title="">old</var> object, and must
+ finally return <var title="">new</var>.</p>
+
+ <div class=example>
+
+ <p>Here is a clock implemented on a worker. First, the main page:</p>
+
+ <pre><!DOCTYPE HTML>
+<title>Clock</title>
+<canvas></canvas> <!-- defaults to 300x150 -->
+<script>
+ var canvas = document.getElementsByTagName('canvas')[0];
+ var proxy = canvas.transferControlToProxy());
+ var worker = new Worker('clock.js');
+ worker.postMessage(proxy, [proxy]);
+</script></pre>
+
+ <p>Second, the worker:</p>
+
+ <pre>onmessage = function (event) {
+ var context = new CanvasRenderingContext2d();
+ event.data.setContext(context); // event.data is the CanvasProxy object
+ setInterval(function () {
+ context.clearRect(0, 0, context.width, context.height);
+ context.fillText(0, 100, new Date());
+ context.commit();
+ }, 1000);
+};</pre>
+
</div>
- <p>The 2D context represents a flat Cartesian surface whose origin
- (0,0) is at the top left corner, with the coordinate space having
- <var title="">x</var> values increasing when going right, and <var title="">y</var> values increasing when going down.</p>
+ <!--REMOVE-TOPIC:Workers-->
- <pre class=idl>interface <dfn id=canvasrenderingcontext2d>CanvasRenderingContext2D</dfn> {
+ <h5 id=2dcontext><span class=secno>4.8.11.2 </span>The 2D rendering context</h5>
+
+ <!-- v2: we're on v5. suggestions for subsequent versions are marked v6, v7, v8. -->
+
+ <pre class=idl>typedef (<a href=#htmlimageelement>HTMLImageElement</a> or
+ <a href=#htmlvideoelement>HTMLVideoElement</a> or
+ <a href=#htmlcanvaselement>HTMLCanvasElement</a> or
+ <a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a> or
+ <a href=#imagebitmap>ImageBitmap</a>) <dfn id=canvasimagesource>CanvasImageSource</dfn>;
+
+[<a href=#dom-context-2d title=dom-context-2d>Constructor</a>(optional unsigned long width, unsigned long height)]
+interface <dfn id=canvasrenderingcontext2d>CanvasRenderingContext2D</dfn> {
+
// back-reference to the canvas
readonly attribute <a href=#htmlcanvaselement>HTMLCanvasElement</a> <a href=#dom-context-2d-canvas title=dom-context-2d-canvas>canvas</a>;
+ // canvas dimensions
+ attribute unsigned long <a href=#dom-context-2d-width title=dom-context-2d-width>width</a>;
+ attribute unsigned long <a href=#dom-context-2d-height title=dom-context-2d-height>height</a>;
+
+ // for contexts that aren't directly <a href=#concept-canvas-fixed title=concept-canvas-fixed>fixed</a> to a specific canvas
+ void <a href=#dom-context-2d-commit title=dom-context-2d-commit>commit</a>(); // push the image to the <a href=#output-bitmap>output bitmap</a>
+
// state
void <a href=#dom-context-2d-save title=dom-context-2d-save>save</a>(); // push state on state stack
void <a href=#dom-context-2d-restore title=dom-context-2d-restore>restore</a>(); // pop state stack and restore state
@@ -36604,7 +36743,7 @@
attribute (DOMString or CanvasGradient or CanvasPattern) <a href=#dom-context-2d-fillstyle title=dom-context-2d-fillStyle>fillStyle</a>; // (default black)
<a href=#canvasgradient>CanvasGradient</a> <a href=#dom-context-2d-createlineargradient title=dom-context-2d-createLinearGradient>createLinearGradient</a>(double x0, double y0, double x1, double y1);
<a href=#canvasgradient>CanvasGradient</a> <a href=#dom-context-2d-createradialgradient title=dom-context-2d-createRadialGradient>createRadialGradient</a>(double x0, double y0, double r0, double x1, double y1, double r1);
- <a href=#canvaspattern>CanvasPattern</a> <a href=#dom-context-2d-createpattern title=dom-context-2d-createPattern>createPattern</a>((<a href=#htmlimageelement>HTMLImageElement</a> or <a href=#htmlcanvaselement>HTMLCanvasElement</a> or <a href=#htmlvideoelement>HTMLVideoElement</a>) image, DOMString repetition);
+ <a href=#canvaspattern>CanvasPattern</a> <a href=#dom-context-2d-createpattern title=dom-context-2d-createPattern>createPattern</a>(<a href=#canvasimagesource>CanvasImageSource</a> image, DOMString repetition);
<!--
// v8 we received one request from Ralf Richard G&oml;bel for a new kind of pattern: a hatch.
// basically it would be a series of dash styles, angles, line widths, and offsets
@@ -36646,9 +36785,9 @@
<a href=#textmetrics>TextMetrics</a> <a href=#dom-context-2d-measuretext title=dom-context-2d-measureText>measureText</a>(DOMString text);
// drawing images
- void <a href=#dom-context-2d-drawimage title=dom-context-2d-drawImage>drawImage</a>((<a href=#htmlimageelement>HTMLImageElement</a> or <a href=#htmlcanvaselement>HTMLCanvasElement</a> or <a href=#htmlvideoelement>HTMLVideoElement</a>) image, unrestricted double dx, unrestricted double dy);
- void <a href=#dom-context-2d-drawimage title=dom-context-2d-drawImage>drawImage</a>((<a href=#htmlimageelement>HTMLImageElement</a> or <a href=#htmlcanvaselement>HTMLCanvasElement</a> or <a href=#htmlvideoelement>HTMLVideoElement</a>) image, unrestricted double dx, unrestricted double dy, unrestricted double dw, unrestricted double dh);
- void <a href=#dom-context-2d-drawimage title=dom-context-2d-drawImage>drawImage</a>((<a href=#htmlimageelement>HTMLImageElement</a> or <a href=#htmlcanvaselement>HTMLCanvasElement</a> or <a href=#htmlvideoelement>HTMLVideoElement</a>) image, unrestricted double sx, unrestricted double sy, unrestricted double sw, unrestricted double sh, unrestricted double dx, unrestricted double dy, unrestricted double dw, unrestricted double dh);
+ void <a href=#dom-context-2d-drawimage title=dom-context-2d-drawImage>drawImage</a>(<a href=#canvasimagesource>CanvasImageSource</a> image, unrestricted double dx, unrestricted double dy);
+ void <a href=#dom-context-2d-drawimage title=dom-context-2d-drawImage>drawImage</a>(<a href=#canvasimagesource>CanvasImageSource</a> image, unrestricted double dx, unrestricted double dy, unrestricted double dw, unrestricted double dh);
+ void <a href=#dom-context-2d-drawimage title=dom-context-2d-drawImage>drawImage</a>(<a href=#canvasimagesource>CanvasImageSource</a> image, unrestricted double sx, unrestricted double sy, unrestricted double sw, unrestricted double sh, unrestricted double dx, unrestricted double dy, unrestricted double dw, unrestricted double dh);
// hit regions
void <a href=#dom-context-2d-addhitregion title=dom-context-2d-addHitRegion>addHitRegion</a>(<a href=#hitregionoptions>HitRegionOptions</a> options);
@@ -36685,6 +36824,7 @@
attribute DOMString <a href=#dom-context-2d-font title=dom-context-2d-font>font</a>; // (default 10px sans-serif)
attribute DOMString <a href=#dom-context-2d-textalign title=dom-context-2d-textAlign>textAlign</a>; // "start", "end", "left", "right", "center" (default: "start")
attribute DOMString <a href=#dom-context-2d-textbaseline title=dom-context-2d-textBaseline>textBaseline</a>; // "top", "hanging", "middle", "alphabetic", "ideographic", "bottom" (default: "alphabetic")
+ attribute DOMString <a href=#dom-context-2d-direction title=dom-context-2d-direction>direction</a>; // "ltr", "rtl"<!--, "auto"-->, "inherit" (default: "inherit")
};
[NoInterfaceObject]
@@ -36771,24 +36911,323 @@
methods, see https://bugzilla.mozilla.org/show_bug.cgi?id=623437
for an example, and its duplicates for more -->
- <dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-canvas><a href=#dom-context-2d-canvas>canvas</a></code></dt>
+ <dl class=domintro><dt><var title="">context</var> = <var title="">canvas</var> . <code title=dom-canvas-getContext><a href=#dom-canvas-getcontext>getContext</a></code>('2d')</dt>
<dd>
- <p>Returns the <code><a href=#the-canvas-element>canvas</a></code> element.</p>
+ <p>Returns a <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> object that is permanently bound to a particular <code><a href=#the-canvas-element>canvas</a></code> element.</p>
</dd>
+ <dt><var title="">context</var> = new <code title=dom-context-2d><a href=#dom-context-2d>CanvasRenderingContext2D</a></code>( [ <var title="">width</var>, <var title="">height</var> ] )</dt>
+
+ <dd>
+
+ <p>Returns an unbound <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> object with an implied bitmap with
+ the given dimensions in CSS pixels (300x150, if the arguments are omitted).</p>
+
+ </dd>
+
+ <dt><var title="">context</var> . <code title=dom-context-2d-canvas><a href=#dom-context-2d-canvas>canvas</a></code></dt>
+
+ <dd>
+
+ <p>Returns the <code><a href=#the-canvas-element>canvas</a></code> element, if the rendering context was obtained using the
+ <code title=dom-canvas-getContext><a href=#dom-canvas-getcontext>getContext()</a></code> method.</p>
+
+ </dd>
+
+ <dt><var title="">context</var> . <code title=dom-context-2d-width><a href=#dom-context-2d-width>width</a></code></dt>
+ <dt><var title="">context</var> . <code title=dom-context-2d-height><a href=#dom-context-2d-height>height</a></code></dt>
+
+ <dd>
+
+ <p>Return the dimensions of the bitmap, in CSS pixels.</p>
+
+ <p>Can be set, to update the bitmap's dimensions. If the rendering context is bound to a canvas,
+ this will also update the canvas' intrinsic dimensions.</p>
+
+ </dd>
+
+ <dt><var title="">context</var> . <code title=dom-context-2d-commit><a href=#dom-context-2d-commit>commit</a></code>()</dt>
+
+ <dd>
+
+ <p>If the rendering context is bound to a <code><a href=#the-canvas-element>canvas</a></code>, display the current frame.</p>
+
+ </dd>
+
</dl><div class=impl>
- <p>The <dfn id=dom-context-2d-canvas title=dom-context-2d-canvas><code>canvas</code></dfn>
- attribute must return the <code><a href=#the-canvas-element>canvas</a></code> element that the
- context paints on.</p>
+ <p>A <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> object can be obtained in two ways: the <code title=dom-canvas-getContext><a href=#dom-canvas-getcontext>getContext()</a></code> method on a <code><a href=#the-canvas-element>canvas</a></code> element (which
+ invokes the <a href=#2d-context-creation-algorithm>2D context creation algorithm</a>), and the <code title=dom-context-2d><a href=#dom-context-2d>CanvasRenderingContext2D()</a></code> constructor.</p>
- <p>Except where otherwise specified, for the 2D context interface,
- <strong>any method call with a numeric argument whose value is
- infinite or a NaN value must be ignored</strong>.</p>
+ <p>A <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> object has a <dfn id=scratch-bitmap>scratch bitmap</dfn> and can be bound
+ to an <dfn id=output-bitmap>output bitmap</dfn>. These are initialized when the object is created, and can be
+ subsequently adjusted when the rendering context is <a href=#concept-canvas-binding-steps title=concept-canvas-binding-steps>bound</a> or <a href=#concept-canvas-unbinding-steps title=concept-canvas-unbinding-steps>unbound</a>. In some cases, these bitmaps are the same
+ underlying bitmap. In general, the <a href=#scratch-bitmap>scratch bitmap</a> is what scripts interact with, and
+ the <a href=#output-bitmap>output bitmap</a> is what is being displayed. These bitmaps always have the same
+ dimensions.</p>
+<!--ADD-TOPIC:Security-->
+ <p>Each such bitmap has an <a href=#concept-canvas-origin-clean title=concept-canvas-origin-clean>origin-clean</a> flag,
+ which can be set to true or false. Initially, when one of these bitmaps is created, its <a href=#concept-canvas-origin-clean title=concept-canvas-origin-clean>origin-clean</a> flag must be set to true.</p>
+<!--REMOVE-TOPIC:Security-->
+
+ <p>These bitmaps also have a <a href=#hit-region-list>hit region list</a>, which is described in a later section.
+ Initially, this list is empty. <a href=#scratch-bitmap title="scratch bitmap">Scratch bitmaps</a> also have a
+ <dfn id=list-of-pending-interface-actions>list of pending interface actions</dfn>, which can contain instructions to draw the user's
+ attention to a location on the bitmap, and instructions to scroll to a location on the bitmap.
+ Initially, this list is also empty.</p>
+
+ <hr><p>The <dfn id=2d-context-creation-algorithm>2D context creation algorithm</dfn>, which is passed a <var title="">target</var> (a
+ <code><a href=#the-canvas-element>canvas</a></code> element), consists of running the following steps:</p>
+
+ <ol><li><p>Create a new <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> object.</li>
+
+ <li><p>Initialize its <code title=dom-context-2d-canvas><a href=#dom-context-2d-canvas>canvas</a></code> attribute to point to
+ <var title="">target</var>.</li>
+
+ <li><p>Let the new <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> object's <a href=#output-bitmap>output bitmap</a> and
+ <a href=#scratch-bitmap>scratch bitmap</a> both be the same bitmap as <var title="">target</var>'s bitmap (so
+ that they are shared).</li>
+
+ <li><p><a href=#concept-canvas-set-bitmap-dimensions title=concept-canvas-set-bitmap-dimensions>Set bitmap dimensions</a> to the
+ numeric values of <var title="">target</var>'s <code title=attr-canvas-width><a href=#attr-canvas-width>width</a></code> and
+ <code title=attr-canvas-height><a href=#attr-canvas-height>height</a></code> content attributes.</li>
+
+ <li><p>Return the new <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> object.</li>
+
+ </ol><hr><p>The <dfn id=dom-context-2d title=dom-context-2d><code>CanvasRenderingContext2D()</code></dfn> constructor, when
+ invoked, must run the following steps:</p>
+
+ <ol><li><p>Create a new <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> object.</li>
+
+ <li><p>Initialize its <code title=dom-context-2d-canvas><a href=#dom-context-2d-canvas>canvas</a></code> attribute to
+ null.</li>
+
+ <li><p>Let the new <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> object's <a href=#scratch-bitmap>scratch bitmap</a> be
+ a new bitmap.</li>
+
+ <li><p>If the constructor was called with arguments, let <var title="">width</var> and <var title="">height</var> be the first and second arguments, respectively. Otherwise, let <var title="">width</var> and <var title="">height</var> be 300 and 150, respectively.</li>
+
+ <li><p><a href=#concept-canvas-set-bitmap-dimensions title=concept-canvas-set-bitmap-dimensions>Set bitmap dimensions</a> to <var title="">width</var> and <var title="">height</var>.</li>
+
+ <li><p>Let the new <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> object have no <a href=#output-bitmap>output
+ bitmap</a>.</li>
+
+<!--
+ <li><p><span>Start autocommitting the scratch bitmap</span> for the new
+ <code>CanvasRenderingContext2D</code> object.</p></li>
+-->
+
+ <li><p>Return the new <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> object.</li>
+
+ </ol><hr><p>When the user agent is required to <dfn id=commit-the-scratch-bitmap>commit the scratch bitmap</dfn> for a rendering
+ context, it must run the following steps:
+
+ <ol><li><p>Let <var title="">bitmap copy</var> be a copy of the rendering context's <a href=#scratch-bitmap>scratch
+ bitmap</a>.</li>
+
+<!--ADD-TOPIC:Security-->
+ <li><p>Let <var title="">origin-clean flag copy</var> be a copy of the rendering context's
+ <a href=#scratch-bitmap>scratch bitmap</a>'s <a href=#concept-canvas-origin-clean title=concept-canvas-origin-clean>origin-clean</a>
+ flag.</li>
+<!--REMOVE-TOPIC:Security-->
+
+ <li><p>Let <var title="">hit region list copy</var> be a copy of the rendering context's
+ <a href=#scratch-bitmap>scratch bitmap</a>'s <a href=#hit-region-list>hit region list</a>.</li>
+
+ <li><p>Let <var title="">list of pending interface actions copy</var> be a copy of the rendering
+ context's <a href=#scratch-bitmap>scratch bitmap</a>'s <a href=#list-of-pending-interface-actions>list of pending interface actions</a>.</li>
+
+ <li><p>Empty the <a href=#scratch-bitmap>scratch bitmap</a>'s <a href=#list-of-pending-interface-actions>list of pending interface actions</a>.</li>
+
+ <li><p>If the rendering context has no <a href=#output-bitmap>output bitmap</a>, abort these steps.</li>
+
+ <li><p>Let <var title="">output bitmap</var> be the rendering context's <a href=#output-bitmap>output
+ bitmap</a>.</li>
+
+ <li>
+
+ <p><a href=#queue-a-task>Queue a task</a> from the <a href=#canvas-updating-task-source>canvas updating task source</a> of the
+ <a href=#output-bitmap>output bitmap</a>'s <code><a href=#the-canvas-element>canvas</a></code> element's <a href=#event-loop>event loop</a> to perform
+ the following substeps:</p>
+
+ <ol><li><p>Overwrite <var title="">output bitmap</var> with <var title="">bitmap
+ copy</var>.</li>
+
+<!--ADD-TOPIC:Security-->
+ <li><p>Overwrite <var title="">output bitmap</var>'s <a href=#concept-canvas-origin-clean title=concept-canvas-origin-clean>origin-clean</a> flag with <var title="">origin-clean
+ flag copy</var>.</li>
+<!--REMOVE-TOPIC:Security-->
+
+ <li><p>Overwrite <var title="">output bitmap</var>'s <a href=#hit-region-list>hit region list</a> with <var title="">hit region list copy</var>.</li>
+
+ <li><p>Follow the directions in the <var title="">list of pending interface actions
+ copy</var>.</li>
+
+ </ol></li>
+
+ </ol><p>The <dfn id=canvas-updating-task-source>canvas updating task source</dfn> is just used for the algorithm above.</p>
+
+<!--(right now we're requiring commit())
+ <p>When a user agent is to <dfn>start autocommitting the scratch bitmap</dfn> for a rendering
+ context, it must asynchronously start running the following algorithm. This algorithm interacts
+ closely with the <span>event loop</span> mechanism; in particular, it has a <span>synchronous
+ section</span> (which is triggered as part of the <span>event loop</span> algorithm). The steps in
+ that section are marked with ⌛.</p>
+
+ <ol>
+
+ <li><p><i>Top</i>: <span>Await a stable state</span>. The <span>synchronous section</span>
+ consists of the following steps. (The steps in the <span>synchronous section</span> are marked
+ with ⌛.)</p></li>
+
+ <li><p>⌛ <span>Commit the scratch bitmap</span> for the rendering context.</p></li>
+
+ <li><p>End the <span>synchronous section</span>, continuing the remaining steps
+ asynchronously.</p></li>
+
+ <li><p>Return to the step labeled <i>top</i>.</p></li>
+
+ </ol>
+-->
+
+ <p>The <dfn id=dom-context-2d-commit title=dom-context-2d-commit><code>commit()</code></dfn> method must run the
+ following steps:</p>
+
+ <ol><li><p>If the rendering context's <a href=#concept-canvas-context-bitmap-mode title=concept-canvas-context-bitmap-mode>context bitmap
+ mode</a> is <a href=#concept-canvas-bound title=concept-canvas-bound>fixed</a>, throw an
+ <code><a href=#invalidstateerror>InvalidStateError</a></code> exception and abort these steps.</li>
+
+ <li><p><a href=#commit-the-scratch-bitmap>Commit the scratch bitmap</a> for the rendering context.</li>
+
+ </ol><p class=note>The <a href=#scratch-bitmap>scratch bitmap</a> is only <a href=#commit-the-scratch-bitmap title="commit the scratch
+ bitmap">committed</a> when the <code title=dom-context-2d-commit><a href=#dom-context-2d-commit>commit()</a></code> method is
+ called. (This doesn't matter for <code><a href=#the-canvas-element>canvas</a></code> elements in <a href=#concept-canvas-direct-2d title=concept-canvas-direct-2d>direct-2d</a> mode, since there the <a href=#scratch-bitmap>scratch
+ bitmap</a> is also the <code><a href=#the-canvas-element>canvas</a></code> element's bitmap so every drawing operation is
+ immediately drawn.)</p>
+
+ <hr><p>When the user agent is to <dfn id=concept-canvas-set-bitmap-dimensions title=concept-canvas-set-bitmap-dimensions>set bitmap
+ dimensions</dfn> to <var title="">width</var> and <var title="">height</var>, it must run the
+ following steps:</p>
+
+ <ol><li><p><a href=#reset-the-rendering-context-to-its-default-state>Reset the rendering context to its default state</a>.</li>
+
+ <li><p>Clear the <a href=#scratch-bitmap>scratch bitmap</a>'s <a href=#hit-region-list>hit region list</a> and its <a href=#list-of-pending-interface-actions>list of
+ pending interface actions</a>.</li>
+
+ <li><p>Resize the <a href=#scratch-bitmap>scratch bitmap</a> to the new <var title="">width</var> and <var title="">height</var> and clear it to fully transparent black.</li>
+
+ <li><p>If the rendering context has an <a href=#output-bitmap>output bitmap</a>, and the <a href=#scratch-bitmap>scratch
+ bitmap</a> is a different bitmap than the <a href=#output-bitmap>output bitmap</a>, then resize the
+ <a href=#output-bitmap>output bitmap</a> to the new <var title="">width</var> and <var title="">height</var>
+ and clear it to fully transparent black.</li>
+
+ <li>
+
+ <p>If the rendering context's <a href=#concept-canvas-context-bitmap-mode title=concept-canvas-context-bitmap-mode>context bitmap
+ mode</a> is <a href=#concept-canvas-fixed title=concept-canvas-fixed>fixed</a>, then run these substeps:</p>
+
+ <ol><li><p>Let <var title="">canvas</var> be the <code><a href=#the-canvas-element>canvas</a></code> element to which the rendering
+ context's <code title=dom-context-2d-canvas><a href=#dom-context-2d-canvas>canvas</a></code> attribute was initialized.</li>
+
+ <li><p>If the rendering context's <a href=#concept-canvas-context-bitmap-mode title=concept-canvas-context-bitmap-mode>context
+ bitmap mode</a> is <a href=#concept-canvas-fixed title=concept-canvas-fixed>fixed</a> and the numeric value of
+ the <var title="">canvas</var>' <code title=attr-canvas-width><a href=#attr-canvas-width>width</a></code> content attribute
+ differs from <var title="">width</var>, then set <var title="">canvas</var>' <code title=attr-canvas-width><a href=#attr-canvas-width>width</a></code> content attribute to the shortest possible string
+ representing <var title="">width</var> as a <a href=#valid-non-negative-integer>valid non-negative integer</a>.</li>
+
+ <li><p>If the rendering context's <a href=#concept-canvas-context-bitmap-mode title=concept-canvas-context-bitmap-mode>context
+ bitmap mode</a> is <a href=#concept-canvas-fixed title=concept-canvas-fixed>fixed</a> and the numeric value of
+ the <var title="">canvas</var>' <code title=attr-canvas-height><a href=#attr-canvas-height>height</a></code> content attribute
+ differs from <var title="">height</var>, then set <var title="">canvas</var>' <code title=attr-canvas-height><a href=#attr-canvas-height>height</a></code> content attribute to the shortest possible string
+ representing <var title="">height</var> as a <a href=#valid-non-negative-integer>valid non-negative integer</a>.</li>
+
+ </ol></li>
+
+ </ol><div class=example>
+ <p>Only one square appears to be drawn in the following example:</p>
+ <pre>// canvas is a reference to a <canvas> element
+var context = canvas.getContext('2d');
+context.fillRect(0,0,50,50);
+canvas.setAttribute('width', '300'); // clears the canvas
+context.fillRect(0,100,50,50);
+canvas.width = canvas.width; // clears the canvas
+context.fillRect(100,0,50,50); // only this square remains</pre>
+ </div>
+
+ <hr><p>When the user agent is to run the <dfn id=concept-canvas-unbinding-steps title=concept-canvas-unbinding-steps>unbinding
+ steps</dfn> for a rendering context, it must run the following steps:</p>
+
+ <ol><li><p><a href=#reset-the-rendering-context-to-its-default-state>Reset the rendering context to its default state</a>.</li>
+
+ <li><p>Clear the <a href=#scratch-bitmap>scratch bitmap</a>'s <a href=#hit-region-list>hit region list</a> and its <a href=#list-of-pending-interface-actions>list of
+ pending interface actions</a>.</li>
+
+ <li><p>Clear the <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> object's <a href=#scratch-bitmap>scratch bitmap</a> to a
+ transparent black.</li>
+
+<!--ADD-TOPIC:Security-->
+ <li><p>Set the <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> object's <a href=#scratch-bitmap>scratch bitmap</a>'s <a href=#concept-canvas-origin-clean title=concept-canvas-origin-clean>origin-clean</a> flag to true.</li>
+<!--REMOVE-TOPIC:Security-->
+
+ <li><p>Let the <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> object have no <a href=#output-bitmap>output
+ bitmap</a>.</li>
+
+ </ol><p>When the user agent is to run the <dfn id=concept-canvas-binding-steps title=concept-canvas-binding-steps>binding steps</dfn>
+ to bind the rendering context to the <code><a href=#the-canvas-element>canvas</a></code> element <var title="">target</var>, it
+ must run the following steps:</p>
+
+ <ol><li><p><a href=#reset-the-rendering-context-to-its-default-state>Reset the rendering context to its default state</a>.</li>
+
+ <li><p>Clear the <a href=#scratch-bitmap>scratch bitmap</a>'s <a href=#hit-region-list>hit region list</a> and its <a href=#list-of-pending-interface-actions>list of
+ pending interface actions</a>.</li>
+
+ <li><p>Resize the <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> object's <a href=#scratch-bitmap>scratch bitmap</a> to
+ the dimensions of <var title="">target</var>'s bitmap and clear it to fully transparent
+ black.</li>
+
+<!--ADD-TOPIC:Security-->
+ <li><p>Set the <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> object's <a href=#scratch-bitmap>scratch bitmap</a>'s <a href=#concept-canvas-origin-clean title=concept-canvas-origin-clean>origin-clean</a> flag to true.</li>
+<!--REMOVE-TOPIC:Security-->
+
+ <li><p>Let the <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> object's <a href=#output-bitmap>output bitmap</a> be <var title="">target</var>'s bitmap.</li>
+
+ </ol><hr><p>The <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> 2D rendering context represents a flat linear
+ Cartesian surface whose origin (0,0) is at the top left corner, with the coordinate space having
+ <var title="">x</var> values increasing when going right, and <var title="">y</var> values
+ increasing when going down. The <var title="">x</var>-coordinate of the left-most edge is equal to
+ the width of the rendering context's <a href=#scratch-bitmap>scratch bitmap</a> in CSS pixels; similarly, the
+ <var title="">y</var>-coordinate of the bottom-most edge is equal to the height of the rendering
+ context's <a href=#scratch-bitmap>scratch bitmap</a> in CSS pixels.</p>
+
+ <p>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 two device pixels per unit in the
+ coordinate space, so that the rendering remains at high quality throughout. Anti-aliasing can
+ similarly be implemented using over-sampling with bitmaps of a higher resolution than the final
+ image on the display.</p>
+
+ <hr><p>The <dfn id=dom-context-2d-canvas title=dom-context-2d-canvas><code>canvas</code></dfn> attribute must return the
+ value it was initialized to when the object was created.</p>
+
+ <p>The <dfn id=dom-context-2d-width title=dom-context-2d-width><code>width</code></dfn> attribute, on getting, must
+ return the width of the rendering context's <a href=#scratch-bitmap>scratch bitmap</a>, in CSS pixels. On
+ setting, it must <a href=#concept-canvas-set-bitmap-dimensions title=concept-canvas-set-bitmap-dimensions>set bitmap dimensions</a>
+ to the new value and the current height of the rendering context's <a href=#scratch-bitmap>scratch bitmap</a> in
+ CSS pixels, respectively.</p>
+
+ <p>The <dfn id=dom-context-2d-height title=dom-context-2d-height><code>height</code></dfn> attribute, on getting, must
+ return the height of the rendering context's <a href=#scratch-bitmap>scratch bitmap</a>, in CSS pixels. On
+ setting, it must <a href=#concept-canvas-set-bitmap-dimensions title=concept-canvas-set-bitmap-dimensions>set bitmap dimensions</a>
+ to the current width of the rendering context's <a href=#scratch-bitmap>scratch bitmap</a> in CSS pixels and the
+ new value, respectively.</p>
+
+ <hr><p>Except where otherwise specified, for the 2D context interface, <strong>any method call with a
+ numeric argument whose value is infinite or a NaN value must be ignored</strong>.</p>
+
<!--
Philip Taylor wrote:
> My experience with some 3d canvas code is that infinities come up in
@@ -36801,94 +37240,84 @@
> exceptions when passing in non-finite arguments.
-->
- <p>Whenever the CSS value <code title="">currentColor</code> is used
- as a color in this API, the "computed value of the 'color' property"
- for the purposes of determining the computed value of the <code title="">currentColor</code> keyword is the computed value of the
- 'color' property on the element in question at the time that the
- color is specified (e.g. when the appropriate attribute is set, or
- when the method is called; not when the color is rendered or
- otherwise used). If the computed value of the 'color' property is
- undefined for a particular case (e.g. because the element is not
- <a href=#in-a-document>in a <code>Document</code></a>), then the "computed value
- of the 'color' property" for the purposes of determining the
- computed value of the <code title="">currentColor</code> keyword is
- fully opaque black. <a href=#refsCSSCOLOR>[CSSCOLOR]</a></p>
+ <p>Whenever the CSS value <code title="">currentColor</code> is used as a color in the
+ <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> API, the "computed value of the 'color' property" for the
+ purposes of determining the computed value of the <code title="">currentColor</code> keyword is
+ the value described by the appropriate entry in the following list:</p>
- <p>In the case of <code title=dom-canvasgradient-addColorStop><a href=#dom-canvasgradient-addcolorstop>addColorStop()</a></code> on
- <code><a href=#canvasgradient>CanvasGradient</a></code>, the "computed value of the 'color'
- property" for the purposes of determining the computed value of the
- <code title="">currentColor</code> keyword is always fully opaque
- black (there is no associated element). <a href=#refsCSSCOLOR>[CSSCOLOR]</a></p>
+ <dl><dt>If the rendering context's <a href=#concept-canvas-context-bitmap-mode title=concept-canvas-context-bitmap-mode>context bitmap
+ mode</a> is <a href=#concept-canvas-fixed title=concept-canvas-fixed>fixed</a> and the <code><a href=#the-canvas-element>canvas</a></code>
+ element is <a href=#being-rendered>being rendered</a></dt>
- <p class=note>This is because <code><a href=#canvasgradient>CanvasGradient</a></code> objects
- are <code><a href=#the-canvas-element>canvas</a></code>-neutral — a
- <code><a href=#canvasgradient>CanvasGradient</a></code> object created by one
- <code><a href=#the-canvas-element>canvas</a></code> 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>
+ <dd><p>The "computed value of the 'color' property" for the purposes of determining the computed
+ value of the <code title="">currentColor</code> keyword is the computed value of the 'color'
+ property on the <code><a href=#the-canvas-element>canvas</a></code> element at the time that the color is specified (e.g. when
+ the appropriate attribute is set, or when the method is called; not when the color is rendered or
+ otherwise used). <a href=#refsCSSCOLOR>[CSSCOLOR]</a></dd>
- <p class=note>Similar concerns exist with font-related properties;
- the rules for those are described in detail in the relevant section
- below.</p>
+ <dt>In all other cases</dt>
- </div>
+ <dd><p>The "computed value of the 'color' property" for the purposes of determining the computed
+ value of the <code title="">currentColor</code> keyword is fully opaque black. <a href=#refsCSSCOLOR>[CSSCOLOR]</a></dd>
+ </dl><p>In the case of <code title=dom-canvasgradient-addColorStop><a href=#dom-canvasgradient-addcolorstop>addColorStop()</a></code> on
+ <code><a href=#canvasgradient>CanvasGradient</a></code>, the "computed value of the 'color' property" for the purposes of
+ determining the computed value of the <code title="">currentColor</code> keyword is always fully
+ opaque black (there is no associated element). <a href=#refsCSSCOLOR>[CSSCOLOR]</a></p>
- <h6 id=resolution><span class=secno>4.8.11.1.1 </span>Resolution</h6>
+ <p class=note>This is because <code><a href=#canvasgradient>CanvasGradient</a></code> objects are
+ <code><a href=#the-canvas-element>canvas</a></code>-neutral — a <code><a href=#canvasgradient>CanvasGradient</a></code> object created by one
+ <code><a href=#the-canvas-element>canvas</a></code> 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>
- <p>The user agent may use a bitmap of any square resolution as the
- backing store for a canvas that uses the 2D context. Once a canvas
- has a bitmap, that canvas must keep its resolution for its
- lifetime.</p>
+ <p class=note>Similar concerns exist with font-related properties; the rules for those are
+ described in detail in the relevant section below.</p>
- <p class=note>In general, user agents are encouraged to use a
- resolution equal to the screen resolution. Ideally, the number of
- device pixels per CSS pixel would be a multiple of two. Several
- factors can affect the screen resolution: most prominently the
- actual display resolution, but also important is the current zoom
- level.</p>
+ </div>
- <p>All the bitmaps created during a single <a href=#concept-task title=concept-task>task</a> for canvases that use 2D contexts
- must have the same resolution.
- <a class=fingerprint href=#fingerprint><img alt="(This is a fingerprinting vector.)" src=http://images.whatwg.org/fingerprint.png></a>
- </p>
- <pre class=idl>partial interface <a href=#screen>Screen</a> {
- readonly attribute double <a href=#dom-screen-canvasresolution title=dom-screen-canvasResolution>canvasResolution</a>;
-};</pre>
+ <h6 id=implementation-notes><span class=secno>4.8.11.2.1 </span>Implementation notes</h6>
- <dl class=domintro><dt><var title="">window</var> . <code title=dom-Window-screen>screen</code> . <code title=dom-screen-canvasResolution><a href=#dom-screen-canvasresolution>canvasResolution</a></code></dt>
+ <p><i>This section is non-normative.</i></p>
- <dd>
+ <p>Although the way the specification is written it might sound like an implementation needs to
+ track up to four bitmaps per canvas or rendering context — one <a href=#scratch-bitmap>scratch bitmap</a>,
+ one <a href=#output-bitmap>output bitmap</a> for the rendering context, one bitmap for the <code><a href=#the-canvas-element>canvas</a></code>,
+ and one bitmap for the actually currently rendered image — user agents can in fact generally
+ optimise this to only one or two.</p>
- <p>Returns the resolution that has been, or will be, used for bitmaps during this <a href=#concept-task title=concept-task>task</a>.</p>
+ <p>The <a href=#scratch-bitmap>scratch bitmap</a>, when it isn't the same bitmap as the <a href=#output-bitmap>output
+ bitmap</a>, is only directly observable if it is read, and therefore 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 <code title=dom-context-2d-commit><a href=#dom-context-2d-commit>commit()</a></code>, <code title=dom-context-2d-drawImage><a href=#dom-context-2d-drawimage>drawImage()</a></code>, or the <code>ImageBitmap()</code>
+ constructor). In many cases, this will be more memory efficient.</p>
- </dd>
+ <p>The bitmap of a <code><a href=#the-canvas-element>canvas</a></code> element is the one bitmap that's pretty much always going
+ to be needed in practice. The <a href=#output-bitmap>output bitmap</a> of a rendering context, when it has one,
+ is always just an alias to a <code><a href=#the-canvas-element>canvas</a></code> element's bitmap.</p>
- </dl><div class=impl>
+ <p>Additional bitmaps are sometimes needed, e.g. to enable fast drawing when the canvas is being
+ painted at a different size than its intrinsic size, or to enable double buffering so that the
+ rendering commands from the <a href=#scratch-bitmap>scratch bitmap</a> can be applied without the rendering being
+ updated midway.</p>
- <p>The <dfn id=dom-screen-canvasresolution title=dom-screen-canvasResolution><code>canvasResolution</code></dfn>
- attribute of the <code><a href=#screen>Screen</a></code> object must return the
- resolution, in image pixels per coordinate space units, that any
- canvas bitmaps created during this <a href=#concept-task title=concept-task>task</a> will use (or have used). <a href=#refsCSSOMVIEW>[CSSOMVIEW]</a></p>
- </div>
+ <h6 id=the-canvas-state><span class=secno>4.8.11.2.2 </span>The canvas state</h6>
- <h6 id=the-canvas-state><span class=secno>4.8.11.1.2 </span>The canvas state</h6>
+ <p>Each <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> rendering context maintains a stack of drawing
+ states. <dfn id=drawing-state title="drawing state">Drawing states</dfn> consist of:</p>
- <p>Each context maintains a stack of drawing states. <dfn id=drawing-state title="drawing state">Drawing states</dfn> consist of:</p>
-
<ul class=brief><li>The current <a href=#transformations title=dom-context-2d-transformation>transformation matrix</a>.</li>
<li>The current <a href=#clipping-region>clipping region</a>.</li>
- <li>The current values of the following attributes: <code title=dom-context-2d-strokeStyle><a href=#dom-context-2d-strokestyle>strokeStyle</a></code>, <code title=dom-context-2d-fillStyle><a href=#dom-context-2d-fillstyle>fillStyle</a></code>, <code title=dom-context-2d-globalAlpha><a href=#dom-context-2d-globalalpha>globalAlpha</a></code>, <code title=dom-context-2d-lineWidth><a href=#dom-context-2d-linewidth>lineWidth</a></code>, <code title=dom-context-2d-lineCap><a href=#dom-context-2d-linecap>lineCap</a></code>, <code title=dom-context-2d-lineJoin><a href=#dom-context-2d-linejoin>lineJoin</a></code>, <code title=dom-context-2d-miterLimit><a href=#dom-context-2d-miterlimit>miterLimit</a></code>, <code title=dom-context-2d-lineDashOffset><a href=#dom-context-2d-linedashoffset>lineDashOffset</a></code>, <code title=dom-context-2d-shadowOffsetX><a href=#dom-context-2d-shadowoffsetx>shadowOffsetX</a></code>, <code title=dom-context-2d-shadowOffsetY><a href=#dom-context-2d
-shadowoffsety>shadowOffsetY</a></code>, <code title=dom-context-2d-shadowBlur><a href=#dom-context-2d-shadowblur>shadowBlur</a></code>, <code title=dom-context-2d-shadowColor><a href=#dom-context-2d-shadowcolor>shadowColor</a></code>, <code title=dom-context-2d-globalCompositeOperation><a href=#dom-context-2d-globalcompositeoperation>globalCompositeOperation</a></code>, <code title=dom-context-2d-font><a href=#dom-context-2d-font>font</a></code>, <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code>, <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code>, <code title=dom-context-2d-imageSmoothingEnabled><a href=#dom-context-2d-imagesmoothingenabled>imageSmoothingEnabled</a></code>.</li>
+ <li>The current values of the following attributes: <code title=dom-context-2d-strokeStyle><a href=#dom-context-2d-strokestyle>strokeStyle</a></code>, <code title=dom-context-2d-fillStyle><a href=#dom-context-2d-fillstyle>fillStyle</a></code>, <code title=dom-context-2d-globalAlpha><a href=#dom-context-2d-globalalpha>globalAlpha</a></code>, <code title=dom-context-2d-lineWidth><a href=#dom-context-2d-linewidth>lineWidth</a></code>, <code title=dom-context-2d-lineCap><a href=#dom-context-2d-linecap>lineCap</a></code>, <code title=dom-context-2d-lineJoin><a href=#dom-context-2d-linejoin>lineJoin</a></code>, <code title=dom-context-2d-miterLimit><a href=#dom-context-2d-miterlimit>miterLimit</a></code>, <code title=dom-context-2d-lineDashOffset><a href=#dom-context-2d-linedashoffset>lineDashOffset</a></code>, <code title=dom-context-2d-shadowOffsetX><a href=#dom-context-2d-shadowoffsetx>shadowOffsetX</a></code>, <code title=dom-context-2d-shadowOffsetY><a href=#dom-context-2d
-shadowoffsety>shadowOffsetY</a></code>, <code title=dom-context-2d-shadowBlur><a href=#dom-context-2d-shadowblur>shadowBlur</a></code>, <code title=dom-context-2d-shadowColor><a href=#dom-context-2d-shadowcolor>shadowColor</a></code>, <code title=dom-context-2d-globalCompositeOperation><a href=#dom-context-2d-globalcompositeoperation>globalCompositeOperation</a></code>, <code title=dom-context-2d-font><a href=#dom-context-2d-font>font</a></code>, <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code>, <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code>, <code title=dom-context-2d-direction><a href=#dom-context-2d-direction>direction</a></code>, <code title=dom-context-2d-imageSmoothingEnabled><a href=#dom-context-2d-imagesmoothingenabled>imageSmoothingEnabled</a></code>.</li>
<li>The current <a href=#dash-list>dash list</a>.</li>
- </ul><p class=note>The <a href=#current-default-path>current default path</a> and the
- current bitmap are not part of the drawing state. The <a href=#current-default-path>current
- default path</a> is persistent, and can only be reset using the
- <code title=dom-context-2d-beginPath><a href=#dom-context-2d-beginpath>beginPath()</a></code> method.
- The current bitmap is a property of the canvas, not the context.</p>
+ </ul><p class=note>The <a href=#current-default-path>current default path</a> and the rendering context's bitmaps are not
+ part of the drawing state. The <a href=#current-default-path>current default path</a> is persistent, and can only be
+ reset using the <code title=dom-context-2d-beginPath><a href=#dom-context-2d-beginpath>beginPath()</a></code> method. The bitmaps
+ depend on whether and how the rendering context is bound to a <code><a href=#the-canvas-element>canvas</a></code> element.</p>
<dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-save><a href=#dom-context-2d-save>save</a></code>()</dt>
@@ -36908,15 +37337,17 @@
</dl><div class=impl>
- <p>The <dfn id=dom-context-2d-save title=dom-context-2d-save><code>save()</code></dfn>
- method must push a copy of the current drawing state onto the
- drawing state stack.</p>
+ <p>The <dfn id=dom-context-2d-save title=dom-context-2d-save><code>save()</code></dfn> method must push a copy of the
+ current drawing state onto the drawing state stack.</p>
- <p>The <dfn id=dom-context-2d-restore title=dom-context-2d-restore><code>restore()</code></dfn> method
- must pop the top entry in the drawing state stack, and reset the
- drawing state it describes. If there is no saved state, the method
- must do nothing.</p>
+ <p>The <dfn id=dom-context-2d-restore title=dom-context-2d-restore><code>restore()</code></dfn> method must pop the top
+ entry in the drawing state stack, and reset the drawing state it describes. If there is no saved
+ state, the method must do nothing.</p>
+ <p>When the user agent is to <dfn id=reset-the-rendering-context-to-its-default-state>reset the rendering context to its default state</dfn>, it must
+ clear the drawing state stack and everything that <a href=#drawing-state>drawing state</a> consists of to
+ initial values.</p>
+
<!-- v7
idea from Mihai:
> 5. Drawing states should be saveable with IDs, and for easier restoring.
@@ -36938,7 +37369,7 @@
</div>
- <h6 id=drawingstyle-objects><span class=secno>4.8.11.1.3 </span><code><a href=#drawingstyle>DrawingStyle</a></code> objects</h6>
+ <h6 id=drawingstyle-objects><span class=secno>4.8.11.2.3 </span><code><a href=#drawingstyle>DrawingStyle</a></code> objects</h6>
<p>All the line styles (line width, caps, joins, and dash patterns)
and text styles (fonts) described in the next two sections apply to
@@ -36960,23 +37391,22 @@
</dl><div class=impl>
- <p>Each <code><a href=#drawingstyle>DrawingStyle</a></code> object has a <dfn id=styles-scope-node>styles scope
- node</dfn>.</p>
+ <p>Each <code><a href=#drawingstyle>DrawingStyle</a></code> object can have a <dfn id=styles-scope-object>styles scope object</dfn>.</p>
- <p>The <dfn id=dom-drawingstyle title=dom-DrawingStyle><code>DrawingStyle()</code></dfn>
- constructor, when invoked, must return a newly created
- <code><a href=#drawingstyle>DrawingStyle</a></code> object. If the constructor was passed an
- argument, then the <code><a href=#drawingstyle>DrawingStyle</a></code> object's <a href=#styles-scope-node>styles
- scope node</a> is that element. Otherwise, the object's
- <a href=#styles-scope-node>styles scope node</a> is the <code><a href=#document>Document</a></code> object
- of the <a href=#active-document>active document</a> of the <a href=#browsing-context>browsing
- context</a> of the <code><a href=#window>Window</a></code> object on which the
- interface object of the invoked constructor is found.</p>
+ <p>The <dfn id=dom-drawingstyle title=dom-DrawingStyle><code>DrawingStyle()</code></dfn> constructor, when invoked,
+ must return a newly created <code><a href=#drawingstyle>DrawingStyle</a></code> object. If the constructor was passed an
+ argument, then the <code><a href=#drawingstyle>DrawingStyle</a></code> object's <a href=#styles-scope-object>styles scope object</a> is that
+ element. Otherwise, if the <a href=#javascript-global-environment>JavaScript global environment</a> is a <a href=#document-environment>document
+ environment</a>, the object's <a href=#styles-scope-object>styles scope object</a> is the <code><a href=#document>Document</a></code>
+ object of the <a href=#active-document>active document</a> of the <a href=#browsing-context>browsing context</a> of the
+ <code><a href=#window>Window</a></code> object on which the interface object of the invoked constructor is found.
+ Otherwise, the <a href=#javascript-global-environment>JavaScript global environment</a> is a <a href=#worker-environment>worker environment</a>,
+ and the <a href=#styles-scope-object>styles scope object</a> is the worker.</p>
</div>
- <h6 id=line-styles><span class=secno>4.8.11.1.4 </span>Line styles</h6>
+ <h6 id=line-styles><span class=secno>4.8.11.2.4 </span>Line styles</h6>
<dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-lineWidth><a href=#dom-context-2d-linewidth>lineWidth</a></code> [ = <var title="">value</var> ]</dt>
<dt><var title="">styles</var> . <code title=dom-context-2d-lineWidth><a href=#dom-context-2d-linewidth>lineWidth</a></code> [ = <var title="">value</var> ]</dt>
@@ -37458,7 +37888,7 @@
hairline width with transform. ack Shaun Morris. --></div>
- <h6 id=text-styles><span class=secno>4.8.11.1.5 </span>Text styles</h6>
+ <h6 id=text-styles><span class=secno>4.8.11.2.5 </span>Text styles</h6>
<dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-font><a href=#dom-context-2d-font>font</a></code> [ = <var title="">value</var> ]</dt>
<dt><var title="">styles</var> . <code title=dom-context-2d-font><a href=#dom-context-2d-font>font</a></code> [ = <var title="">value</var> ]</dt>
@@ -37483,9 +37913,8 @@
<p>Returns the current text alignment settings.</p>
- <p>Can be set, to change the alignment. The possible values are
- <code title="">start</code>, <code title="">end</code>, <code title="">left</code>, <code title="">right</code>, and <code title="">center</code>. Other values are ignored. The default is
- <code title="">start</code>.</p>
+ <p>Can be set, to change the alignment. The possible values are and their meanings are given
+ below. Other values are ignored. The default is <code title="">start</code>.</p>
</dd>
@@ -37496,21 +37925,37 @@
<p>Returns the current baseline alignment settings.</p>
- <p>Can be set, to change the baseline alignment. The possible
- values and their meanings are given below. Other values are
- ignored. The default is <code title="">alphabetic</code>.</p>
+ <p>Can be set, to change the baseline alignment. The possible values and their meanings are
+ given below. Other values are ignored. The default is <code title=dom-concept-2d-textAlign-alphabetic>alphabetic</code>.</p>
</dd>
+ <dt><var title="">context</var> . <code title=dom-context-2d-direction><a href=#dom-context-2d-direction>direction</a></code> [ = <var title="">value</var> ]</dt>
+ <dt><var title="">styles</var> . <code title=dom-context-2d-direction><a href=#dom-context-2d-direction>direction</a></code> [ = <var title="">value</var> ]</dt>
+
+ <dd>
+
+ <p>Returns the current directionality.</p>
+
+ <p>Can be set, to change the directionality. The possible values and their meanings are given
+ below. Other values are ignored. The default is <code title=dom-concept-2d-textAlign-inherit>inherit</code>.</p>
+
+ </dd>
+
</dl><div class=impl>
- <p>Objects that implement the <code><a href=#canvasdrawingstyles>CanvasDrawingStyles</a></code>
- interface have attributes (defined in this section) that control how
- text is laid out (rasterized or outlined) by the object. Such
- objects also have a <dfn id=font-style-source-node>font style source node</dfn>. For
- <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> objects, this is the
- <code><a href=#the-canvas-element>canvas</a></code> element. For <code><a href=#drawingstyle>DrawingStyle</a></code> objects,
- it's the <a href=#styles-scope-node>styles scope node</a>.</p>
+ <p>Objects that implement the <code><a href=#canvasdrawingstyles>CanvasDrawingStyles</a></code> 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 <dfn id=font-style-source-object>font style source object</dfn>. For
+ <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> objects whose <a href=#concept-canvas-context-bitmap-mode title=concept-canvas-context-bitmap-mode>context bitmap mode</a> is <a href=#concept-canvas-fixed title=concept-canvas-fixed>fixed</a>, this is their <code><a href=#the-canvas-element>canvas</a></code> element; for other
+ <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> objects, if the <a href=#javascript-global-environment>JavaScript global environment</a>
+ is a <a href=#document-environment>document environment</a>, the object's <a href=#font-style-source-object>font style source object</a> is the
+ <code><a href=#document>Document</a></code> object of the <a href=#active-document>active document</a> of the <a href=#browsing-context>browsing
+ context</a> of the <code><a href=#window>Window</a></code> object on which the interface object of the
+ <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> object is found; otherwise the <a href=#javascript-global-environment>JavaScript global
+ environment</a> is a <a href=#worker-environment>worker environment</a> and the <a href=#font-style-source-object>font style source
+ object</a> is the worker. For <code><a href=#drawingstyle>DrawingStyle</a></code> objects, it's the <a href=#styles-scope-object>styles scope
+ object</a>.</p>
<p>The <dfn id=dom-context-2d-font title=dom-context-2d-font><code>font</code></dfn> IDL
attribute, on setting, must be parsed the same way as the 'font'
@@ -37524,15 +37969,13 @@
'initial'), then it must be ignored, without assigning a new font
value. <a href=#refsCSS>[CSS]</a></p>
- <p>Font names must be interpreted in the context of the <a href=#font-style-source-node>font
- style source node</a>'s stylesheets when the font is to be used;
- any fonts embedded using <code title="">@font-face</code> that are
- visible to that element must therefore be available once they are
- loaded. (If a reference font is used before it is fully loaded, or
- if the <a href=#font-style-source-node>font style source node</a> 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.) <a href=#refsCSSFONTS>[CSSFONTS]</a></p>
+ <p>Font names must be interpreted in the context of the <a href=#font-style-source-object>font style source object</a> when
+ the font is to be used; any fonts embedded using <code title="">@font-face</code> or loaded using
+ the <code><a href=#fontloader>FontLoader</a></code> that are visible to the <a href=#font-style-source-object>font style source object</a> must
+ therefore be available once they are loaded. If a font is used before it is fully loaded, or if
+ the <a href=#font-style-source-object>font style source object</a> 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. <a href=#refsCSSFONTS>[CSSFONTS]</a></p>
<p>Only vector fonts should be used by the user agent; if a user
agent were to use bitmap fonts then transformations would likely
@@ -37557,52 +38000,61 @@
</div>
- <p>When the object implementing the <code><a href=#canvasdrawingstyles>CanvasDrawingStyles</a></code>
- interface is created, the font of the context must be set to 10px
- sans-serif. 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
+ <p>When the object implementing the <code><a href=#canvasdrawingstyles>CanvasDrawingStyles</a></code> interface is created, the
+ font of the context must be set to 10px sans-serif. 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 <a href=#font-style-source-object>font style
+ source object</a> at the time that the attribute is set, if it is an element. 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 <a href=#font-style-source-object>font style
+ source object</a> at the time that the attribute is set, if it is an element. If the computed
+ values are undefined for a particular case (e.g. because the <a href=#font-style-source-object>font style source object</a>
+ is not an element or is not <a href=#being-rendered>being rendered</a>), then the relative keywords must be
+ interpreted relative to the normal-weight 10px sans-serif default.</p>
+ <p>The <dfn id=dom-context-2d-textalign title=dom-context-2d-textAlign><code>textAlign</code></dfn> IDL attribute, on
+ getting, must return the current value. On setting, if the value is one of <code title=dom-concept-2d-textAlign-start><a href=#dom-concept-2d-textalign-start>start</a></code>, <code title=dom-concept-2d-textAlign-end><a href=#dom-concept-2d-textalign-end>end</a></code>, <code title=dom-concept-2d-textAlign-left><a href=#dom-concept-2d-textalign-left>left</a></code>, <code title=dom-concept-2d-textAlign-right><a href=#dom-concept-2d-textalign-right>right</a></code>, or <code title=dom-concept-2d-textAlign-center><a href=#dom-concept-2d-textalign-center>center</a></code>, then the value must be changed to the new
+ value. Otherwise, the new value must be ignored. When the object implementing the
+ <code><a href=#canvasdrawingstyles>CanvasDrawingStyles</a></code> interface is created, the <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code> attribute must initially have the value <code title=dom-concept-2d-textAlign-start><a href=#dom-concept-2d-textalign-start>start</a></code>.</p>
- of the 'font-size' property of the <a href=#font-style-source-node>font style source
- node</a> at the time that the attribute is set, if that is an
- element. 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 <a href=#font-style-source-node>font
- style source node</a> at the time that the attribute is set, if
- that is an element. If the computed values are undefined for a
- particular case (e.g. because the <a href=#font-style-source-node>font style source
- node</a> is not an element or is not <a href=#in-a-document>in a
- <code>Document</code></a>), then the relative keywords must be
- interpreted relative to the normal-weight 10px sans-serif
- default.</p>
+ <p>The <dfn id=dom-context-2d-textbaseline title=dom-context-2d-textBaseline><code>textBaseline</code></dfn> IDL attribute, on
+ getting, must return the current value. On setting, if the value is one of <code title=dom-context-2d-textBaseline-top><a href=#dom-context-2d-textbaseline-top>top</a></code>, <code title=dom-context-2d-textBaseline-hanging><a href=#dom-context-2d-textbaseline-hanging>hanging</a></code>, <code title=dom-context-2d-textBaseline-middle><a href=#dom-context-2d-textbaseline-middle>middle</a></code>, <code title=dom-context-2d-textBaseline-alphabetic><a href=#dom-context-2d-textbaseline-alphabetic>alphabetic</a></code>, <code title=dom-context-2d-textBaseline-ideographic><a href=#dom-context-2d-textbaseline-ideographic>ideographic</a></code>, or <code title=dom-context-2d-textBaseline-bottom><a href=#dom-context-2d-textbaseline-bottom>bottom</a></code>, then the value must be changed to the
+ new value. Otherwise, the new value must be ignored. When the object implementing the
+ <code><a href=#canvasdrawingstyles>CanvasDrawingStyles</a></code> interface is created, the <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code> attribute must initially have the value
+ <code title=dom-context-2d-textBaseline-alphabetic><a href=#dom-context-2d-textbaseline-alphabetic>alphabetic</a></code>.</p>
- <p>The <dfn id=dom-context-2d-textalign title=dom-context-2d-textAlign><code>textAlign</code></dfn> IDL
- attribute, on getting, must return the current value. On setting, if
- the value is one of <code title="">start</code>, <code title="">end</code>, <code title="">left</code>, <code title="">right</code>, or <code title="">center</code>, then the
- value must be changed to the new value. Otherwise, the new value
- must be ignored. When the object implementing the
- <code><a href=#canvasdrawingstyles>CanvasDrawingStyles</a></code> interface is created, the <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code> attribute must
- initially have the value <code title="">start</code>.</p>
+ <p>The <dfn id=dom-context-2d-direction title=dom-context-2d-direction><code>direction</code></dfn> IDL attribute, on
+ getting, must return the current value. On setting, if the value is one of <code title=dom-context-2d-direction-ltr>ltr</code>, <code title=dom-context-2d-direction-rtl>rtl</code>, <!--<code
+ title="dom-context-2d-direction-auto">auto</code>,--> or or <code title=dom-context-2d-direction-inherit>inherit</code>, then the value must be changed to the new
+ value. Otherwise, the new value must be ignored. When the object implementing the
+ <code><a href=#canvasdrawingstyles>CanvasDrawingStyles</a></code> interface is created, the <code title=dom-context-2d-direction><a href=#dom-context-2d-direction>direction</a></code> attribute must initially have the value <code title=dom-context-2d-direction-inherit>inherit</code>.</p>
- <p>The <dfn id=dom-context-2d-textbaseline title=dom-context-2d-textBaseline><code>textBaseline</code></dfn>
- IDL attribute, on getting, must return the current value. On
- setting, if the value is one of <code title=dom-context-2d-textBaseline-top><a href=#dom-context-2d-textbaseline-top>top</a></code>, <code title=dom-context-2d-textBaseline-hanging><a href=#dom-context-2d-textbaseline-hanging>hanging</a></code>, <code title=dom-context-2d-textBaseline-middle><a href=#dom-context-2d-textbaseline-middle>middle</a></code>, <code title=dom-context-2d-textBaseline-alphabetic><a href=#dom-context-2d-textbaseline-alphabetic>alphabetic</a></code>,
- <code title=dom-context-2d-textBaseline-ideographic><a href=#dom-context-2d-textbaseline-ideographic>ideographic</a></code>,
- or <code title=dom-context-2d-textBaseline-bottom><a href=#dom-context-2d-textbaseline-bottom>bottom</a></code>,
- then the value must be changed to the new value. Otherwise, the new
- value must be ignored. When the object implementing the
- <code><a href=#canvasdrawingstyles>CanvasDrawingStyles</a></code> interface is created, the <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code> attribute
- must initially have the value <code title="">alphabetic</code>.</p>
-
</div>
- <p>The <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code>
+ <p>The <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textBaseline</a></code> attribute's allowed keywords are
+ as follows:</p>
+
+ <dl><dt><dfn id=dom-concept-2d-textalign-start title=dom-concept-2d-textAlign-start><code>start</code></dfn>
+ <dd><p>Align to the start edge of the text (left side in left-to-right text, right side in
+ right-to-left text).</dd>
+
+ <dt><dfn id=dom-concept-2d-textalign-end title=dom-concept-2d-textAlign-end><code>end</code></dfn>
+ <dd><p>Align to the end edge of the text (right side in left-to-right text, left side in
+ right-to-left text).</dd>
+
+ <dt><dfn id=dom-concept-2d-textalign-left title=dom-concept-2d-textAlign-left><code>left</code></dfn>
+ <dd><p>Align to the left.</dd>
+
+ <dt><dfn id=dom-concept-2d-textalign-right title=dom-concept-2d-textAlign-right><code>right</code></dfn>
+ <dd><p>Align to the right.</dd>
+
+ <dt><dfn id=dom-concept-2d-textalign-center title=dom-concept-2d-textAlign-center><code>center</code></dfn>
+ <dd><p>Align to the center.</dd>
+
+ </dl><p>The <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code>
attribute's allowed keywords correspond to alignment points in the
font:</p>
- <!-- this is filler to make sure the TCP packet boundary doesn't fall in the middle of one of the NCRs below -->
- <!-- (because otherwise the parser in anolis screws it up) -->
<p><img alt="The top of the em square 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 top of the em square and the bottom of the em square, the alphabetic baseline is where characters like Á, ÿ, f, and Ω are anchored, the ideographic baseline is where glyphs like 私 and 達 are anchored, and the bottom of the em square 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 the em square." height=300 src=http://images.whatwg.org/baselines.png width=738></p>
<p>The keywords map to these alignment points as follows:</p>
@@ -37625,15 +38077,34 @@
<dt><dfn id=dom-context-2d-textbaseline-bottom title=dom-context-2d-textBaseline-bottom><code>bottom</code></dfn>
<dd>The bottom of the em square</dd>
- </dl><p>The <dfn id=text-preparation-algorithm>text preparation algorithm</dfn> is as follows. It takes
- as input a string <var title="">text</var>, a
- <code><a href=#canvasdrawingstyles>CanvasDrawingStyles</a></code> object <var title="">target</var>,
- and an optional length <var title="">maxWidth</var>. It returns an
- array of glyph shapes, each positioned on a common coordinate space,
- and a <var title="">physical alignment</var> whose value is one of
- <i>left</i>, <i>right</i>, and <i title="">center</i>. (Most callers of this
- algorithm ignore the <var title="">physical alignment</var>.)</p>
+ </dl><p>The <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textBaseline</a></code> attribute's allowed keywords are
+ as follows:</p>
+ <dl><dt><dfn id=dom-concept-2d-direction-ltr title=dom-concept-2d-direction-ltr><code>ltr</code></dfn>
+
+ <dd><p>Treat input to the <a href=#text-preparation-algorithm>text preparation algorithm</a> as left-to-right text.</dd>
+
+ <dt><dfn id=dom-concept-2d-direction-rtl title=dom-concept-2d-direction-rtl><code>rtl</code></dfn>
+
+ <dd><p>Treat input to the <a href=#text-preparation-algorithm>text preparation algorithm</a> as right-to-left text.</dd>
+
+<!--
+ <dt><dfn title="dom-concept-2d-direction-auto"><code>auto</code></dfn>
+
+ <dd><p>Determine the direction from the input to the <span>text preparation algorithm</span>.</p></dd>
+-->
+
+ <dt><dfn id=dom-concept-2d-direction-inherit title=dom-concept-2d-direction-inherit><code>inherit</code></dfn>
+
+ <dd><p>Default to the directionality of the <code><a href=#the-canvas-element>canvas</a></code> element or <code><a href=#document>Document</a></code>
+ as appropriate.</dd>
+
+ </dl><p>The <dfn id=text-preparation-algorithm>text preparation algorithm</dfn> is as follows. It takes as input a string <var title="">text</var>, a <code><a href=#canvasdrawingstyles>CanvasDrawingStyles</a></code> object <var title="">target</var>, and an
+ optional length <var title="">maxWidth</var>. It returns an array of glyph shapes, each positioned
+ on a common coordinate space, a <var title="">physical alignment</var> whose value is one of
+ <i>left</i>, <i>right</i>, and <i title="">center</i>, and an inline box. (Most callers of this
+ algorithm ignore the <var title="">physical alignment</var> and the inline box.)</p>
+
<ol><li><p>If <var title="">maxWidth</var> was provided but is less
than or equal to zero, return an empty array.</li>
@@ -37648,25 +38119,37 @@
<p>Apply the appropriate step from the following list to determine
the value of <var title="">direction</var>:</p>
- <dl class=switch><dt>If the <var title="">target</var> object's <a href=#font-style-source-node>font style
- source node</a> is an element</dt>
+ <dl class=switch><dt>If the <var title="">target</var> object's <code title=dom-context-2d-direction><a href=#dom-context-2d-direction>direction</a></code> attribute has the value "<code title=dom-context-2d-direction-ltr>ltr</code>"</dt>
+ <dd>Let <var title="">direction</var> be '<a href=#concept-ltr title=concept-ltr>ltr</a>'.</dd>
- <dd>Let <var title="">direction</var> be <a href=#the-directionality>the
- directionality</a> of the <var title="">target</var> object's
- <a href=#font-style-source-node>font style source node</a>.</dd>
+ <dt>If the <var title="">target</var> object's <code title=dom-context-2d-direction><a href=#dom-context-2d-direction>direction</a></code> attribute has the value "<code title=dom-context-2d-direction-rtl>rtl</code>"</dt>
+ <dd>Let <var title="">direction</var> be '<a href=#concept-rtl title=concept-rtl>rtl</a>'.</dd>
- <dt>If the <var title="">target</var> object's <a href=#font-style-source-node>font style
- source node</a> is a <code><a href=#document>Document</a></code> and that
- <code><a href=#document>Document</a></code> has a root element child</dt>
+<!--
+ <dt>If the <var title="">target</var> object's <code
+ title="dom-context-2d-direction">direction</code> attribute has the value "<code
+ title="dom-context-2d-direction-auto">auto</code>"</dt>
+ <dd>
+ Find the first character in <var title="">text</var> of bidirectional character type L, AL, or
+ R, if any. If such a character is found and it is of bidirectional character type AL or R,
+ then let <var title="">direction</var> be '<span title="concept-rtl">rtl</span>'; otherwise,
+ let <var title="">direction</var> be '<span title="concept-rtl">rtl</span>'. <a
+ href="#refsBIDI">[BIDI]</a>
+ </dd>
+-->
- <dd>Let <var title="">direction</var> be <a href=#the-directionality>the
- directionality</a> of the <var title="">target</var> object's
- <a href=#font-style-source-node>font style source node</a>'s root element child.</dd>
+ <dt>If the <var title="">target</var> object's <a href=#font-style-source-object>font style source object</a>
+ is an element</dt>
- <dt>If the <var title="">target</var> object's <a href=#font-style-source-node>font style
- source node</a> is a <code><a href=#document>Document</a></code> and that
- <code><a href=#document>Document</a></code> has no root element child</dt>
+ <dd>Let <var title="">direction</var> be <a href=#the-directionality>the directionality</a> of the <var title="">target</var> object's <a href=#font-style-source-object>font style source object</a>.</dd>
+ <dt>If the <var title="">target</var> object's <a href=#font-style-source-object>font style source object</a>
+ is a <code><a href=#document>Document</a></code> and that <code><a href=#document>Document</a></code> has a root element child</dt>
+
+ <dd>Let <var title="">direction</var> be <a href=#the-directionality>the directionality</a> of the <var title="">target</var> object's <a href=#font-style-source-object>font style source object</a>'s root element child.</dd>
+
+ <dt>Otherwise</dt>
+
<dd>Let <var title="">direction</var> be '<a href=#concept-ltr title=concept-ltr>ltr</a>'.</dd>
</dl></li>
@@ -37700,14 +38183,14 @@
<p>Horizontal position:</p>
<dl><dt>If <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code> is
- <code title="">left</code></dt>
+ <code title=dom-concept-2d-textAlign-left><a href=#dom-concept-2d-textalign-left>left</a></code></dt>
<dt>If <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code> is
- <code title="">start</code> and <var title="">direction</var> is
+ <code title=dom-concept-2d-textAlign-start><a href=#dom-concept-2d-textalign-start>start</a></code> and <var title="">direction</var> is
'ltr'</dt>
<dt>If <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code> is
- <code title="">end</code> and <var title="">direction</var> is
+ <code title=dom-concept-2d-textAlign-end><a href=#dom-concept-2d-textalign-end>end</a></code> and <var title="">direction</var> is
'rtl'</dt>
<dd>Let the <var title="">anchor point</var>'s horizontal
@@ -37715,14 +38198,14 @@
<dt>If <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code> is
- <code title="">right</code></dt>
+ <code title=dom-concept-2d-textAlign-right><a href=#dom-concept-2d-textalign-right>right</a></code></dt>
<dt>If <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code> is
- <code title="">end</code> and <var title="">direction</var> is
+ <code title=dom-concept-2d-textAlign-end><a href=#dom-concept-2d-textalign-end>end</a></code> and <var title="">direction</var> is
'ltr'</dt>
<dt>If <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code> is
- <code title="">start</code> and <var title="">direction</var> is
+ <code title=dom-concept-2d-textAlign-start><a href=#dom-concept-2d-textalign-start>start</a></code> and <var title="">direction</var> is
'rtl'</dt>
<dd>Let the <var title="">anchor point</var>'s horizontal
@@ -37730,7 +38213,7 @@
<dt>If <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code> is
- <code title="">center</code></dt>
+ <code title=dom-concept-2d-textAlign-center><a href=#dom-concept-2d-textalign-center>center</a></code></dt>
<dd>Let the <var title="">anchor point</var>'s horizontal
position be half way between the left and right edges of the
@@ -37793,11 +38276,10 @@
</li>
- <li><p>Return <var title="">result</var>, and, for callers that
- need it, <var title="">physical alignment</var> as the alignment
- value.</li>
+ <li><p>Return <var title="">result</var>, <var title="">physical alignment</var>, and the inline
+ box.</li>
- </ol><h6 id=building-paths><span class=secno>4.8.11.1.6 </span>Building paths</h6>
+ </ol><h6 id=building-paths><span class=secno>4.8.11.2.6 </span>Building paths</h6>
<p>Each object implementing the <code><a href=#canvaspathmethods>CanvasPathMethods</a></code>
interface has a <a href=#concept-path title=concept-path>path</a>. A <dfn id=concept-path title=concept-path>path</dfn> has a list of zero or more subpaths.
@@ -38372,7 +38854,7 @@
- <h6 id=path-objects><span class=secno>4.8.11.1.7 </span><code><a href=#path>Path</a></code> objects</h6>
+ <h6 id=path-objects><span class=secno>4.8.11.2.7 </span><code><a href=#path>Path</a></code> objects</h6>
<p><code><a href=#path>Path</a></code> objects can be used to declare paths that are
then later used on <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> objects. In
@@ -38671,9 +39153,8 @@
</ol></div>
+ <h6 id=transformations><span class=secno>4.8.11.2.8 </span><dfn title=dom-context-2d-transformation>Transformations</dfn></h6>
- <h6 id=transformations><span class=secno>4.8.11.1.8 </span><dfn title=dom-context-2d-transformation>Transformations</dfn></h6>
-
<p>Each <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> object has a
<i>current transformation matrix</i>, as well as methods (described
in this section) to manipulate it. When a
@@ -38829,9 +39310,82 @@
+ <h6 id=image-sources-for-2d-rendering-contexts><span class=secno>4.8.11.2.9 </span>Image sources for 2D rendering contexts</h6>
- <h6 id=fill-and-stroke-styles><span class=secno>4.8.11.1.9 </span>Fill and stroke styles</h6>
+ <p>Several methods in the <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> API take the union type
+ <code><a href=#canvasimagesource>CanvasImageSource</a></code> as an argument.</p>
+ <p>This union type allows objects implementing any of the following interfaces to be used as image
+ sources:</p>
+
+ <ul><li><code><a href=#htmlimageelement>HTMLImageElement</a></code> (<code><a href=#the-img-element>img</a></code> elements)</li>
+
+ <li><code><a href=#htmlvideoelement>HTMLVideoElement</a></code> (<code><a href=#the-video-element>video</a></code> elements)</li>
+
+ <li><code><a href=#htmlcanvaselement>HTMLCanvasElement</a></code> (<code><a href=#the-canvas-element>canvas</a></code> elements)</li>
+
+ <li><code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code></li>
+
+ <li><code>BitmapImage</code></li>
+
+ <!-- v3: supporting ImageData object might make sense (when resizing as well as filtering) - ack Charles Pritchard -->
+
+ </ul><p>When a user agent is required to <dfn id=check-the-usability-of-the-image-argument>check the usability of the <var title="">image</var>
+ argument</dfn>, where <var title="">image</var> is a <code><a href=#canvasimagesource>CanvasImageSource</a></code> object, the
+ user agent must run these steps, which return either <i>good</i>, <i>bad</i>, or
+ <i>aborted</i>:</p>
+
+ <ol><li><p>If the <var title="">image</var> argument is an <code><a href=#htmlimageelement>HTMLImageElement</a></code> object that
+ is not <a href=#img-good title=img-good>fully decodable</a>, or if the <var title="">image</var>
+ argument is an <code><a href=#htmlvideoelement>HTMLVideoElement</a></code> object whose <code title=dom-media-readyState><a href=#dom-media-readystate>readyState</a></code> attribute is either <code title=dom-media-HAVE_NOTHING><a href=#dom-media-have_nothing>HAVE_NOTHING</a></code> or <code title=dom-media-HAVE_METADATA><a href=#dom-media-have_metadata>HAVE_METADATA</a></code>, then return <i>bad</i> and abort these
+ steps.</li>
+
+ <li><p>If the <var title="">image</var> argument is an <code><a href=#htmlcanvaselement>HTMLCanvasElement</a></code> object with
+ either a horizontal dimension or a vertical dimension equal to zero, then the implementation
+ throw an <code><a href=#invalidstateerror>InvalidStateError</a></code> exception and return <i>aborted</i>.</p>
+
+ </ol><p>When a <code><a href=#canvasimagesource>CanvasImageSource</a></code> object represents an <code><a href=#htmlimageelement>HTMLImageElement</a></code>, the
+ element's image must be used as the source image.</p>
+
+ <p>Specifically, when a <code><a href=#canvasimagesource>CanvasImageSource</a></code> object represents an animated image in an
+ <code><a href=#htmlimageelement>HTMLImageElement</a></code>, the user agent must use the poster frame of the animation, or, if
+ there is no poster frame, the first frame of the animation, when rendering the image for
+ <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> APIs.</p>
+
+ <p>When a <code><a href=#canvasimagesource>CanvasImageSource</a></code> object represents an <code><a href=#htmlvideoelement>HTMLVideoElement</a></code>, then
+ the frame at the <a href=#current-playback-position>current playback position</a> when the method with the argument is
+ invoked must be used as the source image when rendering the image for
+ <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> APIs, and the source image's dimensions must be the <a href=#concept-video-intrinsic-width title=concept-video-intrinsic-width>intrinsic width</a> and <a href=#concept-video-intrinsic-height title=concept-video-intrinsic-height>intrinsic height</a> of the <a href=#media-resource>media resource</a>
+ (i.e. after any aspect-ratio correction has been applied).</p>
+
+ <p>When a <code><a href=#canvasimagesource>CanvasImageSource</a></code> object represents an <code><a href=#htmlcanvaselement>HTMLCanvasElement</a></code>, the
+ element's bitmap must be used as the source image.</p>
+
+ <p>When a <code><a href=#canvasimagesource>CanvasImageSource</a></code> object represents a <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code>, the
+ object's <a href=#scratch-bitmap>scratch bitmap</a> must be used as the source image.</p>
+
+ <p>When a <code><a href=#canvasimagesource>CanvasImageSource</a></code> object represents an element that is <a href=#being-rendered>being
+ rendered</a> 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. <code title=attr-dim-width><a href=#attr-dim-width>width</a></code> and
+ <code title=attr-dim-height><a href=#attr-dim-height>height</a></code> attributes on the source element have no effect on how
+ the object is interpreted when rendering the image for <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code>
+ APIs).</p>
+
+ <p>When a <code><a href=#canvasimagesource>CanvasImageSource</a></code> object represents a <code>BitmapImage</code>, the
+ object's bitmap image data must be used as the source image.</p>
+
+<!--ADD-TOPIC:Security-->
+ <p><dfn id=the-image-argument-is-not-origin-clean>The <var title="">image argument</var> is not origin-clean</dfn> if it is an
+ <code><a href=#htmlimageelement>HTMLImageElement</a></code> or <code><a href=#htmlvideoelement>HTMLVideoElement</a></code> whose <a href=#origin>origin</a> is not
+ the <a href=#same-origin title="same origin">same</a> as the <a href=#entry-script>entry script</a>'s <a href=#origin>origin</a>,
+ or if it is an <code><a href=#htmlcanvaselement>HTMLCanvasElement</a></code> whose bitmap's <a href=#concept-canvas-origin-clean title=concept-canvas-origin-clean>origin-clean</a> flag is false, or if it is a
+ <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> object whose <a href=#scratch-bitmap>scratch bitmap</a>'s <a href=#concept-canvas-origin-clean title=concept-canvas-origin-clean>origin-clean</a> flag is false.</p>
+<!--REMOVE-TOPIC:Security-->
+
+
+
+ <h6 id=fill-and-stroke-styles><span class=secno>4.8.11.2.10 </span>Fill and stroke styles</h6>
+
<dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-fillStyle><a href=#dom-context-2d-fillstyle>fillStyle</a></code> [ = <var title="">value</var> ]</dt>
<dd>
@@ -38895,15 +39449,18 @@
attribute represents the color or style to use for the lines around
the shapes.</p>
- <p>Both attributes can be either strings,
- <code><a href=#canvasgradient>CanvasGradient</a></code>s, or <code><a href=#canvaspattern>CanvasPattern</a></code>s. On
- setting, strings must be <a href=#parsed-as-a-css-color-value title="parsed as a CSS <color>
- value">parsed as CSS <color> values</a> and the color
- assigned, and <code><a href=#canvasgradient>CanvasGradient</a></code> and
- <code><a href=#canvaspattern>CanvasPattern</a></code> objects must be assigned themselves. <a href=#refsCSSCOLOR>[CSSCOLOR]</a> If the value is a string but
- cannot be <a href=#parsed-as-a-css-color-value>parsed as a CSS <color> value</a>, then it
- must be ignored, and the attribute must retain its previous
- value.</p>
+ <p>Both attributes can be either strings, <code><a href=#canvasgradient>CanvasGradient</a></code>s, or
+ <code><a href=#canvaspattern>CanvasPattern</a></code>s. On setting, strings must be <a href=#parsed-as-a-css-color-value title="parsed as a CSS
+ <color> value">parsed as CSS <color> values</a> and the color assigned, and
+ <code><a href=#canvasgradient>CanvasGradient</a></code> and <code><a href=#canvaspattern>CanvasPattern</a></code> objects must be assigned themselves. <a href=#refsCSSCOLOR>[CSSCOLOR]</a> If the value is a string but cannot be <a href=#parsed-as-a-css-color-value>parsed as a CSS
+ <color> value</a>, then it must be ignored, and the attribute must retain its previous
+ value.
+<!--ADD-TOPIC:Security-->
+ If the new value is a <code><a href=#canvaspattern>CanvasPattern</a></code> object that is marked as <a href=#concept-canvas-pattern-not-origin-clean title=concept-canvas-pattern-not-origin-clean>not origin-clean</a>, then the <a href=#scratch-bitmap>scratch
+ bitmap</a>'s <a href=#concept-canvas-origin-clean title=concept-canvas-origin-clean>origin-clean</a> flag must be set to
+ false.
+<!--REMOVE-TOPIC:Security-->
+ </p>
<p>When set to a <code><a href=#canvaspattern>CanvasPattern</a></code> or
<code><a href=#canvasgradient>CanvasGradient</a></code> object, the assignment is
@@ -38939,9 +39496,8 @@
<p>When the context is created, the <code title=dom-context-2d-fillStyle><a href=#dom-context-2d-fillstyle>fillStyle</a></code> and <code title=dom-context-2d-strokeStyle><a href=#dom-context-2d-strokestyle>strokeStyle</a></code> attributes
must initially have the string value <code title="">#000000</code>.</p>
- <p>When the value is a color, it must not be affected by the
- transformation matrix when used to draw on the canvas.</p> <!-- so
- singular matrices don't affect solid color fillStyles -->
+ <p>When the value is a color, it must not be affected by the transformation matrix when used to
+ draw on bitmaps.</p> <!-- so singular matrices don't affect solid color fillStyles -->
</div>
@@ -39064,7 +39620,7 @@
starting with the value of <var title="">ω</var> nearest to
positive infinity and ending with the value of <var title="">ω</var> nearest to negative infinity, draw the
circumference of the circle with radius <span title="">r(<var title="">ω</var>)</span> at position (<span title="">x(<var title="">ω</var>)</span>, <span title="">y(<var title="">ω</var>)</span>), with the color at <var title="">ω</var>, but only painting on the parts of the
- canvas that have not yet been painted on by earlier circles in this
+ 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>This effectively creates a cone, touched by the two
@@ -39114,51 +39670,45 @@
</dl><div class=impl>
- <p>To create objects of this type, the <dfn id=dom-context-2d-createpattern title=dom-context-2d-createPattern><code>createPattern(<var title="">image</var>, <var title="">repetition</var>)</code></dfn>
- method is used. The first argument gives the image to use as the
- pattern (either an <code><a href=#htmlimageelement>HTMLImageElement</a></code>,
- <code><a href=#htmlcanvaselement>HTMLCanvasElement</a></code>, or <code><a href=#htmlvideoelement>HTMLVideoElement</a></code>
- object). Modifying this image after calling the <code title=dom-context-2d-createPattern><a href=#dom-context-2d-createpattern>createPattern()</a></code> method
- must not affect the pattern. The second argument must be a string
- with one of the following values: <code title="">repeat</code>,
- <code title="">repeat-x</code>, <code title="">repeat-y</code>,
- <code title="">no-repeat</code>. If the empty string is specified,
- <code title="">repeat</code> must be assumed. If an unrecognized value
- is given, then the user agent must throw a <code><a href=#syntaxerror>SyntaxError</a></code>
- exception. User agents must recognize the four values described above
- exactly (e.g. they must not do case folding). Except as specified
- below, the method must return a <code><a href=#canvaspattern>CanvasPattern</a></code> object
- suitably initialized.</p>
+ <p>To create objects of this type, the <dfn id=dom-context-2d-createpattern title=dom-context-2d-createPattern><code>createPattern(<var title="">image</var>, <var title="">repetition</var>)</code></dfn> method is used. When the method is invoked, the user agent
+ must run the following steps:</p>
- <p>The <var title="">image</var> argument is an instance of either
- <code><a href=#htmlimageelement>HTMLImageElement</a></code>, <code><a href=#htmlcanvaselement>HTMLCanvasElement</a></code>, or
- <code><a href=#htmlvideoelement>HTMLVideoElement</a></code>.</p> <!-- drawImage() has an equivalent
- paragraph -->
+ <ol><li><p>Let <var title="">image</var> be the first argument and <var title="">repetition</var> be
+ the second argument.</li>
- <p>If the <var title="">image</var> argument is an
- <code><a href=#htmlimageelement>HTMLImageElement</a></code> object that is not <a href=#img-good title=img-good>fully decodable</a>, or if the <var title="">image</var> argument is an <code><a href=#htmlvideoelement>HTMLVideoElement</a></code>
- object whose <code title=dom-media-readyState><a href=#dom-media-readystate>readyState</a></code>
- attribute is either <code title=dom-media-HAVE_NOTHING><a href=#dom-media-have_nothing>HAVE_NOTHING</a></code> or <code title=dom-media-HAVE_METADATA><a href=#dom-media-have_metadata>HAVE_METADATA</a></code>, then the
- implementation must return null.</p> <!-- drawImage() has an
- equivalent paragraph -->
+ <li><p><a href=#check-the-usability-of-the-image-argument>Check the usability of the <var title="">image</var> argument</a>. If this
+ returns <i>aborted</i>, then an exception has been thrown and the method doesn't return anything;
+ abort these steps. If it returns <i>bad</i>, then return null and abort these steps. Otherwise it
+ returns <i>good</i>; continue with these steps.</li>
- <p>If the <var title="">image</var> argument is an
- <code><a href=#htmlcanvaselement>HTMLCanvasElement</a></code> object with either a horizontal
- dimension or a vertical dimension equal to zero, then the
- implementation must throw an <code><a href=#invalidstateerror>InvalidStateError</a></code>
- exception.</p>
- <!-- drawImage() has an equivalent paragraph -->
+ <li><p>If <var title="">repetition</var> is the empty string, let it be "<code title="">repeat</code>".</p>
- <p>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 transform.</p>
+ <li><p>If <var title="">repetition</var> is not a <a href=#case-sensitive>case-sensitive</a> match for one of
+ "<code title="">repeat</code>", "<code title="">repeat-x</code>", "<code title="">repeat-y</code>", or "<code title="">no-repeat</code>", throw a <code><a href=#syntaxerror>SyntaxError</a></code>
+ exception and abort these steps.</li>
- <p>When the <dfn id=dom-canvaspattern-settransform title=dom-canvaspattern-setTransform><code>setTransform()</code></dfn>
- method is invoked on the pattern, the user agent must replace the
- pattern's transformation matrix with the one described by the
- <code><a href=#svgmatrix>SVGMatrix</a></code> object provided as an argument to the
- method.</p>
+ <li><p>Create a new <code><a href=#canvaspattern>CanvasPattern</a></code> object with the image <var title="">image</var>
+ and the repetition behavior given by <var title="">repetition</var>.</li>
+<!--ADD-TOPIC:Security-->
+ <li><p>If <a href=#the-image-argument-is-not-origin-clean>the <var title="">image argument</var> is not origin-clean</a>, then mark the
+ <code><a href=#canvaspattern>CanvasPattern</a></code> object as <dfn id=concept-canvas-pattern-not-origin-clean title=concept-canvas-pattern-not-origin-clean>not
+ origin-clean</dfn>.</li>
+<!--REMOVE-TOPIC:Security-->
+
+ <li><p>Return the <code><a href=#canvaspattern>CanvasPattern</a></code> object.</li>
+
+ </ol><p>Modifying the <var title="">image</var> used when creating a <code><a href=#canvaspattern>CanvasPattern</a></code> object
+ after calling the <code title=dom-context-2d-createPattern><a href=#dom-context-2d-createpattern>createPattern()</a></code> method must
+ not affect the pattern(s) rendered by the <code><a href=#canvaspattern>CanvasPattern</a></code> object.</p>
+
+ <p>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 transform.</p>
+
+ <p>When the <dfn id=dom-canvaspattern-settransform title=dom-canvaspattern-setTransform><code>setTransform()</code></dfn> method
+ is invoked on the pattern, the user agent must replace the pattern's transformation matrix with
+ the one described by the <code><a href=#svgmatrix>SVGMatrix</a></code> object provided as an argument to the method.</p>
+
<p>When a pattern is to be rendered within an area, the user agent
must run the following steps to determine what is rendered:</p>
@@ -39166,27 +39716,21 @@
<li>
- <p>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, then place
- repeated copies of this image horizontally to the left and right,
- if the <code>repeat-x</code> string was specified, or vertically
- up and down, if the <code>repeat-y</code> string was specified, or
- in all four directions all over the bitmap, if the
- <code>repeat</code> string was specified.</p>
+ <p>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, then
+ place repeated copies of this image horizontally to the left and right, if the repetition
+ behavior is "<code title="">repeat-x</code>", or vertically up and down, if the repetition
+ behavior is "<code title="">repeat-y</code>", or in all four directions all over the bitmap, if
+ the repetition behavior is "<code title="">repeat</code>".</p>
- <p>If the original image data is a bitmap image, the value painted
- at a point in the area of the repetitions is computed by filtering
- the original image data. If the <code title=dom-context-2d-imageSmoothingEnabled><a href=#dom-context-2d-imagesmoothingenabled>imageSmoothingEnabled</a></code>
- attribute is set to true, then the user agent may use any
- filtering algorithm (for example bilinear interpolation or
- nearest-neighbor). If the <code title=dom-context-2d-imageSmoothingEnabled><a href=#dom-context-2d-imagesmoothingenabled>imageSmoothingEnabled</a></code>
- attribute is set to false, the image must be rendered using
- nearest-neighbor interpolation. 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 <var title="">repetition</var>.)
+ <p>If the original image data is a bitmap image, the value painted at a point in the area of the
+ repetitions is computed by filtering the original image data. If the <code title=dom-context-2d-imageSmoothingEnabled><a href=#dom-context-2d-imagesmoothingenabled>imageSmoothingEnabled</a></code> attribute is set to
+ true, then the user agent may use any filtering algorithm (for example bilinear interpolation or
+ nearest-neighbor). If the <code title=dom-context-2d-imageSmoothingEnabled><a href=#dom-context-2d-imagesmoothingenabled>imageSmoothingEnabled</a></code> attribute is set to
+ false, the image must be rendered using nearest-neighbor interpolation. 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.)</p>
<!-- drawImage() has similar paragraphs with different rules -->
</li>
@@ -39204,27 +39748,7 @@
<li><p>The resulting bitmap is what is to be rendered, with the
same origin and same scale.</li>
- </ol><p>When the <code title=dom-context-2d-createPattern><a href=#dom-context-2d-createpattern>createPattern()</a></code> method
- is passed an animated image as its <var title="">image</var>
- argument, the user agent must use the poster frame of the animation,
- or, if there is no poster frame, the first frame of the
- animation.</p>
- <!-- drawImage() has an equivalent paragraph -->
-
- <p>When the <var title="">image</var> argument is an
- <code><a href=#htmlvideoelement>HTMLVideoElement</a></code>, then the frame at the <a href=#current-playback-position>current
- playback position</a> must be used as the source image, and the
- source image's dimensions must be the <a href=#concept-video-intrinsic-width title=concept-video-intrinsic-width>intrinsic width</a> and
- <a href=#concept-video-intrinsic-height title=concept-video-intrinsic-height>intrinsic height</a>
- of the <a href=#media-resource>media resource</a> (i.e. after any aspect-ratio
- correction has been applied).</p>
- <!-- drawImage() has an equivalent paragraph -->
-
- </div>
-
- <div class=impl>
-
- <hr><p>If a radial gradient or repeated pattern is used when the
+ </ol><hr><p>If a radial gradient or repeated pattern is used when the
transformation matrix is singular, 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).
@@ -39236,7 +39760,7 @@
- <h6 id=drawing-rectangles-to-the-canvas><span class=secno>4.8.11.1.10 </span>Drawing rectangles to the canvas</h6>
+ <h6 id=drawing-rectangles-to-the-bitmap><span class=secno>4.8.11.2.11 </span>Drawing rectangles to the bitmap</h6>
<p>There are three methods that immediately draw rectangles to the
bitmap. They each take four arguments; the first two give the <var title="">x</var> and <var title="">y</var> coordinates of the top
@@ -39264,7 +39788,7 @@
<dd>
- <p>Clears all pixels on the canvas in the given rectangle to transparent black.</p>
+ <p>Clears all pixels on the bitmap in the given rectangle to transparent black.</p>
</dd>
@@ -39272,7 +39796,7 @@
<dd>
- <p>Paints the given rectangle onto the canvas, using the current fill style.</p>
+ <p>Paints the given rectangle onto the bitmap, using the current fill style.</p>
</dd>
@@ -39280,7 +39804,7 @@
<dd>
- <p>Paints the box that outlines the given rectangle onto the canvas, using the current stroke style.</p>
+ <p>Paints the box that outlines the given rectangle onto the bitmap, using the current stroke style.</p>
</dd>
@@ -39288,14 +39812,14 @@
<p>The <dfn id=dom-context-2d-clearrect title=dom-context-2d-clearRect><code>clearRect(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</code></dfn> method must run the following steps:</p>
- <ol><li><p>Let <var title="">pixels</var> be the set of pixels in the
- specified rectangle that also intersect the current <a href=#clipping-region>clipping
- region</a>.</li>
+ <ol><li><p>Let <var title="">pixels</var> be the set of pixels in
+ the specified rectangle that also intersect the current
+ <a href=#clipping-region>clipping region</a>.</li>
<li><p>Clear the pixels in <var title="">pixels</var> to a fully
transparent black, erasing any previous image.</li>
- <li><p><a href=#clear-regions-that-cover-the-pixels>Clear regions that cover the pixels</a> in <var title="">pixels</var> in the <code><a href=#the-canvas-element>canvas</a></code> element.</li>
+ <li><p><a href=#clear-regions-that-cover-the-pixels>Clear regions that cover the pixels</a> in <var title="">pixels</var> on the <a href=#scratch-bitmap>scratch bitmap</a>.</li>
</ol><p class=note>If either height or width are zero, this method has
no effect, since the set of pixels would be empty.</p>
@@ -39325,7 +39849,7 @@
- <h6 id=drawing-text-to-the-canvas><span class=secno>4.8.11.1.11 </span>Drawing text to the canvas</h6>
+ <h6 id=drawing-text-to-the-bitmap><span class=secno>4.8.11.2.12 </span>Drawing text to the bitmap</h6>
<dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-fillText><a href=#dom-context-2d-filltext>fillText</a></code>(<var title="">text</var>, <var title="">x</var>, <var title="">y</var> [, <var title="">maxWidth</var> ] )</dt>
<dt><var title="">context</var> . <code title=dom-context-2d-strokeText><a href=#dom-context-2d-stroketext>strokeText</a></code>(<var title="">text</var>, <var title="">x</var>, <var title="">y</var> [, <var title="">maxWidth</var> ] )</dt>
@@ -39367,8 +39891,8 @@
</dl><div class=impl>
- <p>The <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> interface provides the
- following methods for rendering text directly to the canvas.</p>
+ <p>The <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> interface provides the following methods for
+ rendering text.</p>
<p>The <dfn id=dom-context-2d-filltext title=dom-context-2d-fillText><code>fillText()</code></dfn> and
<dfn id=dom-context-2d-stroketext title=dom-context-2d-strokeText><code>strokeText()</code></dfn>
@@ -39412,6 +39936,16 @@
</li>
+<!--ADD-TOPIC:Security-->
+ <li><p>If the <a href=#text-preparation-algorithm>text preparation algorithm</a> used a font that has an <a href=#origin>origin</a>
+ that is not the <a href=#same-origin title="same origin">same</a> as the <a href=#entry-script>entry script</a>'s
+ <a href=#origin>origin</a> (even if "using a font" means just checking if that font has a particular
+ glyph in it before falling back to another font), then set the <a href=#scratch-bitmap>scratch bitmap</a>'s
+ <a href=#concept-canvas-origin-clean title=concept-canvas-origin-clean>origin-clean</a> flag to false.</li> <!--
+ because fonts could consider sensitive material, I guess; and because that sensitivity could
+ extend to whether or not a particular glyph is in the font in the first place. -->
+<!--REMOVE-TOPIC:Security-->
+
</ol><!--v6DVT - this is commented out until CSS can get its act together
enough to actual specify vertical text rendering (how long have we
been waiting now?)
@@ -39419,7 +39953,7 @@
WHEN EDITING THIS, FIX THE PARTS MARKED "XXX" BELOW
ALSO NOTE THAT THIS PROBABLY NEEDS ENTIRELY REVISITING NOW THAT WE
-HAVE REJIGGED HOW TEXT WORKS IN v5
+HAVE REJIGGED HOW TEXT WORKS IN v5 (e.g. remember security)
<p>The <dfn
title="dom-context-2d-fillVerticalText"><code>fillVerticalText()</code></dfn>
@@ -39565,19 +40099,11 @@
</ol>
-v6DVT (also check for '- -' bits in the part above) --><p>The <dfn id=dom-context-2d-measuretext title=dom-context-2d-measureText><code>measureText()</code></dfn>
- method takes one argument, <var title="">text</var>. When the method
- is invoked, the user agent must replace all the <a href=#space-character title="space
- character">space characters</a> in <var title="">text</var> with
- U+0020 SPACE characters, and then must form a hypothetical
- infinitely-wide CSS line box containing a single inline box
- containing the text <var title="">text</var>, with all the
- properties at their initial values except the 'white-space' property
- of the inline element set to 'pre' and the 'font' property of the
- inline element set to the current font of the context as given by
- the <code title=dom-context-2d-font><a href=#dom-context-2d-font>font</a></code> attribute, and
- must then create a new <code><a href=#textmetrics>TextMetrics</a></code> object with its
- attributes set as described in the following list.
+v6DVT (also check for '- -' bits in the part above) --><p>The <dfn id=dom-context-2d-measuretext title=dom-context-2d-measureText><code>measureText()</code></dfn> method takes one
+ argument, <var title="">text</var>. When the method is invoked, the user agent must run the
+ <a href=#text-preparation-algorithm>text preparation algorithm</a>, passing it <var title="">text</var> and the
+ <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> object, and then using the returned inline box must create a
+ new <code><a href=#textmetrics>TextMetrics</a></code> object with its attributes set as described in the following list.
<!--ADD-TOPIC:Security-->
If doing these measurements requires using a font that has an
<a href=#origin>origin</a> that is not the <a href=#same-origin title="same
@@ -39667,7 +40193,7 @@
- <h6 id=drawing-paths-to-the-canvas><span class=secno>4.8.11.1.12 </span>Drawing paths to the canvas</h6>
+ <h6 id=drawing-paths-to-the-canvas><span class=secno>4.8.11.2.13 </span>Drawing paths to the canvas</h6>
<p>The context always has a <dfn id=current-default-path>current default path</dfn>. There
is only one <a href=#current-default-path>current default path</a>, it is not part of the
@@ -39867,13 +40393,22 @@
<li>
- <p>Optionally, <a href=#inform>inform the user</a> that the
- focus is at the location given by the intended path. User agents
- may wait until the next time the <a href=#event-loop>event loop</a> reaches
- its "update the rendering" step to optionally inform the user.</p>
+ <p>Optionally, run the appropriate step from the following list:</p>
- </li>
+ <dl><dt>If the <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> object's <a href=#concept-canvas-context-bitmap-mode title=concept-canvas-context-bitmap-mode>context bitmap mode</a> is <a href=#concept-canvas-fixed title=concept-canvas-fixed>fixed</a></dt>
+ <dd><p><a href=#inform>Inform the user</a> that the focus is at the location given by the
+ intended path. User agents may wait until the next time the <a href=#event-loop>event loop</a> reaches its
+ "update the rendering" step to optionally inform the user.</dd>
+
+ <dt>Otherwise</dt>
+
+ <dd><p>Add instructions to the <a href=#scratch-bitmap>scratch bitmap</a>'s <a href=#list-of-pending-interface-actions>list of pending interface
+ actions</a> that <a href=#inform>inform the user</a> that the focus is at the location of
+ the bitmap given by the intended path.</dd>
+
+ </dl></li>
+
</ol><p>The <dfn id=dom-context-2d-drawcustomfocusring title=dom-context-2d-drawCustomFocusRing><code>drawCustomFocusRing(<var title="">element</var>)</code></dfn> method, when invoked, must run
the following steps:</p>
@@ -39900,17 +40435,28 @@
<li>
- <p>Optionally, <a href=#inform>inform the user</a> that the
- focus is at the location given by the intended path. User agents
- may wait until the next time the <a href=#event-loop>event loop</a> reaches
- its "update the rendering" step to optionally inform the user.</p>
+ <p>Optionally, run the appropriate step from the following list:</p>
- </li>
+ <dl><dt>If the <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> object's <a href=#concept-canvas-context-bitmap-mode title=concept-canvas-context-bitmap-mode>context bitmap mode</a> is <a href=#concept-canvas-fixed title=concept-canvas-fixed>fixed</a></dt>
+ <dd><p><a href=#inform>Inform the user</a> that the focus is at the location given by the
+ intended path. The user agent may wait until the next time the <a href=#event-loop>event loop</a> reaches
+ its "update the rendering" step to optionally inform the user.</dd>
+
+ <dt>Otherwise</dt>
+
+ <dd><p>Add instructions to the <a href=#scratch-bitmap>scratch bitmap</a>'s <a href=#list-of-pending-interface-actions>list of pending interface
+ actions</a> that <a href=#inform>inform the user</a> that the focus is at the location of
+ the bitmap given by the intended path.</dd>
+
+ </dl></li>
+
<li><p>Return <var title="">result</var>.</li>
</ol><p>The <dfn id=dom-context-2d-scrollpathintoview title=dom-context-2d-scrollPathIntoView><code>scrollPathIntoView()</code></dfn>
- method, when invoked, must run the following steps:</p>
+ method, when invoked, if the <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> object's <a href=#concept-canvas-context-bitmap-mode title=concept-canvas-context-bitmap-mode>context bitmap mode</a> is <a href=#concept-canvas-fixed title=concept-canvas-fixed>fixed</a>, must run the following steps; and otherwise, must add
+ instructions to the <a href=#scratch-bitmap>scratch bitmap</a>'s <a href=#list-of-pending-interface-actions>list of pending interface actions</a>
+ that run the following steps:</p>
<ol><li><p>Let <var title="">the specified rectangle</var> be the
rectangle of the bounding box of the intended path.</li>
@@ -39922,11 +40468,11 @@
<li><p><a href=#scroll-an-element-into-view title="scroll an element into view">Scroll <var title="">notional child</var> into view</a> with the <var title="">align to top flag</var> set.</p>
- <li><p>Optionally, <a href=#inform>inform the user</a> that the
- caret and/or selection cover <var title="">the specified
- rectangle</var> of the canvas. User agents may wait until the next
- time the <a href=#event-loop>event loop</a> reaches its "update the rendering"
- step to optionally inform the user.</li>
+ <li><p>Optionally, <a href=#inform>inform the user</a> that the caret and/or selection cover
+ <var title="">the specified rectangle</var> of the canvas. If the
+ <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> object's <a href=#concept-canvas-context-bitmap-mode title=concept-canvas-context-bitmap-mode>context bitmap mode</a> was <a href=#concept-canvas-fixed title=concept-canvas-fixed>fixed</a> when the method was invoked, the user agent may wait
+ until the next time the <a href=#event-loop>event loop</a> reaches its "update the rendering" step to
+ optionally inform the user.</li>
</ol><p class=note id=inform>"Inform the user", as used in this
section, could mean calling a system accessibility API, which would
@@ -40058,20 +40604,19 @@
- <h6 id=drawing-images-to-the-canvas><span class=secno>4.8.11.1.13 </span>Drawing images to the canvas</h6>
+ <h6 id=drawing-images><span class=secno>4.8.11.2.14 </span>Drawing images</h6>
- <p>To draw images onto the canvas, the <dfn id=dom-context-2d-drawimage title=dom-context-2d-drawImage><code>drawImage</code></dfn> method
+ <p>To draw images, the <dfn id=dom-context-2d-drawimage title=dom-context-2d-drawImage><code>drawImage</code></dfn> method
can be used.</p>
+ <div class=impl>
+
<p>This method can be invoked with three different sets of arguments:</p>
<ul class=brief><li><code title="">drawImage(<var title="">image</var>, <var title="">dx</var>, <var title="">dy</var>)</code>
<li><code title="">drawImage(<var title="">image</var>, <var title="">dx</var>, <var title="">dy</var>, <var title="">dw</var>, <var title="">dh</var>)</code>
<li><code title="">drawImage(<var title="">image</var>, <var title="">sx</var>, <var title="">sy</var>, <var title="">sw</var>, <var title="">sh</var>, <var title="">dx</var>, <var title="">dy</var>, <var title="">dw</var>, <var title="">dh</var>)</code>
- </ul><!-- v3: drawImage() of an ImageData object might make sense (when resizing as well as filtering) - ack Charles Pritchard --><p>Each of those three can take either an
- <code><a href=#htmlimageelement>HTMLImageElement</a></code>, an <code><a href=#htmlcanvaselement>HTMLCanvasElement</a></code>, or
- an <code><a href=#htmlvideoelement>HTMLVideoElement</a></code> for the <var title="">image</var>
- argument.</p>
+ </ul></div>
<dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-drawImage><a href=#dom-context-2d-drawimage>drawImage</a></code>(<var title="">image</var>, <var title="">dx</var>, <var title="">dy</var>)</dt>
<dt><var title="">context</var> . <code title=dom-context-2d-drawImage><a href=#dom-context-2d-drawimage>drawImage</a></code>(<var title="">image</var>, <var title="">dx</var>, <var title="">dy</var>, <var title="">dw</var>, <var title="">dh</var>)</dt>
@@ -40096,141 +40641,108 @@
</dl><div class=impl>
- <p>If not specified, the <var title="">dw</var> and <var title="">dh</var> arguments must default to the values of <var title="">sw</var> and <var title="">sh</var>, interpreted such that
- one CSS pixel in the image is treated as one unit in the canvas
- coordinate space. If the <var title="">sx</var>, <var title="">sy</var>, <var title="">sw</var>, and <var title="">sh</var> arguments are omitted, they must default to 0, 0,
- the image's intrinsic width in image pixels, and the image's
- intrinsic height in image pixels, respectively. If the image has no
- intrinsic dimensions, the <i>concrete object size</i> must be used
- instead, as determined using the CSS "<a href=http://dev.w3.org/csswg/css3-images/#default-sizing>Concrete
- Object Size Resolution</a>" algorithm, with the <i>specified
- size</i> having neither a definite width nor height, nor any
- additional contraints, the object's intrinsic properties being those
- of the <var title="">image</var> argument, and the <i>default object
- size</i> being the size of the <code><a href=#the-canvas-element>canvas</a></code> element. <a href=#refsCSSIMAGES>[CSSIMAGES]</a></p>
+ <p>When the <code title=dom-context-2d-drawImage><a href=#dom-context-2d-drawimage>drawImage()</a></code> method is invoked, the user
+ agent must run the following steps:</p>
- <p>The <var title="">image</var> argument is an instance of either
- <code><a href=#htmlimageelement>HTMLImageElement</a></code>, <code><a href=#htmlcanvaselement>HTMLCanvasElement</a></code>, or
- <code><a href=#htmlvideoelement>HTMLVideoElement</a></code>.</p> <!-- createPattern() has an
- equivalent paragraph -->
+ <ol><li><p><a href=#check-the-usability-of-the-image-argument>Check the usability of the <var title="">image</var> argument</a>. If this
+ returns <i>aborted</i>, then an exception has been thrown and the method doesn't return anything;
+ abort these steps. If it returns <i>bad</i>, then abort these steps without drawing anything.
+ Otherwise it returns <i>good</i>; continue with these steps.</li>
- <p>If the <var title="">image</var> argument is an
- <code><a href=#htmlimageelement>HTMLImageElement</a></code> object that is not <a href=#img-good title=img-good>fully decodable</a>, or if the <var title="">image</var> argument is an <code><a href=#htmlvideoelement>HTMLVideoElement</a></code>
- object whose <code title=dom-media-readyState><a href=#dom-media-readystate>readyState</a></code>
- attribute is either <code title=dom-media-HAVE_NOTHING><a href=#dom-media-have_nothing>HAVE_NOTHING</a></code> or <code title=dom-media-HAVE_METADATA><a href=#dom-media-have_metadata>HAVE_METADATA</a></code>, then the
- implementation must return without drawing anything.</p> <!--
- createPattern() has an equivalent paragraph -->
+ <li>
- <p>If the <var title="">image</var> argument is an
- <code><a href=#htmlcanvaselement>HTMLCanvasElement</a></code> object with either a horizontal
- dimension or a vertical dimension equal to zero, then the
- implementation must throw an <code><a href=#invalidstateerror>InvalidStateError</a></code>
- exception.</p>
- <!-- createPattern() has an equivalent paragraph -->
+ <p>Establish the source and destination rectangles as follows:</p>
- <p>The source rectangle is the rectangle whose corners are the four
- points (<var title="">sx</var>, <var title="">sy</var>), (<span title=""><var title="">sx</var>+<var title="">sw</var></span>, <var title="">sy</var>), (<span title=""><var title="">sx</var>+<var title="">sw</var></span>, <span title=""><var title="">sy</var>+<var title="">sh</var></span>), (<var title="">sx</var>, <span title=""><var title="">sy</var>+<var title="">sh</var></span>).</p>
+ <p>If not specified, the <var title="">dw</var> and <var title="">dh</var> arguments must
+ default to the values of <var title="">sw</var> and <var title="">sh</var>, interpreted such
+ that one CSS pixel in the image is treated as one unit in the <a href=#scratch-bitmap>scratch bitmap</a>'s
+ coordinate space. If the <var title="">sx</var>, <var title="">sy</var>, <var title="">sw</var>,
+ and <var title="">sh</var> arguments are omitted, they must default to 0, 0, the image's
+ intrinsic width in image pixels, and the image's intrinsic height in image pixels, respectively.
+ If the image has no intrinsic dimensions, the <i>concrete object size</i> must be used instead,
+ as determined using the CSS "<a href=http://dev.w3.org/csswg/css3-images/#default-sizing>Concrete Object Size Resolution</a>"
+ algorithm, with the <i>specified size</i> having neither a definite width nor height, nor any
+ additional contraints, the object's intrinsic properties being those of the <var title="">image</var> argument, and the <i>default object size</i> being the size of the
+ <a href=#scratch-bitmap>scratch bitmap</a>. <a href=#refsCSSIMAGES>[CSSIMAGES]</a></p>
- <p>If one of the <var title="">sw</var> or <var title="">sh</var>
- arguments is zero, the implementation must throw an
- <code><a href=#indexsizeerror>IndexSizeError</a></code> exception.</p>
+ <p>The source rectangle is the rectangle whose corners are the four points (<var title="">sx</var>, <var title="">sy</var>), (<span title=""><var title="">sx</var>+<var title="">sw</var></span>, <var title="">sy</var>), (<span title=""><var title="">sx</var>+<var title="">sw</var></span>, <span title=""><var title="">sy</var>+<var title="">sh</var></span>),
+ (<var title="">sx</var>, <span title=""><var title="">sy</var>+<var title="">sh</var></span>).</p>
- <p>The destination rectangle is the rectangle whose corners are the
- four points (<var title="">dx</var>, <var title="">dy</var>),
- (<span title=""><var title="">dx</var>+<var title="">dw</var></span>, <var title="">dy</var>), (<span title=""><var title="">dx</var>+<var title="">dw</var></span>, <span title=""><var title="">dy</var>+<var title="">dh</var></span>), (<var title="">dx</var>, <span title=""><var title="">dy</var>+<var title="">dh</var></span>).</p>
+ <p>The destination rectangle is the rectangle whose corners are the four points (<var title="">dx</var>, <var title="">dy</var>), (<span title=""><var title="">dx</var>+<var title="">dw</var></span>, <var title="">dy</var>), (<span title=""><var title="">dx</var>+<var title="">dw</var></span>, <span title=""><var title="">dy</var>+<var title="">dh</var></span>),
+ (<var title="">dx</var>, <span title=""><var title="">dy</var>+<var title="">dh</var></span>).</p>
- <p>When the source rectangle is outside the source image, it must be
- clipped to the source image, and the destination rectangle must be
- clipped in the same proportion.</p>
+ <p>When the source rectangle is outside the source image, it must be clipped to the source
+ image, and the destination rectangle must be clipped in the same proportion.</p>
- <p>When <code title=dom-context-2d-drawImage><a href=#dom-context-2d-drawimage>drawImage()</a></code> is
- invoked, the region of the image specified by the source rectangle
- must be painted on the region of the canvas specified by the
- destination rectangle, after applying the <a href=#transformations title=dom-context-2d-transformation>current transformation
- matrix</a> to the points of the destination rectangle.</p>
+ </li>
- <p>The original image data of the source image must be used, not the
- image as it is rendered (e.g. <code title=attr-dim-width><a href=#attr-dim-width>width</a></code> and <code title=attr-dim-height><a href=#attr-dim-height>height</a></code> attributes on the source
- element have no effect). The image data must be processed in the
- original direction, even if the dimensions given are negative. <!--
- remove that last sentence if it causes confusion. Someone once
- suggested that 5,5,-2,-2 was different than 3,3,2,2; this is trying
- to clarify that this is no the case. --></p>
+ <li><p>If one of the <var title="">sw</var> or <var title="">sh</var> arguments is zero, throw an
+ <code><a href=#indexsizeerror>IndexSizeError</a></code> exception and abort these steps.</li>
- <p>If the <code title=dom-context-2d-imageSmoothingEnabled><a href=#dom-context-2d-imagesmoothingenabled>imageSmoothingEnabled</a></code>
- attribute is set to true, then the user agent should attempt to
- apply a smoothing algorithm to the image data when it is scaled.
- Otherwise, the image must be rendered using nearest-neighbor
- interpolation.</p>
+ <li>
- <p class=note>This specification does not define the precise
- algorithm to use when scaling an image when the <code title=dom-context-2d-imageSmoothingEnabled><a href=#dom-context-2d-imagesmoothingenabled>imageSmoothingEnabled</a></code>
- attribute is set to true.</p>
+ <p>Paint the region of the <var title="">image</var> argument specified by the source rectangle
+ on the region of the rendering context's <a href=#scratch-bitmap>scratch bitmap</a> specified by the
+ destination rectangle, after applying the <a href=#transformations title=dom-context-2d-transformation>current
+ transformation matrix</a> to the points of the destination rectangle.</p>
- <p class=note>When a canvas is drawn onto itself, the <a href=#drawing-model>drawing
- model</a> requires the source to be copied before the image is drawn
- back onto the canvas, so it is possible to copy parts of a canvas
- onto overlapping parts of itself.</p>
+ <p>The image data must be processed in the original direction, even if the dimensions given are
+ negative. <!-- note: that last sentence has several times been needed to correct people who
+ suggested that 5,5,-2,-2 was different than 3,3,2,2 --></p>
- <p>If the original image data is a bitmap image, 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.)</p>
- <!-- see CORE-32111 and:
- http://krijnhoetmer.nl/irc-logs/whatwg/20100818#l-737
- http://www.w3.org/Bugs/Public/show_bug.cgi?id=10799#c11
- -->
- <!-- createPattern() has a similar paragraph with different rules -->
+ <p>If the <code title=dom-context-2d-imageSmoothingEnabled><a href=#dom-context-2d-imagesmoothingenabled>imageSmoothingEnabled</a></code>
+ attribute is set to true, then the user agent should attempt to apply a smoothing algorithm to
+ the image data when it is scaled. Otherwise, the image must be rendered using nearest-neighbor
+ interpolation.</p>
- <p>When the <code title=dom-context-2d-drawImage><a href=#dom-context-2d-drawimage>drawImage()</a></code> method
- is passed an animated image as its <var title="">image</var>
- argument, the user agent must use the poster frame of the animation,
- or, if there is no poster frame, the first frame of the
- animation.</p>
- <!-- createPattern() has an equivalent paragraph -->
+ <p class=note>This specification does not define the precise algorithm to use when scaling an
+ image when the <code title=dom-context-2d-imageSmoothingEnabled><a href=#dom-context-2d-imagesmoothingenabled>imageSmoothingEnabled</a></code>
+ attribute is set to true.</p>
- <p>When the <var title="">image</var> argument is an
- <code><a href=#htmlvideoelement>HTMLVideoElement</a></code>, then the frame at the <a href=#current-playback-position>current
- playback position</a> must be used as the source image, and the
- source image's dimensions must be the <a href=#concept-video-intrinsic-width title=concept-video-intrinsic-width>intrinsic width</a> and
- <a href=#concept-video-intrinsic-height title=concept-video-intrinsic-height>intrinsic height</a>
- of the <a href=#media-resource>media resource</a> (i.e. after any aspect-ratio
- correction has been applied).</p>
- <!-- createPattern() has an equivalent paragraph -->
+ <p class=note>When a <code><a href=#the-canvas-element>canvas</a></code> or <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> object is
+ drawn onto itself, the <a href=#drawing-model>drawing model</a> requires the source to be copied before the
+ image is drawn, so it is possible to copy parts of a <code><a href=#the-canvas-element>canvas</a></code> or <a href=#scratch-bitmap>scratch
+ bitmap</a> onto overlapping parts of itself.</p>
- <p>Images are painted without affecting the current path, and are
- subject to <a href=#shadows title=shadows>shadow effects</a>, <a href=#dom-context-2d-globalalpha title=dom-context-2d-globalAlpha>global alpha</a>, the
- <a href=#clipping-region>clipping region</a>, and <a href=#dom-context-2d-globalcompositeoperation title=dom-context-2d-globalCompositeOperation>global composition
- operators</a>.</p>
+ <p>If the original image data is a bitmap image, 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.)</p>
+ <!-- see CORE-32111 and:
+ http://krijnhoetmer.nl/irc-logs/whatwg/20100818#l-737
+ http://www.w3.org/Bugs/Public/show_bug.cgi?id=10799#c11
+ -->
+ <!-- createPattern() has a similar paragraph with different rules -->
- </div>
+ <p>Images are painted without affecting the current path, and are subject to <a href=#shadows title=shadows>shadow effects</a>, <a href=#dom-context-2d-globalalpha title=dom-context-2d-globalAlpha>global
+ alpha</a>, the <a href=#clipping-region>clipping region</a>, and <a href=#dom-context-2d-globalcompositeoperation title=dom-context-2d-globalCompositeOperation>global composition operators</a>.</p>
+ </li>
- <h6 id=hit-regions><span class=secno>4.8.11.1.14 </span>Hit regions</h6>
+<!--ADD-TOPIC:Security-->
+ <li><p>If <a href=#the-image-argument-is-not-origin-clean>the <var title="">image argument</var> is not origin-clean</a>, set the
+ <a href=#scratch-bitmap>scratch bitmap</a>'s <a href=#concept-canvas-origin-clean title=concept-canvas-origin-clean>origin-clean</a> flag
+ to false.</li>
+<!--REMOVE-TOPIC:Security-->
- <p>Each <code><a href=#the-canvas-element>canvas</a></code> element whose <a href=#primary-context>primary
- context</a> is a <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> object
- must have a <dfn id=hit-region-list>hit region list</dfn> associated with its
+ </ol></div>
+
+
+ <h6 id=hit-regions><span class=secno>4.8.11.2.15 </span>Hit regions</h6>
+
+ <p>A <dfn id=hit-region-list>hit region list</dfn> is a list of <a href=#hit-region title="hit region">hit regions</a> for a
bitmap.</p>
- <p>The <a href=#hit-region-list>hit region list</a> is a list of <a href=#hit-region title="hit
- region">hit regions</a>.</p>
+ <p>Each <dfn id=hit-region>hit region</dfn> consists of the following information:</p>
- <p>Each <dfn id=hit-region>hit region</dfn> consists of the following
- information:</p>
+ <ul><li><p>A <dfn id="hit-region's-set-of-pixels" title="hit region's set of pixels">set of pixels</dfn> on the bitmap for which this
+ region is responsible.</li>
- <ul><li><p>A <dfn id="hit-region's-set-of-pixels" title="hit region's set of pixels">set of
- pixels</dfn> on the <code><a href=#the-canvas-element>canvas</a></code> element's bitmap for which
- this region is responsible.</li>
+ <li><p>A <dfn id="hit-region's-bounding-circumference" title="hit region's bounding circumference">bounding circumference</dfn> on the
+ bitmap that surrounds the <a href="#hit-region's-set-of-pixels">hit region's set of pixels</a> as they stood when it was
+ created.</li>
- <li><p>A <dfn id="hit-region's-bounding-circumference" title="hit region's bounding circumference">bounding
- circumference</dfn> on the <code><a href=#the-canvas-element>canvas</a></code> element's bitmap
- that surrounds the <a href="#hit-region's-set-of-pixels">hit region's set of pixels</a> as they
- stood when it was created.</li>
-
<li><p>Optionally, a non-empty string representing an <dfn id="hit-region's-id" title="hit region's ID">ID</dfn> for distinguishing the region
from others.</li>
@@ -40254,11 +40766,11 @@
control">control</a>, or an <a href="#hit-region's-unbacked-region-description" title="hit region's unbacked
region description">unbacked region description</a>.</p>
- <p>A <dfn id="hit-region's-control" title="hit region's control">control</dfn> is just a
- reference to an <code><a href=#element>Element</a></code> node, to which, in certain
- conditions, the user agent will route events, and from which the
- user agent will determine the state of the hit region for the
- purposes of accessibility tools.</p>
+ <p>A <dfn id="hit-region's-control" title="hit region's control">control</dfn> is just a reference to an
+ <code><a href=#element>Element</a></code> node, to which, in certain conditions, the user agent will route events,
+ and from which the user agent will determine the state of the hit region for the purposes of
+ accessibility tools. (The control is ignored when it is not a descendant of the
+ <code><a href=#the-canvas-element>canvas</a></code> element.)</p>
<p>An <dfn id="hit-region's-unbacked-region-description" title="hit region's unbacked region
description">unbacked region description</dfn> consists of the
@@ -40278,8 +40790,7 @@
<dd>
- <p>Adds a hit region to the canvas bitmap. The argument is an
- object with the following members:</p>
+ <p>Adds a hit region to the bitmap. The argument is an object with the following members:</p>
<dl><dt><code title=dom-HitRegionOptions-path>path</code> (default null)
@@ -40337,14 +40848,14 @@
ID in the mouse events.</li>
<li>With a control, they can make routing events to DOM elements
- automatic, allowing e.g. clicks on a canvas to automatically
+ automatic, allowing e.g. clicks on a <code><a href=#the-canvas-element>canvas</a></code> to automatically
submit a form via a <code><a href=#the-button-element>button</a></code> element.</li>
<li>With a label, they can make it easier for users to explore a
- canvas without seeing it, e.g. by touch on a mobile device.</li>
+ <code><a href=#the-canvas-element>canvas</a></code> without seeing it, e.g. by touch on a mobile device.</li>
<li>With a cursor, they can make it easier for different regions
- of the canvas to have different cursors, with the user agent
+ of the <code><a href=#the-canvas-element>canvas</a></code> to have different cursors, with the user agent
automatically switching between them.</li>
</ul></dd>
@@ -40373,16 +40884,14 @@
<a href=#hit-region>hit region</a> for which <var title="">A</var> is an
<a href=#ancestor-region>ancestor region</a>.</p>
- <p><dfn id=the-region-identified-by-the-id>The region identified by the ID</dfn> <var title="">ID</var> in a <code><a href=#the-canvas-element>canvas</a></code> element <var title="">ancestor</var> is the value returned by the following
- algorithm (which can return a <a href=#hit-region>hit region</a> or
- nothing):</p>
+ <p><dfn id=the-region-identified-by-the-id>The region identified by the ID</dfn> <var title="">ID</var> in a bitmap <var title="">bitmap</var> is the value returned by the following algorithm (which can return a
+ <a href=#hit-region>hit region</a> or nothing):</p>
<ol><li><p>If <var title="">ID</var> is null, return nothing and abort
these steps.</li>
<li><p>Let <var title="">list</var> be the <a href=#hit-region-list>hit region
- list</a> associated with <var title="">ancestor</var>'s
- bitmap.</li>
+ list</a> associated with <var title="">bitmap</var>.</li>
<li><p>If there is a <a href=#hit-region>hit region</a> in <var title="">list</var> whose <a href="#hit-region's-id" title="hit region's ID">ID</a>
is a <a href=#case-sensitive>case-sensitive</a> match for <var title="">ID</var>,
@@ -40391,17 +40900,12 @@
<li><p>Otherwise, return nothing.</li>
- </ol><p><dfn id=the-region-representing-the-control>The region representing the control</dfn> <var title="">control</var> for a <code><a href=#the-canvas-element>canvas</a></code> element <var title="">ancestor</var> is the value returned by the following
- algorithm (which can return a <a href=#hit-region>hit region</a> or
- nothing):</p>
+ </ol><p><dfn id=the-region-representing-the-control>The region representing the control</dfn> <var title="">control</var> for a bitmap <var title="">bitmap</var> is the value returned by the following algorithm (which can return a
+ <a href=#hit-region>hit region</a> or nothing):</p>
- <ol><li><p>If <var title="">control</var> is not a descendant of <var title="">ancestor</var>, then return nothing and abort these
- steps.</li>
+ <ol><li><p>Let <var title="">list</var> be the <a href=#hit-region-list>hit region
+ list</a> associated with <var title="">bitmap</var>.</li>
- <li><p>Let <var title="">list</var> be the <a href=#hit-region-list>hit region
- list</a> associated with <var title="">ancestor</var>'s
- bitmap.</li>
-
<li><p>If there is a <a href=#hit-region>hit region</a> in <var title="">list</var> whose <a href="#hit-region's-control" title="hit region's
control">control</a> is <var title="">control</var>, then
return that <a href=#hit-region>hit region</a> and abort these
@@ -40436,17 +40940,13 @@
region's parent">parent</a>, then let <var title="">region</var> be that <a href="#hit-region's-parent">hit region's parent</a>,
and return to the step labeled <i>loop</i>.</li>
- <li><p>Otherwise, return the used value of the 'cursor' property
- for the <code><a href=#the-canvas-element>canvas</a></code> element. <a href=#refsCSSUI>[CSSUI]</a></li>
+ <li><p>Otherwise, return the used value of the 'cursor' property for the <code><a href=#the-canvas-element>canvas</a></code>
+ element, if any; if there isn't one, return 'auto'. <a href=#refsCSSUI>[CSSUI]</a></li>
- </ol><p><dfn id=the-region-for-a-pixel>The region for a pixel</dfn> <var title="">pixel</var> on a
- <code><a href=#the-canvas-element>canvas</a></code> element <var title="">ancestor</var> is the
- value returned by the following algorithm (which can return a
+ </ol><p><dfn id=the-region-for-a-pixel>The region for a pixel</dfn> <var title="">pixel</var> on a bitmap <var title="">bitmap</var> is the value returned by the following algorithm (which can return a
<a href=#hit-region>hit region</a> or nothing):</p>
- <ol><li><p>Let <var title="">list</var> be the <a href=#hit-region-list>hit region
- list</a> associated with <var title="">ancestor</var>'s
- bitmap.</li>
+ <ol><li><p>Let <var title="">list</var> be the <a href=#hit-region-list>hit region list</a> associated with <var title="">bitmap</var>.</li>
<li><p>If there is a <a href=#hit-region>hit region</a> in <var title="">list</var> whose <a href="#hit-region's-set-of-pixels" title="hit region's set of
pixels">set of pixels</a> contains <var title="">pixel</var>,
@@ -40455,26 +40955,20 @@
<li><p>Otherwise, return nothing.</li>
- </ol><p>To <dfn id=clear-regions-that-cover-the-pixels>clear regions that cover the pixels</dfn> <var title="">pixels</var> on a <code><a href=#the-canvas-element>canvas</a></code> element <var title="">ancestor</var>, the user agent must run the following
- steps:</p>
+ </ol><p>To <dfn id=clear-regions-that-cover-the-pixels>clear regions that cover the pixels</dfn> <var title="">pixels</var> on a bitmap <var title="">bitmap</var>, the user agent must run the following steps:</p>
- <ol><li><p>Let <var title="">list</var> be the <a href=#hit-region-list>hit region
- list</a> associated with <var title="">ancestor</var>'s
- bitmap.</li>
+ <ol><li><p>Let <var title="">list</var> be the <a href=#hit-region-list>hit region list</a> associated with <var title="">bitmap</var>.</li>
<li><p>Remove all pixels in <var title="">pixels</var> from the
<a href="#hit-region's-set-of-pixels" title="hit region's set of pixels">set of pixels</a> of
each <a href=#hit-region>hit region</a> in <var title="">list</var>.</li>
- <li><p><a href=#garbage-collect-the-regions>Garbage-collect the regions</a> of <var title="">ancestor</var>.</li>
+ <li><p><a href=#garbage-collect-the-regions>Garbage-collect the regions</a> of <var title="">bitmap</var>.</li>
- </ol><p>To <dfn id=garbage-collect-the-regions>garbage-collect the regions</dfn> of a
- <code><a href=#the-canvas-element>canvas</a></code> element <var title="">ancestor</var>, the user
+ </ol><p>To <dfn id=garbage-collect-the-regions>garbage-collect the regions</dfn> of a bitmap <var title="">bitmap</var>, the user
agent must run the following steps:</p>
- <ol><li><p>Let <var title="">list</var> be the <a href=#hit-region-list>hit region
- list</a> associated with <var title="">ancestor</var>'s
- bitmap.</li>
+ <ol><li><p>Let <var title="">list</var> be the <a href=#hit-region-list>hit region list</a> associated with <var title="">bitmap</var>.</li>
<li><p><i>Loop</i>: Let <var title="">victim</var> be the first
<a href=#hit-region>hit region</a> in <var title="">list</var> to have an
@@ -40491,10 +40985,10 @@
<li><p>Jump back to the step labeled <i>loop</i>.</li>
- </ol><p class=note>Adding a new region and calling <code title=dom-context-2d-clearRect><a href=#dom-context-2d-clearrect>clearRect()</a></code> are the two ways
- this clearing algorithm can be invoked. Resizing the canvas also
- clears the <a href=#hit-region-list>hit region list</a> (since it clears the canvas
- back to its initial state).</p>
+ </ol><p class=note>Adding a new region and calling <code title=dom-context-2d-clearRect><a href=#dom-context-2d-clearrect>clearRect()</a></code> are the two ways this clearing algorithm can
+ be invoked. The <a href=#hit-region-list>hit region list</a> itself is also reset when the rendering context is
+ reset, e.g. when a <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> object is bound to or unbound from a
+ <code><a href=#the-canvas-element>canvas</a></code>, or when the dimensions of the bitmap are changed.</p>
<hr><p>When the <dfn id=dom-context-2d-addhitregion title=dom-context-2d-addHitRegion><code>addHitRegion()</code></dfn>
method is invoked, the user agent must run the following steps:</p>
@@ -40529,7 +41023,7 @@
<li><p>If the <var title="">arguments</var> object's <code title=dom-HitRegionOptions-id>id</code> member is not null, then
let <var title="">previous region for this ID</var> be <a href=#the-region-identified-by-the-id>the
region identified by the ID</a> given by the <code title=dom-HitRegionOptions-id>id</code> member's value in this
- <code><a href=#the-canvas-element>canvas</a></code> element, if any. If the <code title=dom-HitRegionOptions-id>id</code> member is null or no such
+ <a href=#scratch-bitmap>scratch bitmap</a>, if any. If the <code title=dom-HitRegionOptions-id>id</code> member is null or no such
region currently exists, let <var title="">previous region for this
ID</var> be null.</li>
@@ -40539,7 +41033,7 @@
<li><p>If the <var title="">arguments</var> object's <code title=dom-HitRegionOptions-parent>parent</code> member is not
null, then let <var title="">parent region</var> be <a href=#the-region-identified-by-the-id>the
region identified by the ID</a> given by the <code title=dom-HitRegionOptions-parent>parent</code> member's value in
- this <code><a href=#the-canvas-element>canvas</a></code> element, if any. If the <code title=dom-HitRegionOptions-parent>parent</code> member is null or
+ the <a href=#scratch-bitmap>scratch bitmap</a>, if any. If the <code title=dom-HitRegionOptions-parent>parent</code> member is null or
no such region currently exists, let <var title="">parent
region</var> be null.</li>
@@ -40703,7 +41197,7 @@
null, then let <var title="">previous region for the control</var>
be <a href=#the-region-representing-the-control>the region representing the control</a> given by the
<code title=dom-HitRegionOptions-control>control</code> member's
- value for this <code><a href=#the-canvas-element>canvas</a></code> element, if any. If the <code title=dom-HitRegionOptions-control>control</code> member is null
+ value for this <a href=#scratch-bitmap>scratch bitmap</a>, if any. If the <code title=dom-HitRegionOptions-control>control</code> member is null
or no such region currently exists, let <var title="">previous
region for the control</var> be null.</li>
@@ -40716,50 +41210,40 @@
its descendants, as we know that our parent isn't part of that
subtree. -->
- <li><p>If there is a <var title="">previous region with this
- control</var>, remove it from the <code><a href=#the-canvas-element>canvas</a></code> element's
- <a href=#hit-region-list>hit region list</a>; then, if it had a <a href="#hit-region's-parent" title="hit
- region's parent">parent</a> region, decrement that <a href="#hit-region's-child-count">hit
- region's child count</a> by one.</li> <!-- we garbage
- collect the regions below -->
+ <li><p>If there is a <var title="">previous region with this control</var>, remove it from the
+ <a href=#scratch-bitmap>scratch bitmap</a>'s <a href=#hit-region-list>hit region list</a>; then, if it had a <a href="#hit-region's-parent" title="hit
+ region's parent">parent</a> region, decrement that <a href="#hit-region's-child-count">hit region's child count</a> by
+ one.</li> <!-- we garbage collect the regions below -->
- <li><p>If there is a <var title="">previous region with this
- ID</var>, remove it, and all <a href=#hit-region title="hit region">hit
- regions</a> for which it is an <a href=#ancestor-region>ancestor region</a>,
- from the <code><a href=#the-canvas-element>canvas</a></code> element's <a href=#hit-region-list>hit region
- list</a>; then, if it had a <a href="#hit-region's-parent" title="hit region's
- parent">parent</a> region, decrement that <a href="#hit-region's-child-count">hit region's
- child count</a> by one.</li> <!-- we garbage collect the
- regions below -->
+ <li><p>If there is a <var title="">previous region with this ID</var>, remove it, and all <a href=#hit-region title="hit region">hit regions</a> for which it is an <a href=#ancestor-region>ancestor region</a>, from the
+ <a href=#scratch-bitmap>scratch bitmap</a>'s <a href=#hit-region-list>hit region list</a>; then, if it had a <a href="#hit-region's-parent" title="hit
+ region's parent">parent</a> region, decrement that <a href="#hit-region's-child-count">hit region's child count</a> by
+ one.</li> <!-- we garbage collect the regions below -->
<li><p>If there is a <var title="">parent region</var>, increment
its <a href="#hit-region's-child-count">hit region's child count</a> by one.</li>
- <li><p><a href=#clear-regions-that-cover-the-pixels>Clear regions that cover the pixels</a> in <var title="">region</var>'s <a href="#hit-region's-set-of-pixels" title="hit region's set of
- pixels">set of pixels</a> on this <code><a href=#the-canvas-element>canvas</a></code>
- element.</li> <!-- this is what garbage collects the earlier
- regions -->
+ <li><p><a href=#clear-regions-that-cover-the-pixels>Clear regions that cover the pixels</a> in <var title="">region</var>'s <a href="#hit-region's-set-of-pixels" title="hit region's set of pixels">set of pixels</a> on this <a href=#scratch-bitmap>scratch
+ bitmap</a>.</li> <!-- this is what garbage collects the earlier regions -->
- <li><p>Add <var title="">region</var> to the <code><a href=#the-canvas-element>canvas</a></code>
- element's <a href=#hit-region-list>hit region list</a>.</li>
+ <li><p>Add <var title="">region</var> to the <a href=#scratch-bitmap>scratch bitmap</a>'s element's <a href=#hit-region-list>hit
+ region list</a>.</li>
</ol><p>When the <dfn id=dom-context-2d-removehitregion title=dom-context-2d-removeHitRegion><code>removeHitRegion()</code></dfn>
method is invoked, the user agent must run the following steps:</p>
- <ol><li><p>Let <var title="">region</var> be <a href=#the-region-identified-by-the-id>the region
- identified by the ID</a> given by the method's argument in this
- <code><a href=#the-canvas-element>canvas</a></code> element, if any. If no such region currently
- exists, abort these steps.</li>
+ <ol><li><p>Let <var title="">region</var> be <a href=#the-region-identified-by-the-id>the region identified by the ID</a> given by
+ the method's argument in the rendering context's <a href=#scratch-bitmap>scratch bitmap</a>. If no such region
+ currently exists, abort these steps.</li>
- <li><p>Remove <var title="">region</var>, and all <a href=#hit-region title="hit
- region">hit regions</a> for which it is an <a href=#ancestor-region>ancestor
- region</a>, from the <code><a href=#the-canvas-element>canvas</a></code> element's <a href=#hit-region-list>hit
- region list</a>; then, if it had a <a href="#hit-region's-parent" title="hit region's
- parent">parent</a> region, decrement that <a href="#hit-region's-child-count">hit region's
- child count</a> by one.</li> <!-- we garbage collect the
- regions below -->
+ <li><p>Remove <var title="">region</var>, and all <a href=#hit-region title="hit region">hit regions</a> for
+ which it is an <a href=#ancestor-region>ancestor region</a>, from the rendering context's <a href=#scratch-bitmap>scratch
+ bitmap</a>'s <a href=#hit-region-list>hit region list</a>; then, if it had a <a href="#hit-region's-parent" title="hit region's
+ parent">parent</a> region, decrement that <a href="#hit-region's-child-count">hit region's child count</a> by
+ one.</li> <!-- we garbage collect the regions below -->
- <li><p><a href=#garbage-collect-the-regions>Garbage-collect the regions</a> of <var title="">ancestor</var>.</li>
+ <li><p><a href=#garbage-collect-the-regions>Garbage-collect the regions</a> of the rendering context's <a href=#scratch-bitmap>scratch
+ bitmap</a>.</li>
</ol></div>
@@ -40793,11 +41277,10 @@
ID</a> if the mouse was over a hit region when the event was
fired.</p>
- <p>When a <code><a href=#mouseevent>MouseEvent</a></code> is to be fired at a
- <code><a href=#the-canvas-element>canvas</a></code> element by the user agent in response to a
- pointing device action, the user agent must instead follow these
- steps. If these steps say to <i>act as normal</i>, that means that
- the event must be fired as it would have had these requirements not
+ <p>When a <code><a href=#mouseevent>MouseEvent</a></code> is to be fired at a <code><a href=#the-canvas-element>canvas</a></code> element by the user
+ agent in response to a pointing device action, if the <code><a href=#the-canvas-element>canvas</a></code> element has a <a href=#hit-region-list>hit
+ region list</a>, the user agent must instead follow these steps. If these steps say to <i>act
+ as normal</i>, that means that the event must be fired as it would have had these requirements not
been applied.</p>
<ol><li><p>If the pointing device is not indicating a pixel on the
@@ -40809,7 +41292,7 @@
<li><p>Let <var title="">region</var> be the <a href=#hit-region>hit
region</a> that is <a href=#the-region-for-a-pixel title="the region for a pixel">the
region for the pixel</a> <var title="">pixel</var> on this
- <code><a href=#the-canvas-element>canvas</a></code> element, if any.</li>
+ <code><a href=#the-canvas-element>canvas</a></code> element's bitmap, if any.</li>
<li><p>If there is no <var title="">region</var>, then act as
normal and abort these steps.</li>
@@ -40821,8 +41304,9 @@
event object's <code title=dom-MouseEvent-region><a href=#dom-mouseevent-region>region</a></code>
attribute to <var title="">id</var>.</li>
- <li><p>Let <var title="">control</var> be the <var title="">region</var>'s <a href="#hit-region's-control" title="hit region's
- control">control</a>, if any.</li>
+ <li><p>Let <var title="">control</var> be the <a href=#the-control-represented-by-a-region title="the control represented by a
+ region">control represented by</a> <var title="">region</var> for this <code><a href=#the-canvas-element>canvas</a></code>
+ element, if any.</li>
<li><p>If there is a <var title="">control</var>, then target the
event object at <var title="">control</var> instead of the
@@ -40831,12 +41315,10 @@
<li><p>Continue dispatching the event, but with the updated event
object and target as given in the above steps.</li>
- </ol><hr><p>When a user's pointing device cursor is positioned over a
- <code><a href=#the-canvas-element>canvas</a></code> element, user agents should render the pointing
- device cursor according to the cursor specification described by
- <a href=#the-cursor-for-a-hit-region title="the cursor for a hit region">the cursor for the hit
- region</a> that is <a href=#the-region-for-a-pixel title="the region for a pixel">the
- region for the pixel</a> that the pointing device designates.</p>
+ </ol><hr><p>When a user's pointing device cursor is positioned over a <code><a href=#the-canvas-element>canvas</a></code> element, user
+ agents should render the pointing device cursor according to the cursor specification described by
+ <a href=#the-cursor-for-a-hit-region title="the cursor for a hit region">the cursor for the hit region</a> that is <a href=#the-region-for-a-pixel title="the region for a pixel">the region for the pixel</a> that the pointing device designates
+ on the <code><a href=#the-canvas-element>canvas</a></code> element's bitmap.</p>
<hr><p>User agents are encouraged to make use of the information present
in a <code><a href=#the-canvas-element>canvas</a></code> element's <a href=#hit-region-list>hit region list</a> to
@@ -40853,26 +41335,23 @@
region's bounding circumference</a> gives the region of the
screen to use when representing the node (if appropriate).</p>
- <p>The semantics of a <a href=#hit-region>hit region</a> for the purposes of
- this virtual DOM tree are those of the <a href="#hit-region's-control">hit region's
- control</a>, if it has one, or else of a non-interactive element
- whose ARIA role, if any, is that given by the <a href="#hit-region's-aria-role">hit region's
- ARIA role</a>, and whose textual representation, if any, is given
- by the <a href="#hit-region's-label">hit region's label</a>.</p>
+ <p>The semantics of a <a href=#hit-region>hit region</a> for the purposes of this virtual DOM tree are those
+ of the <a href=#the-control-represented-by-a-region title="the control represented by a region">the control represented by the
+ region</a>, if it has one, or else of a non-interactive element whose ARIA role, if any, is
+ that given by the <a href="#hit-region's-aria-role">hit region's ARIA role</a>, and whose textual representation, if any,
+ is given by the <a href="#hit-region's-label">hit region's label</a>.</p>
- <p>For the purposes of accessibility tools, when an element <var title="">C</var> is a descendant of a <code><a href=#the-canvas-element>canvas</a></code> element
- and there is <a href=#the-region-representing-the-control title="the region representing the control">a
- region representing the control</a> <var title="">C</var> for that
- <code><a href=#the-canvas-element>canvas</a></code> element, then the element's position relative to
- the document should be presented as if it was that region in the
- <code><a href=#the-canvas-element>canvas</a></code> element's virtual DOM tree.</p>
+ <p>For the purposes of accessibility tools, when an element <var title="">C</var> is a descendant
+ of a <code><a href=#the-canvas-element>canvas</a></code> element and there is <a href=#the-region-representing-the-control title="the region representing the control">a
+ region representing the control</a> <var title="">C</var> for that <code><a href=#the-canvas-element>canvas</a></code>
+ element's bitmap, then the element's position relative to the document should be presented as if
+ it was that region in the <code><a href=#the-canvas-element>canvas</a></code> element's virtual DOM tree.</p>
- <p>The semantics of a <a href=#hit-region>hit region</a> for the purposes of
- this virtual DOM tree are those of the <a href="#hit-region's-control">hit region's
- control</a>, if it has one, or else of a non-interactive element
- whose ARIA role, if any, is that given by the <a href="#hit-region's-aria-role">hit region's
- ARIA role</a>, and whose textual representation, if any, is given
- by the <a href="#hit-region's-label">hit region's label</a>.</p>
+ <p>The semantics of a <a href=#hit-region>hit region</a> for the purposes of this virtual DOM tree are those
+ of the <a href=#the-control-represented-by-a-region title="the control represented by a region">the control represented by the
+ region</a>, if it has one, or else of a non-interactive element whose ARIA role, if any, is
+ that given by the <a href="#hit-region's-aria-role">hit region's ARIA role</a>, and whose textual representation, if any,
+ is given by the <a href="#hit-region's-label">hit region's label</a>.</p>
<p class=note>Thus, for instance, a user agent on a touch-screen
device could provide haptic feedback when the user croses over a
@@ -40890,7 +41369,7 @@
</div>
- <h6 id=pixel-manipulation><span class=secno>4.8.11.1.15 </span><dfn>Pixel manipulation</dfn></h6>
+ <h6 id=pixel-manipulation><span class=secno>4.8.11.2.16 </span><dfn>Pixel manipulation</dfn></h6>
<dl class=domintro><dt><var title="">imagedata</var> = <var title="">context</var> . <code title=dom-context-2d-createImageData><a href=#dom-context-2d-createimagedata>createImageData</a></code>(<var title="">sw</var>, <var title="">sh</var>)</dt>
@@ -40928,8 +41407,8 @@
<dd>
- <p>Returns an <code><a href=#imagedata>ImageData</a></code> object containing the image
- data for the given rectangle of the canvas.</p>
+ <p>Returns an <code><a href=#imagedata>ImageData</a></code> object containing the image data for the given rectangle of
+ the bitmap.</p>
<p>Throws an <code><a href=#indexsizeerror>IndexSizeError</a></code> exception if the either
of the width or height arguments are zero.</p>
@@ -40943,8 +41422,8 @@
<dd>
- <p>Returns an <code><a href=#imagedata>ImageData</a></code> object containing the image
- data for the given rectangle of the canvas.</p>
+ <p>Returns an <code><a href=#imagedata>ImageData</a></code> object containing the image data for the given rectangle of
+ the bitmap.</p>
<p>Throws an <code><a href=#indexsizeerror>IndexSizeError</a></code> exception if the either
of the width or height arguments are zero.</p>
@@ -40980,9 +41459,8 @@
<dd>
- <p>Paints the data from the given <code><a href=#imagedata>ImageData</a></code> object
- onto the canvas. If a dirty rectangle is provided, only the pixels
- from that rectangle are painted.</p>
+ <p>Paints the data from the given <code><a href=#imagedata>ImageData</a></code> object onto the bitmap. If a dirty
+ rectangle is provided, only the pixels from that rectangle are painted.</p>
<p>The <code title=dom-context-2d-globalAlpha><a href=#dom-context-2d-globalalpha>globalAlpha</a></code>
and <code title=dom-context-2d-globalCompositeOperation><a href=#dom-context-2d-globalcompositeoperation>globalCompositeOperation</a></code>
@@ -40994,8 +41472,7 @@
<p>Throws a <code><a href=#notsupportederror>NotSupportedError</a></code> exception if any of the
arguments are not finite.</p>
- <p>Each pixel in the image data is mapped to one coordinate space
- unit on the canvas.</p>
+ <p>Each pixel in the image data is mapped to one coordinate space unit on the bitmap.</p>
</dd>
@@ -41003,10 +41480,9 @@
<dd>
- <p>Paints the data from the given <code><a href=#imagedata>ImageData</a></code> object
- onto the canvas, at the canvas bitmap's native resolution. If a
- dirty rectangle is provided, only the pixels from that rectangle
- are painted.</p>
+ <p>Paints the data from the given <code><a href=#imagedata>ImageData</a></code> object onto the bitmap, at the bitmap's
+ native pixel density. If a dirty rectangle is provided, only the pixels from that rectangle are
+ painted.</p>
<p>The <code title=dom-context-2d-globalAlpha><a href=#dom-context-2d-globalalpha>globalAlpha</a></code>
and <code title=dom-context-2d-globalCompositeOperation><a href=#dom-context-2d-globalcompositeoperation>globalCompositeOperation</a></code>
@@ -41039,49 +41515,42 @@
with transparent black.</p>
<p>When the <dfn id=dom-context-2d-createimagedatahd title=dom-context-2d-createImageDataHD><code>createImageDataHD()</code></dfn>
- method is invoked (with its two arguments <var title="">sw</var> and
- <var title="">sh</var>) it must return a new <code><a href=#imagedata>ImageData</a></code>
- object representing a rectangle with a width in equal to the
- absolute magnitude of <var title="">sw</var> multiplied by <var title="">scale</var> and a height equal to the absolute magnitude of
- <var title="">sh</var> multiplied by <var title="">scale</var>,
- where <var title="">scale</var> is the number of pixels in the
- canvas bitmap per coordinate space units. The <code><a href=#imagedata>ImageData</a></code>
- object returned must be filled with transparent black.</p>
+ method is invoked (with its two arguments <var title="">sw</var> and <var title="">sh</var>) it
+ must return a new <code><a href=#imagedata>ImageData</a></code> object representing a rectangle with a width in equal to
+ the absolute magnitude of <var title="">sw</var> multiplied by <var title="">scale</var> and a
+ height equal to the absolute magnitude of <var title="">sh</var> multiplied by <var title="">scale</var>, where <var title="">scale</var> is the number of pixels in the <a href=#scratch-bitmap>scratch
+ bitmap</a> per coordinate space units. The <code><a href=#imagedata>ImageData</a></code> object returned must be
+ filled with transparent black.</p>
- <p>The <dfn id=dom-context-2d-getimagedata title=dom-context-2d-getImageData><code>getImageData(<var title="">sx</var>, <var title="">sy</var>, <var title="">sw</var>,
- <var title="">sh</var>)</code></dfn> method must, if either the <var title="">sw</var> or <var title="">sh</var> arguments are zero,
- throw an <code><a href=#indexsizeerror>IndexSizeError</a></code> exception; otherwise,
+ <p>The <dfn id=dom-context-2d-getimagedata title=dom-context-2d-getImageData><code>getImageData(<var title="">sx</var>, <var title="">sy</var>, <var title="">sw</var>, <var title="">sh</var>)</code></dfn> method must, if
+ either the <var title="">sw</var> or <var title="">sh</var> arguments are zero, throw an
+ <code><a href=#indexsizeerror>IndexSizeError</a></code> exception; otherwise,
<!--ADD-TOPIC:Security-->
- if the <code><a href=#the-canvas-element>canvas</a></code> element's <i>origin-clean</i> flag is set
- to false, it must throw a <code><a href=#securityerror>SecurityError</a></code> exception;
+ if the <a href=#scratch-bitmap>scratch bitmap</a>'s <a href=#concept-canvas-origin-clean title=concept-canvas-origin-clean>origin-clean</a>
+ flag is set to false, it must throw a <code><a href=#securityerror>SecurityError</a></code> exception;
<!--REMOVE-TOPIC:Security-->
- otherwise, it must return an <code><a href=#imagedata>ImageData</a></code> object with
- width <var title="">sw</var> and height <var title="">sh</var>
- representing the canvas bitmap for the area of the canvas denoted by
- the rectangle whose corners are the four points (<var title="">sx</var>, <var title="">sy</var>), (<span title=""><var title="">sx</var>+<var title="">sw</var></span>, <var title="">sy</var>), (<span title=""><var title="">sx</var>+<var title="">sw</var></span>, <span title=""><var title="">sy</var>+<var title="">sh</var></span>), (<var title="">sx</var>, <span title=""><var title="">sy</var>+<var title="">sh</var></span>), in
- canvas coordinate space units. If the canvas bitmap does not
- represent each coordinate space unit square using exactly one pixel,
- the value of each pixel in the returned abject must be derived from
- the value(s) of the pixel(s) in the canvas bitmap that correspond to
- the same coordinate. Pixels outside the canvas must be returned as
- transparent black. Pixels must be returned as non-premultiplied
+ otherwise, it must return an <code><a href=#imagedata>ImageData</a></code> object with width <var title="">sw</var> and
+ height <var title="">sh</var> representing the <a href=#scratch-bitmap>scratch bitmap</a> for the area of that
+ bitmap denoted by the rectangle whose corners are the four points (<var title="">sx</var>, <var title="">sy</var>), (<span title=""><var title="">sx</var>+<var title="">sw</var></span>, <var title="">sy</var>), (<span title=""><var title="">sx</var>+<var title="">sw</var></span>, <span title=""><var title="">sy</var>+<var title="">sh</var></span>), (<var title="">sx</var>, <span title=""><var title="">sy</var>+<var title="">sh</var></span>), in the bitmap's coordinate space
+ units. If the bitmap does not represent each coordinate space unit square using exactly one pixel,
+ the value of each pixel in the returned abject must be derived from the value(s) of the pixel(s)
+ in the bitmap that correspond to the same coordinate. Pixels outside the <a href=#scratch-bitmap>scratch
+ bitmap</a> must be returned as transparent black. Pixels must be returned as non-premultiplied
alpha values.</p>
- <p>The <dfn id=dom-context-2d-getimagedatahd title=dom-context-2d-getImageDataHD><code>getImageDataHD(<var title="">sx</var>, <var title="">sy</var>, <var title="">sw</var>,
- <var title="">sh</var>)</code></dfn> method must, if either the <var title="">sw</var> or <var title="">sh</var> arguments are zero,
- throw an <code><a href=#indexsizeerror>IndexSizeError</a></code> exception; otherwise,
+ <p>The <dfn id=dom-context-2d-getimagedatahd title=dom-context-2d-getImageDataHD><code>getImageDataHD(<var title="">sx</var>,
+ <var title="">sy</var>, <var title="">sw</var>, <var title="">sh</var>)</code></dfn> method must,
+ if either the <var title="">sw</var> or <var title="">sh</var> arguments are zero, throw an
+ <code><a href=#indexsizeerror>IndexSizeError</a></code> exception; otherwise,
<!--ADD-TOPIC:Security-->
- if the <code><a href=#the-canvas-element>canvas</a></code> element's <i>origin-clean</i> flag is set
- to false, it must throw a <code><a href=#securityerror>SecurityError</a></code> exception;
+ if the <a href=#scratch-bitmap>scratch bitmap</a>'s <a href=#concept-canvas-origin-clean title=concept-canvas-origin-clean>origin-clean</a>
+ flag is set to false, it must throw a <code><a href=#securityerror>SecurityError</a></code> exception;
<!--REMOVE-TOPIC:Security-->
- otherwise, it must return an <code><a href=#imagedata>ImageData</a></code> object with
- width <var title="">sw</var> multiplied by <var title="">scale</var>
- and height <var title="">sh</var> multiplied by <var title="">scale</var> representing the canvas bitmap data for the
- area of the canvas denoted by the rectangle whose corners are the
- four points (<var title="">sx</var>, <var title="">sy</var>), (<span title=""><var title="">sx</var>+<var title="">sw</var></span>, <var title="">sy</var>), (<span title=""><var title="">sx</var>+<var title="">sw</var></span>, <span title=""><var title="">sy</var>+<var title="">sh</var></span>), (<var title="">sx</var>, <span title=""><var title="">sy</var>+<var title="">sh</var></span>), in
- canvas coordinate space units. Pixels outside the canvas must be
- returned as transparent black. Pixels must be returned as
- non-premultiplied alpha values.</p>
+ otherwise, it must return an <code><a href=#imagedata>ImageData</a></code> object with width <var title="">sw</var>
+ multiplied by <var title="">scale</var> and height <var title="">sh</var> multiplied by <var title="">scale</var> representing the <a href=#scratch-bitmap>scratch bitmap</a> for the area of that bitmap
+ denoted by the rectangle whose corners are the four points (<var title="">sx</var>, <var title="">sy</var>), (<span title=""><var title="">sx</var>+<var title="">sw</var></span>, <var title="">sy</var>), (<span title=""><var title="">sx</var>+<var title="">sw</var></span>, <span title=""><var title="">sy</var>+<var title="">sh</var></span>), (<var title="">sx</var>, <span title=""><var title="">sy</var>+<var title="">sh</var></span>), in the bitmap's coordinate space
+ units. Pixels outside the <a href=#scratch-bitmap>scratch bitmap</a> must be returned as transparent black.
+ Pixels must be returned as non-premultiplied alpha values.</p>
<p>New <code><a href=#imagedata>ImageData</a></code> objects must be initialized so that
their <dfn id=dom-imagedata-width title=dom-imagedata-width><code>width</code></dfn>
@@ -41107,10 +41576,9 @@
consecutive indices starting with 0 for the top left pixel's red
component. <a href=#refsTYPEDARRAY>[TYPEDARRAY]</a></p>
- <p>The <dfn id=dom-context-2d-putimagedata title=dom-context-2d-putImageData><code>putImageData()</code></dfn>
- and <dfn id=dom-context-2d-putimagedatahd title=dom-context-2d-putImageDataHD><code>putImageDataHD()</code></dfn>
- methods write data from <code><a href=#imagedata>ImageData</a></code> structures back to
- the canvas. Their arguments are: <var title="">imagedata</var>, <var title="">dx</var>, <var title="">dy</var>, <var title="">dirtyX</var>, <var title="">dirtyY</var>, <var title="">dirtyWidth</var>, and <var title="">dirtyHeight</var>.</p>
+ <p>The <dfn id=dom-context-2d-putimagedata title=dom-context-2d-putImageData><code>putImageData()</code></dfn> and <dfn id=dom-context-2d-putimagedatahd title=dom-context-2d-putImageDataHD><code>putImageDataHD()</code></dfn> methods write data from
+ <code><a href=#imagedata>ImageData</a></code> structures back to the rendering context's <a href=#scratch-bitmap>scratch bitmap</a>.
+ Their arguments are: <var title="">imagedata</var>, <var title="">dx</var>, <var title="">dy</var>, <var title="">dirtyX</var>, <var title="">dirtyY</var>, <var title="">dirtyWidth</var>, and <var title="">dirtyHeight</var>.</p>
<p>When the last four arguments to these methods are omitted, they
must be assumed to have the values 0, 0, the <code title=dom-imagedata-width><a href=#dom-imagedata-width>width</a></code> member of the <var title="">imagedata</var> structure, and the <code title=dom-imagedata-height><a href=#dom-imagedata-height>height</a></code> member of the <var title="">imagedata</var> structure, respectively.</p>
@@ -41151,7 +41619,7 @@
<p>If, after those changes, either <var title="">dirtyWidth</var>
or <var title="">dirtyHeight</var> is negative or zero, stop these
- steps without affecting the canvas.</p>
+ steps without affecting any bitmaps.</p>
</li>
@@ -41163,17 +41631,16 @@
<dd>
- <p>Draw the region of the image data in the horizontal rectangle
- whose top left corner is at (<var title="">dirtyX</var>,<var title="">dirtyY</var>) and whose bottom right corner is at
- (<span title=""><var title="">dirtyX</var>+<var title="">dirtyWidth</var></span>,<span title=""><var title="">dirtyY</var>+<var title="">dirtyHeight</var></span>)
- onto the canvas, aligned such that the top left of the rectangle
- is at coordinate (<var title="">dx</var>,<var title="">dy</var>).</p>
+ <p>Draw the region of the image data in the horizontal rectangle whose top left corner is at
+ (<var title="">dirtyX</var>,<var title="">dirtyY</var>) and whose bottom right corner is at
+ (<span title=""><var title="">dirtyX</var>+<var title="">dirtyWidth</var></span>,<span title=""><var title="">dirtyY</var>+<var title="">dirtyHeight</var></span>) onto the rendering
+ context's <a href=#scratch-bitmap>scratch bitmap</a>, aligned such that the top left of the rectangle is at
+ coordinate (<var title="">dx</var>,<var title="">dy</var>).</p>
<p>If the <code title=dom-context-2d-imageSmoothingEnabled><a href=#dom-context-2d-imagesmoothingenabled>imageSmoothingEnabled</a></code>
- attribute is set to true, then the user agent should attempt to
- apply a smoothing algorithm to the image data if the canvas does
- not have exactly one device pixel per coordinate space unit in
- the canvas bitmap.</p>
+ attribute is set to true, then the user agent should attempt to apply a smoothing algorithm to
+ the image data if the <a href=#scratch-bitmap>scratch bitmap</a> does not have exactly one device pixel per
+ coordinate space unit.</p>
</dd>
@@ -41183,21 +41650,20 @@
<ol><li>
- <p>Let <var title="">dx<sub>device</sub></var> be the x-coordinate
- of the device pixel in the canvas bitmap corresponding to the <var title="">dx</var> coordinate in the canvas coordinate space.</p>
+ <p>Let <var title="">dx<sub>device</sub></var> be the x-coordinate of the device pixel in
+ the <a href=#scratch-bitmap>scratch bitmap</a> corresponding to the <var title="">dx</var> coordinate in
+ the <a href=#scratch-bitmap>scratch bitmap</a>'s coordinate space.</p>
- <p>Let <var title="">dy<sub>device</sub></var> be the y-coordinate
- of the device pixel in the canvas bitmap corresponding to the <var title="">dy</var> coordinate in the canvas coordinate space.</p>
+ <p>Let <var title="">dy<sub>device</sub></var> be the y-coordinate of the device pixel in
+ the <a href=#scratch-bitmap>scratch bitmap</a> corresponding to the <var title="">dy</var> coordinate in
+ the <a href=#scratch-bitmap>scratch bitmap</a>'s coordinate space.</p>
</li>
- <li><p>For all integer values of <var title="">x</var>
- and <var title="">y</var> where <span title=""><var title="">dirtyX</var> ≤ <var title="">x</var> < <span title=""><var title="">dirtyX</var>+<var title="">dirtyWidth</var></span></span>
- and <span title=""><var title="">dirtyY</var> ≤ <var title="">y</var> < <span title=""><var title="">dirtyY</var>+<var title="">dirtyHeight</var></span></span>, copy the four channels of
- the pixel with coordinate (<var title="">x</var>, <var title="">y</var>) in the <var title="">imagedata</var> data
- structure to the pixel with coordinate (<span title=""><var title="">dx<sub>device</sub></var>+<var title="">x</var></span>,
- <span title=""><var title="">dy<sub>device</sub></var>+<var title="">y</var></span>) in the canvas bitmap of the
- canvas.</li>
+ <li><p>For all integer values of <var title="">x</var> and <var title="">y</var> where <span title=""><var title="">dirtyX</var> ≤ <var title="">x</var> < <span title=""><var title="">dirtyX</var>+<var title="">dirtyWidth</var></span></span> and <span title=""><var title="">dirtyY</var> ≤ <var title="">y</var> < <span title=""><var title="">dirtyY</var>+<var title="">dirtyHeight</var></span></span>, copy the
+ four channels of the pixel with coordinate (<var title="">x</var>, <var title="">y</var>) in
+ the <var title="">imagedata</var> data structure to the pixel with coordinate (<span title=""><var title="">dx<sub>device</sub></var>+<var title="">x</var></span>, <span title=""><var title="">dy<sub>device</sub></var>+<var title="">y</var></span>) in the
+ rendering context's <a href=#scratch-bitmap>scratch bitmap</a>.</li>
</ol></dd>
@@ -41337,7 +41803,7 @@
- <h6 id=compositing><span class=secno>4.8.11.1.16 </span>Compositing</h6>
+ <h6 id=compositing><span class=secno>4.8.11.2.17 </span>Compositing</h6>
<dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-globalAlpha><a href=#dom-context-2d-globalalpha>globalAlpha</a></code> [ = <var title="">value</var> ]</dt>
@@ -41370,24 +41836,21 @@
<!-- conformance criteria for painting are described in the "drawing
model" section below -->
- <p>The <dfn id=dom-context-2d-globalalpha title=dom-context-2d-globalAlpha><code>globalAlpha</code></dfn>
- attribute gives an alpha value that is applied to shapes and images
- before they are composited onto the canvas. The value must be in the
- range from 0.0 (fully transparent) to 1.0 (no additional
- transparency). If an attempt is made to set the attribute to a value
- outside this range, including Infinity and Not-a-Number (NaN)
- values, the attribute must retain its previous value. When the
+ <p>The <dfn id=dom-context-2d-globalalpha title=dom-context-2d-globalAlpha><code>globalAlpha</code></dfn> attribute gives an
+ alpha value that is applied to shapes and images before they are composited onto the <a href=#scratch-bitmap>scratch
+ bitmap</a>. The value must be in the range from 0.0 (fully transparent) to 1.0 (no additional
+ transparency). If an attempt is made to set the attribute to a value outside this range, including
+ Infinity and Not-a-Number (NaN) values, the attribute must retain its previous value. When the
context is created, the <code title=dom-context-2d-globalAlpha><a href=#dom-context-2d-globalalpha>globalAlpha</a></code> attribute must
initially have the value 1.0.</p>
<p>The <dfn id=dom-context-2d-globalcompositeoperation title=dom-context-2d-globalCompositeOperation><code>globalCompositeOperation</code></dfn>
- attribute sets how shapes and images are drawn onto the existing
- bitmap, once they have had <code title=dom-context-2d-globalAlpha><a href=#dom-context-2d-globalalpha>globalAlpha</a></code> and the
- current transformation matrix applied. It must be set to a value
- from the following list. In the descriptions below, the source
- image, <var title="">A</var>, is the shape or image being rendered,
- and the destination image, <var title="">B</var>, is the current
- state of the bitmap.</p>
+ attribute sets how shapes and images are drawn onto the <a href=#scratch-bitmap>scratch bitmap</a>, once they
+ have had <code title=dom-context-2d-globalAlpha><a href=#dom-context-2d-globalalpha>globalAlpha</a></code> and the current
+ transformation matrix applied. It must be set to a value from the following list. In the
+ descriptions below, the source image, <var title="">A</var>, is the shape or image being rendered,
+ and the destination image, <var title="">B</var>, is the current state of the <a href=#scratch-bitmap>scratch
+ bitmap</a>.</p>
</div>
@@ -41498,7 +41961,7 @@
- <h6 id=image-smoothing><span class=secno>4.8.11.1.17 </span>Image smoothing</h6>
+ <h6 id=image-smoothing><span class=secno>4.8.11.2.18 </span>Image smoothing</h6>
<dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-imageSmoothingEnabled><a href=#dom-context-2d-imagesmoothingenabled>imageSmoothingEnabled</a></code> [ = <var title="">value</var> ]</dt>
@@ -41524,7 +41987,7 @@
</div>
- <h6 id=shadows><span class=secno>4.8.11.1.18 </span><dfn>Shadows</dfn></h6>
+ <h6 id=shadows><span class=secno>4.8.11.2.19 </span><dfn>Shadows</dfn></h6>
<p>All drawing operations are affected by the four global shadow
attributes.</p>
@@ -41665,7 +42128,7 @@
<div class=impl>
- <h6 id=drawing-model><span class=secno>4.8.11.1.19 </span><dfn>Drawing model</dfn></h6>
+ <h6 id=drawing-model><span class=secno>4.8.11.2.20 </span><dfn>Drawing model</dfn></h6>
<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>
@@ -41683,21 +42146,22 @@
<li><p><a href=#when-shadows-are-drawn>When shadows are drawn</a>, multiply the alpha
component of every pixel in <var title="">B</var> by <code title=dom-context-2d-globalAlpha><a href=#dom-context-2d-globalalpha>globalAlpha</a></code>.</li>
- <li><p><a href=#when-shadows-are-drawn>When shadows are drawn</a>, composite <var title="">B</var> within the <a href=#clipping-region>clipping region</a> over the
- current canvas bitmap using the current composition
- operator.</li>
+ <li><p><a href=#when-shadows-are-drawn>When shadows are drawn</a>, composite <var title="">B</var> within the
+ <a href=#clipping-region>clipping region</a> over the current <a href=#scratch-bitmap>scratch bitmap</a> using the current
+ composition operator.</li>
<li><p>Multiply the alpha component of every pixel in <var title="">A</var> by <code title=dom-context-2d-globalAlpha><a href=#dom-context-2d-globalalpha>globalAlpha</a></code>.</li>
- <li><p>Composite <var title="">A</var> within the <a href=#clipping-region>clipping
- region</a> over the current canvas bitmap using the current
- composition operator.</li>
+ <li><p>Composite <var title="">A</var> within the <a href=#clipping-region>clipping region</a> over the current
+ <a href=#scratch-bitmap>scratch bitmap</a> using the current composition operator.</li>
</ol></div>
- <h6 id=best-practices><span class=secno>4.8.11.1.20 </span>Best practices</h6>
+
+ <h6 id=best-practices><span class=secno>4.8.11.2.21 </span>Best practices</h6>
+
<p><i>This section is non-normative.</i></p>
<p>When a canvas is interactive, authors should include focusable
@@ -41758,7 +42222,7 @@
attribute.</p>
- <h6 id=examples><span class=secno>4.8.11.1.21 </span>Examples</h6>
+ <h6 id=examples><span class=secno>4.8.11.2.22 </span>Examples</h6>
<p><i>This section is non-normative.</i></p>
@@ -41811,16 +42275,54 @@
- </div><!--data-component-->
+ <h5 id=pixel-density><span class=secno>4.8.11.3 </span>Pixel density</h5>
+ <p>The user agent may use any square pixel density for the bitmaps of a <code><a href=#the-canvas-element>canvas</a></code> and
+ its rendering contexts. Once a <code><a href=#the-canvas-element>canvas</a></code> has a bitmap, that canvas must keep its
+ resolution for its lifetime.</p>
+
+ <p class=note>In general, user agents are encouraged to use a pixel density equal to the screen
+ pixel density. Ideally, the number of device pixels per CSS pixel would be a multiple of two.
+ Several factors can affect the screen pixel density: most prominently the actual display pixel
+ density, but also important is the current zoom level.</p>
+
+ <p>All the bitmaps created during a single <a href=#concept-task title=concept-task>task</a> for
+ <code><a href=#the-canvas-element>canvas</a></code> elements and <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> objects must have the same
+ pixel density.
+ <a class=fingerprint href=#fingerprint><img alt="(This is a fingerprinting vector.)" src=http://images.whatwg.org/fingerprint.png></a>
+ </p>
+
+ <pre class=idl>partial interface <a href=#screen>Screen</a> {
+ readonly attribute double <a href=#dom-screen-canvasresolution title=dom-screen-canvasResolution>canvasResolution</a>;
+};</pre>
+
+ <dl class=domintro><dt><var title="">window</var> . <code title=dom-Window-screen>screen</code> . <code title=dom-screen-canvasResolution><a href=#dom-screen-canvasresolution>canvasResolution</a></code></dt>
+
+ <dd>
+
+ <p>Returns the pixel density that has been, or will be, used for bitmaps during this <a href=#concept-task title=concept-task>task</a>.</p>
+
+ </dd>
+
+ </dl><div class=impl>
+
+ <p>The <dfn id=dom-screen-canvasresolution title=dom-screen-canvasResolution><code>canvasResolution</code></dfn> attribute of
+ the <code><a href=#screen>Screen</a></code> object must return the pixel density, in image pixels per coordinate space
+ units, that any <code><a href=#the-canvas-element>canvas</a></code> and <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> bitmaps created
+ during this <a href=#concept-task title=concept-task>task</a> will use (or have used). <a href=#refsCSSOMVIEW>[CSSOMVIEW]</a></p>
+
+ </div>
+
+
+
<div class=impl>
- <h5 id=color-spaces-and-color-correction><span class=secno>4.8.11.2 </span>Color spaces and color correction</h5>
+ <h5 id=color-spaces-and-color-correction><span class=secno>4.8.11.4 </span>Color spaces and color correction</h5>
<p>The <code><a href=#the-canvas-element>canvas</a></code> APIs must perform color correction at only two points: when rendering
- images with their own gamma correction and color space information onto the canvas, to convert the
- image to the color space used by the canvas (e.g. using the 2D Context's <code title=dom-context-2d-drawImage><a href=#dom-context-2d-drawimage>drawImage()</a></code> method with an <code><a href=#htmlimageelement>HTMLImageElement</a></code>
+ images with their own gamma correction and color space information onto a bitmap, to convert the
+ image to the color space used by the bitmaps (e.g. using the 2D Context's <code title=dom-context-2d-drawImage><a href=#dom-context-2d-drawimage>drawImage()</a></code> method with an <code><a href=#htmlimageelement>HTMLImageElement</a></code>
object), and when rendering the actual canvas bitmap to the output device.</p>
<p class=note>Thus, in the 2D context, colors used to draw shapes onto the canvas will exactly
@@ -41848,76 +42350,94 @@
</div>
-<!--ADD-TOPIC:Security-->
+
+ <h5 id=serializing-bitmaps-to-a-file><span class=secno>4.8.11.5 </span>Serializing bitmaps to a file</h5>
+
<div class=impl>
- <h5 id=security-with-canvas-elements><span class=secno>4.8.11.3 </span>Security with <code><a href=#the-canvas-element>canvas</a></code> elements</h5>
+ <p>When a user agent is to create <dfn id=a-serialization-of-the-bitmap-as-a-file>a serialization of the bitmap as a file</dfn>, optionally
+ with some given <var title="">arguments</var>, and optionally with a <var title="">native</var>
+ flag set, it must create an image file in the format given by the first value of <var title="">arguments</var>, or, if there are no <var title="">arguments</var>, in the PNG format. <a href=#refsPNG>[PNG]</a></p>
- <p><strong>Information leakage</strong> can occur if scripts from
- one <a href=#origin>origin</a> can access information (e.g. read pixels)
- from images from another origin (one that isn't the <a href=#same-origin title="same origin">same</a>).</p>
+ <p>If the <var title="">native</var> flag is set, or if the bitmap has one pixel per coordinate
+ space unit, then the image file must have the same pixel data (before compression, if applicable)
+ as the bitmap, and if the file format used supports encoding resolution metadata, the resolution
+ of that bitmap (device pixels per coordinate space units being interpreted as image pixels per CSS
+ pixel) must be given as well.</p>
- <p>To mitigate this, <code><a href=#the-canvas-element>canvas</a></code> elements are defined to
- have a flag indicating whether they are <i>origin-clean</i>. All
- <code><a href=#the-canvas-element>canvas</a></code> elements must start with their
- <i>origin-clean</i> set to true. The flag must be set to false if
- any of the following actions occur:</p>
+ <p>Otherwise, 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).</p>
- <ul><li><p>The element's 2D context's <code title=dom-context-2d-drawImage><a href=#dom-context-2d-drawimage>drawImage()</a></code> method is
- called with an <code><a href=#htmlimageelement>HTMLImageElement</a></code> or an
- <code><a href=#htmlvideoelement>HTMLVideoElement</a></code> whose <a href=#origin>origin</a> is not the
- <a href=#same-origin title="same origin">same</a> as that of the
- <code><a href=#document>Document</a></code> object that owns the <code><a href=#the-canvas-element>canvas</a></code>
- element.</li>
+ <p>If <var title="">arguments</var> is not empty, the first value must be interpreted as a <a href=#mime-type title="MIME type">MIME type</a> giving the format to use. If the type has any parameters, it
+ must be treated as not supported.</p>
- <li><p>The element's 2D context's <code title=dom-context-2d-drawImage><a href=#dom-context-2d-drawimage>drawImage()</a></code> method is
- called with an <code><a href=#htmlcanvaselement>HTMLCanvasElement</a></code> whose
- <i>origin-clean</i> flag is false.</li>
+ <p class=example>For example, the value "<code>image/png</code>" would mean to generate a PNG
+ image, the value "<code>image/jpeg</code>" would mean to generate a JPEG image, and the value
+ "<code>image/svg+xml</code>" 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).</p>
- <li><p>The element's 2D context's <code title=dom-context-2d-fillStyle><a href=#dom-context-2d-fillstyle>fillStyle</a></code> attribute is set
- to a <code><a href=#canvaspattern>CanvasPattern</a></code> object that was created from an
- <code><a href=#htmlimageelement>HTMLImageElement</a></code> or an <code><a href=#htmlvideoelement>HTMLVideoElement</a></code>
- whose <a href=#origin>origin</a> was not the <a href=#same-origin title="same
- origin">same</a> as that of the <code><a href=#document>Document</a></code> object
- that owns the <code><a href=#the-canvas-element>canvas</a></code> element when the pattern was
- created.</li>
+ <p>User agents must support PNG ("<code>image/png</code>"). User agents may support other types.
+ If the user agent does not support the requested type, it must create the file using the PNG
+ format. <a href=#refsPNG>[PNG]</a></p>
- <li><p>The element's 2D context's <code title=dom-context-2d-fillStyle><a href=#dom-context-2d-fillstyle>fillStyle</a></code> attribute is set
- to a <code><a href=#canvaspattern>CanvasPattern</a></code> object that was created from an
- <code><a href=#htmlcanvaselement>HTMLCanvasElement</a></code> whose <i>origin-clean</i> flag was
- false when the pattern was created.</li>
+ <p>User agents must <a href=#converted-to-ascii-lowercase title="converted to ASCII lowercase">convert the provided type to ASCII
+ lowercase</a> before establishing if they support that type.</p>
- <li><p>The element's 2D context's <code title=dom-context-2d-strokeStyle><a href=#dom-context-2d-strokestyle>strokeStyle</a></code> attribute is
- set to a <code><a href=#canvaspattern>CanvasPattern</a></code> object that was created from an
- <code><a href=#htmlimageelement>HTMLImageElement</a></code> or an <code><a href=#htmlvideoelement>HTMLVideoElement</a></code>
- whose <a href=#origin>origin</a> was not the <a href=#same-origin title="same
- origin">same</a> as that of the <code><a href=#document>Document</a></code> object
- that owns the <code><a href=#the-canvas-element>canvas</a></code> element when the pattern was
- created.</li>
+ <p>For image types that do not support an alpha channel, the serialized image must be the bitmap
+ image composited onto a solid black background using the source-over operator.</p>
- <li><p>The element's 2D context's <code title=dom-context-2d-strokeStyle><a href=#dom-context-2d-strokestyle>strokeStyle</a></code> attribute is
- set to a <code><a href=#canvaspattern>CanvasPattern</a></code> object that was created from an
- <code><a href=#htmlcanvaselement>HTMLCanvasElement</a></code> whose <i>origin-clean</i> flag was
- false when the pattern was created.</li>
+ <p>If the first argument in <var title="">arguments</var> gives a type corresponding to one of the
+ types given in the first column of the following table, and the user agent supports that type,
+ then the subsequent arguments, if any, must be treated as described in the second cell of that
+ row.</p>
- <li><p>The element's 2D context's <code title=dom-context-2d-fillText><a href=#dom-context-2d-filltext>fillText()</a></code> or <code title=dom-context-2d-fillText><a href=#dom-context-2d-filltext>strokeText()</a></code> methods are
- invoked and consider using a font that has an <a href=#origin>origin</a>
- that is not the <a href=#same-origin title="same origin">same</a> as that of
- the <code><a href=#document>Document</a></code> object that owns the <code><a href=#the-canvas-element>canvas</a></code>
- element. (The font doesn't even have to be used; all that matters
- is whether the font was considered for any of the glyphs
- drawn.)</li> <!-- because fonts could consider sensitive
- material, I guess; and because that sensitivity could extend to
- whether or not a particular glyph is in the font in the first
- place. -->
+ </div>
- </ul><p>The <code title=dom-canvas-toDataURL><a href=#dom-canvas-todataurl>toDataURL()</a></code>, <code title=dom-canvas-toDataURLHD><a href=#dom-canvas-todataurlhd>toDataURLHD()</a></code>, <code title=dom-canvas-toBlob><a href=#dom-canvas-toblob>toBlob()</a></code>, <code title=dom-context-2d-getImageData><a href=#dom-context-2d-getimagedata>getImageData()</a></code>, and <code title=dom-context-2d-getImageDataHD><a href=#dom-context-2d-getimagedatahd>getImageDataHD()</a></code>
+ <table id=canvas-serialization-arguments><caption>Arguments for serialization methods</caption>
+ <thead><tr><th> Type <th> Other arguments <th> Reference
+ <tbody><tr><td> <code>image/jpeg</code>
+ <td> The second argument<span class=impl>, if it</span> is a number in the range 0.0 to 1.0
+ inclusive<span class=impl>, must be</span> treated as the desired quality level. <span class=impl>If it is not a number or is outside that range, the user agent must use its
+ default value, as if the argument had been omitted.</span>
+ <td> <a href=#refsJPEG>[JPEG]</a>
+ </table><div class=impl>
+
+ <p>For the purposes of these rules, an argument is considered to be a number if it is converted to
+ an IDL double value by the rules for handling arguments of type <code title="">any</code> in the
+ Web IDL specification. <a href=#refsWEBIDL>[WEBIDL]</a></p>
+
+ <p>Other arguments must be ignored and must not cause the user agent to throw an exception. A
+ future version of this specification will probably define other parameters to be passed to these
+ methods to allow authors to more carefully control compression settings, image metadata, etc.</p>
+
+ </div>
+
+
+<!--ADD-TOPIC:Security-->
+ <div class=impl>
+
+ <h5 id=security-with-canvas-elements><span class=secno>4.8.11.6 </span>Security with <code><a href=#the-canvas-element>canvas</a></code> elements</h5>
+
+ <p><i>This section is non-normative.</i></p>
+
+ <p><strong>Information leakage</strong> can occur if scripts from
+ one <a href=#origin>origin</a> can access information (e.g. read pixels)
+ from images from another origin (one that isn't the <a href=#same-origin title="same origin">same</a>).</p>
+
+ <p>To mitigate this, bitmaps used with <code><a href=#the-canvas-element>canvas</a></code> elements are defined to have a flag
+ indicating whether they are <a href=#concept-canvas-origin-clean title=concept-canvas-origin-clean>origin-clean</a>. All
+ bitmaps start with their <a href=#concept-canvas-origin-clean title=concept-canvas-origin-clean>origin-clean</a> set to
+ true. The flag is set to false when cross-origin images or fonts are used.</p>
+
+ <p>The <code title=dom-canvas-toDataURL><a href=#dom-canvas-todataurl>toDataURL()</a></code>, <code title=dom-canvas-toDataURLHD><a href=#dom-canvas-todataurlhd>toDataURLHD()</a></code>, <code title=dom-canvas-toBlob><a href=#dom-canvas-toblob>toBlob()</a></code>, <code title=dom-context-2d-getImageData><a href=#dom-context-2d-getimagedata>getImageData()</a></code>, and <code title=dom-context-2d-getImageDataHD><a href=#dom-context-2d-getimagedatahd>getImageDataHD()</a></code>
methods check the flag and will throw a <code><a href=#securityerror>SecurityError</a></code>
exception rather than leak cross-origin data.</p>
- <p class=note>Even resetting the canvas state by changing its
- <code title=attr-canvas-width><a href=#attr-canvas-width>width</a></code> or <code title=attr-canvas-height><a href=#attr-canvas-height>height</a></code> attributes doesn't reset
- the <i>origin-clean</i> flag.</p>
+ <p>The flag can be reset in certain situations; for example, when a
+ <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> is bound to a new <code><a href=#the-canvas-element>canvas</a></code>, the bitmap is cleared
+ and its flag reset.</p>
</div>
<!--REMOVE-TOPIC:Security-->
@@ -67586,8 +68106,7 @@
<td>none
<td>none
- </table><p><small>† This case is only possible if the <code title=attr-iframe-sandbox><a href=#attr-iframe-sandbox>sandbox</a></code> attribute also allows
- scripts.</small></p>
+ </table><p class=tablenote><small>† This case is only possible if the <code title=attr-iframe-sandbox><a href=#attr-iframe-sandbox>sandbox</a></code> attribute also allows scripts.</small></p>
<div class=impl>
@@ -74877,18 +75396,16 @@
<p>An <a href=#event-loop>event loop</a> must continually run through the
following steps for as long as it exists:</p>
- <ol><li><p>Run the oldest <a href=#concept-task title=concept-task>task</a> on one
- of the <a href=#event-loop>event loop</a>'s <a href=#task-queue title="task queue">task
- queues</a>, ignoring tasks whose associated
- <code><a href=#document>Document</a></code>s are not <a href=#fully-active>fully active</a>. The user
- agent may pick any <a href=#task-queue>task queue</a>.</li>
+ <ol><li><p>Run the oldest <a href=#concept-task title=concept-task>task</a> on one of the <a href=#event-loop>event
+ loop</a>'s <a href=#task-queue title="task queue">task queues</a>, if any, ignoring tasks whose
+ associated <code><a href=#document>Document</a></code>s are not <a href=#fully-active>fully active</a>. The user agent may pick any
+ <a href=#task-queue>task queue</a>.</li>
- <!-- warning! if you renumber these steps, make sure to update the
- "spin the event loop" algorithm below! -->
+ <!-- warning! if you renumber these steps, make sure to update the "spin the event loop"
+ algorithm below! -->
- <li><p>If the <a href=#storage-mutex>storage mutex</a> is now owned by the
- <a href=#event-loop>event loop</a>, release it so that it is once again
- free.</li>
+ <li><p>If the <a href=#storage-mutex>storage mutex</a> is now owned by the <a href=#event-loop>event loop</a>, release it
+ so that it is once again free.</li>
<li><p>Remove that task from its <a href=#task-queue>task queue</a>.</li>
@@ -74927,17 +75444,16 @@
<li><p>Let the <a href=#running-mutation-observers>running mutation observers</a> flag be
false.</li>
- </ol><hr><p>When the user agent is to <dfn id=provide-a-stable-state>provide a stable state</dfn>, if
- any asynchronously-running algorithms are <dfn id=await-a-stable-state title="await a stable
- state">awaiting a stable state</dfn>, then the user agent must run
- their <dfn id=synchronous-section>synchronous section</dfn> and then resume running their
- asynchronous algorithm (if appropriate).</p>
+ </ol><hr><p>When the user agent is to <dfn id=provide-a-stable-state>provide a stable state</dfn>, if any asynchronously-running
+ algorithms are <dfn id=await-a-stable-state title="await a stable state">awaiting a stable state</dfn>, then the user
+ agent must run their <dfn id=synchronous-section>synchronous section</dfn> and then resume running their asynchronous
+ algorithm (if appropriate).</p>
- <p class=note>A <a href=#synchronous-section>synchronous section</a> never mutates
- the DOM, runs any script, or has any other side-effects.</p>
+ <p class=note>A <a href=#synchronous-section>synchronous section</a> never mutates the DOM, runs any script, or has
+ any side-effects detectable from another <a href=#synchronous-section>synchronous section</a>, and thus <a href=#synchronous-section title="synchronous section">synchronous sections</a> can be run in any order.</p>
- <p class=note>Steps in <a href=#synchronous-section title="synchronous
- section">synchronous sections</a> are marked with ⌛.</p>
+ <p class=note>Steps in <a href=#synchronous-section title="synchronous section">synchronous sections</a> are marked
+ with ⌛.</p>
<hr><p>When an algorithm says to <dfn id=spin-the-event-loop>spin the event loop</dfn> until
a condition <var title="">goal</var> is met, the user agent must run
@@ -77432,7 +77948,7 @@
<!--ADD-TOPIC:Security-->
<div class=impl>
- <h5 id=security-and-privacy><span class=secno>7.5.1.3 </span>Security and privacy</h5>
+ <h6 id=security-and-privacy><span class=secno>7.5.1.2.1 </span>Security and privacy</h6>
<p>These mechanisms can introduce a number of concerns, in
particular privacy concerns.</p>
@@ -77517,7 +78033,7 @@
<div class=impl>
- <h5 id=sample-handler-impl><span class=secno>7.5.1.4 </span>Sample user interface</h5>
+ <h6 id=sample-handler-impl><span class=secno>7.5.1.2.2 </span>Sample user interface</h6>
<p><i>This section is non-normative.</i></p>
@@ -77563,7 +78079,7 @@
- <h5 id=manually-releasing-the-storage-mutex><span class=secno>7.5.1.5 </span>Manually releasing the storage mutex</h5>
+ <h5 id=manually-releasing-the-storage-mutex><span class=secno>7.5.1.3 </span>Manually releasing the storage mutex</h5>
<pre class=idl>[NoInterfaceObject]
interface <dfn id=navigatorstorageutils>NavigatorStorageUtils</dfn> {
@@ -77735,10 +78251,242 @@
<li><p>Return 1.</li>
</ol></div>
-<!--TOPIC:HTML-->
+<!--TOPIC:Canvas-->
+ <h3 id=images><span class=secno>7.6 </span>Images</h3>
+
+ <pre class=idl>interface <dfn id=imagebitmap>ImageBitmap</dfn> {
+ // opaque object
+};
+
+callback <dfn id=imagebitmapcallback>ImageBitmapCallback</dfn> = void (<a href=#imagebitmap>ImageBitmap</a> image);
+
+[NoInterfaceObject]
+interface <dfn id=imagebitmapfactories>ImageBitmapFactories</dfn> {
+ void <a href=#dom-createimagebitmap title=dom-createImageBitmap>createImageBitmap</a>(<a href=#htmlimageelement>HTMLImageElement</a> image, <a href=#imagebitmapcallback>ImageBitmapCallback</a> _callback);
+ void <a href=#dom-createimagebitmap title=dom-createImageBitmap>createImageBitmap</a>(<a href=#htmlvideoelement>HTMLVideoElement</a> image, <a href=#imagebitmapcallback>ImageBitmapCallback</a> _callback);
+ void <a href=#dom-createimagebitmap title=dom-createImageBitmap>createImageBitmap</a>(<a href=#htmlcanvaselement>HTMLCanvasElement</a> image, <a href=#imagebitmapcallback>ImageBitmapCallback</a> _callback);
+ void <a href=#dom-createimagebitmap title=dom-createImageBitmap>createImageBitmap</a>(<a href=#blob>Blob</a> image, <a href=#imagebitmapcallback>ImageBitmapCallback</a> _callback);
+ void <a href=#dom-createimagebitmap title=dom-createImageBitmap>createImageBitmap</a>(<a href=#imagedata>ImageData</a> image, <a href=#imagebitmapcallback>ImageBitmapCallback</a> _callback);
+ void <a href=#dom-createimagebitmap title=dom-createImageBitmap>createImageBitmap</a>(<a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a> image, <a href=#imagebitmapcallback>ImageBitmapCallback</a> _callback);
+};
+<a href=#window>Window</a> implements <a href=#imagebitmapfactories>ImageBitmapFactories</a>;
+<a href=#workerutils>WorkerUtils</a> implements <a href=#imagebitmapfactories>ImageBitmapFactories</a>;</pre>
+
+ <p>An <code><a href=#imagebitmap>ImageBitmap</a></code> object represents a bitmap image that can be painted to a canvas
+ without undue latency.</p>
+
+ <p class=note>The exact judgement of what is undue latency of this is left up to the
+ implementer, but in general if making use of the bitmap requires network I/O, or even local disk
+ I/O, then the latency is probably undue; whereas if it only requires a blocking read from a GPU or
+ system RAM, the latency is probably acceptable.</p>
+
+ <dl class=domintro><dt><var title="">Window</var> . <code title=dom-createImageBitmap><a href=#dom-createimagebitmap>createImageBitmap</a></code>(<var title="">image</var>, <var title="">callback</var>)</dt>
+
+ <dd>
+
+ <p>Takes <var title="">image</var>, which can be an <code><a href=#the-img-element>img</a></code> element,
+ <code><a href=#the-video-element>video</a></code>, or <code><a href=#the-canvas-element>canvas</a></code> element, a <code><a href=#blob>Blob</a></code> object, an
+ <code><a href=#imagedata>ImageData</a></code> object, or a <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> object, and
+ asynchronously calls <var title="">callback</var> with a new <code><a href=#imagebitmap>ImageBitmap</a></code> as its
+ argument when it has created one.</p>
+
+ <p>If no <code><a href=#imagebitmap>ImageBitmap</a></code> object can be constructed, for example because the provided
+ <var title="">image</var> data is not actually an image, then the <var title="">callback</var>
+ is invoked with null as the value instead.</p>
+
+ <p>Throws an <code><a href=#invalidstateerror>InvalidStateError</a></code> exception if the source image is not in a valid
+ state (e.g. an <code><a href=#the-img-element>img</a></code> element that hasn't finished loading, or a
+ <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> object whose bitmap data has zero length along one or both
+ dimensions). Throws a <code><a href=#securityerror>SecurityError</a></code> exception if the script is not allowed to
+ access the image data of the source image (e.g. a <code><a href=#the-video-element>video</a></code> that is
+ <a href=#cors-cross-origin>CORS-cross-origin</a>, or a <code><a href=#the-canvas-element>canvas</a></code> being drawn on by a script in a worker
+ from another <a href=#origin>origin</a>).</p>
+
+ </dd>
+
+ </dl><div class=impl>
+
+ <p>An <code><a href=#imagebitmap>ImageBitmap</a></code> object always has associated bitmap data, with a width and a
+ height. However, it is possible for this data to be corrupted. If an <code><a href=#imagebitmap>ImageBitmap</a></code>
+ object's media data can be decoded without errors, it is said to be <dfn id=concept-imagebitmap-good title=concept-ImageBitmap-good>fully decodable</dfn>.</p>
+
+ <p>An <code><a href=#imagebitmap>ImageBitmap</a></code> object can be obtained from a variety of different objects, using
+ the <dfn id=dom-createimagebitmap title=dom-createImageBitmap><code>createImageBitmap()</code></dfn> method. This method
+ takes two arguments, <var title="">image</var> and <var title="">callback</var>. When invoked, the
+ method must act as follows:</p>
+ <!-- the canvas createPattern() and drawImage() methods have similar requirements -->
+
+ <dl><dt>If <var title="">image</var> is an <code><a href=#the-img-element>img</a></code> element
+
+ <dd>
+
+ <ol><li><p>If the <code><a href=#the-img-element>img</a></code> element is not <a href=#img-all title=img-all>completely
+ available</a>, then throw an <code><a href=#invalidstateerror>InvalidStateError</a></code> exception and abort these
+ steps.</li>
+
+<!--ADD-TOPIC:Security-->
+ <li><p>If the <a href=#origin>origin</a> of the <code><a href=#the-img-element>img</a></code> element's image is not the <a href=#same-origin>same
+ origin</a> as the <a href=#entry-script>entry script</a>'s <a href=#origin>origin</a>, then throw a
+ <code><a href=#securityerror>SecurityError</a></code> exception and abort these steps.</li>
+<!--REMOVE-TOPIC:Security-->
+
+ <li><p>If the <code><a href=#the-img-element>img</a></code> element's media data is not a bitmap (e.g. it's a vector
+ graphic), then throw an <code><a href=#invalidstateerror>InvalidStateError</a></code> exception and abort these
+ steps.</li>
+
+ <li><p>Create a new <code><a href=#imagebitmap>ImageBitmap</a></code> object.</li>
+
+ <li><p>Let the <code><a href=#imagebitmap>ImageBitmap</a></code> object's bitmap data be a copy of the <code><a href=#the-img-element>img</a></code>
+ element's media data. If this is an animated image, the <code><a href=#imagebitmap>ImageBitmap</a></code> object's
+ bitmap data must only consist of the animation's poster frame, or, if there is no poster frame,
+ the first frame of the animation.</li>
+
+ <li><p>Return, but continue running these steps asynchronously.</li>
+
+ <li><p><a href=#queue-a-task>Queue a task</a> to invoke <var title="">callback</var> with the new
+ <code><a href=#imagebitmap>ImageBitmap</a></code> object as its argument.</li>
+
+ </ol></dd>
+
+ <dt>If <var title="">image</var> is a <code><a href=#the-video-element>video</a></code> element
+
+ <dd>
+
+ <ol><li><p>If the <code><a href=#the-video-element>video</a></code> element's <code title=dom-media-networkState><a href=#dom-media-networkstate>networkState</a></code> attribute is <code title=dom-media-NETWORK_EMPTY><a href=#dom-media-network_empty>NETWORK_EMPTY</a></code>, then throw an
+ <code><a href=#invalidstateerror>InvalidStateError</a></code> exception and abort these steps.</li>
+
+<!--ADD-TOPIC:Security-->
+ <li><p>If the <a href=#origin>origin</a> of the <code><a href=#the-video-element>video</a></code> element is not the <a href=#same-origin>same
+ origin</a> as the <a href=#entry-script>entry script</a>'s <a href=#origin>origin</a>, then throw a
+ <code><a href=#securityerror>SecurityError</a></code> exception and abort these steps.</li>
+<!--REMOVE-TOPIC:Security-->
+
+ <li><p>If the <code><a href=#the-video-element>video</a></code> element's <code title=dom-media-readyState><a href=#dom-media-readystate>readyState</a></code>
+ attribute is either <code title=dom-media-HAVE_NOTHING><a href=#dom-media-have_nothing>HAVE_NOTHING</a></code> or <code title=dom-media-HAVE_METADATA><a href=#dom-media-have_metadata>HAVE_METADATA</a></code>, then throw an
+ <code><a href=#invalidstateerror>InvalidStateError</a></code> exception and abort these steps.</li>
+
+ <li><p>Create a new <code><a href=#imagebitmap>ImageBitmap</a></code> object.</li>
+
+ <li><p>Let the <code><a href=#imagebitmap>ImageBitmap</a></code> object's bitmap data be a copy of the frame at the
+ <a href=#current-playback-position>current playback position</a>, at the <a href=#media-resource>media resource</a>'s <a href=#concept-video-intrinsic-width title=concept-video-intrinsic-width>intrinsic width</a> and <a href=#concept-video-intrinsic-height title=concept-video-intrinsic-height>intrinsic height</a> (i.e. after any aspect-ratio
+ correction has been applied).</p>
+
+ <li><p>Return, but continue running these steps asynchronously.</li>
+
+ <li><p><a href=#queue-a-task>Queue a task</a> to invoke <var title="">callback</var> with the new
+ <code><a href=#imagebitmap>ImageBitmap</a></code> object as its argument.</li>
+
+ </ol></dd>
+
+ <dt>If <var title="">image</var> is a <code><a href=#the-canvas-element>canvas</a></code> element
+
+ <dd>
+
+ <ol><!--ADD-TOPIC:Security--><li><p>If the <code><a href=#the-canvas-element>canvas</a></code> element's bitmap data does not have its <a href=#concept-canvas-origin-clean title=concept-canvas-origin-clean>origin-clean</a> flag set, then throw an
+ <code><a href=#invalidstateerror>InvalidStateError</a></code> exception and abort these steps.</li>
+<!--REMOVE-TOPIC:Security-->
+
+ <li><p>If the <code><a href=#the-canvas-element>canvas</a></code> element's bitmap has either a horizontal dimension or a
+ vertical dimension equal to zero, then throw an <code><a href=#invalidstateerror>InvalidStateError</a></code> exception and
+ abort these steps.</li>
+
+ <li><p>Create a new <code><a href=#imagebitmap>ImageBitmap</a></code> object.</li>
+
+ <li><p>Let the <code><a href=#imagebitmap>ImageBitmap</a></code> object's bitmap data be a copy of the
+ <code><a href=#the-canvas-element>canvas</a></code> element's bitmap data.</li>
+
+ <li><p>Return, but continue running these steps asynchronously.</li>
+
+ <li><p><a href=#queue-a-task>Queue a task</a> to invoke <var title="">callback</var> with the new
+ <code><a href=#imagebitmap>ImageBitmap</a></code> object as its argument.</li>
+
+ </ol></dd>
+
+
+ <dt>If <var title="">image</var> is a <code><a href=#blob>Blob</a></code> object
+
+ <dd>
+
+ <ol><li><p>If the <code><a href=#blob>Blob</a></code> object has been neutered through the <code title=dom-Blob-close>close</code> method, then throw an <code><a href=#invalidstateerror>InvalidStateError</a></code>
+ exception and abort these steps.</li>
+
+ <li><p>Return, but continue running these steps asynchronously.</li>
+
+ <li><p>Read the <code><a href=#blob>Blob</a></code> object's data. If an <a href=#file-error-read title=file-error-read>error
+ occurs during reading of the object</a>, then <a href=#queue-a-task>queue a task</a> to invoke <var title="">callback</var> with null as the argument, and abort these steps.</li>
+
+ <li><p>Apply the <a href=#content-type-sniffing:-image title="Content-Type sniffing: image">image sniffing rules</a> to
+ determine the file format of the image data, with MIME type of the <code><a href=#blob>Blob</a></code> (as given
+ by the <code><a href=#blob>Blob</a></code> object's <code title=dom-Blob-type>type</code> attribute) giving the
+ official type.</li>
+
+ <li><p>If the image data is not in a supported file format (e.g. it's not actually an image at
+ all), or if the image data is corrupted in some fatal way such that the image dimensions cannot
+ be obtained, <a href=#queue-a-task>queue a task</a> to invoke <var title="">callback</var> with null as the
+ argument, and abort these steps.</li>
+
+ <li><p>Create a new <code><a href=#imagebitmap>ImageBitmap</a></code> object.</li>
+
+ <li><p>Let the <code><a href=#imagebitmap>ImageBitmap</a></code> object's bitmap data be the image data read from the
+ <code><a href=#blob>Blob</a></code> object. If this is an animated image, the <code><a href=#imagebitmap>ImageBitmap</a></code> object's
+ bitmap data must only consist of the animation's poster frame, or, if there is no poster frame,
+ the first frame of the animation.</li>
+
+ <li><p><a href=#queue-a-task>Queue a task</a> to invoke <var title="">callback</var> with the new
+ <code><a href=#imagebitmap>ImageBitmap</a></code> object as its argument.</li>
+
+ </ol></dd>
+
+
+ <dt>If <var title="">image</var> is an <code><a href=#imagedata>ImageData</a></code> object
+
+ <dd>
+
+ <ol><li><p>Create a new <code><a href=#imagebitmap>ImageBitmap</a></code> object.</li>
+
+ <li><p>Let the <code><a href=#imagebitmap>ImageBitmap</a></code> object's bitmap data be the image data given by the
+ <code><a href=#imagedata>ImageData</a></code> object.</li>
+
+ <li><p>Return, but continue running these steps asynchronously.</li>
+
+ <li><p><a href=#queue-a-task>Queue a task</a> to invoke <var title="">callback</var> with the new
+ <code><a href=#imagebitmap>ImageBitmap</a></code> object as its argument.</li>
+
+ </ol></dd>
+
+ <dt>If <var title="">image</var> is a <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> object
+
+ <dd>
+
+ <ol><!--ADD-TOPIC:Security--><li><p>If the <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> object's <a href=#scratch-bitmap>scratch bitmap</a> does
+ not have its <a href=#concept-canvas-origin-clean title=concept-canvas-origin-clean>origin-clean</a> flag set, then throw
+ an <code><a href=#invalidstateerror>InvalidStateError</a></code> exception and abort these steps.</li>
+<!--REMOVE-TOPIC:Security-->
+
+ <li><p>If the <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> object's <a href=#scratch-bitmap>scratch bitmap</a> has
+ either a horizontal dimension or a vertical dimension equal to zero, then throw an
+ <code><a href=#invalidstateerror>InvalidStateError</a></code> exception and abort these steps.</li>
+
+ <li><p>Create a new <code><a href=#imagebitmap>ImageBitmap</a></code> object.</li>
+
+ <li><p>Let the <code><a href=#imagebitmap>ImageBitmap</a></code> object's bitmap data be a copy of the
+ <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> object's <a href=#scratch-bitmap>scratch bitmap</a>.</li>
+
+ <li><p>Return, but continue running these steps asynchronously.</li>
+
+ <li><p><a href=#queue-a-task>Queue a task</a> to invoke <var title="">callback</var> with the new
+ <code><a href=#imagebitmap>ImageBitmap</a></code> object as its argument.</li>
+
+ </ol></dd>
+
+ </dl></div>
+
+
+<!--TOPIC:HTML-->
+
<h2 id=editing><span class=secno>8 </span><dfn>User interaction</dfn></h2>
@@ -83583,9 +84331,9 @@
<a href=#workerutils>WorkerUtils</a> implements <a href=#windowbase64>WindowBase64</a>;</pre>
- <p>The DOM APIs (<code><a href=#node>Node</a></code> objects, <code><a href=#document>Document</a></code>
- objects, etc) are not available to workers in this version of this
- specification.</p>
+ <p>The DOM APIs — specifically, all the interfaces defind in the DOM Core specification
+ other than exceptions — must not be <a href=#expose title=expose>exposed</a> if the
+ <a href=#javascript-global-environment>JavaScript global environment</a> is a <a href=#worker-environment>worker environment</a>. <a href=#hrefDOMCORE>[DOMCORE]</a></p>
<h4 id=importing-scripts-and-libraries><span class=secno>9.3.1 </span>Importing scripts and libraries</h4>
@@ -97538,8 +98286,8 @@
<tr><td>7
<td>x<!---->xx-large
<td><i>see below</i>
- </table><p>The 'x<!---->xx-large' value is a non-CSS value used here to
- indicate a font size 50% larger than 'xx-large'.</p>
+ </table><p class=tablenote><small>The 'x<!---->xx-large' value is a non-CSS value used here to
+ indicate a font size 50% larger than 'xx-large'.</small></p>
</li>
@@ -98364,10 +99112,11 @@
<code><a href=#the-video-element>video</a></code> elements are expected to be treated as replaced
elements.</p>
- <p>A <code><a href=#the-canvas-element>canvas</a></code> element that <a href=#represents>represents</a>
- <a href=#embedded-content>embedded content</a> is expected to be treated as a
- replaced element. Other <code><a href=#the-canvas-element>canvas</a></code> elements are expected to
- be treated as ordinary elements in the rendering model.</p>
+ <p>A <code><a href=#the-canvas-element>canvas</a></code> element that <a href=#represents>represents</a> <a href=#embedded-content>embedded content</a> is
+ expected to be treated as a replaced element; the contents of such elements are the element's
+ bitmap, if any, or else a transparent black bitmap with the same intrinsic dimensions as the
+ element. Other <code><a href=#the-canvas-element>canvas</a></code> elements are expected to be treated as ordinary elements in the
+ rendering model.</p>
<p>An <code><a href=#the-object-element>object</a></code> element that <a href=#represents>represents</a> an
image, plugin, or <a href=#nested-browsing-context>nested browsing context</a> is expected
@@ -98436,7 +99185,7 @@
<!--TOPIC:Rendering-->
<div class=impl>
- <h4 id=images><span class=secno>14.4.2 </span>Images</h4>
+ <h4 id=images-0><span class=secno>14.4.2 </span>Images</h4>
<p>When an <code><a href=#the-img-element>img</a></code> element or an <code><a href=#the-input-element>input</a></code> element
when its <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in
@@ -103187,7 +103936,8 @@
<td>empty</td>
<td><a href=#global-attributes title="global attributes">globals</a></td>
<td><code><a href=#htmlelement>HTMLElement</a></code></td>
- </table><p>An asterisk (*) in a cell indicates that the actual rules are more complicated than indicated in the table above.</p>
+ </table><p class=tablenote><small>An asterisk (*) in a cell indicates that the actual rules are more
+ complicated than indicated in the table above.</small></p>
<p>† Categories in the "Parents" column refer to parents that
list the given categories in their content model, not to elements
@@ -104342,7 +105092,8 @@
<td> How the value of the form control is to be wrapped for <a href=#form-submission>form submission</a>
<td> "<code title=attr-textarea-wrap-soft><a href=#attr-textarea-wrap-soft>soft</a></code>";
"<code title=attr-textarea-wrap-hard><a href=#attr-textarea-wrap-hard>hard</a></code>"
- </table><p>An asterisk (*) in a cell indicates that the actual rules are more complicated than indicated in the table above.</p>
+ </table><p class=tablenote><small>An asterisk (*) in a cell indicates that the actual rules are more
+ complicated than indicated in the table above.</small></p>
<hr><table id=ix-event-handlers><caption>List of event handler content attributes</caption>
<thead><tr><th> Attribute
@@ -105093,6 +105844,7 @@
<li><code><a href=#canvasgradient>CanvasGradient</a></code>
<li><code><a href=#canvaspathmethods>CanvasPathMethods</a></code>
<li><code><a href=#canvaspattern>CanvasPattern</a></code>
+ <li><code><a href=#canvasproxy>CanvasProxy</a></code>
<li><code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code>
<li><code><a href=#closeevent>CloseEvent</a></code>
<li><code><a href=#domelementmap>DOMElementMap</a></code>
@@ -105188,6 +105940,8 @@
<li><code><a href=#htmlvideoelement>HTMLVideoElement</a></code>
<li><code><a href=#hashchangeevent>HashChangeEvent</a></code>
<li><code><a href=#history-0>History</a></code>
+ <li><code><a href=#imagebitmap>ImageBitmap</a></code>
+ <li><code><a href=#imagebitmapfactories>ImageBitmapFactories</a></code>
<li><code><a href=#imagedata>ImageData</a></code>
<li><code><a href=#location>Location</a></code>
<li><code><a href=#mediacontroller>MediaController</a></code>
@@ -105327,7 +106081,7 @@
<dd><cite><a href=http://dev.w3.org/csswg/css3-color/>CSS Color Module Level 3</a></cite>, T. Çelik, C. Lilley, L. Baron. W3C.</dd>
<dt id=refsCSSFONTS>[CSSFONTS]</dt>
- <dd><cite><a href=http://www.w3.org/TR/css3-fonts/>CSS Fonts Module Level 3</a></cite>, J. Daggett. W3C.</dd>
+ <dd><cite><a href=http://dev.w3.org/csswg/css3-fonts/>CSS Fonts Module Level 3</a></cite>, J. Daggett. W3C.</dd>
<dt id=refsCSSIMAGES>[CSSIMAGES]</dt>
<dd><cite><a href=http://dev.w3.org/csswg/css4-images/>CSS Image Values and Replaced Content Module</a></cite>, E. Etemad, T. Atkins. W3C.</dd>
Modified: source
===================================================================
--- source 2012-11-06 01:54:26 UTC (rev 7508)
+++ source 2012-11-16 20:26:07 UTC (rev 7509)
@@ -20,9 +20,10 @@
interface File : Blob { }; // File API
interface FileCallback { }; // File API
interface FileList { }; // File API
- interface ArrayBuffer { }; // WebGL
- interface ArrayBufferView { }; // WebGL
- interface Uint8ClampedArray { }; // WebGL
+ interface WebGLRenderingContext { }; // WebGL
+ interface ArrayBuffer { }; // TypedArray
+ interface ArrayBufferView { }; // TypedArray
+ interface Uint8ClampedArray { }; // TypedArray
interface XMLDocument { }; // DOM Core
interface HTMLCollection { }; // DOM Core
interface DOMTokenList { }; // DOM Core
@@ -3174,7 +3175,7 @@
<dd>
- <p>This specification uses the following interfaces defined in the
+ <p>This specification uses the following features defined in the
File API specification: <a href="#refsFILEAPI">[FILEAPI]</a></p>
<ul class="brief">
@@ -3182,7 +3183,9 @@
<li><dfn><code>Blob</code></dfn></li>
<li><dfn><code>File</code></dfn></li>
<li><dfn><code>FileList</code></dfn></li>
-
+ <li><dfn><code title="dom-Blob-close">Blob.close()</code></dfn></li>
+ <li><dfn><code title="dom-Blob-type">Blob.type</code></dfn></li>
+ <li>The concept of <dfn title="file-error-read">read errors</dfn></li>
</ul>
<p>It also uses the following interface defined in the File System
@@ -3291,6 +3294,10 @@
<cite>CSS Style Attributes</cite> specification. <a
href="#refsCSSATTR">[CSSATTR]</a></p>
+ <p>The <code>CanvasRenderingContext2D</code> object's use of fonts depends on the features
+ described in the CSS Fonts specification, including in particular
+ <dfn><code>FontLoader</code></dfn>. <a href="#refsCSSFONTS">[CSSFONTS]</a></p>
+
</dd>
@@ -3312,6 +3319,20 @@
</dd>
+ <dt>WebGL</dt>
+
+ <dd>
+
+ <p>The following interface is defined in the WebGL specification: <a
+ href="#refsWEBGL">[WEBGL]</a></p>
+
+ <ul class="brief">
+ <li><dfn><code>WebGLRenderingContext</code></dfn>
+ </ul>
+
+ </dd>
+
+
<!--TOPIC:HTML-->
<!-- mention that the parser supports mathml? -->
@@ -6887,15 +6908,11 @@
<hr>
- <!--END w3c-html--><!--2DCANVAS-->
+ <p class="note">The <span title="canvas-context-2d">2D graphics context</span> has a separate
+ color syntax that also handles opacity.</p>
- <p class="note">The <span title="canvas-context-2d">2D graphics
- context</span> has a separate color syntax that also handles
- opacity.</p>
- <!--START w3c-html--><!--2DCANVAS-->
-
<h4>Space-separated tokens</h4>
<p>A <dfn>set of space-separated tokens</dfn> is a string containing
@@ -9921,6 +9938,7 @@
<ul class="brief">
<li><code>MessagePort</code>
<li><code>ArrayBuffer</code> <a href="#refsTYPEDARRAY">[TYPEDARRAY]</a>
+ <li><code>CanvasProxy</code>
</ul>
@@ -10040,6 +10058,11 @@
argument and <var title="">memory</var> as the new "<var
title="">memory</var>" argument.</p></dd>
+ <dt>If <var title="">input</var> is an <code>ImageBitmap</code> object</dt>
+
+ <dd><p>Let <var title="">output</var> be a newly constructed <code>ImageBitmap</code> object
+ whose bitmap data is a copy of <var title="">input</var>'s bitmap data.</p></dd>
+
<!--(when we add this, make sure to throw DataCloneError if these objects are already closed)
<dt>If <var title="">input</var> is an <code>ArrayBuffer</code> object</dt>
@@ -26278,7 +26301,10 @@
height is the image's intrinsic height, and whose appearance is the
intrinsic appearance of the image.</p>
- <p>User agents may obtain images immediately or on demand.</p>
+ <p>In a <span>browsing context</span> where <span title="concept-bc-noscript">scripting is
+ disabled</span>, user agents may obtain images immediately or on demand. In a <span>browsing
+ context</span> where <span title="concept-bc-noscript">scripting is enabled</span>, user agents
+ must obtain images immediately.</p>
<p>A user agent that obtains images immediately must synchronously
<span>update the image data</span> of an <code>img</code> element
@@ -27234,8 +27260,8 @@
title="dom-img-complete"><code>complete</code></dfn> must return
true if any of the following conditions is true:</p>
<ul class="brief">
- <li>The <code title="attr-img-src">src</code> attribute is omitted.
- <li>The <code title="attr-img-src">src</code> attribute's value is the empty string.
+ <li>Both the <code title="attr-img-src">src</code> attribute and the <code title="attr-img-srcset">srcset</code> attributes are omitted.
+ <li>The the <code title="attr-img-srcset">srcset</code> attribute is omitted and the <code title="attr-img-src">src</code> attribute's value is the empty string. <!-- we only have this hack for src="", not srcset=""; present but empty or bogus srcset="" still means complete=false if it's not in the img-error state -->
<li>The final <span title="concept-task">task</span> that is <span title="queue a task">queued</span> by the <span>networking task source</span> once the resource has been <span title="fetch">fetched</span> has been <span title="queue a task">queued</span>, but has not yet been run, and the <code>img</code> element is not in the <span title="img-error">broken</span> state.
<li>The <code>img</code> element is <span title="img-all">completely available</span>.
</ul>
@@ -42276,17 +42302,22 @@
<dd><code title="attr-canvas-height">height</code></dd>
<dt><span title="element-dfn-dom">DOM interface</span>:</dt><!--ADD-TOPIC:DOM APIs-->
<dd>
- <pre class="idl">interface <dfn>HTMLCanvasElement</dfn> : <span>HTMLElement</span> {
+ <pre class="idl">typedef (<span>CanvasRenderingContext2D</span> or <span>WebGLRenderingContext</span>) <dfn>RenderingContext</dfn>;
+
+interface <dfn>HTMLCanvasElement</dfn> : <span>HTMLElement</span> {
attribute unsigned long <span title="dom-canvas-width">width</span>;
attribute unsigned long <span title="dom-canvas-height">height</span>;
+ <span>RenderingContext</span>? <span title="dom-canvas-getContext">getContext</span>(DOMString contextId, any... arguments);
+ boolean <span title="dom-canvas-supportsContext">supportsContext</span>(DOMString contextId, any... arguments);
+
+ void <span title="dom-canvas-setContext">setContext</span>(<span>RenderingContext</span> context);
+ <span>CanvasProxy</span> <span title="dom-canvas-transferControlToProxy">transferControlToProxy</span>();
+
DOMString <span title="dom-canvas-toDataURL">toDataURL</span>(optional DOMString type, any... arguments);
DOMString <span title="dom-canvas-toDataURLHD">toDataURLHD</span>(optional DOMString type, any... arguments);
void <span title="dom-canvas-toBlob">toBlob</span>(<span>FileCallback</span>? _callback, optional DOMString type, any... arguments);
void <span title="dom-canvas-toBlobHD">toBlobHD</span>(<span>FileCallback</span>? _callback, optional DOMString type, any... arguments);
-
- object? <span title="dom-canvas-getContext">getContext</span>(DOMString contextId, any... arguments);
- boolean <span title="dom-canvas-supportsContext">supportsContext</span>(DOMString contextId, any... arguments);
};</pre>
</dd>
</dl><!--REMOVE-TOPIC:DOM APIs-->
@@ -42301,21 +42332,24 @@
CSS and supporting technologies such as XBL.</p>
<p>When authors use the <code>canvas</code> element, they must also provide content that, when
- presented to the user, conveys essentially the same function or purpose as the bitmap canvas. This
- content may be placed as content of the <code>canvas</code> element. The contents of the
- <code>canvas</code> element, if any, are the element's <span>fallback content</span>.</p>
+ presented to the user, conveys essentially the same function or purpose as the
+ <code>canvas</code>' bitmap. This content may be placed as content of the <code>canvas</code>
+ element. The contents of the <code>canvas</code> element, if any, are the element's <span>fallback
+ content</span>.</p>
+ <hr>
+
<p>In interactive visual media, if <span title="concept-n-script">scripting is enabled</span> for
the <code>canvas</code> element, and if support for <code>canvas</code> elements has been enabled,
the <code>canvas</code> element <span>represents</span> <span>embedded content</span> consisting
- of a dynamically created image.</p>
+ of a dynamically created image, the element's bitmap.</p>
<p>In non-interactive, static, visual media, if the <code>canvas</code> element has been
- previously painted on (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 <code>canvas</code> element <span>represents</span> <span>embedded content</span> with
- the current image and size. Otherwise, the element represents its <span>fallback content</span>
- instead.</p>
+ 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 <code>canvas</code> element <span>represents</span>
+ <span>embedded content</span> with the element's current bitmap and size. Otherwise, the element
+ represents its <span>fallback content</span> instead.</p>
<p>In non-visual media, and in visual media if <span title="concept-n-noscript">scripting is
disabled</span> for the <code>canvas</code> element or if support for <code>canvas</code> elements
@@ -42331,6 +42365,8 @@
elements in the <span>fallback content</span>. (Focus has no effect on mouse interaction events.)
<a href="#refsDOMEVENTS">[DOMEVENTS]</a></p>
+ <hr>
+
<p>The <code>canvas</code> element has two attributes to control the size of the coordinate space:
<dfn title="attr-canvas-width"><code>width</code></dfn> and <dfn
title="attr-canvas-height"><code>height</code></dfn>. These attributes, when specified, must have
@@ -42341,45 +42377,69 @@
attribute defaults to 300, and the <code title="attr-canvas-height">height</code> attribute
defaults to 150.</p>
- <p>The intrinsic dimensions of the <code>canvas</code> element equal the size of the coordinate
- space, with the numbers interpreted in CSS pixels. However, the element can be sized arbitrarily
- by a style sheet. During rendering, the image is scaled to fit this layout size.</p>
+ <p>The intrinsic dimensions of the <code>canvas</code> element when it <span>represents</span>
+ <span>embedded content</span> are equal to the dimensions of the element's bitmap.</p>
+ <p class="note">A <code>canvas</code> element can be sized arbitrarily by a style sheet, its
+ bitmap is then subject to the 'object-fit' CSS property. <a
+ href="#refsCSSIMAGES">[CSSIMAGES]</a></p>
+
<div class="impl">
- <p>The size of the coordinate space does not necessarily represent the size of the actual bitmap
- that the user agent will use internally or during rendering. On high-definition displays, for
- instance, the user agent may internally use a bitmap with two device pixels per unit in the
- coordinate space, so that the rendering remains at high quality throughout.</p>
+ <hr>
- <p>When the <code>canvas</code> element is created, and subsequently whenever the <code
- title="attr-canvas-width">width</code> and <code title="attr-canvas-height">height</code>
- attributes are set (whether to a new value or to the previous value), the bitmap and any
- associated contexts must be cleared back to their initial state and reinitialized with the newly
- specified coordinate space dimensions.</p>
+<!--ADD-TOPIC:Security-->
+ <p>The bitmaps of <code>canvas</code> elements, as well as some of the bitmaps of rendering
+ contexts, such as those described in the section on the <code>CanvasRenderingContext2D</code>
+ object below, have an <dfn title="concept-canvas-origin-clean">origin-clean</dfn> flag, which can
+ be set to true or false. Initially, when the <code>canvas</code> element is created, its bitmap's
+ <span title="concept-canvas-origin-clean">origin-clean</span> flag must be set to true.</p>
+<!--REMOVE-TOPIC:Security-->
- <p>When the canvas is initialized, its bitmap must be cleared to transparent black.</p>
+ <p>A <code>canvas</code> bitmap can also have a <span>hit region list</span>, as described in the
+ <code>CanvasRenderingContext2D</code> section below.</p>
- <p>When a <code>canvas</code> element does not represent its <span>fallback content</span>, it
- <span>provides a paint source</span> whose width is the element's intrinsic width, whose height is
- the element's intrinsic height, and whose appearance is the element's bitmap.</p>
+ <p>A <code>canvas</code> 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 <code>canvas</code> also has a <dfn
+ title="concept-canvas-context-mode">canvas context mode</dfn>, which is initially <dfn
+ title="concept-canvas-none">none</dfn> but can be changed to either <dfn
+ title="concept-canvas-direct-2d">direct-2d</dfn>, <dfn
+ title="concept-canvas-direct-webgl">direct-webgl</dfn>, <dfn
+ title="concept-canvas-indirect">indirect</dfn>, or <dfn
+ title="concept-canvas-proxied">proxied</dfn> by algorithms defined in this specification.</p>
+ <p>When its <span title="concept-canvas-context-mode">canvas context mode</span> is <span
+ title="concept-canvas-none">none</span>, a <code>canvas</code> element has no rendering context,
+ and its bitmap must be fully transparent black with an intrinsic width equal to the numeric value
+ of the element's <code title="attr-canvas-width">width</code> attribute and an intrinsic height
+ equal to the numeric value of the element's <code title="attr-canvas-height">height</code>
+ attribute, those values being interpreted in CSS pixels, and being updated as the attributes are
+ set, changed, or removed.</p>
+
+ <p>When a <code>canvas</code> element represents <span>embedded content</span>, it <span>provides
+ a paint source</span> whose width is the element's intrinsic width, whose height is the element's
+ intrinsic height, and whose appearance is the element's bitmap.</p>
+
+ <p>Whenever the <code title="attr-canvas-width">width</code> and <code
+ title="attr-canvas-height">height</code> content attributes are set, removed, changed, or
+ redundantly set to the value they already have, if the <span
+ title="concept-canvas-context-mode">canvas context mode</span> is <span
+ title="concept-canvas-direct-2d">direct-2d</span><!-- (and the rendering context's <span
+ title="concept-canvas-context-bitmap-mode">context bitmap mode</span>, therefore, is <span
+ title="concept-canvas-fixed">fixed</span>)-->, the user agent must <span
+ title="concept-canvas-set-bitmap-dimensions">set bitmap dimensions</span> to the numeric values of
+ the <code title="attr-canvas-width">width</code> and <code
+ title="attr-canvas-height">height</code> content attributes.</p>
+
<p>The <dfn title="dom-canvas-width"><code>width</code></dfn> and <dfn
title="dom-canvas-height"><code>height</code></dfn> IDL attributes must <span>reflect</span> the
respective content attributes of the same name, with the same defaults.</p>
</div>
- <div class="example">
- <p>Only one square appears to be drawn in the following example:</p>
- <pre> // canvas is a reference to a <canvas> element
- var context = canvas.getContext('2d');
- context.fillRect(0,0,50,50);
- canvas.setAttribute('width', '300'); // clears the canvas
- context.fillRect(0,100,50,50);
- canvas.width = canvas.width; // clears the canvas
- context.fillRect(100,0,50,50); // only this square remains</pre>
- </div>
+ <p class="note">The bitmaps used with <code>canvas</code> elements can have arbitrary pixel
+ densities. Typically, the density will match that of the user's screen.</p>
<hr>
@@ -42391,24 +42451,26 @@
<dd>
<p>Returns an object that exposes an API for drawing on the canvas. The first argument specifies
- the desired API. Subsequent arguments are handled by that API.</p>
+ the desired API, either "<code title="canvas-context-2d">2d</code>" or "<code
+ title="canvas-context-webgl">webgl</code>". Subsequent arguments are handled by that API.</p>
<p>This specification defines the "<code title="canvas-context-2d">2d</code>" context below.
There is also a specification that defines a "<code title="canvas-context-webgl">webgl</code>"
context. <a href="#refsWEBGL">[WEBGL]</a></p>
- <p>The list of defined contexts is given on the <a
- href="http://wiki.whatwg.org/wiki/CanvasContexts">WHATWG Wiki CanvasContexts page</a>. <a
- href="#refsWHATWGWIKI">[WHATWGWIKI]</a>
-
- <p>Returns null if the given context ID is not supported or if the canvas has already been
- initialized with some other (incompatible) context type (e.g. trying to get a "<code
+ <p>Returns null if the given context ID is not supported, if the canvas has already been
+ initialized with the other context type (e.g. trying to get a "<code
title="canvas-context-2d">2d</code>" context after getting a "<code
title="canvas-context-webgl">webgl</code>" context).</p>
+ <p>Throws an <code>InvalidStateError</code> if the <code
+ title="dom-canvas-setContext">setContext()</code> or <code
+ title="dom-canvas-transferControlToProxy">transferControlToProxy()</code> methods have been
+ used.</p>
+
</dd>
- <dt><var title="">context</var> = <var title="">canvas</var> . <code title="dom-canvas-supportsContext">supportsContext</code>(<var title="">contextId</var> [, ... ])</dt>
+ <dt><var title="">supported</var> = <var title="">canvas</var> . <code title="dom-canvas-supportsContext">supportsContext</code>(<var title="">contextId</var> [, ... ])</dt>
<dd>
@@ -42419,57 +42481,148 @@
title="dom-canvas-getContext">getContext()</code> will or will not return an object, as
conditions (e.g. availability of system resources) can vary over time.</p>
+ <p>Throws an <code>InvalidStateError</code> if the <code
+ title="dom-canvas-setContext">setContext()</code> or <code
+ title="dom-canvas-transferControlToProxy">transferControlToProxy()</code> methods have been
+ used.</p>
+
</dd>
+ <dt><var title="">canvas</var> . <code title="dom-canvas-setContext">setContext</code>(<var title="">context</var>)</dt>
+
+ <dd>
+
+ <p>Sets the <code>canvas</code>' rendering context to the given object.</p>
+
+ <p>Throws an <code>InvalidStateError</code> exception if the <code
+ title="dom-canvas-getContext">getContext()</code> or <code
+ title="dom-canvas-transferControlToProxy">transferControlToProxy()</code> methods have been
+ used.</p>
+
+ </dd>
+
</dl>
<div class="impl">
- <p>A <code>canvas</code> element can have a <dfn>primary context</dfn>, which is the first context
- to have been obtained for that element. When created, a <code>canvas</code> element must not have
- a <span>primary context</span>.</p>
+ <p>There are two ways for a <code>canvas</code> element to acquire a rendering context: the
+ <code>canvas</code> element can provide one via the <code
+ title="dom-canvas-getContext">getContext()</code> method, and one can be assigned to it via the
+ <code title="dom-canvas-setContext">setContext()</code> method. In addition, the whole issue of a
+ rendering context can be taken out of the <code>canvas</code> element's hands and passed to a
+ <code>CanvasProxy</code> object, which itself can then be assigned a rendering context using its
+ <code title="dom-CanvasProxy-setContext">setContext()</code> method.</p>
- <p>The <dfn title="dom-canvas-getContext"><code>getContext(<var title="">contextId</var>, <var
- title="">arguments...</var>)</code></dfn> method of the <code>canvas</code> element, when invoked,
- must run the following steps:</p>
+ <p>These three methods are mutually exclusive; calling any of the three makes the other two start
+ throwing <code>InvalidStateError</code> exceptions when called.</p>
- <ol>
+ <p>Each rendering context has a <dfn title="concept-canvas-context-bitmap-mode">context bitmap
+ mode</dfn>, which is one of <dfn title="concept-canvas-fixed">fixed</dfn>, <dfn
+ title="concept-canvas-unbound">unbound</dfn>, or <dfn title="concept-canvas-bound">bound</dfn>.
+ Initially, rendering contexts must be in the <span title="concept-canvas-bound">unbound</span>
+ mode.</p>
- <li><p>Let <var title="">contextId</var> be the first argument to the method.</p></li>
+ <hr>
- <li>
+ <p>The <dfn title="dom-canvas-getContext"><code>getContext(<var title="">contextId</var>, <var
+ title="">arguments...</var>)</code></dfn> method of the <code>canvas</code> element, when invoked,
+ must run the steps in the cell of the following table whose column header describes the
+ <code>canvas</code> element's <span title="concept-canvas-context-mode">canvas context mode</span>
+ and whose row header describes the method's first argument.</p>
- <p>If <var title="">contextId</var> is not the name of a context supported by the user agent,
- return null and abort these steps.</p>
+ <table>
+ <thead>
+ <tr>
+ <td>
+ <th><span title="concept-canvas-none">none</span>
+ <th><span title="concept-canvas-direct-2d">direct-2d</span>
+ <th><span title="concept-canvas-direct-webgl">direct-webgl</span>
+ <th><span title="concept-canvas-indirect">indirect</span>
+ <th><span title="concept-canvas-proxied">proxied</span>
+ <tbody>
+ <tr>
+ <th>"<dfn title="canvas-context-2d"><code>2d</code></dfn>"
+ <td>
+ Set the <code>canvas</code> element's <span title="concept-canvas-context-mode">context
+ mode</span> to <span title="concept-canvas-direct-2d">direct-2d</span>; follow the <span>2D
+ context creation algorithm</span> defined in the section below, passing it the
+ <code>canvas</code> element, to obtain a <code>CanvasRenderingContext2D</code> object; set
+ that object's <span title="concept-canvas-context-bitmap-mode">context bitmap mode</span> to
+ <span title="concept-canvas-fixed">fixed</span>, and return the
+ <code>CanvasRenderingContext2D</code> object
+ <td>
+ Return the same object as was return the last time the method was invoked with this same
+ argument.
+ <td>
+ Return null.
+ <td>
+ Throw an <code>InvalidStateError</code> exception.
+ <td>
+ Throw an <code>InvalidStateError</code> exception.
- <p class="note">An example of this would be a user agent that theoretically supports the "<code
- title="canvas-context-webgl">webgl</code>" 3D context, in the case where the platform does not
- have hardware support for OpenGL and the user agent does not have a software OpenGL
- implementation. Despite the user agent recognising the "<code
- title="canvas-context-webgl">webgl</code>" name, it would return null at this step because that
- context is not, in practice, supported at the time of the call.</p>
+ <tr>
+ <th>"<dfn title="canvas-context-webgl"><code>webgl</code></dfn>", if the user agent supports the WebGL feature in its current configuration
+ <td>
+ Follow the instructions given in the WebGL specification's <i>Context Creation</i> section to
+ obtain either a <code>WebGLRenderingContext</code> or null; if the returned value is null,
+ then return null and abort these steps, otherwise, set the <code>canvas</code> element's <span
+ title="concept-canvas-context-mode">context mode</span> to <span
+ title="concept-canvas-direct-webgl">direct-webgl</span>, set the new
+ <code>WebGLRenderingContext</code> object's <span
+ title="concept-canvas-context-bitmap-mode">context bitmap mode</span> to <span
+ title="concept-canvas-fixed">fixed</span>, and return the <code>WebGLRenderingContext</code>
+ object‡ <a href="#refsWEBGL">[WEBGL]</a>
+ <td>
+ Return null.
+ <td>
+ Return the same object as was return the last time the method was invoked with this same
+ argument.
+ <td>
+ Throw an <code>InvalidStateError</code> exception.
+ <td>
+ Throw an <code>InvalidStateError</code> exception.
- </li>
+ <tr>
+ <th>A vendor-specific extension*
+ <td>
+ Behave as defined for the extension.
+ <td>
+ Behave as defined for the extension.
+ <td>
+ Behave as defined for the extension.
+ <td>
+ Throw an <code>InvalidStateError</code> exception.
+ <td>
+ Throw an <code>InvalidStateError</code> exception.
- <li><p>If the element has a <span>primary context</span> and that context's entry in the <a
- href="http://wiki.whatwg.org/wiki/CanvasContexts">WHATWG Wiki CanvasContexts page</a> does not
- list <var title="">contextId</var> as a context with which it is compatible, return null and
- abort these steps. <a href="#refsWHATWGWIKI">[WHATWGWIKI]</a></p></li>
+ <tr>
+ <th>An unsupported value†
+ <td>
+ Return null.
+ <td>
+ Return null.
+ <td>
+ Return null.
+ <td>
+ Throw an <code>InvalidStateError</code> exception.
+ <td>
+ Throw an <code>InvalidStateError</code> exception.
+
+ </table>
- <li><p>If the element does not have a <span>primary context</span>, let the element's
- <span>primary context</span> be <var title="">contextId</var>.</p></li>
+ <p class="tablenote"><small>* Vendors may define experimental contexts using the syntax <code><var
+ title="">vendorname</var>-<var title="">context</var></code>, for example,
+ <code>moz-3d</code>.</small></p>
- <li><p>If the <code title="dom-canvas-getContext">getContext()</code> method has already been
- invoked on this element for the same <var title="">contextId</var>, return the same object as was
- returned that time, and abort these steps. The additional arguments are ignored.</p></li>
+ <p class="tablenote"><small>† For example, the "<code
+ title="canvas-context-webgl">webgl</code>" value in the case of a user agent having exhausted the
+ graphics hardware's abilities and having no software fallback implementation.</small></p>
- <li><p><dfn title="getContext-return">Return a new object for <var
- title="">contextId</var></dfn>, as defined by the specification given for <var
- title="">contextId</var>'s entry in the <a
- href="http://wiki.whatwg.org/wiki/CanvasContexts">WHATWG Wiki CanvasContexts page</a>. <a
- href="#refsWHATWGWIKI">[WHATWGWIKI]</a></p></li>
+ <p class="tablenote"><small>‡ The second (and subsequent) argument(s) to the method, if
+ any, are ignored in all cases except this one. See the WebGL specification for
+ details.</small></p>
- </ol>
+ <hr>
<p>The <dfn title="dom-canvas-supportsContext"><code>supportsContext(<var title="">contextId</var>,
<var title="">arguments...</var>)</code></dfn> method of the <code>canvas</code> element, when
@@ -42477,46 +42630,43 @@
the same object and with the same arguments would definitely return null at this time, and true
otherwise.</p>
- <p>New context types may be registered in the <a
- href="http://wiki.whatwg.org/wiki/CanvasContexts">WHATWG Wiki CanvasContexts page</a>. <a
- href="#refsWHATWGWIKI">[WHATWGWIKI]</a></p>
+ <hr>
- <p>Anyone is free to edit the WHATWG Wiki CanvasContexts page at any time to add a new context
- type. These new context types must be specified with the following information:</p>
+ <p>The <dfn title="dom-canvas-setContext"><code>setContext(<var
+ title="">context</var>)</code></dfn> method of the <code>canvas</code> element, when invoked, must
+ run following the steps:</p>
- <dl>
+ <ol>
- <dt>Keyword</dt>
+ <li><p>If the <code>canvas</code> element's <span title="concept-canvas-context-mode">canvas
+ context mode</span> is neither <span title="concept-canvas-none">none</span> nor <span
+ title="concept-canvas-indirect">indirect</span>, throw an <code>InvalidStateError</code> and
+ abort these steps.</p></li>
- <dd><p>The value of <var title="">contextID</var> that will return the object for the new
- API.</p></dd>
+ <li><p>If <var title="">context</var>'s <span title="concept-canvas-context-bitmap-mode">context
+ bitmap mode</span> is <span title="concept-canvas-fixed">fixed</span>, then throw an
+ <code>InvalidStateError</code> and abort these steps.</p></li>
+ <li><p>If <var title="">context</var>'s <span title="concept-canvas-context-bitmap-mode">context
+ bitmap mode</span> is <span title="concept-canvas-bound">bound</span>, then run <var
+ title="">context</var>'s <span title="concept-canvas-unbinding-steps">unbinding steps</span> and
+ set its <var title="">context</var>'s <span title="concept-canvas-context-bitmap-mode">context
+ bitmap mode</span> to <span title="concept-canvas-unbound">unbound</span>.</p></li>
- <dt>Specification</dt>
+ <li><p>Run <var title="">context</var>'s <span title="concept-canvas-binding-steps">binding
+ steps</span> to bind it to this <code>canvas</code> element.</p></li>
- <dd><p>A link to a formal specification of the context type's API. It could be another page on
- the Wiki, or a link to an external page. If the type does not have a formal specification, an
- informal description can be substituted until such time as a formal specification is
- available.</p></dd>
+ <li><p>Set the <code>canvas</code> element's <span title="concept-canvas-context-mode">context
+ mode</span> to <span title="concept-canvas-indirect">indirect</span> and the <var
+ title="">context</var>'s <span title="concept-canvas-context-bitmap-mode">context bitmap
+ mode</span> to <span title="concept-canvas-bound">bound</span>.</p></li>
+ </ol>
- <dt>Compatible with</dt>
+ <hr>
- <dd><p>The list of context types that are compatible with this one (i.e. that operate on the same
- underlying bitmap). This list must be transitive and symmetric; if one context type is defined as
- compatible with another, then all types it is compatible with must be compatible with all types
- the other is compatible with.</p></dd>
-
- </dl>
-
- <p>Vendors may also define experimental contexts using the syntax <code><var
- title="">vendorname</var>-<var title="">context</var></code>, for example, <code>moz-3d</code>.
- Such contexts should be registered in the WHATWG Wiki CanvasContexts page.</p>
-
</div>
- <hr>
-
<dl class="domintro">
<dt><var title="">url</var> = <var title="">canvas</var> . <code title="dom-canvas-toDataURL">toDataURL</code>( [ <var title="">type</var>, ... ] )</dt>
@@ -42524,31 +42674,25 @@
<dd>
- <p>Returns a <span title="data protocol"><code
- title="">data:</code> URL</span> for the image in the canvas.</p>
+ <p>Returns a <span title="data protocol"><code title="">data:</code> URL</span> for the image in
+ the canvas.</p>
- <p>The first argument, if provided, controls the type of the image
- to be returned (e.g. PNG or JPEG). The default is <code
- title="">image/png</code>; that type is also used if the given
- type isn't supported. The other arguments are specific to the
- type, and control the way that the image is generated, as given in
- the table below.</p>
+ <p>The first argument, if provided, controls the type of the image to be returned (e.g. PNG or
+ JPEG). The default is <code title="">image/png</code>; that type is also used if the given type
+ isn't supported. The other arguments are specific to the type, and control the way that the
+ image is generated, as given <a href="#canvas-serialization-arguments">in the table
+ below</a>.</p>
- <p>When trying to use types other than "<code>image/png</code>",
- 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 "<code
- title="">data:image/png,</code>" or "<code
- title="">data:image/png;</code>". 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 "<code
- title="">data:,</code>".)</p>
+ <p>When trying to use types other than "<code>image/png</code>", 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 "<code title="">data:image/png,</code>" or "<code
+ title="">data:image/png;</code>". 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 "<code title="">data:,</code>".)</p>
- <p>The <code title="dom-canvas-toDataURL">toDataURL()</code>
- method returns the data at a resolution of 96dpi. The <code
- title="dom-canvas-toDataURLHD">toDataURLHD()</code> method returns
- it at the native canvas bitmap resolution.</p>
+ <p>The <code title="dom-canvas-toDataURL">toDataURL()</code> method returns the data at a
+ resolution of 96dpi. The <code title="dom-canvas-toDataURLHD">toDataURLHD()</code> method
+ returns it at the native canvas bitmap resolution.</p>
</dd>
@@ -42557,21 +42701,18 @@
<dd>
- <p>Creates a <code>Blob</code> object representing a file
- containing the image in the canvas, and invokes a callback with a
- handle to that object.</p>
+ <p>Creates a <code>Blob</code> object representing a file containing the image in the canvas,
+ and invokes a callback with a handle to that object.</p>
- <p>The second argument, if provided, controls the type of the
- image to be returned (e.g. PNG or JPEG). The default is <code
- title="">image/png</code>; that type is also used if the given
- type isn't supported. The other arguments are specific to the
- type, and control the way that the image is generated, as given in
- the table below.</p>
+ <p>The second argument, if provided, controls the type of the image to be returned (e.g. PNG or
+ JPEG). The default is <code title="">image/png</code>; that type is also used if the given type
+ isn't supported. The other arguments are specific to the type, and control the way that the
+ image is generated, as given <a href="#canvas-serialization-arguments">in the table
+ below</a>.</p>
- <p>The <code title="dom-canvas-toBlob">toBlob()</code> method
- provides the data at a resolution of 96dpi. The <code
- title="dom-canvas-toBlobHD">toBlobHD()</code> method provides it
- at the native canvas bitmap resolution.</p>
+ <p>The <code title="dom-canvas-toBlob">toBlob()</code> method provides the data at a resolution
+ of 96dpi. The <code title="dom-canvas-toBlobHD">toBlobHD()</code> method provides it at the
+ native canvas bitmap resolution.</p>
</dd>
@@ -42579,212 +42720,251 @@
<div class="impl">
- <p>The <dfn
- title="dom-canvas-toDataURL"><code>toDataURL()</code></dfn> and <dfn
- title="dom-canvas-toDataURLHD"><code>toDataURLHD()</code></dfn>
- methods must run the following steps:</p>
+ <p>The <dfn title="dom-canvas-toDataURL"><code>toDataURL()</code></dfn> and <dfn
+ title="dom-canvas-toDataURLHD"><code>toDataURLHD()</code></dfn> methods must run the following
+ steps:</p>
<ol>
<!--ADD-TOPIC:Security-->
- <li><p>If the <code>canvas</code> element's <i>origin-clean</i>
- flag is set to false, throw a <code>SecurityError</code> exception
- and abort these steps.</p>
+ <li><p>If the <code>canvas</code> element's bitmap's <span
+ title="concept-canvas-origin-clean">origin-clean</span> flag is set to false, throw a
+ <code>SecurityError</code> exception and abort these steps.</p>
<!--REMOVE-TOPIC:Security-->
- <li><p>If the canvas has no pixels (i.e. either its horizontal
- dimension or its vertical dimension is zero) then return the string
- "<code title="">data:,</code>" and abort these steps. (This is the
- shortest <span title="data protocol"><code title="">data:</code>
- URL</span>; it represents the empty string in a <code
+ <li><p>If the <code>canvas</code> element's bitmap has no pixels (i.e. either its horizontal
+ dimension or its vertical dimension is zero) then return the string "<code
+ title="">data:,</code>" and abort these steps. (This is the shortest <span title="data
+ protocol"><code title="">data:</code> URL</span>; it represents the empty string in a <code
title="">text/plain</code> resource.)</p></li>
- <li><p>Let <var title="">file</var> be <span>a serialization of the
- image as a file</span>, using the method's arguments (if any) as
- the <var title="">arguments</var>, and with the <var
- title="">native</var> flag set if the method is the <code
- title="dom-canvas-toDataURLHD">toDataURLHD()</code> method, and not
- otherwise.</p></li>
+ <li><p>Let <var title="">file</var> be <span title="a serialization of the bitmap as a file">a
+ serialization of the <code>canvas</code> element's bitmap as a file</span>, using the method's
+ arguments (if any) as the <var title="">arguments</var>, and with the <var title="">native</var>
+ flag set if the method is the <code title="dom-canvas-toDataURLHD">toDataURLHD()</code> method,
+ and not otherwise.</p></li>
- <li><p>Return a <span title="data protocol"><code
- title="">data:</code> URL</span> representing <var
- title="">file</var>. <a href="#refsRFC2397">[RFC2397]</a></p>
+ <li><p>Return a <span title="data protocol"><code title="">data:</code> URL</span> representing
+ <var title="">file</var>. <a href="#refsRFC2397">[RFC2397]</a></p>
- <!-- should we explicitly require the URL to be base64-encoded and
- not have any parameters, to ensure the same exact URL is generated
- in each browser? -->
+ <!-- should we explicitly require the URL to be base64-encoded and not have any parameters, to
+ ensure the same exact URL is generated in each browser? -->
</ol>
- <p>The <dfn title="dom-canvas-toBlob"><code>toBlob()</code></dfn>
- and <dfn title="dom-canvas-toBlobHD"><code>toBlobHD()</code></dfn>
- methods must run the following steps:</p>
+ <p>The <dfn title="dom-canvas-toBlob"><code>toBlob()</code></dfn> and <dfn
+ title="dom-canvas-toBlobHD"><code>toBlobHD()</code></dfn> methods must run the following
+ steps:</p>
<ol>
<!--ADD-TOPIC:Security-->
- <li><p>If the <code>canvas</code> element's <i>origin-clean</i>
- flag is set to false, throw a <code>SecurityError</code> exception
- and abort these steps.</p>
+ <li><p>If the <code>canvas</code> element's bitmap's <span
+ title="concept-canvas-origin-clean">origin-clean</span> flag is set to false, throw a
+ <code>SecurityError</code> exception and abort these steps.</p>
<!--REMOVE-TOPIC:Security-->
- <li><p>Let <var title="">callback</var> be the first
- argument.</p></li>
+ <li><p>Let <var title="">callback</var> be the first argument.</p></li>
- <li><p>Let <var title="">arguments</var> be the second and
- subsequent arguments to the method, if any.</p></li>
+ <li><p>Let <var title="">arguments</var> be the second and subsequent arguments to the method, if
+ any.</p></li>
<li>
- <p>If the canvas has no pixels (i.e. either its horizontal
- dimension or its vertical dimension is zero) then let <var
- title="">result</var> be null.</p>
+ <p>If the <code>canvas</code> element's bitmap has no pixels (i.e. either its horizontal
+ dimension or its vertical dimension is zero) then let <var title="">result</var> be null.</p>
- <p>Otherwise, let <var title="">result</var> be a
- <code>Blob</code> object representing <span>a serialization of the
- image as a file</span>, using <var title="">arguments</var>, and
- with the <var title="">native</var> flag set if the method is the
- <code title="dom-canvas-toBlobHD">toBlobHD()</code> method, and
- not otherwise. <a href="#refsFILEAPI">[FILEAPI]</a> </p>
+ <p>Otherwise, let <var title="">result</var> be a <code>Blob</code> object representing <span
+ title="a serialization of the bitmap as a file">a serialization of the <code>canvas</code>
+ element's bitmap as a file</span>, using <var title="">arguments</var>, and with the <var
+ title="">native</var> flag set if the method is the <code
+ title="dom-canvas-toBlobHD">toBlobHD()</code> method, and not otherwise. <a
+ href="#refsFILEAPI">[FILEAPI]</a> </p>
</li>
- <li><p>Return, but continue running these steps
- asynchronously.</p></li>
+ <li><p>Return, but continue running these steps asynchronously.</p></li>
- <li><p>If <var title="">callback</var> is null, abort these
- steps.</p></li>
+ <li><p>If <var title="">callback</var> is null, abort these steps.</p></li>
- <li><p><span>Queue a task</span> to invoke the
- <code>FileCallback</code> <var title="">callback</var> with <var
- title="">result</var> as its argument. The <span>task source</span>
- for this task is the <dfn>canvas blob serialization task
- source</dfn>. <a
+ <li><p><span>Queue a task</span> to invoke the <code>FileCallback</code> <var
+ title="">callback</var> with <var title="">result</var> as its argument. The <span>task
+ source</span> for this task is the <dfn>canvas blob serialization task source</dfn>. <a
href="#refsFILESYSTEMAPI">[FILESYSTEMAPI]</a></p></li>
</ol>
- <p>When a user agent is to create <dfn>a serialization of the image
- as a file</dfn>, optionally with some given <var
- title="">arguments</var>, and optionally with a <var
- title="">native</var> flag set, it must create an image file in the
- format given by the first value of <var title="">arguments</var>,
- or, if there are no <var title="">arguments</var>, in the PNG
- format. <a href="#refsPNG">[PNG]</a></p>
+ </div>
+ <!--REMOVE-TOPIC:DOM APIs-->
- <p>If the <var title="">native</var> flag is set, or if the canvas
- bitmap has one pixel per coordinate space unit, then the image file
- must have the same pixel data (before compression, if applicable) as
- the canvas bitmap, and if the file format used supports encoding
- resolution metadata, the resolution of the bitmap (device pixels per
- coordinate space units being interpreted as image pixels per CSS
- pixel) must be given as well.</p>
- <p>Otherwise, the image file's pixel data must be the canvas
- 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).</p>
+ <!--ADD-TOPIC:Workers-->
+ <h5>Proxying canvases to workers</h5>
- <p>If <var title="">arguments</var> is not empty, the first value
- must be interpreted as a <span title="MIME type">MIME type</span>
- giving the format to use. If the type has any parameters, it must be
- treated as not supported.</p>
+ <p>Since DOM nodes cannot be accessed across worker boundaries, a proxy object is needed to enable
+ workers to render to <code>canvas</code> elements in <code>Document</code>s.</p>
- <p class="example">For example, the value "<code>image/png</code>"
- would mean to generate a PNG image, the value
- "<code>image/jpeg</code>" would mean to generate a JPEG image, and
- the value "<code>image/svg+xml</code>" would mean to generate an SVG
- image (which would probably require that the implementation actually
- keep enough information to reliably render an SVG image from the
- canvas).</p>
+ <pre class="idl">interface <dfn>CanvasProxy</dfn> {
+ void <span title="dom-CanvasProxy-setContext">setContext</span>(<span>RenderingContext</span> context);
+};
+<span>CanvasProxy</span> implements <span>Transferable</span>;</pre>
- <p>User agents must support PNG ("<code>image/png</code>"). User
- agents may support other types. If the user agent does not support
- the requested type, it must create the file using the PNG format. <a
- href="#refsPNG">[PNG]</a></p>
+ <dl class="domintro">
- <p>User agents must <span title="converted to ASCII
- lowercase">convert the provided type to ASCII lowercase</span>
- before establishing if they support that type.</p>
+ <dt><var title="">canvasProxy</var> = <var title="">canvas</var> . <code title="dom-canvas-transferControlToProxy">transferControlToProxy</code>()</dt>
- <p>For image types that do not support an alpha channel, the
- serialized image must be the canvas image composited onto a solid
- black background using the source-over operator.</p>
+ <dd>
- <p>If the first argument in <var title="">arguments</var> gives a
- type corresponding to one of the types given in the first column of
- the following table, and the user agent supports that type, then the
- subsequent arguments, if any, must be treated as described in the
- second cell of that row.</p>
+ <p>Returns a <code>CanvasProxy</code> object that can be used to transfer control for this
+ canvas over to another document (e.g. an <code>iframe</code> from another <span>origin</span>)
+ or to a worker.</p>
- </div>
+ <p>Throws an <code>InvalidStateError</code> exception if the <code
+ title="dom-canvas-getContext">getContext()</code> or <code
+ title="dom-canvas-setContext">setContext()</code> methods have been used.</p>
- <table>
- <thead>
- <tr> <th> Type <th> Other arguments <th> Reference
- <tbody>
- <tr>
- <td> <code>image/jpeg</code>
- <td> The second argument<span class="impl">, if it</span> is a
- number in the range 0.0 to 1.0 inclusive<span class="impl">, must
- be</span> treated as the desired quality level. <span
- class="impl">If it is not a number or is outside that range, the
- user agent must use its default value, as if the argument had
- been omitted.</span>
- <td> <a href="#refsJPEG">[JPEG]</a>
- </table>
+ </dd>
- <div class="impl">
+ <dt><var title="">canvasProxy</var> . <code title="dom-CanvasProxy-setContext">setContext</code>(<var title="">context</var>)</dt>
- <p>For the purposes of these rules, an argument is considered to be
- a number if it is converted to an IDL double value by the rules for
- handling arguments of type <code title="">any</code> in the Web IDL
- specification. <a href="#refsWEBIDL">[WEBIDL]</a></p>
+ <dd>
- <p>Other arguments must be ignored and must not cause the user agent
- to throw an exception. A future version of this specification will
- probably define other parameters to be passed to these methods to
- allow authors to more carefully control compression settings, image
- metadata, etc.</p>
+ <p>Sets the <code>CanvasProxy</code> object's <code>canvas</code> element's rendering context to
+ the given object.</p>
- </div>
- <!--REMOVE-TOPIC:DOM APIs-->
+ <p>Throws an <code>InvalidStateError</code> exception if the <code>CanvasProxy</code> has been
+ <span title="transfer a Transferable object">transfered</span>.</p>
+ </dd>
- <div data-component="HTML Canvas 2D Context (editor: Ian Hickson)">
+ </dl>
- <h5 id="2dcontext">The 2D context</h5>
+ <hr>
- <!-- v2: we're on v5. suggestions for subsequent versions are marked v6, v7, v8. -->
+ <p>The <dfn title="dom-canvas-transferControlToProxy"><code>transferControlToProxy()</code></dfn>
+ method of the <code>canvas</code> element, when invoked, must run following the steps:</p>
- <p>This specification defines the <dfn
- title="canvas-context-2d"><code>2d</code></dfn> context type, whose
- API is implemented using the <code>CanvasRenderingContext2D</code>
- interface.</p>
+ <ol>
- <div class="impl">
+ <li><p>If the <code>canvas</code> element's <span title="concept-canvas-context-mode">canvas
+ context mode</span> is not <span title="concept-canvas-none">none</span>, throw an
+ <code>InvalidStateError</code> and abort these steps.</p></li>
- <p>When the <code title="dom-canvas-getContext">getContext()</code>
- method of a <code>canvas</code> element is to <span
- title="getContext-return">return a new object for the <var
- title="">contextId</var></span> <code
- title="canvas-context-2d">2d</code>, the user agent must return a
- new <code>CanvasRenderingContext2D</code> object. Any additional
- arguments are ignored.</p>
+ <li><p>Set the <code>canvas</code> element's <span title="concept-canvas-context-mode">context
+ mode</span> to <span title="concept-canvas-proxied">proxied</span>.</p></li>
+ <li><p>Return a <code>CanvasProxy</code> object bound to this <code>canvas</code>
+ element.</p></li>
+
+ </ol>
+
+ <p>A <code>CanvasProxy</code> object can be <span
+ title="concept-transferable-neutered">neutered</span> (like any <code>Transferable</code> object),
+ meaning it can no longer be <span title="transfer a Transferable object">transferred</span>, and
+ can be <dfn title="concept-CanvasProxy-disabled">disabled</dfn>, meaning it can no longer be bound
+ to rendering contexts. When first created, a <code>CanvasProxy</code> object must be neither.</p>
+
+ <p>A <code>CanvasProxy</code> is created with a link to a <code>canvas</code> element. A
+ <code>CanvasProxy</code> object that has not been <span
+ title="concept-CanvasProxy-disabled">disabled</span> must have a strong reference to its canvas
+ element.</p>
+
+ <p>The <dfn title="dom-CanvasProxy-setContext"><code>setContext(<var
+ title="">context</var>)</code></dfn> method of <code>CanvasProxy</code> objects, when invoked,
+ must run following the steps:</p>
+
+ <ol>
+
+ <li><p>If the <code>CanvasProxy</code> object has been <span
+ title="concept-CanvasProxy-disabled">disabled</span>, throw an <code>InvalidStateError</code> and
+ abort these steps.</p></li>
+
+ <li><p>If the <code>CanvasProxy</code> object has not been <span
+ title="concept-transferable-neutered">neutered</span>, then <span
+ title="concept-transferable-neutered">neuter</span> it.</p></li>
+
+ <li><p>If <var title="">context</var>'s <span title="concept-canvas-context-bitmap-mode">context
+ bitmap mode</span> is <span title="concept-canvas-fixed">fixed</span>, then throw an
+ <code>InvalidStateError</code> and abort these steps.</p></li>
+
+ <li><p>If <var title="">context</var>'s <span title="concept-canvas-context-bitmap-mode">context
+ bitmap mode</span> is <span title="concept-canvas-bound">bound</span>, then run <var
+ title="">context</var>'s <span title="concept-canvas-unbinding-steps">unbinding steps</span> and
+ set its <var title="">context</var>'s <span title="concept-canvas-context-bitmap-mode">context
+ bitmap mode</span> to <span title="concept-canvas-unbound">unbound</span>.</p></li>
+
+ <li><p>Run <var title="">context</var>'s <span title="concept-canvas-binding-steps">binding
+ steps</span> to bind it to this <code>CanvasProxy</code> object's <code>canvas</code>
+ element.</p></li>
+
+ <li><p>Set the <var title="">context</var>'s <span
+ title="concept-canvas-context-bitmap-mode">context bitmap mode</span> to <span
+ title="concept-canvas-bound">bound</span>.</p></li>
+
+ </ol>
+
+ <p id="transferCanvasProxy">To <span title="transfer a Transferable object">transfer</span> a
+ <code>CanvasProxy</code> object <var title="">old</var> to a new owner <var title="">owner</var>,
+ a user agent must create a new <code>CanvasProxy</code> object linked to the same
+ <code>canvas</code> element as <var title="">old</var>, thus obtaining <var title="">new</var>,
+ must <span title="concept-Transferable-neutered">neuter</span> and <span
+ title="concept-CanvasProxy-disabled">disable</span> the <var title="">old</var> object, and must
+ finally return <var title="">new</var>.</p>
+
+ <div class="example">
+
+ <p>Here is a clock implemented on a worker. First, the main page:</p>
+
+ <pre><!DOCTYPE HTML>
+<title>Clock</title>
+<canvas></canvas> <!-- defaults to 300x150 -->
+<script>
+ var canvas = document.getElementsByTagName('canvas')[0];
+ var proxy = canvas.transferControlToProxy());
+ var worker = new Worker('clock.js');
+ worker.postMessage(proxy, [proxy]);
+</script></pre>
+
+ <p>Second, the worker:</p>
+
+ <pre>onmessage = function (event) {
+ var context = new CanvasRenderingContext2d();
+ event.data.setContext(context); // event.data is the CanvasProxy object
+ setInterval(function () {
+ context.clearRect(0, 0, context.width, context.height);
+ context.fillText(0, 100, new Date());
+ context.commit();
+ }, 1000);
+};</pre>
+
</div>
- <p>The 2D context represents a flat Cartesian surface whose origin
- (0,0) is at the top left corner, with the coordinate space having
- <var title="">x</var> values increasing when going right, and <var
- title="">y</var> values increasing when going down.</p>
+ <!--REMOVE-TOPIC:Workers-->
- <pre class="idl">interface <dfn>CanvasRenderingContext2D</dfn> {
+ <h5 id="2dcontext">The 2D rendering context</h5>
+
+ <!-- v2: we're on v5. suggestions for subsequent versions are marked v6, v7, v8. -->
+
+ <pre class="idl">typedef (<span>HTMLImageElement</span> or
+ <span>HTMLVideoElement</span> or
+ <span>HTMLCanvasElement</span> or
+ <span>CanvasRenderingContext2D</span> or
+ <span>ImageBitmap</span>) <dfn>CanvasImageSource</dfn>;
+
+[<span title="dom-context-2d">Constructor</span>(optional unsigned long width, unsigned long height)]
+interface <dfn>CanvasRenderingContext2D</dfn> {
+
// back-reference to the canvas
readonly attribute <span>HTMLCanvasElement</span> <span title="dom-context-2d-canvas">canvas</span>;
+ // canvas dimensions
+ attribute unsigned long <span title="dom-context-2d-width">width</span>;
+ attribute unsigned long <span title="dom-context-2d-height">height</span>;
+
+ // for contexts that aren't directly <span title="concept-canvas-fixed">fixed</span> to a specific canvas
+ void <span title="dom-context-2d-commit">commit</span>(); // push the image to the <span>output bitmap</span>
+
// state
void <span title="dom-context-2d-save">save</span>(); // push state on state stack
void <span title="dom-context-2d-restore">restore</span>(); // pop state stack and restore state
@@ -42830,7 +43010,7 @@
attribute (DOMString or CanvasGradient or CanvasPattern) <span title="dom-context-2d-fillStyle">fillStyle</span>; // (default black)
<span>CanvasGradient</span> <span title="dom-context-2d-createLinearGradient">createLinearGradient</span>(double x0, double y0, double x1, double y1);
<span>CanvasGradient</span> <span title="dom-context-2d-createRadialGradient">createRadialGradient</span>(double x0, double y0, double r0, double x1, double y1, double r1);
- <span>CanvasPattern</span> <span title="dom-context-2d-createPattern">createPattern</span>((<span>HTMLImageElement</span> or <span>HTMLCanvasElement</span> or <span>HTMLVideoElement</span>) image, DOMString repetition);
+ <span>CanvasPattern</span> <span title="dom-context-2d-createPattern">createPattern</span>(<span>CanvasImageSource</span> image, DOMString repetition);
<!--
// v8 we received one request from Ralf Richard G&oml;bel for a new kind of pattern: a hatch.
// basically it would be a series of dash styles, angles, line widths, and offsets
@@ -42872,9 +43052,9 @@
<span>TextMetrics</span> <span title="dom-context-2d-measureText">measureText</span>(DOMString text);
// drawing images
- void <span title="dom-context-2d-drawImage">drawImage</span>((<span>HTMLImageElement</span> or <span>HTMLCanvasElement</span> or <span>HTMLVideoElement</span>) image, unrestricted double dx, unrestricted double dy);
- void <span title="dom-context-2d-drawImage">drawImage</span>((<span>HTMLImageElement</span> or <span>HTMLCanvasElement</span> or <span>HTMLVideoElement</span>) image, unrestricted double dx, unrestricted double dy, unrestricted double dw, unrestricted double dh);
- void <span title="dom-context-2d-drawImage">drawImage</span>((<span>HTMLImageElement</span> or <span>HTMLCanvasElement</span> or <span>HTMLVideoElement</span>) image, unrestricted double sx, unrestricted double sy, unrestricted double sw, unrestricted double sh, unrestricted double dx, unrestricted double dy, unrestricted double dw, unrestricted double dh);
+ void <span title="dom-context-2d-drawImage">drawImage</span>(<span>CanvasImageSource</span> image, unrestricted double dx, unrestricted double dy);
+ void <span title="dom-context-2d-drawImage">drawImage</span>(<span>CanvasImageSource</span> image, unrestricted double dx, unrestricted double dy, unrestricted double dw, unrestricted double dh);
+ void <span title="dom-context-2d-drawImage">drawImage</span>(<span>CanvasImageSource</span> image, unrestricted double sx, unrestricted double sy, unrestricted double sw, unrestricted double sh, unrestricted double dx, unrestricted double dy, unrestricted double dw, unrestricted double dh);
// hit regions
void <span title="dom-context-2d-addHitRegion">addHitRegion</span>(<span>HitRegionOptions</span> options);
@@ -42911,6 +43091,7 @@
attribute DOMString <span title="dom-context-2d-font">font</span>; // (default 10px sans-serif)
attribute DOMString <span title="dom-context-2d-textAlign">textAlign</span>; // "start", "end", "left", "right", "center" (default: "start")
attribute DOMString <span title="dom-context-2d-textBaseline">textBaseline</span>; // "top", "hanging", "middle", "alphabetic", "ideographic", "bottom" (default: "alphabetic")
+ attribute DOMString <span title="dom-context-2d-direction">direction</span>; // "ltr", "rtl"<!--, "auto"-->, "inherit" (default: "inherit")
};
[NoInterfaceObject]
@@ -42999,26 +43180,394 @@
<dl class="domintro">
+ <dt><var title="">context</var> = <var title="">canvas</var> . <code title="dom-canvas-getContext">getContext</code>('2d')</dt>
+
+ <dd>
+
+ <p>Returns a <code>CanvasRenderingContext2D</code> object that is permanently bound to a particular <code>canvas</code> element.</p>
+
+ </dd>
+
+ <dt><var title="">context</var> = new <code title="dom-context-2d">CanvasRenderingContext2D</code>( [ <var title="">width</var>, <var title="">height</var> ] )</dt>
+
+ <dd>
+
+ <p>Returns an unbound <code>CanvasRenderingContext2D</code> object with an implied bitmap with
+ the given dimensions in CSS pixels (300x150, if the arguments are omitted).</p>
+
+ </dd>
+
<dt><var title="">context</var> . <code title="dom-context-2d-canvas">canvas</code></dt>
<dd>
- <p>Returns the <code>canvas</code> element.</p>
+ <p>Returns the <code>canvas</code> element, if the rendering context was obtained using the
+ <code title="dom-canvas-getContext">getContext()</code> method.</p>
</dd>
+ <dt><var title="">context</var> . <code title="dom-context-2d-width">width</code></dt>
+ <dt><var title="">context</var> . <code title="dom-context-2d-height">height</code></dt>
+
+ <dd>
+
+ <p>Return the dimensions of the bitmap, in CSS pixels.</p>
+
+ <p>Can be set, to update the bitmap's dimensions. If the rendering context is bound to a canvas,
+ this will also update the canvas' intrinsic dimensions.</p>
+
+ </dd>
+
+ <dt><var title="">context</var> . <code title="dom-context-2d-commit">commit</code>()</dt>
+
+ <dd>
+
+ <p>If the rendering context is bound to a <code>canvas</code>, display the current frame.</p>
+
+ </dd>
+
</dl>
<div class="impl">
- <p>The <dfn title="dom-context-2d-canvas"><code>canvas</code></dfn>
- attribute must return the <code>canvas</code> element that the
- context paints on.</p>
+ <p>A <code>CanvasRenderingContext2D</code> object can be obtained in two ways: the <code
+ title="dom-canvas-getContext">getContext()</code> method on a <code>canvas</code> element (which
+ invokes the <span>2D context creation algorithm</span>), and the <code
+ title="dom-context-2d">CanvasRenderingContext2D()</code> constructor.</p>
- <p>Except where otherwise specified, for the 2D context interface,
- <strong>any method call with a numeric argument whose value is
- infinite or a NaN value must be ignored</strong>.</p>
+ <p>A <code>CanvasRenderingContext2D</code> object has a <dfn>scratch bitmap</dfn> and can be bound
+ to an <dfn>output bitmap</dfn>. These are initialized when the object is created, and can be
+ subsequently adjusted when the rendering context is <span
+ title="concept-canvas-binding-steps">bound</span> or <span
+ title="concept-canvas-unbinding-steps">unbound</span>. In some cases, these bitmaps are the same
+ underlying bitmap. In general, the <span>scratch bitmap</span> is what scripts interact with, and
+ the <span>output bitmap</span> is what is being displayed. These bitmaps always have the same
+ dimensions.</p>
+<!--ADD-TOPIC:Security-->
+ <p>Each such bitmap has an <span title="concept-canvas-origin-clean">origin-clean</span> flag,
+ which can be set to true or false. Initially, when one of these bitmaps is created, its <span
+ title="concept-canvas-origin-clean">origin-clean</span> flag must be set to true.</p>
+<!--REMOVE-TOPIC:Security-->
+
+ <p>These bitmaps also have a <span>hit region list</span>, which is described in a later section.
+ Initially, this list is empty. <span title="scratch bitmap">Scratch bitmaps</span> also have a
+ <dfn>list of pending interface actions</dfn>, which can contain instructions to draw the user's
+ attention to a location on the bitmap, and instructions to scroll to a location on the bitmap.
+ Initially, this list is also empty.</p>
+
+ <hr>
+
+ <p>The <dfn>2D context creation algorithm</dfn>, which is passed a <var title="">target</var> (a
+ <code>canvas</code> element), consists of running the following steps:</p>
+
+ <ol>
+
+ <li><p>Create a new <code>CanvasRenderingContext2D</code> object.</p></li>
+
+ <li><p>Initialize its <code title="dom-context-2d-canvas">canvas</code> attribute to point to
+ <var title="">target</var>.</p></li>
+
+ <li><p>Let the new <code>CanvasRenderingContext2D</code> object's <span>output bitmap</span> and
+ <span>scratch bitmap</span> both be the same bitmap as <var title="">target</var>'s bitmap (so
+ that they are shared).</p></li>
+
+ <li><p><span title="concept-canvas-set-bitmap-dimensions">Set bitmap dimensions</span> to the
+ numeric values of <var title="">target</var>'s <code title="attr-canvas-width">width</code> and
+ <code title="attr-canvas-height">height</code> content attributes.</p></li>
+
+ <li><p>Return the new <code>CanvasRenderingContext2D</code> object.</p></li>
+
+ </ol>
+
+ <hr>
+
+ <p>The <dfn title="dom-context-2d"><code>CanvasRenderingContext2D()</code></dfn> constructor, when
+ invoked, must run the following steps:</p>
+
+ <ol>
+
+ <li><p>Create a new <code>CanvasRenderingContext2D</code> object.</p></li>
+
+ <li><p>Initialize its <code title="dom-context-2d-canvas">canvas</code> attribute to
+ null.</p></li>
+
+ <li><p>Let the new <code>CanvasRenderingContext2D</code> object's <span>scratch bitmap</span> be
+ a new bitmap.</p></li>
+
+ <li><p>If the constructor was called with arguments, let <var title="">width</var> and <var
+ title="">height</var> be the first and second arguments, respectively. Otherwise, let <var
+ title="">width</var> and <var title="">height</var> be 300 and 150, respectively.</p></li>
+
+ <li><p><span title="concept-canvas-set-bitmap-dimensions">Set bitmap dimensions</span> to <var
+ title="">width</var> and <var title="">height</var>.</p></li>
+
+ <li><p>Let the new <code>CanvasRenderingContext2D</code> object have no <span>output
+ bitmap</span>.</p></li>
+
+<!--
+ <li><p><span>Start autocommitting the scratch bitmap</span> for the new
+ <code>CanvasRenderingContext2D</code> object.</p></li>
+-->
+
+ <li><p>Return the new <code>CanvasRenderingContext2D</code> object.</p></li>
+
+ </ol>
+
+ <hr>
+
+ <p>When the user agent is required to <dfn>commit the scratch bitmap</dfn> for a rendering
+ context, it must run the following steps:
+
+ <ol>
+
+ <li><p>Let <var title="">bitmap copy</var> be a copy of the rendering context's <span>scratch
+ bitmap</span>.</p></li>
+
+<!--ADD-TOPIC:Security-->
+ <li><p>Let <var title="">origin-clean flag copy</var> be a copy of the rendering context's
+ <span>scratch bitmap</span>'s <span title="concept-canvas-origin-clean">origin-clean</span>
+ flag.</p></li>
+<!--REMOVE-TOPIC:Security-->
+
+ <li><p>Let <var title="">hit region list copy</var> be a copy of the rendering context's
+ <span>scratch bitmap</span>'s <span>hit region list</span>.</p></li>
+
+ <li><p>Let <var title="">list of pending interface actions copy</var> be a copy of the rendering
+ context's <span>scratch bitmap</span>'s <span>list of pending interface actions</span>.</p></li>
+
+ <li><p>Empty the <span>scratch bitmap</span>'s <span>list of pending interface actions</span>.</p></li>
+
+ <li><p>If the rendering context has no <span>output bitmap</span>, abort these steps.</p></li>
+
+ <li><p>Let <var title="">output bitmap</var> be the rendering context's <span>output
+ bitmap</span>.</p></li>
+
+ <li>
+
+ <p><span>Queue a task</span> from the <span>canvas updating task source</span> of the
+ <span>output bitmap</span>'s <code>canvas</code> element's <span>event loop</span> to perform
+ the following substeps:</p>
+
+ <ol>
+
+ <li><p>Overwrite <var title="">output bitmap</var> with <var title="">bitmap
+ copy</var>.</p></li>
+
+<!--ADD-TOPIC:Security-->
+ <li><p>Overwrite <var title="">output bitmap</var>'s <span
+ title="concept-canvas-origin-clean">origin-clean</span> flag with <var title="">origin-clean
+ flag copy</var>.</p></li>
+<!--REMOVE-TOPIC:Security-->
+
+ <li><p>Overwrite <var title="">output bitmap</var>'s <span>hit region list</span> with <var
+ title="">hit region list copy</var>.</p></li>
+
+ <li><p>Follow the directions in the <var title="">list of pending interface actions
+ copy</var>.</p></li>
+
+ </ol>
+
+ </li>
+
+ </ol>
+
+ <p>The <dfn>canvas updating task source</dfn> is just used for the algorithm above.</p>
+
+<!--(right now we're requiring commit())
+ <p>When a user agent is to <dfn>start autocommitting the scratch bitmap</dfn> for a rendering
+ context, it must asynchronously start running the following algorithm. This algorithm interacts
+ closely with the <span>event loop</span> mechanism; in particular, it has a <span>synchronous
+ section</span> (which is triggered as part of the <span>event loop</span> algorithm). The steps in
+ that section are marked with ⌛.</p>
+
+ <ol>
+
+ <li><p><i>Top</i>: <span>Await a stable state</span>. The <span>synchronous section</span>
+ consists of the following steps. (The steps in the <span>synchronous section</span> are marked
+ with ⌛.)</p></li>
+
+ <li><p>⌛ <span>Commit the scratch bitmap</span> for the rendering context.</p></li>
+
+ <li><p>End the <span>synchronous section</span>, continuing the remaining steps
+ asynchronously.</p></li>
+
+ <li><p>Return to the step labeled <i>top</i>.</p></li>
+
+ </ol>
+-->
+
+ <p>The <dfn title="dom-context-2d-commit"><code>commit()</code></dfn> method must run the
+ following steps:</p>
+
+ <ol>
+
+ <li><p>If the rendering context's <span title="concept-canvas-context-bitmap-mode">context bitmap
+ mode</span> is <span title="concept-canvas-bound">fixed</span>, throw an
+ <code>InvalidStateError</code> exception and abort these steps.</p></li>
+
+ <li><p><span>Commit the scratch bitmap</span> for the rendering context.</p></li>
+
+ </ol>
+
+ <p class="note">The <span>scratch bitmap</span> is only <span title="commit the scratch
+ bitmap">committed</span> when the <code title="dom-context-2d-commit">commit()</code> method is
+ called. (This doesn't matter for <code>canvas</code> elements in <span
+ title="concept-canvas-direct-2d">direct-2d</span> mode, since there the <span>scratch
+ bitmap</span> is also the <code>canvas</code> element's bitmap so every drawing operation is
+ immediately drawn.)</p>
+
+ <hr>
+
+ <p>When the user agent is to <dfn title="concept-canvas-set-bitmap-dimensions">set bitmap
+ dimensions</dfn> to <var title="">width</var> and <var title="">height</var>, it must run the
+ following steps:</p>
+
+ <ol>
+
+ <li><p><span>Reset the rendering context to its default state</span>.</p></li>
+
+ <li><p>Clear the <span>scratch bitmap</span>'s <span>hit region list</span> and its <span>list of
+ pending interface actions</span>.</p></li>
+
+ <li><p>Resize the <span>scratch bitmap</span> to the new <var title="">width</var> and <var
+ title="">height</var> and clear it to fully transparent black.</p></li>
+
+ <li><p>If the rendering context has an <span>output bitmap</span>, and the <span>scratch
+ bitmap</span> is a different bitmap than the <span>output bitmap</span>, then resize the
+ <span>output bitmap</span> to the new <var title="">width</var> and <var title="">height</var>
+ and clear it to fully transparent black.</p></li>
+
+ <li>
+
+ <p>If the rendering context's <span title="concept-canvas-context-bitmap-mode">context bitmap
+ mode</span> is <span title="concept-canvas-fixed">fixed</span>, then run these substeps:</p>
+
+ <ol>
+
+ <li><p>Let <var title="">canvas</var> be the <code>canvas</code> element to which the rendering
+ context's <code title="dom-context-2d-canvas">canvas</code> attribute was initialized.</p></li>
+
+ <li><p>If the rendering context's <span title="concept-canvas-context-bitmap-mode">context
+ bitmap mode</span> is <span title="concept-canvas-fixed">fixed</span> and the numeric value of
+ the <var title="">canvas</var>' <code title="attr-canvas-width">width</code> content attribute
+ differs from <var title="">width</var>, then set <var title="">canvas</var>' <code
+ title="attr-canvas-width">width</code> content attribute to the shortest possible string
+ representing <var title="">width</var> as a <span>valid non-negative integer</span>.</p></li>
+
+ <li><p>If the rendering context's <span title="concept-canvas-context-bitmap-mode">context
+ bitmap mode</span> is <span title="concept-canvas-fixed">fixed</span> and the numeric value of
+ the <var title="">canvas</var>' <code title="attr-canvas-height">height</code> content attribute
+ differs from <var title="">height</var>, then set <var title="">canvas</var>' <code
+ title="attr-canvas-height">height</code> content attribute to the shortest possible string
+ representing <var title="">height</var> as a <span>valid non-negative integer</span>.</p></li>
+
+ </ol>
+
+ </li>
+
+ </ol>
+
+ <div class="example">
+ <p>Only one square appears to be drawn in the following example:</p>
+ <pre>// canvas is a reference to a <canvas> element
+var context = canvas.getContext('2d');
+context.fillRect(0,0,50,50);
+canvas.setAttribute('width', '300'); // clears the canvas
+context.fillRect(0,100,50,50);
+canvas.width = canvas.width; // clears the canvas
+context.fillRect(100,0,50,50); // only this square remains</pre>
+ </div>
+
+ <hr>
+
+ <p>When the user agent is to run the <dfn title="concept-canvas-unbinding-steps">unbinding
+ steps</dfn> for a rendering context, it must run the following steps:</p>
+
+ <ol>
+
+ <li><p><span>Reset the rendering context to its default state</span>.</p></li>
+
+ <li><p>Clear the <span>scratch bitmap</span>'s <span>hit region list</span> and its <span>list of
+ pending interface actions</span>.</p></li>
+
+ <li><p>Clear the <code>CanvasRenderingContext2D</code> object's <span>scratch bitmap</span> to a
+ transparent black.</p></li>
+
+<!--ADD-TOPIC:Security-->
+ <li><p>Set the <code>CanvasRenderingContext2D</code> object's <span>scratch bitmap</span>'s <span
+ title="concept-canvas-origin-clean">origin-clean</span> flag to true.</p></li>
+<!--REMOVE-TOPIC:Security-->
+
+ <li><p>Let the <code>CanvasRenderingContext2D</code> object have no <span>output
+ bitmap</span>.</p></li>
+
+ </ol>
+
+ <p>When the user agent is to run the <dfn title="concept-canvas-binding-steps">binding steps</dfn>
+ to bind the rendering context to the <code>canvas</code> element <var title="">target</var>, it
+ must run the following steps:</p>
+
+ <ol>
+
+ <li><p><span>Reset the rendering context to its default state</span>.</p></li>
+
+ <li><p>Clear the <span>scratch bitmap</span>'s <span>hit region list</span> and its <span>list of
+ pending interface actions</span>.</p></li>
+
+ <li><p>Resize the <code>CanvasRenderingContext2D</code> object's <span>scratch bitmap</span> to
+ the dimensions of <var title="">target</var>'s bitmap and clear it to fully transparent
+ black.</p></li>
+
+<!--ADD-TOPIC:Security-->
+ <li><p>Set the <code>CanvasRenderingContext2D</code> object's <span>scratch bitmap</span>'s <span
+ title="concept-canvas-origin-clean">origin-clean</span> flag to true.</p></li>
+<!--REMOVE-TOPIC:Security-->
+
+ <li><p>Let the <code>CanvasRenderingContext2D</code> object's <span>output bitmap</span> be <var
+ title="">target</var>'s bitmap.</p></li>
+
+ </ol>
+
+ <hr>
+
+ <p>The <code>CanvasRenderingContext2D</code> 2D rendering context represents a flat linear
+ Cartesian surface whose origin (0,0) is at the top left corner, with the coordinate space having
+ <var title="">x</var> values increasing when going right, and <var title="">y</var> values
+ increasing when going down. The <var title="">x</var>-coordinate of the left-most edge is equal to
+ the width of the rendering context's <span>scratch bitmap</span> in CSS pixels; similarly, the
+ <var title="">y</var>-coordinate of the bottom-most edge is equal to the height of the rendering
+ context's <span>scratch bitmap</span> in CSS pixels.</p>
+
+ <p>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 two device pixels per unit in the
+ coordinate space, so that the rendering remains at high quality throughout. Anti-aliasing can
+ similarly be implemented using over-sampling with bitmaps of a higher resolution than the final
+ image on the display.</p>
+
+ <hr>
+
+ <p>The <dfn title="dom-context-2d-canvas"><code>canvas</code></dfn> attribute must return the
+ value it was initialized to when the object was created.</p>
+
+ <p>The <dfn title="dom-context-2d-width"><code>width</code></dfn> attribute, on getting, must
+ return the width of the rendering context's <span>scratch bitmap</span>, in CSS pixels. On
+ setting, it must <span title="concept-canvas-set-bitmap-dimensions">set bitmap dimensions</span>
+ to the new value and the current height of the rendering context's <span>scratch bitmap</span> in
+ CSS pixels, respectively.</p>
+
+ <p>The <dfn title="dom-context-2d-height"><code>height</code></dfn> attribute, on getting, must
+ return the height of the rendering context's <span>scratch bitmap</span>, in CSS pixels. On
+ setting, it must <span title="concept-canvas-set-bitmap-dimensions">set bitmap dimensions</span>
+ to the current width of the rendering context's <span>scratch bitmap</span> in CSS pixels and the
+ new value, respectively.</p>
+
+ <hr>
+
+ <p>Except where otherwise specified, for the 2D context interface, <strong>any method call with a
+ numeric argument whose value is infinite or a NaN value must be ignored</strong>.</p>
+
<!--
Philip Taylor wrote:
> My experience with some 3d canvas code is that infinities come up in
@@ -43031,96 +43580,81 @@
> exceptions when passing in non-finite arguments.
-->
- <p>Whenever the CSS value <code title="">currentColor</code> is used
- as a color in this API, the "computed value of the 'color' property"
- for the purposes of determining the computed value of the <code
- title="">currentColor</code> keyword is the computed value of the
- 'color' property on the element in question at the time that the
- color is specified (e.g. when the appropriate attribute is set, or
- when the method is called; not when the color is rendered or
- otherwise used). If the computed value of the 'color' property is
- undefined for a particular case (e.g. because the element is not
- <span>in a <code>Document</code></span>), then the "computed value
- of the 'color' property" for the purposes of determining the
- computed value of the <code title="">currentColor</code> keyword is
- fully opaque black. <a href="#refsCSSCOLOR">[CSSCOLOR]</a></p>
+ <p>Whenever the CSS value <code title="">currentColor</code> is used as a color in the
+ <code>CanvasRenderingContext2D</code> API, the "computed value of the 'color' property" for the
+ purposes of determining the computed value of the <code title="">currentColor</code> keyword is
+ the value described by the appropriate entry in the following list:</p>
- <p>In the case of <code
- title="dom-canvasgradient-addColorStop">addColorStop()</code> on
- <code>CanvasGradient</code>, the "computed value of the 'color'
- property" for the purposes of determining the computed value of the
- <code title="">currentColor</code> keyword is always fully opaque
- black (there is no associated element). <a
- href="#refsCSSCOLOR">[CSSCOLOR]</a></p>
+ <dl>
- <p class="note">This is because <code>CanvasGradient</code> objects
- are <code>canvas</code>-neutral — a
- <code>CanvasGradient</code> object created by one
- <code>canvas</code> 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>
+ <dt>If the rendering context's <span title="concept-canvas-context-bitmap-mode">context bitmap
+ mode</span> is <span title="concept-canvas-fixed">fixed</span> and the <code>canvas</code>
+ element is <span>being rendered</span></dt>
- <p class="note">Similar concerns exist with font-related properties;
- the rules for those are described in detail in the relevant section
- below.</p>
+ <dd><p>The "computed value of the 'color' property" for the purposes of determining the computed
+ value of the <code title="">currentColor</code> keyword is the computed value of the 'color'
+ property on the <code>canvas</code> element at the time that the color is specified (e.g. when
+ the appropriate attribute is set, or when the method is called; not when the color is rendered or
+ otherwise used). <a href="#refsCSSCOLOR">[CSSCOLOR]</a></p></dd>
- </div>
+ <dt>In all other cases</dt>
+ <dd><p>The "computed value of the 'color' property" for the purposes of determining the computed
+ value of the <code title="">currentColor</code> keyword is fully opaque black. <a
+ href="#refsCSSCOLOR">[CSSCOLOR]</a></p></dd>
- <h6>Resolution</h6>
+ </dl>
- <p>The user agent may use a bitmap of any square resolution as the
- backing store for a canvas that uses the 2D context. Once a canvas
- has a bitmap, that canvas must keep its resolution for its
- lifetime.</p>
+ <p>In the case of <code title="dom-canvasgradient-addColorStop">addColorStop()</code> on
+ <code>CanvasGradient</code>, the "computed value of the 'color' property" for the purposes of
+ determining the computed value of the <code title="">currentColor</code> keyword is always fully
+ opaque black (there is no associated element). <a href="#refsCSSCOLOR">[CSSCOLOR]</a></p>
- <p class="note">In general, user agents are encouraged to use a
- resolution equal to the screen resolution. Ideally, the number of
- device pixels per CSS pixel would be a multiple of two. Several
- factors can affect the screen resolution: most prominently the
- actual display resolution, but also important is the current zoom
- level.</p>
+ <p class="note">This is because <code>CanvasGradient</code> objects are
+ <code>canvas</code>-neutral — a <code>CanvasGradient</code> object created by one
+ <code>canvas</code> 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>
- <p>All the bitmaps created during a single <span
- title="concept-task">task</span> for canvases that use 2D contexts
- must have the same resolution.
- <!--INSERT FINGERPRINT-->
- </p>
+ <p class="note">Similar concerns exist with font-related properties; the rules for those are
+ described in detail in the relevant section below.</p>
- <pre class="idl">partial interface <span>Screen</span> {
- readonly attribute double <span title="dom-screen-canvasResolution">canvasResolution</span>;
-};</pre>
+ </div>
- <dl class="domintro">
- <dt><var title="">window</var> . <code title="dom-Window-screen">screen</code> . <code title="dom-screen-canvasResolution">canvasResolution</code></dt>
+ <h6>Implementation notes</h6>
- <dd>
+ <!--END dev-html--><p><i>This section is non-normative.</i></p><!--START dev-html-->
- <p>Returns the resolution that has been, or will be, used for bitmaps during this <span title="concept-task">task</span>.</p>
+ <p>Although the way the specification is written it might sound like an implementation needs to
+ track up to four bitmaps per canvas or rendering context — one <span>scratch bitmap</span>,
+ one <span>output bitmap</span> for the rendering context, one bitmap for the <code>canvas</code>,
+ and one bitmap for the actually currently rendered image — user agents can in fact generally
+ optimise this to only one or two.</p>
- </dd>
+ <p>The <span>scratch bitmap</span>, when it isn't the same bitmap as the <span>output
+ bitmap</span>, is only directly observable if it is read, and therefore 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 <code title="dom-context-2d-commit">commit()</code>, <code
+ title="dom-context-2d-drawImage">drawImage()</code>, or the <code>ImageBitmap()</code>
+ constructor). In many cases, this will be more memory efficient.</p>
- </dl>
+ <p>The bitmap of a <code>canvas</code> element is the one bitmap that's pretty much always going
+ to be needed in practice. The <span>output bitmap</span> of a rendering context, when it has one,
+ is always just an alias to a <code>canvas</code> element's bitmap.</p>
- <div class="impl">
+ <p>Additional bitmaps are sometimes needed, e.g. to enable fast drawing when the canvas is being
+ painted at a different size than its intrinsic size, or to enable double buffering so that the
+ rendering commands from the <span>scratch bitmap</span> can be applied without the rendering being
+ updated midway.</p>
- <p>The <dfn
- title="dom-screen-canvasResolution"><code>canvasResolution</code></dfn>
- attribute of the <code>Screen</code> object must return the
- resolution, in image pixels per coordinate space units, that any
- canvas bitmaps created during this <span
- title="concept-task">task</span> will use (or have used). <a
- href="#refsCSSOMVIEW">[CSSOMVIEW]</a></p>
- </div>
-
<h6>The canvas state</h6>
- <p>Each context maintains a stack of drawing states. <dfn
- title="drawing state">Drawing states</dfn> consist of:</p>
+ <p>Each <code>CanvasRenderingContext2D</code> rendering context maintains a stack of drawing
+ states. <dfn title="drawing state">Drawing states</dfn> consist of:</p>
<ul class="brief">
<li>The current <span title="dom-context-2d-transformation">transformation matrix</span>.</li>
@@ -43142,15 +43676,15 @@
title="dom-context-2d-font">font</code>, <code
title="dom-context-2d-textAlign">textAlign</code>, <code
title="dom-context-2d-textBaseline">textBaseline</code>, <code
+ title="dom-context-2d-direction">direction</code>, <code
title="dom-context-2d-imageSmoothingEnabled">imageSmoothingEnabled</code>.</li>
<li>The current <span>dash list</span>.</li>
</ul>
- <p class="note">The <span>current default path</span> and the
- current bitmap are not part of the drawing state. The <span>current
- default path</span> is persistent, and can only be reset using the
- <code title="dom-context-2d-beginPath">beginPath()</code> method.
- The current bitmap is a property of the canvas, not the context.</p>
+ <p class="note">The <span>current default path</span> and the rendering context's bitmaps are not
+ part of the drawing state. The <span>current default path</span> is persistent, and can only be
+ reset using the <code title="dom-context-2d-beginPath">beginPath()</code> method. The bitmaps
+ depend on whether and how the rendering context is bound to a <code>canvas</code> element.</p>
<dl class="domintro">
@@ -43174,16 +43708,17 @@
<div class="impl">
- <p>The <dfn title="dom-context-2d-save"><code>save()</code></dfn>
- method must push a copy of the current drawing state onto the
- drawing state stack.</p>
+ <p>The <dfn title="dom-context-2d-save"><code>save()</code></dfn> method must push a copy of the
+ current drawing state onto the drawing state stack.</p>
- <p>The <dfn
- title="dom-context-2d-restore"><code>restore()</code></dfn> method
- must pop the top entry in the drawing state stack, and reset the
- drawing state it describes. If there is no saved state, the method
- must do nothing.</p>
+ <p>The <dfn title="dom-context-2d-restore"><code>restore()</code></dfn> method must pop the top
+ entry in the drawing state stack, and reset the drawing state it describes. If there is no saved
+ state, the method must do nothing.</p>
+ <p>When the user agent is to <dfn>reset the rendering context to its default state</dfn>, it must
+ clear the drawing state stack and everything that <span>drawing state</span> consists of to
+ initial values.</p>
+
<!-- v7
idea from Mihai:
> 5. Drawing states should be saveable with IDs, and for easier restoring.
@@ -43231,19 +43766,17 @@
<div class="impl">
- <p>Each <code>DrawingStyle</code> object has a <dfn>styles scope
- node</dfn>.</p>
+ <p>Each <code>DrawingStyle</code> object can have a <dfn>styles scope object</dfn>.</p>
- <p>The <dfn
- title="dom-DrawingStyle"><code>DrawingStyle()</code></dfn>
- constructor, when invoked, must return a newly created
- <code>DrawingStyle</code> object. If the constructor was passed an
- argument, then the <code>DrawingStyle</code> object's <span>styles
- scope node</span> is that element. Otherwise, the object's
- <span>styles scope node</span> is the <code>Document</code> object
- of the <span>active document</span> of the <span>browsing
- context</span> of the <code>Window</code> object on which the
- interface object of the invoked constructor is found.</p>
+ <p>The <dfn title="dom-DrawingStyle"><code>DrawingStyle()</code></dfn> constructor, when invoked,
+ must return a newly created <code>DrawingStyle</code> object. If the constructor was passed an
+ argument, then the <code>DrawingStyle</code> object's <span>styles scope object</span> is that
+ element. Otherwise, if the <span>JavaScript global environment</span> is a <span>document
+ environment</span>, the object's <span>styles scope object</span> is the <code>Document</code>
+ object of the <span>active document</span> of the <span>browsing context</span> of the
+ <code>Window</code> object on which the interface object of the invoked constructor is found.
+ Otherwise, the <span>JavaScript global environment</span> is a <span>worker environment</span>,
+ and the <span>styles scope object</span> is the worker.</p>
</div>
@@ -43829,11 +44362,8 @@
<p>Returns the current text alignment settings.</p>
- <p>Can be set, to change the alignment. The possible values are
- <code title="">start</code>, <code title="">end</code>, <code
- title="">left</code>, <code title="">right</code>, and <code
- title="">center</code>. Other values are ignored. The default is
- <code title="">start</code>.</p>
+ <p>Can be set, to change the alignment. The possible values are and their meanings are given
+ below. Other values are ignored. The default is <code title="">start</code>.</p>
</dd>
@@ -43844,23 +44374,43 @@
<p>Returns the current baseline alignment settings.</p>
- <p>Can be set, to change the baseline alignment. The possible
- values and their meanings are given below. Other values are
- ignored. The default is <code title="">alphabetic</code>.</p>
+ <p>Can be set, to change the baseline alignment. The possible values and their meanings are
+ given below. Other values are ignored. The default is <code
+ title="dom-concept-2d-textAlign-alphabetic">alphabetic</code>.</p>
</dd>
+ <dt><var title="">context</var> . <code title="dom-context-2d-direction">direction</code> [ = <var title="">value</var> ]</dt>
+ <dt><var title="">styles</var> . <code title="dom-context-2d-direction">direction</code> [ = <var title="">value</var> ]</dt>
+
+ <dd>
+
+ <p>Returns the current directionality.</p>
+
+ <p>Can be set, to change the directionality. The possible values and their meanings are given
+ below. Other values are ignored. The default is <code
+ title="dom-concept-2d-textAlign-inherit">inherit</code>.</p>
+
+ </dd>
+
</dl>
<div class="impl">
- <p>Objects that implement the <code>CanvasDrawingStyles</code>
- interface have attributes (defined in this section) that control how
- text is laid out (rasterized or outlined) by the object. Such
- objects also have a <dfn>font style source node</dfn>. For
- <code>CanvasRenderingContext2D</code> objects, this is the
- <code>canvas</code> element. For <code>DrawingStyle</code> objects,
- it's the <span>styles scope node</span>.</p>
+ <p>Objects that implement the <code>CanvasDrawingStyles</code> 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 <dfn>font style source object</dfn>. For
+ <code>CanvasRenderingContext2D</code> objects whose <span
+ title="concept-canvas-context-bitmap-mode">context bitmap mode</span> is <span
+ title="concept-canvas-fixed">fixed</span>, this is their <code>canvas</code> element; for other
+ <code>CanvasRenderingContext2D</code> objects, if the <span>JavaScript global environment</span>
+ is a <span>document environment</span>, the object's <span>font style source object</span> is the
+ <code>Document</code> object of the <span>active document</span> of the <span>browsing
+ context</span> of the <code>Window</code> object on which the interface object of the
+ <code>CanvasRenderingContext2D</code> object is found; otherwise the <span>JavaScript global
+ environment</span> is a <span>worker environment</span> and the <span>font style source
+ object</span> is the worker. For <code>DrawingStyle</code> objects, it's the <span>styles scope
+ object</span>.</p>
<p>The <dfn title="dom-context-2d-font"><code>font</code></dfn> IDL
attribute, on setting, must be parsed the same way as the 'font'
@@ -43874,16 +44424,13 @@
'initial'), then it must be ignored, without assigning a new font
value. <a href="#refsCSS">[CSS]</a></p>
- <p>Font names must be interpreted in the context of the <span>font
- style source node</span>'s stylesheets when the font is to be used;
- any fonts embedded using <code title="">@font-face</code> that are
- visible to that element must therefore be available once they are
- loaded. (If a reference font is used before it is fully loaded, or
- if the <span>font style source node</span> 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.) <a
- href="#refsCSSFONTS">[CSSFONTS]</a></p>
+ <p>Font names must be interpreted in the context of the <span>font style source object</span> when
+ the font is to be used; any fonts embedded using <code title="">@font-face</code> or loaded using
+ the <code>FontLoader</code> that are visible to the <span>font style source object</span> must
+ therefore be available once they are loaded. If a font is used before it is fully loaded, or if
+ the <span>font style source object</span> 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. <a href="#refsCSSFONTS">[CSSFONTS]</a></p>
<p>Only vector fonts should be used by the user agent; if a user
agent were to use bitmap fonts then transformations would likely
@@ -43910,63 +44457,84 @@
</div>
- <p>When the object implementing the <code>CanvasDrawingStyles</code>
- interface is created, the font of the context must be set to 10px
- sans-serif. 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
+ <p>When the object implementing the <code>CanvasDrawingStyles</code> interface is created, the
+ font of the context must be set to 10px sans-serif. 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 <span>font style
+ source object</span> at the time that the attribute is set, if it is an element. 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 <span>font style
+ source object</span> at the time that the attribute is set, if it is an element. If the computed
+ values are undefined for a particular case (e.g. because the <span>font style source object</span>
+ is not an element or is not <span>being rendered</span>), then the relative keywords must be
+ interpreted relative to the normal-weight 10px sans-serif default.</p>
-
- of the 'font-size' property of the <span>font style source
- node</span> at the time that the attribute is set, if that is an
- element. 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 <span>font
- style source node</span> at the time that the attribute is set, if
- that is an element. If the computed values are undefined for a
- particular case (e.g. because the <span>font style source
- node</span> is not an element or is not <span>in a
- <code>Document</code></span>), then the relative keywords must be
- interpreted relative to the normal-weight 10px sans-serif
- default.</p>
-
- <p>The <dfn
- title="dom-context-2d-textAlign"><code>textAlign</code></dfn> IDL
- attribute, on getting, must return the current value. On setting, if
- the value is one of <code title="">start</code>, <code
- title="">end</code>, <code title="">left</code>, <code
- title="">right</code>, or <code title="">center</code>, then the
- value must be changed to the new value. Otherwise, the new value
- must be ignored. When the object implementing the
+ <p>The <dfn title="dom-context-2d-textAlign"><code>textAlign</code></dfn> IDL attribute, on
+ getting, must return the current value. On setting, if the value is one of <code
+ title="dom-concept-2d-textAlign-start">start</code>, <code
+ title="dom-concept-2d-textAlign-end">end</code>, <code
+ title="dom-concept-2d-textAlign-left">left</code>, <code
+ title="dom-concept-2d-textAlign-right">right</code>, or <code
+ title="dom-concept-2d-textAlign-center">center</code>, then the value must be changed to the new
+ value. Otherwise, the new value must be ignored. When the object implementing the
<code>CanvasDrawingStyles</code> interface is created, the <code
- title="dom-context-2d-textAlign">textAlign</code> attribute must
- initially have the value <code title="">start</code>.</p>
+ title="dom-context-2d-textAlign">textAlign</code> attribute must initially have the value <code
+ title="dom-concept-2d-textAlign-start">start</code>.</p>
- <p>The <dfn
- title="dom-context-2d-textBaseline"><code>textBaseline</code></dfn>
- IDL attribute, on getting, must return the current value. On
- setting, if the value is one of <code
+ <p>The <dfn title="dom-context-2d-textBaseline"><code>textBaseline</code></dfn> IDL attribute, on
+ getting, must return the current value. On setting, if the value is one of <code
title="dom-context-2d-textBaseline-top">top</code>, <code
title="dom-context-2d-textBaseline-hanging">hanging</code>, <code
title="dom-context-2d-textBaseline-middle">middle</code>, <code
- title="dom-context-2d-textBaseline-alphabetic">alphabetic</code>,
- <code
- title="dom-context-2d-textBaseline-ideographic">ideographic</code>,
- or <code title="dom-context-2d-textBaseline-bottom">bottom</code>,
- then the value must be changed to the new value. Otherwise, the new
- value must be ignored. When the object implementing the
+ title="dom-context-2d-textBaseline-alphabetic">alphabetic</code>, <code
+ title="dom-context-2d-textBaseline-ideographic">ideographic</code>, or <code
+ title="dom-context-2d-textBaseline-bottom">bottom</code>, then the value must be changed to the
+ new value. Otherwise, the new value must be ignored. When the object implementing the
<code>CanvasDrawingStyles</code> interface is created, the <code
- title="dom-context-2d-textBaseline">textBaseline</code> attribute
- must initially have the value <code title="">alphabetic</code>.</p>
+ title="dom-context-2d-textBaseline">textBaseline</code> attribute must initially have the value
+ <code title="dom-context-2d-textBaseline-alphabetic">alphabetic</code>.</p>
+ <p>The <dfn title="dom-context-2d-direction"><code>direction</code></dfn> IDL attribute, on
+ getting, must return the current value. On setting, if the value is one of <code
+ title="dom-context-2d-direction-ltr">ltr</code>, <code
+ title="dom-context-2d-direction-rtl">rtl</code>, <!--<code
+ title="dom-context-2d-direction-auto">auto</code>,--> or or <code
+ title="dom-context-2d-direction-inherit">inherit</code>, then the value must be changed to the new
+ value. Otherwise, the new value must be ignored. When the object implementing the
+ <code>CanvasDrawingStyles</code> interface is created, the <code
+ title="dom-context-2d-direction">direction</code> attribute must initially have the value <code
+ title="dom-context-2d-direction-inherit">inherit</code>.</p>
+
</div>
+ <p>The <code title="dom-context-2d-textAlign">textBaseline</code> attribute's allowed keywords are
+ as follows:</p>
+
+ <dl>
+
+ <dt><dfn title="dom-concept-2d-textAlign-start"><code>start</code></dfn>
+ <dd><p>Align to the start edge of the text (left side in left-to-right text, right side in
+ right-to-left text).</p></dd>
+
+ <dt><dfn title="dom-concept-2d-textAlign-end"><code>end</code></dfn>
+ <dd><p>Align to the end edge of the text (right side in left-to-right text, left side in
+ right-to-left text).</p></dd>
+
+ <dt><dfn title="dom-concept-2d-textAlign-left"><code>left</code></dfn>
+ <dd><p>Align to the left.</p></dd>
+
+ <dt><dfn title="dom-concept-2d-textAlign-right"><code>right</code></dfn>
+ <dd><p>Align to the right.</p></dd>
+
+ <dt><dfn title="dom-concept-2d-textAlign-center"><code>center</code></dfn>
+ <dd><p>Align to the center.</p></dd>
+
+ </dl>
+
<p>The <code title="dom-context-2d-textBaseline">textBaseline</code>
attribute's allowed keywords correspond to alignment points in the
font:</p>
- <!-- this is filler to make sure the TCP packet boundary doesn't fall in the middle of one of the NCRs below -->
- <!-- (because otherwise the parser in anolis screws it up) -->
<p><img src="images/baselines.png" width="738" height="300" alt="The top of the em square 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 top of the em square and the bottom of the em square, the alphabetic baseline is where characters like Á, ÿ, f, and Ω are anchored, the ideographic baseline is where glyphs like 私 and 達 are anchored, and the bottom of the em square 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 the em square."></p>
<p>The keywords map to these alignment points as follows:</p>
@@ -43993,15 +44561,39 @@
</dl>
- <p>The <dfn>text preparation algorithm</dfn> is as follows. It takes
- as input a string <var title="">text</var>, a
- <code>CanvasDrawingStyles</code> object <var title="">target</var>,
- and an optional length <var title="">maxWidth</var>. It returns an
- array of glyph shapes, each positioned on a common coordinate space,
- and a <var title="">physical alignment</var> whose value is one of
- <i>left</i>, <i>right</i>, and <i title="">center</i>. (Most callers of this
- algorithm ignore the <var title="">physical alignment</var>.)</p>
+ <p>The <code title="dom-context-2d-textAlign">textBaseline</code> attribute's allowed keywords are
+ as follows:</p>
+ <dl>
+
+ <dt><dfn title="dom-concept-2d-direction-ltr"><code>ltr</code></dfn>
+
+ <dd><p>Treat input to the <span>text preparation algorithm</span> as left-to-right text.</p></dd>
+
+ <dt><dfn title="dom-concept-2d-direction-rtl"><code>rtl</code></dfn>
+
+ <dd><p>Treat input to the <span>text preparation algorithm</span> as right-to-left text.</p></dd>
+
+<!--
+ <dt><dfn title="dom-concept-2d-direction-auto"><code>auto</code></dfn>
+
+ <dd><p>Determine the direction from the input to the <span>text preparation algorithm</span>.</p></dd>
+-->
+
+ <dt><dfn title="dom-concept-2d-direction-inherit"><code>inherit</code></dfn>
+
+ <dd><p>Default to the directionality of the <code>canvas</code> element or <code>Document</code>
+ as appropriate.</p></dd>
+
+ </dl>
+
+ <p>The <dfn>text preparation algorithm</dfn> is as follows. It takes as input a string <var
+ title="">text</var>, a <code>CanvasDrawingStyles</code> object <var title="">target</var>, and an
+ optional length <var title="">maxWidth</var>. It returns an array of glyph shapes, each positioned
+ on a common coordinate space, a <var title="">physical alignment</var> whose value is one of
+ <i>left</i>, <i>right</i>, and <i title="">center</i>, and an inline box. (Most callers of this
+ algorithm ignore the <var title="">physical alignment</var> and the inline box.)</p>
+
<ol>
<li><p>If <var title="">maxWidth</var> was provided but is less
@@ -44022,28 +44614,45 @@
<dl class="switch">
- <dt>If the <var title="">target</var> object's <span>font style
- source node</span> is an element</dt>
+ <dt>If the <var title="">target</var> object's <code
+ title="dom-context-2d-direction">direction</code> attribute has the value "<code
+ title="dom-context-2d-direction-ltr">ltr</code>"</dt>
+ <dd>Let <var title="">direction</var> be '<span title="concept-ltr">ltr</span>'.</dd>
- <dd>Let <var title="">direction</var> be <span>the
- directionality</span> of the <var title="">target</var> object's
- <span>font style source node</span>.</dd>
+ <dt>If the <var title="">target</var> object's <code
+ title="dom-context-2d-direction">direction</code> attribute has the value "<code
+ title="dom-context-2d-direction-rtl">rtl</code>"</dt>
+ <dd>Let <var title="">direction</var> be '<span title="concept-rtl">rtl</span>'.</dd>
- <dt>If the <var title="">target</var> object's <span>font style
- source node</span> is a <code>Document</code> and that
- <code>Document</code> has a root element child</dt>
+<!--
+ <dt>If the <var title="">target</var> object's <code
+ title="dom-context-2d-direction">direction</code> attribute has the value "<code
+ title="dom-context-2d-direction-auto">auto</code>"</dt>
+ <dd>
+ Find the first character in <var title="">text</var> of bidirectional character type L, AL, or
+ R, if any. If such a character is found and it is of bidirectional character type AL or R,
+ then let <var title="">direction</var> be '<span title="concept-rtl">rtl</span>'; otherwise,
+ let <var title="">direction</var> be '<span title="concept-rtl">rtl</span>'. <a
+ href="#refsBIDI">[BIDI]</a>
+ </dd>
+-->
- <dd>Let <var title="">direction</var> be <span>the
- directionality</span> of the <var title="">target</var> object's
- <span>font style source node</span>'s root element child.</dd>
+ <dt>If the <var title="">target</var> object's <span>font style source object</span>
+ is an element</dt>
- <dt>If the <var title="">target</var> object's <span>font style
- source node</span> is a <code>Document</code> and that
- <code>Document</code> has no root element child</dt>
+ <dd>Let <var title="">direction</var> be <span>the directionality</span> of the <var
+ title="">target</var> object's <span>font style source object</span>.</dd>
- <dd>Let <var title="">direction</var> be '<span
- title="concept-ltr">ltr</span>'.</dd>
+ <dt>If the <var title="">target</var> object's <span>font style source object</span>
+ is a <code>Document</code> and that <code>Document</code> has a root element child</dt>
+ <dd>Let <var title="">direction</var> be <span>the directionality</span> of the <var
+ title="">target</var> object's <span>font style source object</span>'s root element child.</dd>
+
+ <dt>Otherwise</dt>
+
+ <dd>Let <var title="">direction</var> be '<span title="concept-ltr">ltr</span>'.</dd>
+
</dl>
</li>
@@ -44082,14 +44691,14 @@
<dl>
<dt>If <code title="dom-context-2d-textAlign">textAlign</code> is
- <code title="">left</code></dt>
+ <code title="dom-concept-2d-textAlign-left">left</code></dt>
<dt>If <code title="dom-context-2d-textAlign">textAlign</code> is
- <code title="">start</code> and <var title="">direction</var> is
+ <code title="dom-concept-2d-textAlign-start">start</code> and <var title="">direction</var> is
'ltr'</dt>
<dt>If <code title="dom-context-2d-textAlign">textAlign</code> is
- <code title="">end</code> and <var title="">direction</var> is
+ <code title="dom-concept-2d-textAlign-end">end</code> and <var title="">direction</var> is
'rtl'</dt>
<dd>Let the <var title="">anchor point</var>'s horizontal
@@ -44098,14 +44707,14 @@
<dt>If <code title="dom-context-2d-textAlign">textAlign</code> is
- <code title="">right</code></dt>
+ <code title="dom-concept-2d-textAlign-right">right</code></dt>
<dt>If <code title="dom-context-2d-textAlign">textAlign</code> is
- <code title="">end</code> and <var title="">direction</var> is
+ <code title="dom-concept-2d-textAlign-end">end</code> and <var title="">direction</var> is
'ltr'</dt>
<dt>If <code title="dom-context-2d-textAlign">textAlign</code> is
- <code title="">start</code> and <var title="">direction</var> is
+ <code title="dom-concept-2d-textAlign-start">start</code> and <var title="">direction</var> is
'rtl'</dt>
<dd>Let the <var title="">anchor point</var>'s horizontal
@@ -44114,7 +44723,7 @@
<dt>If <code title="dom-context-2d-textAlign">textAlign</code> is
- <code title="">center</code></dt>
+ <code title="dom-concept-2d-textAlign-center">center</code></dt>
<dd>Let the <var title="">anchor point</var>'s horizontal
position be half way between the left and right edges of the
@@ -44195,9 +44804,8 @@
</li>
- <li><p>Return <var title="">result</var>, and, for callers that
- need it, <var title="">physical alignment</var> as the alignment
- value.</p></li>
+ <li><p>Return <var title="">result</var>, <var title="">physical alignment</var>, and the inline
+ box.</p></li>
</ol>
@@ -45255,7 +45863,6 @@
</div>
-
<h6><dfn title="dom-context-2d-transformation">Transformations</dfn></h6>
<p>Each <code>CanvasRenderingContext2D</code> object has a
@@ -45452,7 +46059,95 @@
+ <h6>Image sources for 2D rendering contexts</h6>
+ <p>Several methods in the <code>CanvasRenderingContext2D</code> API take the union type
+ <code>CanvasImageSource</code> as an argument.</p>
+
+ <p>This union type allows objects implementing any of the following interfaces to be used as image
+ sources:</p>
+
+ <ul>
+
+ <li><code>HTMLImageElement</code> (<code>img</code> elements)</li>
+
+ <li><code>HTMLVideoElement</code> (<code>video</code> elements)</li>
+
+ <li><code>HTMLCanvasElement</code> (<code>canvas</code> elements)</li>
+
+ <li><code>CanvasRenderingContext2D</code></li>
+
+ <li><code>BitmapImage</code></li>
+
+ <!-- v3: supporting ImageData object might make sense (when resizing as well as filtering) - ack Charles Pritchard -->
+
+ </ul>
+
+ <p>When a user agent is required to <dfn>check the usability of the <var title="">image</var>
+ argument</dfn>, where <var title="">image</var> is a <code>CanvasImageSource</code> object, the
+ user agent must run these steps, which return either <i>good</i>, <i>bad</i>, or
+ <i>aborted</i>:</p>
+
+ <ol>
+
+ <li><p>If the <var title="">image</var> argument is an <code>HTMLImageElement</code> object that
+ is not <span title="img-good">fully decodable</span>, or if the <var title="">image</var>
+ argument is an <code>HTMLVideoElement</code> object whose <code
+ title="dom-media-readyState">readyState</code> attribute is either <code
+ title="dom-media-HAVE_NOTHING">HAVE_NOTHING</code> or <code
+ title="dom-media-HAVE_METADATA">HAVE_METADATA</code>, then return <i>bad</i> and abort these
+ steps.</p></li>
+
+ <li><p>If the <var title="">image</var> argument is an <code>HTMLCanvasElement</code> object with
+ either a horizontal dimension or a vertical dimension equal to zero, then the implementation
+ throw an <code>InvalidStateError</code> exception and return <i>aborted</i>.</p>
+
+ </ol>
+
+ <p>When a <code>CanvasImageSource</code> object represents an <code>HTMLImageElement</code>, the
+ element's image must be used as the source image.</p>
+
+ <p>Specifically, when a <code>CanvasImageSource</code> object represents an animated image in an
+ <code>HTMLImageElement</code>, the user agent must use the poster frame of the animation, or, if
+ there is no poster frame, the first frame of the animation, when rendering the image for
+ <code>CanvasRenderingContext2D</code> APIs.</p>
+
+ <p>When a <code>CanvasImageSource</code> object represents an <code>HTMLVideoElement</code>, then
+ the frame at the <span>current playback position</span> when the method with the argument is
+ invoked must be used as the source image when rendering the image for
+ <code>CanvasRenderingContext2D</code> APIs, and the source image's dimensions must be the <span
+ title="concept-video-intrinsic-width">intrinsic width</span> and <span
+ title="concept-video-intrinsic-height">intrinsic height</span> of the <span>media resource</span>
+ (i.e. after any aspect-ratio correction has been applied).</p>
+
+ <p>When a <code>CanvasImageSource</code> object represents an <code>HTMLCanvasElement</code>, the
+ element's bitmap must be used as the source image.</p>
+
+ <p>When a <code>CanvasImageSource</code> object represents a <code>CanvasRenderingContext2D</code>, the
+ object's <span>scratch bitmap</span> must be used as the source image.</p>
+
+ <p>When a <code>CanvasImageSource</code> object represents an element that is <span>being
+ rendered</span> 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. <code title="attr-dim-width">width</code> and
+ <code title="attr-dim-height">height</code> attributes on the source element have no effect on how
+ the object is interpreted when rendering the image for <code>CanvasRenderingContext2D</code>
+ APIs).</p>
+
+ <p>When a <code>CanvasImageSource</code> object represents a <code>BitmapImage</code>, the
+ object's bitmap image data must be used as the source image.</p>
+
+<!--ADD-TOPIC:Security-->
+ <p><dfn>The <var title="">image argument</var> is not origin-clean</dfn> if it is an
+ <code>HTMLImageElement</code> or <code>HTMLVideoElement</code> whose <span>origin</span> is not
+ the <span title="same origin">same</span> as the <span>entry script</span>'s <span>origin</span>,
+ or if it is an <code>HTMLCanvasElement</code> whose bitmap's <span
+ title="concept-canvas-origin-clean">origin-clean</span> flag is false, or if it is a
+ <code>CanvasRenderingContext2D</code> object whose <span>scratch bitmap</span>'s <span
+ title="concept-canvas-origin-clean">origin-clean</span> flag is false.</p>
+<!--REMOVE-TOPIC:Security-->
+
+
+
<h6>Fill and stroke styles</h6>
<dl class="domintro">
@@ -45524,16 +46219,20 @@
attribute represents the color or style to use for the lines around
the shapes.</p>
- <p>Both attributes can be either strings,
- <code>CanvasGradient</code>s, or <code>CanvasPattern</code>s. On
- setting, strings must be <span title="parsed as a CSS <color>
- value">parsed as CSS <color> values</span> and the color
- assigned, and <code>CanvasGradient</code> and
- <code>CanvasPattern</code> objects must be assigned themselves. <a
- href="#refsCSSCOLOR">[CSSCOLOR]</a> If the value is a string but
- cannot be <span>parsed as a CSS <color> value</span>, then it
- must be ignored, and the attribute must retain its previous
- value.</p>
+ <p>Both attributes can be either strings, <code>CanvasGradient</code>s, or
+ <code>CanvasPattern</code>s. On setting, strings must be <span title="parsed as a CSS
+ <color> value">parsed as CSS <color> values</span> and the color assigned, and
+ <code>CanvasGradient</code> and <code>CanvasPattern</code> objects must be assigned themselves. <a
+ href="#refsCSSCOLOR">[CSSCOLOR]</a> If the value is a string but cannot be <span>parsed as a CSS
+ <color> value</span>, then it must be ignored, and the attribute must retain its previous
+ value.
+<!--ADD-TOPIC:Security-->
+ If the new value is a <code>CanvasPattern</code> object that is marked as <span
+ title="concept-canvas-pattern-not-origin-clean">not origin-clean</span>, then the <span>scratch
+ bitmap</span>'s <span title="concept-canvas-origin-clean">origin-clean</span> flag must be set to
+ false.
+<!--REMOVE-TOPIC:Security-->
+ </p>
<p>When set to a <code>CanvasPattern</code> or
<code>CanvasGradient</code> object, the assignment is
@@ -45573,9 +46272,8 @@
must initially have the string value <code
title="">#000000</code>.</p>
- <p>When the value is a color, it must not be affected by the
- transformation matrix when used to draw on the canvas.</p> <!-- so
- singular matrices don't affect solid color fillStyles -->
+ <p>When the value is a color, it must not be affected by the transformation matrix when used to
+ draw on bitmaps.</p> <!-- so singular matrices don't affect solid color fillStyles -->
</div>
@@ -45749,7 +46447,7 @@
title="">ω</var>)</span>, <span title="">y(<var
title="">ω</var>)</span>), with the color at <var
title="">ω</var>, but only painting on the parts of the
- canvas that have not yet been painted on by earlier circles in this
+ bitmap that have not yet been painted on by earlier circles in this
step for this rendering of the gradient.</p></li>
</ol>
@@ -45815,58 +46513,52 @@
<div class="impl">
<p>To create objects of this type, the <dfn
- title="dom-context-2d-createPattern"><code>createPattern(<var
- title="">image</var>, <var title="">repetition</var>)</code></dfn>
- method is used. The first argument gives the image to use as the
- pattern (either an <code>HTMLImageElement</code>,
- <code>HTMLCanvasElement</code>, or <code>HTMLVideoElement</code>
- object). Modifying this image after calling the <code
- title="dom-context-2d-createPattern">createPattern()</code> method
- must not affect the pattern. The second argument must be a string
- with one of the following values: <code title="">repeat</code>,
- <code title="">repeat-x</code>, <code title="">repeat-y</code>,
- <code title="">no-repeat</code>. If the empty string is specified,
- <code title="">repeat</code> must be assumed. If an unrecognized value
- is given, then the user agent must throw a <code>SyntaxError</code>
- exception. User agents must recognize the four values described above
- exactly (e.g. they must not do case folding). Except as specified
- below, the method must return a <code>CanvasPattern</code> object
- suitably initialized.</p>
+ title="dom-context-2d-createPattern"><code>createPattern(<var title="">image</var>, <var
+ title="">repetition</var>)</code></dfn> method is used. When the method is invoked, the user agent
+ must run the following steps:</p>
- <p>The <var title="">image</var> argument is an instance of either
- <code>HTMLImageElement</code>, <code>HTMLCanvasElement</code>, or
- <code>HTMLVideoElement</code>.</p> <!-- drawImage() has an equivalent
- paragraph -->
+ <ol>
- <p>If the <var title="">image</var> argument is an
- <code>HTMLImageElement</code> object that is not <span
- title="img-good">fully decodable</span>, or if the <var
- title="">image</var> argument is an <code>HTMLVideoElement</code>
- object whose <code title="dom-media-readyState">readyState</code>
- attribute is either <code
- title="dom-media-HAVE_NOTHING">HAVE_NOTHING</code> or <code
- title="dom-media-HAVE_METADATA">HAVE_METADATA</code>, then the
- implementation must return null.</p> <!-- drawImage() has an
- equivalent paragraph -->
+ <li><p>Let <var title="">image</var> be the first argument and <var title="">repetition</var> be
+ the second argument.</p></li>
- <p>If the <var title="">image</var> argument is an
- <code>HTMLCanvasElement</code> object with either a horizontal
- dimension or a vertical dimension equal to zero, then the
- implementation must throw an <code>InvalidStateError</code>
- exception.</p>
- <!-- drawImage() has an equivalent paragraph -->
+ <li><p><span>Check the usability of the <var title="">image</var> argument</span>. If this
+ returns <i>aborted</i>, then an exception has been thrown and the method doesn't return anything;
+ abort these steps. If it returns <i>bad</i>, then return null and abort these steps. Otherwise it
+ returns <i>good</i>; continue with these steps.</p></li>
- <p>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 transform.</p>
+ <li><p>If <var title="">repetition</var> is the empty string, let it be "<code
+ title="">repeat</code>".</p>
- <p>When the <dfn
- title="dom-canvaspattern-setTransform"><code>setTransform()</code></dfn>
- method is invoked on the pattern, the user agent must replace the
- pattern's transformation matrix with the one described by the
- <code>SVGMatrix</code> object provided as an argument to the
- method.</p>
+ <li><p>If <var title="">repetition</var> is not a <span>case-sensitive</span> match for one of
+ "<code title="">repeat</code>", "<code title="">repeat-x</code>", "<code
+ title="">repeat-y</code>", or "<code title="">no-repeat</code>", throw a <code>SyntaxError</code>
+ exception and abort these steps.</p></li>
+ <li><p>Create a new <code>CanvasPattern</code> object with the image <var title="">image</var>
+ and the repetition behavior given by <var title="">repetition</var>.</p></li>
+
+<!--ADD-TOPIC:Security-->
+ <li><p>If <span>the <var title="">image argument</var> is not origin-clean</span>, then mark the
+ <code>CanvasPattern</code> object as <dfn title="concept-canvas-pattern-not-origin-clean">not
+ origin-clean</dfn>.</p></li>
+<!--REMOVE-TOPIC:Security-->
+
+ <li><p>Return the <code>CanvasPattern</code> object.</p></li>
+
+ </ol>
+
+ <p>Modifying the <var title="">image</var> used when creating a <code>CanvasPattern</code> object
+ after calling the <code title="dom-context-2d-createPattern">createPattern()</code> method must
+ not affect the pattern(s) rendered by the <code>CanvasPattern</code> object.</p>
+
+ <p>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 transform.</p>
+
+ <p>When the <dfn title="dom-canvaspattern-setTransform"><code>setTransform()</code></dfn> method
+ is invoked on the pattern, the user agent must replace the pattern's transformation matrix with
+ the one described by the <code>SVGMatrix</code> object provided as an argument to the method.</p>
+
<p>When a pattern is to be rendered within an area, the user agent
must run the following steps to determine what is rendered:</p>
@@ -45876,30 +46568,23 @@
<li>
- <p>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, then place
- repeated copies of this image horizontally to the left and right,
- if the <code>repeat-x</code> string was specified, or vertically
- up and down, if the <code>repeat-y</code> string was specified, or
- in all four directions all over the bitmap, if the
- <code>repeat</code> string was specified.</p>
+ <p>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, then
+ place repeated copies of this image horizontally to the left and right, if the repetition
+ behavior is "<code title="">repeat-x</code>", or vertically up and down, if the repetition
+ behavior is "<code title="">repeat-y</code>", or in all four directions all over the bitmap, if
+ the repetition behavior is "<code title="">repeat</code>".</p>
- <p>If the original image data is a bitmap image, the value painted
- at a point in the area of the repetitions is computed by filtering
- the original image data. If the <code
- title="dom-context-2d-imageSmoothingEnabled">imageSmoothingEnabled</code>
- attribute is set to true, then the user agent may use any
- filtering algorithm (for example bilinear interpolation or
+ <p>If the original image data is a bitmap image, the value painted at a point in the area of the
+ repetitions is computed by filtering the original image data. If the <code
+ title="dom-context-2d-imageSmoothingEnabled">imageSmoothingEnabled</code> attribute is set to
+ true, then the user agent may use any filtering algorithm (for example bilinear interpolation or
nearest-neighbor). If the <code
- title="dom-context-2d-imageSmoothingEnabled">imageSmoothingEnabled</code>
- attribute is set to false, the image must be rendered using
- nearest-neighbor interpolation. 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 <var
- title="">repetition</var>.)
+ title="dom-context-2d-imageSmoothingEnabled">imageSmoothingEnabled</code> attribute is set to
+ false, the image must be rendered using nearest-neighbor interpolation. 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.)</p>
<!-- drawImage() has similar paragraphs with different rules -->
</li>
@@ -45919,28 +46604,6 @@
</ol>
- <p>When the <code
- title="dom-context-2d-createPattern">createPattern()</code> method
- is passed an animated image as its <var title="">image</var>
- argument, the user agent must use the poster frame of the animation,
- or, if there is no poster frame, the first frame of the
- animation.</p>
- <!-- drawImage() has an equivalent paragraph -->
-
- <p>When the <var title="">image</var> argument is an
- <code>HTMLVideoElement</code>, then the frame at the <span>current
- playback position</span> must be used as the source image, and the
- source image's dimensions must be the <span
- title="concept-video-intrinsic-width">intrinsic width</span> and
- <span title="concept-video-intrinsic-height">intrinsic height</span>
- of the <span>media resource</span> (i.e. after any aspect-ratio
- correction has been applied).</p>
- <!-- drawImage() has an equivalent paragraph -->
-
- </div>
-
- <div class="impl">
-
<hr>
<p>If a radial gradient or repeated pattern is used when the
@@ -45955,7 +46618,7 @@
- <h6>Drawing rectangles to the canvas</h6>
+ <h6>Drawing rectangles to the bitmap</h6>
<p>There are three methods that immediately draw rectangles to the
bitmap. They each take four arguments; the first two give the <var
@@ -45994,7 +46657,7 @@
<dd>
- <p>Clears all pixels on the canvas in the given rectangle to transparent black.</p>
+ <p>Clears all pixels on the bitmap in the given rectangle to transparent black.</p>
</dd>
@@ -46002,7 +46665,7 @@
<dd>
- <p>Paints the given rectangle onto the canvas, using the current fill style.</p>
+ <p>Paints the given rectangle onto the bitmap, using the current fill style.</p>
</dd>
@@ -46010,7 +46673,7 @@
<dd>
- <p>Paints the box that outlines the given rectangle onto the canvas, using the current stroke style.</p>
+ <p>Paints the box that outlines the given rectangle onto the bitmap, using the current stroke style.</p>
</dd>
@@ -46024,15 +46687,15 @@
<ol>
- <li><p>Let <var title="">pixels</var> be the set of pixels in the
- specified rectangle that also intersect the current <span>clipping
- region</span>.</p></li>
+ <li><p>Let <var title="">pixels</var> be the set of pixels in
+ the specified rectangle that also intersect the current
+ <span>clipping region</span>.</p></li>
<li><p>Clear the pixels in <var title="">pixels</var> to a fully
transparent black, erasing any previous image.</p></li>
<li><p><span>Clear regions that cover the pixels</span> in <var
- title="">pixels</var> in the <code>canvas</code> element.</p></li>
+ title="">pixels</var> on the <span>scratch bitmap</span>.</p></li>
</ol>
@@ -46084,7 +46747,7 @@
- <h6>Drawing text to the canvas</h6>
+ <h6>Drawing text to the bitmap</h6>
<dl class="domintro">
@@ -46130,8 +46793,8 @@
<div class="impl">
- <p>The <code>CanvasRenderingContext2D</code> interface provides the
- following methods for rendering text directly to the canvas.</p>
+ <p>The <code>CanvasRenderingContext2D</code> interface provides the following methods for
+ rendering text.</p>
<p>The <dfn
title="dom-context-2d-fillText"><code>fillText()</code></dfn> and
@@ -46191,6 +46854,16 @@
</li>
+<!--ADD-TOPIC:Security-->
+ <li><p>If the <span>text preparation algorithm</span> used a font that has an <span>origin</span>
+ that is not the <span title="same origin">same</span> as the <span>entry script</span>'s
+ <span>origin</span> (even if "using a font" means just checking if that font has a particular
+ glyph in it before falling back to another font), then set the <span>scratch bitmap</span>'s
+ <span title="concept-canvas-origin-clean">origin-clean</span> flag to false.</p></li> <!--
+ because fonts could consider sensitive material, I guess; and because that sensitivity could
+ extend to whether or not a particular glyph is in the font in the first place. -->
+<!--REMOVE-TOPIC:Security-->
+
</ol>
<!--v6DVT - this is commented out until CSS can get its act together
@@ -46200,7 +46873,7 @@
WHEN EDITING THIS, FIX THE PARTS MARKED "XXX" BELOW
ALSO NOTE THAT THIS PROBABLY NEEDS ENTIRELY REVISITING NOW THAT WE
-HAVE REJIGGED HOW TEXT WORKS IN v5
+HAVE REJIGGED HOW TEXT WORKS IN v5 (e.g. remember security)
<p>The <dfn
title="dom-context-2d-fillVerticalText"><code>fillVerticalText()</code></dfn>
@@ -46348,20 +47021,11 @@
v6DVT (also check for '- -' bits in the part above) -->
- <p>The <dfn
- title="dom-context-2d-measureText"><code>measureText()</code></dfn>
- method takes one argument, <var title="">text</var>. When the method
- is invoked, the user agent must replace all the <span title="space
- character">space characters</span> in <var title="">text</var> with
- U+0020 SPACE characters, and then must form a hypothetical
- infinitely-wide CSS line box containing a single inline box
- containing the text <var title="">text</var>, with all the
- properties at their initial values except the 'white-space' property
- of the inline element set to 'pre' and the 'font' property of the
- inline element set to the current font of the context as given by
- the <code title="dom-context-2d-font">font</code> attribute, and
- must then create a new <code>TextMetrics</code> object with its
- attributes set as described in the following list.
+ <p>The <dfn title="dom-context-2d-measureText"><code>measureText()</code></dfn> method takes one
+ argument, <var title="">text</var>. When the method is invoked, the user agent must run the
+ <span>text preparation algorithm</span>, passing it <var title="">text</var> and the
+ <code>CanvasRenderingContext2D</code> object, and then using the returned inline box must create a
+ new <code>TextMetrics</code> object with its attributes set as described in the following list.
<!--ADD-TOPIC:Security-->
If doing these measurements requires using a font that has an
<span>origin</span> that is not the <span title="same
@@ -46677,11 +47341,26 @@
<li>
- <p>Optionally, <a href="#inform">inform the user</a> that the
- focus is at the location given by the intended path. User agents
- may wait until the next time the <span>event loop</span> reaches
- its "update the rendering" step to optionally inform the user.</p>
+ <p>Optionally, run the appropriate step from the following list:</p>
+ <dl>
+
+ <dt>If the <code>CanvasRenderingContext2D</code> object's <span
+ title="concept-canvas-context-bitmap-mode">context bitmap mode</span> is <span
+ title="concept-canvas-fixed">fixed</span></dt>
+
+ <dd><p><a href="#inform">Inform the user</a> that the focus is at the location given by the
+ intended path. User agents may wait until the next time the <span>event loop</span> reaches its
+ "update the rendering" step to optionally inform the user.</p></dd>
+
+ <dt>Otherwise</dt>
+
+ <dd><p>Add instructions to the <span>scratch bitmap</span>'s <span>list of pending interface
+ actions</span> that <a href="#inform">inform the user</a> that the focus is at the location of
+ the bitmap given by the intended path.</p></dd>
+
+ </dl>
+
</li>
</ol>
@@ -46719,20 +47398,38 @@
<li>
- <p>Optionally, <a href="#inform">inform the user</a> that the
- focus is at the location given by the intended path. User agents
- may wait until the next time the <span>event loop</span> reaches
- its "update the rendering" step to optionally inform the user.</p>
+ <p>Optionally, run the appropriate step from the following list:</p>
+ <dl>
+
+ <dt>If the <code>CanvasRenderingContext2D</code> object's <span
+ title="concept-canvas-context-bitmap-mode">context bitmap mode</span> is <span
+ title="concept-canvas-fixed">fixed</span></dt>
+
+ <dd><p><a href="#inform">Inform the user</a> that the focus is at the location given by the
+ intended path. The user agent may wait until the next time the <span>event loop</span> reaches
+ its "update the rendering" step to optionally inform the user.</p></dd>
+
+ <dt>Otherwise</dt>
+
+ <dd><p>Add instructions to the <span>scratch bitmap</span>'s <span>list of pending interface
+ actions</span> that <a href="#inform">inform the user</a> that the focus is at the location of
+ the bitmap given by the intended path.</p></dd>
+
+ </dl>
+
</li>
<li><p>Return <var title="">result</var>.</p></li>
</ol>
- <p>The <dfn
- title="dom-context-2d-scrollPathIntoView"><code>scrollPathIntoView()</code></dfn>
- method, when invoked, must run the following steps:</p>
+ <p>The <dfn title="dom-context-2d-scrollPathIntoView"><code>scrollPathIntoView()</code></dfn>
+ method, when invoked, if the <code>CanvasRenderingContext2D</code> object's <span
+ title="concept-canvas-context-bitmap-mode">context bitmap mode</span> is <span
+ title="concept-canvas-fixed">fixed</span>, must run the following steps; and otherwise, must add
+ instructions to the <span>scratch bitmap</span>'s <span>list of pending interface actions</span>
+ that run the following steps:</p>
<ol>
@@ -46748,11 +47445,13 @@
title="">notional child</var> into view</span> with the <var
title="">align to top flag</var> set.</p>
- <li><p>Optionally, <a href="#inform">inform the user</a> that the
- caret and/or selection cover <var title="">the specified
- rectangle</var> of the canvas. User agents may wait until the next
- time the <span>event loop</span> reaches its "update the rendering"
- step to optionally inform the user.</p></li>
+ <li><p>Optionally, <a href="#inform">inform the user</a> that the caret and/or selection cover
+ <var title="">the specified rectangle</var> of the canvas. If the
+ <code>CanvasRenderingContext2D</code> object's <span
+ title="concept-canvas-context-bitmap-mode">context bitmap mode</span> was <span
+ title="concept-canvas-fixed">fixed</span> when the method was invoked, the user agent may wait
+ until the next time the <span>event loop</span> reaches its "update the rendering" step to
+ optionally inform the user.</p></li>
</ol>
@@ -46896,12 +47595,13 @@
- <h6>Drawing images to the canvas</h6>
+ <h6>Drawing images</h6>
- <p>To draw images onto the canvas, the <dfn
- title="dom-context-2d-drawImage"><code>drawImage</code></dfn> method
+ <p>To draw images, the <dfn title="dom-context-2d-drawImage"><code>drawImage</code></dfn> method
can be used.</p>
+ <div class="impl">
+
<p>This method can be invoked with three different sets of arguments:</p>
<ul class="brief">
@@ -46910,13 +47610,8 @@
<li><code title="">drawImage(<var title="">image</var>, <var title="">sx</var>, <var title="">sy</var>, <var title="">sw</var>, <var title="">sh</var>, <var title="">dx</var>, <var title="">dy</var>, <var title="">dw</var>, <var title="">dh</var>)</code>
</ul>
- <!-- v3: drawImage() of an ImageData object might make sense (when resizing as well as filtering) - ack Charles Pritchard -->
+ </div>
- <p>Each of those three can take either an
- <code>HTMLImageElement</code>, an <code>HTMLCanvasElement</code>, or
- an <code>HTMLVideoElement</code> for the <var title="">image</var>
- argument.</p>
-
<dl class="domintro">
<dt><var title="">context</var> . <code title="dom-context-2d-drawImage">drawImage</code>(<var title="">image</var>, <var title="">dx</var>, <var title="">dy</var>)</dt>
@@ -46944,170 +47639,125 @@
<div class="impl">
- <p>If not specified, the <var title="">dw</var> and <var
- title="">dh</var> arguments must default to the values of <var
- title="">sw</var> and <var title="">sh</var>, interpreted such that
- one CSS pixel in the image is treated as one unit in the canvas
- coordinate space. If the <var title="">sx</var>, <var
- title="">sy</var>, <var title="">sw</var>, and <var
- title="">sh</var> arguments are omitted, they must default to 0, 0,
- the image's intrinsic width in image pixels, and the image's
- intrinsic height in image pixels, respectively. If the image has no
- intrinsic dimensions, the <i>concrete object size</i> must be used
- instead, as determined using the CSS "<a
- href="http://dev.w3.org/csswg/css3-images/#default-sizing">Concrete
- Object Size Resolution</a>" algorithm, with the <i>specified
- size</i> having neither a definite width nor height, nor any
- additional contraints, the object's intrinsic properties being those
- of the <var title="">image</var> argument, and the <i>default object
- size</i> being the size of the <code>canvas</code> element. <a
- href="#refsCSSIMAGES">[CSSIMAGES]</a></p>
+ <p>When the <code title="dom-context-2d-drawImage">drawImage()</code> method is invoked, the user
+ agent must run the following steps:</p>
- <p>The <var title="">image</var> argument is an instance of either
- <code>HTMLImageElement</code>, <code>HTMLCanvasElement</code>, or
- <code>HTMLVideoElement</code>.</p> <!-- createPattern() has an
- equivalent paragraph -->
+ <ol>
- <p>If the <var title="">image</var> argument is an
- <code>HTMLImageElement</code> object that is not <span
- title="img-good">fully decodable</span>, or if the <var
- title="">image</var> argument is an <code>HTMLVideoElement</code>
- object whose <code title="dom-media-readyState">readyState</code>
- attribute is either <code
- title="dom-media-HAVE_NOTHING">HAVE_NOTHING</code> or <code
- title="dom-media-HAVE_METADATA">HAVE_METADATA</code>, then the
- implementation must return without drawing anything.</p> <!--
- createPattern() has an equivalent paragraph -->
+ <li><p><span>Check the usability of the <var title="">image</var> argument</span>. If this
+ returns <i>aborted</i>, then an exception has been thrown and the method doesn't return anything;
+ abort these steps. If it returns <i>bad</i>, then abort these steps without drawing anything.
+ Otherwise it returns <i>good</i>; continue with these steps.</p></li>
- <p>If the <var title="">image</var> argument is an
- <code>HTMLCanvasElement</code> object with either a horizontal
- dimension or a vertical dimension equal to zero, then the
- implementation must throw an <code>InvalidStateError</code>
- exception.</p>
- <!-- createPattern() has an equivalent paragraph -->
+ <li>
- <p>The source rectangle is the rectangle whose corners are the four
- points (<var title="">sx</var>, <var title="">sy</var>), (<span title=""><var
- title="">sx</var>+<var title="">sw</var></span>, <var
- title="">sy</var>), (<span title=""><var title="">sx</var>+<var
- title="">sw</var></span>, <span title=""><var title="">sy</var>+<var
- title="">sh</var></span>), (<var title="">sx</var>, <span title=""><var
- title="">sy</var>+<var title="">sh</var></span>).</p>
+ <p>Establish the source and destination rectangles as follows:</p>
- <p>If one of the <var title="">sw</var> or <var title="">sh</var>
- arguments is zero, the implementation must throw an
- <code>IndexSizeError</code> exception.</p>
+ <p>If not specified, the <var title="">dw</var> and <var title="">dh</var> arguments must
+ default to the values of <var title="">sw</var> and <var title="">sh</var>, interpreted such
+ that one CSS pixel in the image is treated as one unit in the <span>scratch bitmap</span>'s
+ coordinate space. If the <var title="">sx</var>, <var title="">sy</var>, <var title="">sw</var>,
+ and <var title="">sh</var> arguments are omitted, they must default to 0, 0, the image's
+ intrinsic width in image pixels, and the image's intrinsic height in image pixels, respectively.
+ If the image has no intrinsic dimensions, the <i>concrete object size</i> must be used instead,
+ as determined using the CSS "<a
+ href="http://dev.w3.org/csswg/css3-images/#default-sizing">Concrete Object Size Resolution</a>"
+ algorithm, with the <i>specified size</i> having neither a definite width nor height, nor any
+ additional contraints, the object's intrinsic properties being those of the <var
+ title="">image</var> argument, and the <i>default object size</i> being the size of the
+ <span>scratch bitmap</span>. <a href="#refsCSSIMAGES">[CSSIMAGES]</a></p>
- <p>The destination rectangle is the rectangle whose corners are the
- four points (<var title="">dx</var>, <var title="">dy</var>),
- (<span title=""><var title="">dx</var>+<var title="">dw</var></span>, <var
- title="">dy</var>), (<span title=""><var title="">dx</var>+<var
- title="">dw</var></span>, <span title=""><var title="">dy</var>+<var
- title="">dh</var></span>), (<var title="">dx</var>, <span title=""><var
- title="">dy</var>+<var title="">dh</var></span>).</p>
+ <p>The source rectangle is the rectangle whose corners are the four points (<var
+ title="">sx</var>, <var title="">sy</var>), (<span title=""><var title="">sx</var>+<var
+ title="">sw</var></span>, <var title="">sy</var>), (<span title=""><var title="">sx</var>+<var
+ title="">sw</var></span>, <span title=""><var title="">sy</var>+<var title="">sh</var></span>),
+ (<var title="">sx</var>, <span title=""><var title="">sy</var>+<var
+ title="">sh</var></span>).</p>
- <p>When the source rectangle is outside the source image, it must be
- clipped to the source image, and the destination rectangle must be
- clipped in the same proportion.</p>
+ <p>The destination rectangle is the rectangle whose corners are the four points (<var
+ title="">dx</var>, <var title="">dy</var>), (<span title=""><var title="">dx</var>+<var
+ title="">dw</var></span>, <var title="">dy</var>), (<span title=""><var title="">dx</var>+<var
+ title="">dw</var></span>, <span title=""><var title="">dy</var>+<var title="">dh</var></span>),
+ (<var title="">dx</var>, <span title=""><var title="">dy</var>+<var
+ title="">dh</var></span>).</p>
- <p>When <code title="dom-context-2d-drawImage">drawImage()</code> is
- invoked, the region of the image specified by the source rectangle
- must be painted on the region of the canvas specified by the
- destination rectangle, after applying the <span
- title="dom-context-2d-transformation">current transformation
- matrix</span> to the points of the destination rectangle.</p>
+ <p>When the source rectangle is outside the source image, it must be clipped to the source
+ image, and the destination rectangle must be clipped in the same proportion.</p>
- <p>The original image data of the source image must be used, not the
- image as it is rendered (e.g. <code
- title="attr-dim-width">width</code> and <code
- title="attr-dim-height">height</code> attributes on the source
- element have no effect). The image data must be processed in the
- original direction, even if the dimensions given are negative. <!--
- remove that last sentence if it causes confusion. Someone once
- suggested that 5,5,-2,-2 was different than 3,3,2,2; this is trying
- to clarify that this is no the case. --></p>
+ </li>
- <p>If the <code
- title="dom-context-2d-imageSmoothingEnabled">imageSmoothingEnabled</code>
- attribute is set to true, then the user agent should attempt to
- apply a smoothing algorithm to the image data when it is scaled.
- Otherwise, the image must be rendered using nearest-neighbor
- interpolation.</p>
+ <li><p>If one of the <var title="">sw</var> or <var title="">sh</var> arguments is zero, throw an
+ <code>IndexSizeError</code> exception and abort these steps.</p></li>
- <p class="note">This specification does not define the precise
- algorithm to use when scaling an image when the <code
- title="dom-context-2d-imageSmoothingEnabled">imageSmoothingEnabled</code>
- attribute is set to true.</p>
+ <li>
- <p class="note">When a canvas is drawn onto itself, the <span>drawing
- model</span> requires the source to be copied before the image is drawn
- back onto the canvas, so it is possible to copy parts of a canvas
- onto overlapping parts of itself.</p>
+ <p>Paint the region of the <var title="">image</var> argument specified by the source rectangle
+ on the region of the rendering context's <span>scratch bitmap</span> specified by the
+ destination rectangle, after applying the <span title="dom-context-2d-transformation">current
+ transformation matrix</span> to the points of the destination rectangle.</p>
- <p>If the original image data is a bitmap image, 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.)</p>
- <!-- see CORE-32111 and:
- http://krijnhoetmer.nl/irc-logs/whatwg/20100818#l-737
- http://www.w3.org/Bugs/Public/show_bug.cgi?id=10799#c11
- -->
- <!-- createPattern() has a similar paragraph with different rules -->
+ <p>The image data must be processed in the original direction, even if the dimensions given are
+ negative. <!-- note: that last sentence has several times been needed to correct people who
+ suggested that 5,5,-2,-2 was different than 3,3,2,2 --></p>
- <p>When the <code
- title="dom-context-2d-drawImage">drawImage()</code> method
- is passed an animated image as its <var title="">image</var>
- argument, the user agent must use the poster frame of the animation,
- or, if there is no poster frame, the first frame of the
- animation.</p>
- <!-- createPattern() has an equivalent paragraph -->
+ <p>If the <code title="dom-context-2d-imageSmoothingEnabled">imageSmoothingEnabled</code>
+ attribute is set to true, then the user agent should attempt to apply a smoothing algorithm to
+ the image data when it is scaled. Otherwise, the image must be rendered using nearest-neighbor
+ interpolation.</p>
- <p>When the <var title="">image</var> argument is an
- <code>HTMLVideoElement</code>, then the frame at the <span>current
- playback position</span> must be used as the source image, and the
- source image's dimensions must be the <span
- title="concept-video-intrinsic-width">intrinsic width</span> and
- <span title="concept-video-intrinsic-height">intrinsic height</span>
- of the <span>media resource</span> (i.e. after any aspect-ratio
- correction has been applied).</p>
- <!-- createPattern() has an equivalent paragraph -->
+ <p class="note">This specification does not define the precise algorithm to use when scaling an
+ image when the <code title="dom-context-2d-imageSmoothingEnabled">imageSmoothingEnabled</code>
+ attribute is set to true.</p>
- <p>Images are painted without affecting the current path, and are
- subject to <span title="shadows">shadow effects</span>, <span
- title="dom-context-2d-globalAlpha">global alpha</span>, the
- <span>clipping region</span>, and <span
- title="dom-context-2d-globalCompositeOperation">global composition
- operators</span>.</p>
+ <p class="note">When a <code>canvas</code> or <code>CanvasRenderingContext2D</code> object is
+ drawn onto itself, the <span>drawing model</span> requires the source to be copied before the
+ image is drawn, so it is possible to copy parts of a <code>canvas</code> or <span>scratch
+ bitmap</span> onto overlapping parts of itself.</p>
+ <p>If the original image data is a bitmap image, 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.)</p>
+ <!-- see CORE-32111 and:
+ http://krijnhoetmer.nl/irc-logs/whatwg/20100818#l-737
+ http://www.w3.org/Bugs/Public/show_bug.cgi?id=10799#c11
+ -->
+ <!-- createPattern() has a similar paragraph with different rules -->
+
+ <p>Images are painted without affecting the current path, and are subject to <span
+ title="shadows">shadow effects</span>, <span title="dom-context-2d-globalAlpha">global
+ alpha</span>, the <span>clipping region</span>, and <span
+ title="dom-context-2d-globalCompositeOperation">global composition operators</span>.</p>
+
+ </li>
+
+<!--ADD-TOPIC:Security-->
+ <li><p>If <span>the <var title="">image argument</var> is not origin-clean</span>, set the
+ <span>scratch bitmap</span>'s <span title="concept-canvas-origin-clean">origin-clean</span> flag
+ to false.</p></li>
+<!--REMOVE-TOPIC:Security-->
+
+ </ol>
+
</div>
<h6>Hit regions</h6>
- <p>Each <code>canvas</code> element whose <span>primary
- context</span> is a <code>CanvasRenderingContext2D</code> object
- must have a <dfn>hit region list</dfn> associated with its
+ <p>A <dfn>hit region list</dfn> is a list of <span title="hit region">hit regions</span> for a
bitmap.</p>
- <p>The <span>hit region list</span> is a list of <span title="hit
- region">hit regions</span>.</p>
+ <p>Each <dfn>hit region</dfn> consists of the following information:</p>
- <p>Each <dfn>hit region</dfn> consists of the following
- information:</p>
-
<ul>
- <li><p>A <dfn title="hit region's set of pixels">set of
- pixels</dfn> on the <code>canvas</code> element's bitmap for which
- this region is responsible.</p></li>
+ <li><p>A <dfn title="hit region's set of pixels">set of pixels</dfn> on the bitmap for which this
+ region is responsible.</p></li>
- <li><p>A <dfn title="hit region's bounding circumference">bounding
- circumference</dfn> on the <code>canvas</code> element's bitmap
- that surrounds the <span>hit region's set of pixels</span> as they
- stood when it was created.</p></li>
+ <li><p>A <dfn title="hit region's bounding circumference">bounding circumference</dfn> on the
+ bitmap that surrounds the <span>hit region's set of pixels</span> as they stood when it was
+ created.</p></li>
<li><p>Optionally, a non-empty string representing an <dfn
title="hit region's ID">ID</dfn> for distinguishing the region
@@ -47134,11 +47784,11 @@
control">control</span>, or an <span title="hit region's unbacked
region description">unbacked region description</span>.</p>
- <p>A <dfn title="hit region's control">control</dfn> is just a
- reference to an <code>Element</code> node, to which, in certain
- conditions, the user agent will route events, and from which the
- user agent will determine the state of the hit region for the
- purposes of accessibility tools.</p>
+ <p>A <dfn title="hit region's control">control</dfn> is just a reference to an
+ <code>Element</code> node, to which, in certain conditions, the user agent will route events,
+ and from which the user agent will determine the state of the hit region for the purposes of
+ accessibility tools. (The control is ignored when it is not a descendant of the
+ <code>canvas</code> element.)</p>
<p>An <dfn title="hit region's unbacked region
description">unbacked region description</dfn> consists of the
@@ -47166,8 +47816,7 @@
<dd>
- <p>Adds a hit region to the canvas bitmap. The argument is an
- object with the following members:</p>
+ <p>Adds a hit region to the bitmap. The argument is an object with the following members:</p>
<dl>
@@ -47234,14 +47883,14 @@
ID in the mouse events.</li>
<li>With a control, they can make routing events to DOM elements
- automatic, allowing e.g. clicks on a canvas to automatically
+ automatic, allowing e.g. clicks on a <code>canvas</code> to automatically
submit a form via a <code>button</code> element.</li>
<li>With a label, they can make it easier for users to explore a
- canvas without seeing it, e.g. by touch on a mobile device.</li>
+ <code>canvas</code> without seeing it, e.g. by touch on a mobile device.</li>
<li>With a cursor, they can make it easier for different regions
- of the canvas to have different cursors, with the user agent
+ of the <code>canvas</code> to have different cursors, with the user agent
automatically switching between them.</li>
</ul>
@@ -47276,11 +47925,9 @@
<span>hit region</span> for which <var title="">A</var> is an
<span>ancestor region</span>.</p>
- <p><dfn>The region identified by the ID</dfn> <var
- title="">ID</var> in a <code>canvas</code> element <var
- title="">ancestor</var> is the value returned by the following
- algorithm (which can return a <span>hit region</span> or
- nothing):</p>
+ <p><dfn>The region identified by the ID</dfn> <var title="">ID</var> in a bitmap <var
+ title="">bitmap</var> is the value returned by the following algorithm (which can return a
+ <span>hit region</span> or nothing):</p>
<ol>
@@ -47288,8 +47935,7 @@
these steps.</p></li>
<li><p>Let <var title="">list</var> be the <span>hit region
- list</span> associated with <var title="">ancestor</var>'s
- bitmap.</p></li>
+ list</span> associated with <var title="">bitmap</var>.</p></li>
<li><p>If there is a <span>hit region</span> in <var
title="">list</var> whose <span title="hit region's ID">ID</span>
@@ -47301,21 +47947,14 @@
</ol>
- <p><dfn>The region representing the control</dfn> <var
- title="">control</var> for a <code>canvas</code> element <var
- title="">ancestor</var> is the value returned by the following
- algorithm (which can return a <span>hit region</span> or
- nothing):</p>
+ <p><dfn>The region representing the control</dfn> <var title="">control</var> for a bitmap <var
+ title="">bitmap</var> is the value returned by the following algorithm (which can return a
+ <span>hit region</span> or nothing):</p>
<ol>
- <li><p>If <var title="">control</var> is not a descendant of <var
- title="">ancestor</var>, then return nothing and abort these
- steps.</p></li>
-
<li><p>Let <var title="">list</var> be the <span>hit region
- list</span> associated with <var title="">ancestor</var>'s
- bitmap.</p></li>
+ list</span> associated with <var title="">bitmap</var>.</p></li>
<li><p>If there is a <span>hit region</span> in <var
title="">list</var> whose <span title="hit region's
@@ -47368,22 +48007,19 @@
title="">region</var> be that <span>hit region's parent</span>,
and return to the step labeled <i>loop</i>.</p></li>
- <li><p>Otherwise, return the used value of the 'cursor' property
- for the <code>canvas</code> element. <a
- href="#refsCSSUI">[CSSUI]</a></p></li>
+ <li><p>Otherwise, return the used value of the 'cursor' property for the <code>canvas</code>
+ element, if any; if there isn't one, return 'auto'. <a href="#refsCSSUI">[CSSUI]</a></p></li>
</ol>
- <p><dfn>The region for a pixel</dfn> <var title="">pixel</var> on a
- <code>canvas</code> element <var title="">ancestor</var> is the
- value returned by the following algorithm (which can return a
+ <p><dfn>The region for a pixel</dfn> <var title="">pixel</var> on a bitmap <var
+ title="">bitmap</var> is the value returned by the following algorithm (which can return a
<span>hit region</span> or nothing):</p>
<ol>
- <li><p>Let <var title="">list</var> be the <span>hit region
- list</span> associated with <var title="">ancestor</var>'s
- bitmap.</p></li>
+ <li><p>Let <var title="">list</var> be the <span>hit region list</span> associated with <var
+ title="">bitmap</var>.</p></li>
<li><p>If there is a <span>hit region</span> in <var
title="">list</var> whose <span title="hit region's set of
@@ -47395,35 +48031,30 @@
</ol>
- <p>To <dfn>clear regions that cover the pixels</dfn> <var
- title="">pixels</var> on a <code>canvas</code> element <var
- title="">ancestor</var>, the user agent must run the following
- steps:</p>
+ <p>To <dfn>clear regions that cover the pixels</dfn> <var title="">pixels</var> on a bitmap <var
+ title="">bitmap</var>, the user agent must run the following steps:</p>
<ol>
- <li><p>Let <var title="">list</var> be the <span>hit region
- list</span> associated with <var title="">ancestor</var>'s
- bitmap.</p></li>
+ <li><p>Let <var title="">list</var> be the <span>hit region list</span> associated with <var
+ title="">bitmap</var>.</p></li>
<li><p>Remove all pixels in <var title="">pixels</var> from the
<span title="hit region's set of pixels">set of pixels</span> of
each <span>hit region</span> in <var title="">list</var>.</p></li>
<li><p><span>Garbage-collect the regions</span> of <var
- title="">ancestor</var>.</p></li>
+ title="">bitmap</var>.</p></li>
</ol>
- <p>To <dfn>garbage-collect the regions</dfn> of a
- <code>canvas</code> element <var title="">ancestor</var>, the user
+ <p>To <dfn>garbage-collect the regions</dfn> of a bitmap <var title="">bitmap</var>, the user
agent must run the following steps:</p>
<ol>
- <li><p>Let <var title="">list</var> be the <span>hit region
- list</span> associated with <var title="">ancestor</var>'s
- bitmap.</p></li>
+ <li><p>Let <var title="">list</var> be the <span>hit region list</span> associated with <var
+ title="">bitmap</var>.</p></li>
<li><p><i>Loop</i>: Let <var title="">victim</var> be the first
<span>hit region</span> in <var title="">list</var> to have an
@@ -47444,10 +48075,10 @@
</ol>
<p class="note">Adding a new region and calling <code
- title="dom-context-2d-clearRect">clearRect()</code> are the two ways
- this clearing algorithm can be invoked. Resizing the canvas also
- clears the <span>hit region list</span> (since it clears the canvas
- back to its initial state).</p>
+ title="dom-context-2d-clearRect">clearRect()</code> are the two ways this clearing algorithm can
+ be invoked. The <span>hit region list</span> itself is also reset when the rendering context is
+ reset, e.g. when a <code>CanvasRenderingContext2D</code> object is bound to or unbound from a
+ <code>canvas</code>, or when the dimensions of the bitmap are changed.</p>
<hr>
@@ -47494,7 +48125,7 @@
let <var title="">previous region for this ID</var> be <span>the
region identified by the ID</span> given by the <code
title="dom-HitRegionOptions-id">id</code> member's value in this
- <code>canvas</code> element, if any. If the <code
+ <span>scratch bitmap</span>, if any. If the <code
title="dom-HitRegionOptions-id">id</code> member is null or no such
region currently exists, let <var title="">previous region for this
ID</var> be null.</p></li>
@@ -47508,7 +48139,7 @@
null, then let <var title="">parent region</var> be <span>the
region identified by the ID</span> given by the <code
title="dom-HitRegionOptions-parent">parent</code> member's value in
- this <code>canvas</code> element, if any. If the <code
+ the <span>scratch bitmap</span>, if any. If the <code
title="dom-HitRegionOptions-parent">parent</code> member is null or
no such region currently exists, let <var title="">parent
region</var> be null.</p></li>
@@ -47714,7 +48345,7 @@
null, then let <var title="">previous region for the control</var>
be <span>the region representing the control</span> given by the
<code title="dom-HitRegionOptions-control">control</code> member's
- value for this <code>canvas</code> element, if any. If the <code
+ value for this <span>scratch bitmap</span>, if any. If the <code
title="dom-HitRegionOptions-control">control</code> member is null
or no such region currently exists, let <var title="">previous
region for the control</var> be null.</p></li>
@@ -47728,33 +48359,26 @@
its descendants, as we know that our parent isn't part of that
subtree. -->
- <li><p>If there is a <var title="">previous region with this
- control</var>, remove it from the <code>canvas</code> element's
- <span>hit region list</span>; then, if it had a <span title="hit
- region's parent">parent</span> region, decrement that <span>hit
- region's child count</span> by one.</p></li> <!-- we garbage
- collect the regions below -->
+ <li><p>If there is a <var title="">previous region with this control</var>, remove it from the
+ <span>scratch bitmap</span>'s <span>hit region list</span>; then, if it had a <span title="hit
+ region's parent">parent</span> region, decrement that <span>hit region's child count</span> by
+ one.</p></li> <!-- we garbage collect the regions below -->
- <li><p>If there is a <var title="">previous region with this
- ID</var>, remove it, and all <span title="hit region">hit
- regions</span> for which it is an <span>ancestor region</span>,
- from the <code>canvas</code> element's <span>hit region
- list</span>; then, if it had a <span title="hit region's
- parent">parent</span> region, decrement that <span>hit region's
- child count</span> by one.</p></li> <!-- we garbage collect the
- regions below -->
+ <li><p>If there is a <var title="">previous region with this ID</var>, remove it, and all <span
+ title="hit region">hit regions</span> for which it is an <span>ancestor region</span>, from the
+ <span>scratch bitmap</span>'s <span>hit region list</span>; then, if it had a <span title="hit
+ region's parent">parent</span> region, decrement that <span>hit region's child count</span> by
+ one.</p></li> <!-- we garbage collect the regions below -->
<li><p>If there is a <var title="">parent region</var>, increment
its <span>hit region's child count</span> by one.</p></li>
- <li><p><span>Clear regions that cover the pixels</span> in <var
- title="">region</var>'s <span title="hit region's set of
- pixels">set of pixels</span> on this <code>canvas</code>
- element.</p></li> <!-- this is what garbage collects the earlier
- regions -->
+ <li><p><span>Clear regions that cover the pixels</span> in <var title="">region</var>'s <span
+ title="hit region's set of pixels">set of pixels</span> on this <span>scratch
+ bitmap</span>.</p></li> <!-- this is what garbage collects the earlier regions -->
- <li><p>Add <var title="">region</var> to the <code>canvas</code>
- element's <span>hit region list</span>.</p></li>
+ <li><p>Add <var title="">region</var> to the <span>scratch bitmap</span>'s element's <span>hit
+ region list</span>.</p></li>
</ol>
@@ -47764,21 +48388,18 @@
<ol>
- <li><p>Let <var title="">region</var> be <span>the region
- identified by the ID</span> given by the method's argument in this
- <code>canvas</code> element, if any. If no such region currently
- exists, abort these steps.</p></li>
+ <li><p>Let <var title="">region</var> be <span>the region identified by the ID</span> given by
+ the method's argument in the rendering context's <span>scratch bitmap</span>. If no such region
+ currently exists, abort these steps.</p></li>
- <li><p>Remove <var title="">region</var>, and all <span title="hit
- region">hit regions</span> for which it is an <span>ancestor
- region</span>, from the <code>canvas</code> element's <span>hit
- region list</span>; then, if it had a <span title="hit region's
- parent">parent</span> region, decrement that <span>hit region's
- child count</span> by one.</p></li> <!-- we garbage collect the
- regions below -->
+ <li><p>Remove <var title="">region</var>, and all <span title="hit region">hit regions</span> for
+ which it is an <span>ancestor region</span>, from the rendering context's <span>scratch
+ bitmap</span>'s <span>hit region list</span>; then, if it had a <span title="hit region's
+ parent">parent</span> region, decrement that <span>hit region's child count</span> by
+ one.</p></li> <!-- we garbage collect the regions below -->
- <li><p><span>Garbage-collect the regions</span> of <var
- title="">ancestor</var>.</p></li>
+ <li><p><span>Garbage-collect the regions</span> of the rendering context's <span>scratch
+ bitmap</span>.</p></li>
</ol>
@@ -47820,11 +48441,10 @@
ID</span> if the mouse was over a hit region when the event was
fired.</p>
- <p>When a <code>MouseEvent</code> is to be fired at a
- <code>canvas</code> element by the user agent in response to a
- pointing device action, the user agent must instead follow these
- steps. If these steps say to <i>act as normal</i>, that means that
- the event must be fired as it would have had these requirements not
+ <p>When a <code>MouseEvent</code> is to be fired at a <code>canvas</code> element by the user
+ agent in response to a pointing device action, if the <code>canvas</code> element has a <span>hit
+ region list</span>, the user agent must instead follow these steps. If these steps say to <i>act
+ as normal</i>, that means that the event must be fired as it would have had these requirements not
been applied.</p>
<ol>
@@ -47838,7 +48458,7 @@
<li><p>Let <var title="">region</var> be the <span>hit
region</span> that is <span title="the region for a pixel">the
region for the pixel</span> <var title="">pixel</var> on this
- <code>canvas</code> element, if any.</p></li>
+ <code>canvas</code> element's bitmap, if any.</p></li>
<li><p>If there is no <var title="">region</var>, then act as
normal and abort these steps.</p></li>
@@ -47851,9 +48471,9 @@
event object's <code title="dom-MouseEvent-region">region</code>
attribute to <var title="">id</var>.</p></li>
- <li><p>Let <var title="">control</var> be the <var
- title="">region</var>'s <span title="hit region's
- control">control</span>, if any.</p></li>
+ <li><p>Let <var title="">control</var> be the <span title="the control represented by a
+ region">control represented by</span> <var title="">region</var> for this <code>canvas</code>
+ element, if any.</p></li>
<li><p>If there is a <var title="">control</var>, then target the
event object at <var title="">control</var> instead of the
@@ -47866,12 +48486,11 @@
<hr>
- <p>When a user's pointing device cursor is positioned over a
- <code>canvas</code> element, user agents should render the pointing
- device cursor according to the cursor specification described by
- <span title="the cursor for a hit region">the cursor for the hit
- region</span> that is <span title="the region for a pixel">the
- region for the pixel</span> that the pointing device designates.</p>
+ <p>When a user's pointing device cursor is positioned over a <code>canvas</code> element, user
+ agents should render the pointing device cursor according to the cursor specification described by
+ <span title="the cursor for a hit region">the cursor for the hit region</span> that is <span
+ title="the region for a pixel">the region for the pixel</span> that the pointing device designates
+ on the <code>canvas</code> element's bitmap.</p>
<hr>
@@ -47891,27 +48510,23 @@
region's bounding circumference</span> gives the region of the
screen to use when representing the node (if appropriate).</p>
- <p>The semantics of a <span>hit region</span> for the purposes of
- this virtual DOM tree are those of the <span>hit region's
- control</span>, if it has one, or else of a non-interactive element
- whose ARIA role, if any, is that given by the <span>hit region's
- ARIA role</span>, and whose textual representation, if any, is given
- by the <span>hit region's label</span>.</p>
+ <p>The semantics of a <span>hit region</span> for the purposes of this virtual DOM tree are those
+ of the <span title="the control represented by a region">the control represented by the
+ region</span>, if it has one, or else of a non-interactive element whose ARIA role, if any, is
+ that given by the <span>hit region's ARIA role</span>, and whose textual representation, if any,
+ is given by the <span>hit region's label</span>.</p>
- <p>For the purposes of accessibility tools, when an element <var
- title="">C</var> is a descendant of a <code>canvas</code> element
- and there is <span title="the region representing the control">a
- region representing the control</span> <var title="">C</var> for that
- <code>canvas</code> element, then the element's position relative to
- the document should be presented as if it was that region in the
- <code>canvas</code> element's virtual DOM tree.</p>
+ <p>For the purposes of accessibility tools, when an element <var title="">C</var> is a descendant
+ of a <code>canvas</code> element and there is <span title="the region representing the control">a
+ region representing the control</span> <var title="">C</var> for that <code>canvas</code>
+ element's bitmap, then the element's position relative to the document should be presented as if
+ it was that region in the <code>canvas</code> element's virtual DOM tree.</p>
- <p>The semantics of a <span>hit region</span> for the purposes of
- this virtual DOM tree are those of the <span>hit region's
- control</span>, if it has one, or else of a non-interactive element
- whose ARIA role, if any, is that given by the <span>hit region's
- ARIA role</span>, and whose textual representation, if any, is given
- by the <span>hit region's label</span>.</p>
+ <p>The semantics of a <span>hit region</span> for the purposes of this virtual DOM tree are those
+ of the <span title="the control represented by a region">the control represented by the
+ region</span>, if it has one, or else of a non-interactive element whose ARIA role, if any, is
+ that given by the <span>hit region's ARIA role</span>, and whose textual representation, if any,
+ is given by the <span>hit region's label</span>.</p>
<p class="note">Thus, for instance, a user agent on a touch-screen
device could provide haptic feedback when the user croses over a
@@ -47969,8 +48584,8 @@
<dd>
- <p>Returns an <code>ImageData</code> object containing the image
- data for the given rectangle of the canvas.</p>
+ <p>Returns an <code>ImageData</code> object containing the image data for the given rectangle of
+ the bitmap.</p>
<p>Throws an <code>IndexSizeError</code> exception if the either
of the width or height arguments are zero.</p>
@@ -47984,8 +48599,8 @@
<dd>
- <p>Returns an <code>ImageData</code> object containing the image
- data for the given rectangle of the canvas.</p>
+ <p>Returns an <code>ImageData</code> object containing the image data for the given rectangle of
+ the bitmap.</p>
<p>Throws an <code>IndexSizeError</code> exception if the either
of the width or height arguments are zero.</p>
@@ -48021,9 +48636,8 @@
<dd>
- <p>Paints the data from the given <code>ImageData</code> object
- onto the canvas. If a dirty rectangle is provided, only the pixels
- from that rectangle are painted.</p>
+ <p>Paints the data from the given <code>ImageData</code> object onto the bitmap. If a dirty
+ rectangle is provided, only the pixels from that rectangle are painted.</p>
<p>The <code title="dom-context-2d-globalAlpha">globalAlpha</code>
and <code
@@ -48036,8 +48650,7 @@
<p>Throws a <code>NotSupportedError</code> exception if any of the
arguments are not finite.</p>
- <p>Each pixel in the image data is mapped to one coordinate space
- unit on the canvas.</p>
+ <p>Each pixel in the image data is mapped to one coordinate space unit on the bitmap.</p>
</dd>
@@ -48045,10 +48658,9 @@
<dd>
- <p>Paints the data from the given <code>ImageData</code> object
- onto the canvas, at the canvas bitmap's native resolution. If a
- dirty rectangle is provided, only the pixels from that rectangle
- are painted.</p>
+ <p>Paints the data from the given <code>ImageData</code> object onto the bitmap, at the bitmap's
+ native pixel density. If a dirty rectangle is provided, only the pixels from that rectangle are
+ painted.</p>
<p>The <code title="dom-context-2d-globalAlpha">globalAlpha</code>
and <code
@@ -48087,70 +48699,54 @@
argument. The <code>ImageData</code> object returned must be filled
with transparent black.</p>
- <p>When the <dfn
- title="dom-context-2d-createImageDataHD"><code>createImageDataHD()</code></dfn>
- method is invoked (with its two arguments <var title="">sw</var> and
- <var title="">sh</var>) it must return a new <code>ImageData</code>
- object representing a rectangle with a width in equal to the
- absolute magnitude of <var title="">sw</var> multiplied by <var
- title="">scale</var> and a height equal to the absolute magnitude of
- <var title="">sh</var> multiplied by <var title="">scale</var>,
- where <var title="">scale</var> is the number of pixels in the
- canvas bitmap per coordinate space units. The <code>ImageData</code>
- object returned must be filled with transparent black.</p>
+ <p>When the <dfn title="dom-context-2d-createImageDataHD"><code>createImageDataHD()</code></dfn>
+ method is invoked (with its two arguments <var title="">sw</var> and <var title="">sh</var>) it
+ must return a new <code>ImageData</code> object representing a rectangle with a width in equal to
+ the absolute magnitude of <var title="">sw</var> multiplied by <var title="">scale</var> and a
+ height equal to the absolute magnitude of <var title="">sh</var> multiplied by <var
+ title="">scale</var>, where <var title="">scale</var> is the number of pixels in the <span>scratch
+ bitmap</span> per coordinate space units. The <code>ImageData</code> object returned must be
+ filled with transparent black.</p>
- <p>The <dfn
- title="dom-context-2d-getImageData"><code>getImageData(<var
- title="">sx</var>, <var title="">sy</var>, <var title="">sw</var>,
- <var title="">sh</var>)</code></dfn> method must, if either the <var
- title="">sw</var> or <var title="">sh</var> arguments are zero,
- throw an <code>IndexSizeError</code> exception; otherwise,
+ <p>The <dfn title="dom-context-2d-getImageData"><code>getImageData(<var title="">sx</var>, <var
+ title="">sy</var>, <var title="">sw</var>, <var title="">sh</var>)</code></dfn> method must, if
+ either the <var title="">sw</var> or <var title="">sh</var> arguments are zero, throw an
+ <code>IndexSizeError</code> exception; otherwise,
<!--ADD-TOPIC:Security-->
- if the <code>canvas</code> element's <i>origin-clean</i> flag is set
- to false, it must throw a <code>SecurityError</code> exception;
+ if the <span>scratch bitmap</span>'s <span title="concept-canvas-origin-clean">origin-clean</span>
+ flag is set to false, it must throw a <code>SecurityError</code> exception;
<!--REMOVE-TOPIC:Security-->
- otherwise, it must return an <code>ImageData</code> object with
- width <var title="">sw</var> and height <var title="">sh</var>
- representing the canvas bitmap for the area of the canvas denoted by
- the rectangle whose corners are the four points (<var
- title="">sx</var>, <var title="">sy</var>), (<span title=""><var
- title="">sx</var>+<var title="">sw</var></span>, <var
- title="">sy</var>), (<span title=""><var title="">sx</var>+<var
- title="">sw</var></span>, <span title=""><var title="">sy</var>+<var
- title="">sh</var></span>), (<var title="">sx</var>, <span
- title=""><var title="">sy</var>+<var title="">sh</var></span>), in
- canvas coordinate space units. If the canvas bitmap does not
- represent each coordinate space unit square using exactly one pixel,
- the value of each pixel in the returned abject must be derived from
- the value(s) of the pixel(s) in the canvas bitmap that correspond to
- the same coordinate. Pixels outside the canvas must be returned as
- transparent black. Pixels must be returned as non-premultiplied
+ otherwise, it must return an <code>ImageData</code> object with width <var title="">sw</var> and
+ height <var title="">sh</var> representing the <span>scratch bitmap</span> for the area of that
+ bitmap denoted by the rectangle whose corners are the four points (<var title="">sx</var>, <var
+ title="">sy</var>), (<span title=""><var title="">sx</var>+<var title="">sw</var></span>, <var
+ title="">sy</var>), (<span title=""><var title="">sx</var>+<var title="">sw</var></span>, <span
+ title=""><var title="">sy</var>+<var title="">sh</var></span>), (<var title="">sx</var>, <span
+ title=""><var title="">sy</var>+<var title="">sh</var></span>), in the bitmap's coordinate space
+ units. If the bitmap does not represent each coordinate space unit square using exactly one pixel,
+ the value of each pixel in the returned abject must be derived from the value(s) of the pixel(s)
+ in the bitmap that correspond to the same coordinate. Pixels outside the <span>scratch
+ bitmap</span> must be returned as transparent black. Pixels must be returned as non-premultiplied
alpha values.</p>
- <p>The <dfn
- title="dom-context-2d-getImageDataHD"><code>getImageDataHD(<var
- title="">sx</var>, <var title="">sy</var>, <var title="">sw</var>,
- <var title="">sh</var>)</code></dfn> method must, if either the <var
- title="">sw</var> or <var title="">sh</var> arguments are zero,
- throw an <code>IndexSizeError</code> exception; otherwise,
+ <p>The <dfn title="dom-context-2d-getImageDataHD"><code>getImageDataHD(<var title="">sx</var>,
+ <var title="">sy</var>, <var title="">sw</var>, <var title="">sh</var>)</code></dfn> method must,
+ if either the <var title="">sw</var> or <var title="">sh</var> arguments are zero, throw an
+ <code>IndexSizeError</code> exception; otherwise,
<!--ADD-TOPIC:Security-->
- if the <code>canvas</code> element's <i>origin-clean</i> flag is set
- to false, it must throw a <code>SecurityError</code> exception;
+ if the <span>scratch bitmap</span>'s <span title="concept-canvas-origin-clean">origin-clean</span>
+ flag is set to false, it must throw a <code>SecurityError</code> exception;
<!--REMOVE-TOPIC:Security-->
- otherwise, it must return an <code>ImageData</code> object with
- width <var title="">sw</var> multiplied by <var title="">scale</var>
- and height <var title="">sh</var> multiplied by <var
- title="">scale</var> representing the canvas bitmap data for the
- area of the canvas denoted by the rectangle whose corners are the
- four points (<var title="">sx</var>, <var title="">sy</var>), (<span
- title=""><var title="">sx</var>+<var title="">sw</var></span>, <var
- title="">sy</var>), (<span title=""><var title="">sx</var>+<var
- title="">sw</var></span>, <span title=""><var title="">sy</var>+<var
- title="">sh</var></span>), (<var title="">sx</var>, <span
- title=""><var title="">sy</var>+<var title="">sh</var></span>), in
- canvas coordinate space units. Pixels outside the canvas must be
- returned as transparent black. Pixels must be returned as
- non-premultiplied alpha values.</p>
+ otherwise, it must return an <code>ImageData</code> object with width <var title="">sw</var>
+ multiplied by <var title="">scale</var> and height <var title="">sh</var> multiplied by <var
+ title="">scale</var> representing the <span>scratch bitmap</span> for the area of that bitmap
+ denoted by the rectangle whose corners are the four points (<var title="">sx</var>, <var
+ title="">sy</var>), (<span title=""><var title="">sx</var>+<var title="">sw</var></span>, <var
+ title="">sy</var>), (<span title=""><var title="">sx</var>+<var title="">sw</var></span>, <span
+ title=""><var title="">sy</var>+<var title="">sh</var></span>), (<var title="">sx</var>, <span
+ title=""><var title="">sy</var>+<var title="">sh</var></span>), in the bitmap's coordinate space
+ units. Pixels outside the <span>scratch bitmap</span> must be returned as transparent black.
+ Pixels must be returned as non-premultiplied alpha values.</p>
<p>New <code>ImageData</code> objects must be initialized so that
their <dfn title="dom-imagedata-width"><code>width</code></dfn>
@@ -48177,14 +48773,11 @@
consecutive indices starting with 0 for the top left pixel's red
component. <a href="#refsTYPEDARRAY">[TYPEDARRAY]</a></p>
- <p>The <dfn
- title="dom-context-2d-putImageData"><code>putImageData()</code></dfn>
- and <dfn
- title="dom-context-2d-putImageDataHD"><code>putImageDataHD()</code></dfn>
- methods write data from <code>ImageData</code> structures back to
- the canvas. Their arguments are: <var title="">imagedata</var>, <var
- title="">dx</var>, <var title="">dy</var>, <var
- title="">dirtyX</var>, <var title="">dirtyY</var>, <var
+ <p>The <dfn title="dom-context-2d-putImageData"><code>putImageData()</code></dfn> and <dfn
+ title="dom-context-2d-putImageDataHD"><code>putImageDataHD()</code></dfn> methods write data from
+ <code>ImageData</code> structures back to the rendering context's <span>scratch bitmap</span>.
+ Their arguments are: <var title="">imagedata</var>, <var title="">dx</var>, <var
+ title="">dy</var>, <var title="">dirtyX</var>, <var title="">dirtyY</var>, <var
title="">dirtyWidth</var>, and <var title="">dirtyHeight</var>.</p>
<p>When the last four arguments to these methods are omitted, they
@@ -48252,7 +48845,7 @@
<p>If, after those changes, either <var title="">dirtyWidth</var>
or <var title="">dirtyHeight</var> is negative or zero, stop these
- steps without affecting the canvas.</p>
+ steps without affecting any bitmaps.</p>
</li>
@@ -48266,22 +48859,17 @@
<dd>
- <p>Draw the region of the image data in the horizontal rectangle
- whose top left corner is at (<var title="">dirtyX</var>,<var
- title="">dirtyY</var>) and whose bottom right corner is at
- (<span title=""><var title="">dirtyX</var>+<var
- title="">dirtyWidth</var></span>,<span title=""><var
- title="">dirtyY</var>+<var title="">dirtyHeight</var></span>)
- onto the canvas, aligned such that the top left of the rectangle
- is at coordinate (<var title="">dx</var>,<var
- title="">dy</var>).</p>
+ <p>Draw the region of the image data in the horizontal rectangle whose top left corner is at
+ (<var title="">dirtyX</var>,<var title="">dirtyY</var>) and whose bottom right corner is at
+ (<span title=""><var title="">dirtyX</var>+<var title="">dirtyWidth</var></span>,<span
+ title=""><var title="">dirtyY</var>+<var title="">dirtyHeight</var></span>) onto the rendering
+ context's <span>scratch bitmap</span>, aligned such that the top left of the rectangle is at
+ coordinate (<var title="">dx</var>,<var title="">dy</var>).</p>
- <p>If the <code
- title="dom-context-2d-imageSmoothingEnabled">imageSmoothingEnabled</code>
- attribute is set to true, then the user agent should attempt to
- apply a smoothing algorithm to the image data if the canvas does
- not have exactly one device pixel per coordinate space unit in
- the canvas bitmap.</p>
+ <p>If the <code title="dom-context-2d-imageSmoothingEnabled">imageSmoothingEnabled</code>
+ attribute is set to true, then the user agent should attempt to apply a smoothing algorithm to
+ the image data if the <span>scratch bitmap</span> does not have exactly one device pixel per
+ coordinate space unit.</p>
</dd>
@@ -48293,32 +48881,26 @@
<li>
- <p>Let <var title="">dx<sub>device</sub></var> be the x-coordinate
- of the device pixel in the canvas bitmap corresponding to the <var
- title="">dx</var> coordinate in the canvas coordinate space.</p>
+ <p>Let <var title="">dx<sub>device</sub></var> be the x-coordinate of the device pixel in
+ the <span>scratch bitmap</span> corresponding to the <var title="">dx</var> coordinate in
+ the <span>scratch bitmap</span>'s coordinate space.</p>
- <p>Let <var title="">dy<sub>device</sub></var> be the y-coordinate
- of the device pixel in the canvas bitmap corresponding to the <var
- title="">dy</var> coordinate in the canvas coordinate space.</p>
+ <p>Let <var title="">dy<sub>device</sub></var> be the y-coordinate of the device pixel in
+ the <span>scratch bitmap</span> corresponding to the <var title="">dy</var> coordinate in
+ the <span>scratch bitmap</span>'s coordinate space.</p>
</li>
- <li><p>For all integer values of <var title="">x</var>
- and <var title="">y</var> where <span title=""><var
- title="">dirtyX</var> ≤ <var
- title="">x</var> < <span title=""><var
- title="">dirtyX</var>+<var title="">dirtyWidth</var></span></span>
- and <span title=""><var title="">dirtyY</var> ≤ <var
- title="">y</var> < <span title=""><var
- title="">dirtyY</var>+<var
- title="">dirtyHeight</var></span></span>, copy the four channels of
- the pixel with coordinate (<var title="">x</var>, <var
- title="">y</var>) in the <var title="">imagedata</var> data
- structure to the pixel with coordinate (<span title=""><var
- title="">dx<sub>device</sub></var>+<var title="">x</var></span>,
- <span title=""><var title="">dy<sub>device</sub></var>+<var
- title="">y</var></span>) in the canvas bitmap of the
- canvas.</p></li>
+ <li><p>For all integer values of <var title="">x</var> and <var title="">y</var> where <span
+ title=""><var title="">dirtyX</var> ≤ <var title="">x</var> < <span
+ title=""><var title="">dirtyX</var>+<var title="">dirtyWidth</var></span></span> and <span
+ title=""><var title="">dirtyY</var> ≤ <var title="">y</var> < <span
+ title=""><var title="">dirtyY</var>+<var title="">dirtyHeight</var></span></span>, copy the
+ four channels of the pixel with coordinate (<var title="">x</var>, <var title="">y</var>) in
+ the <var title="">imagedata</var> data structure to the pixel with coordinate (<span
+ title=""><var title="">dx<sub>device</sub></var>+<var title="">x</var></span>, <span
+ title=""><var title="">dy<sub>device</sub></var>+<var title="">y</var></span>) in the
+ rendering context's <span>scratch bitmap</span>.</p></li>
</ol>
@@ -48511,28 +49093,22 @@
<!-- conformance criteria for painting are described in the "drawing
model" section below -->
- <p>The <dfn
- title="dom-context-2d-globalAlpha"><code>globalAlpha</code></dfn>
- attribute gives an alpha value that is applied to shapes and images
- before they are composited onto the canvas. The value must be in the
- range from 0.0 (fully transparent) to 1.0 (no additional
- transparency). If an attempt is made to set the attribute to a value
- outside this range, including Infinity and Not-a-Number (NaN)
- values, the attribute must retain its previous value. When the
- context is created, the <code
- title="dom-context-2d-globalAlpha">globalAlpha</code> attribute must
+ <p>The <dfn title="dom-context-2d-globalAlpha"><code>globalAlpha</code></dfn> attribute gives an
+ alpha value that is applied to shapes and images before they are composited onto the <span>scratch
+ bitmap</span>. The value must be in the range from 0.0 (fully transparent) to 1.0 (no additional
+ transparency). If an attempt is made to set the attribute to a value outside this range, including
+ Infinity and Not-a-Number (NaN) values, the attribute must retain its previous value. When the
+ context is created, the <code title="dom-context-2d-globalAlpha">globalAlpha</code> attribute must
initially have the value 1.0.</p>
<p>The <dfn
title="dom-context-2d-globalCompositeOperation"><code>globalCompositeOperation</code></dfn>
- attribute sets how shapes and images are drawn onto the existing
- bitmap, once they have had <code
- title="dom-context-2d-globalAlpha">globalAlpha</code> and the
- current transformation matrix applied. It must be set to a value
- from the following list. In the descriptions below, the source
- image, <var title="">A</var>, is the shape or image being rendered,
- and the destination image, <var title="">B</var>, is the current
- state of the bitmap.</p>
+ attribute sets how shapes and images are drawn onto the <span>scratch bitmap</span>, once they
+ have had <code title="dom-context-2d-globalAlpha">globalAlpha</code> and the current
+ transformation matrix applied. It must be set to a value from the following list. In the
+ descriptions below, the source image, <var title="">A</var>, is the shape or image being rendered,
+ and the destination image, <var title="">B</var>, is the current state of the <span>scratch
+ bitmap</span>.</p>
</div>
@@ -48879,24 +49455,24 @@
component of every pixel in <var title="">B</var> by <code
title="dom-context-2d-globalAlpha">globalAlpha</code>.</p></li>
- <li><p><span>When shadows are drawn</span>, composite <var
- title="">B</var> within the <span>clipping region</span> over the
- current canvas bitmap using the current composition
- operator.</p></li>
+ <li><p><span>When shadows are drawn</span>, composite <var title="">B</var> within the
+ <span>clipping region</span> over the current <span>scratch bitmap</span> using the current
+ composition operator.</p></li>
<li><p>Multiply the alpha component of every pixel in <var
title="">A</var> by <code
title="dom-context-2d-globalAlpha">globalAlpha</code>.</p></li>
- <li><p>Composite <var title="">A</var> within the <span>clipping
- region</span> over the current canvas bitmap using the current
- composition operator.</p></li>
+ <li><p>Composite <var title="">A</var> within the <span>clipping region</span> over the current
+ <span>scratch bitmap</span> using the current composition operator.</p></li>
</ol>
</div>
+
+
<h6>Best practices</h6>
<!--END dev-html--><p><i>This section is non-normative.</i></p><!--START dev-html-->
@@ -49018,16 +49594,59 @@
<!--END 2dcontext-->
- </div><!--data-component-->
+ <h5>Pixel density</h5>
+ <p>The user agent may use any square pixel density for the bitmaps of a <code>canvas</code> and
+ its rendering contexts. Once a <code>canvas</code> has a bitmap, that canvas must keep its
+ resolution for its lifetime.</p>
+
+ <p class="note">In general, user agents are encouraged to use a pixel density equal to the screen
+ pixel density. Ideally, the number of device pixels per CSS pixel would be a multiple of two.
+ Several factors can affect the screen pixel density: most prominently the actual display pixel
+ density, but also important is the current zoom level.</p>
+
+ <p>All the bitmaps created during a single <span title="concept-task">task</span> for
+ <code>canvas</code> elements and <code>CanvasRenderingContext2D</code> objects must have the same
+ pixel density.
+ <!--INSERT FINGERPRINT-->
+ </p>
+
+ <pre class="idl">partial interface <span>Screen</span> {
+ readonly attribute double <span title="dom-screen-canvasResolution">canvasResolution</span>;
+};</pre>
+
+ <dl class="domintro">
+
+ <dt><var title="">window</var> . <code title="dom-Window-screen">screen</code> . <code title="dom-screen-canvasResolution">canvasResolution</code></dt>
+
+ <dd>
+
+ <p>Returns the pixel density that has been, or will be, used for bitmaps during this <span title="concept-task">task</span>.</p>
+
+ </dd>
+
+ </dl>
+
<div class="impl">
+ <p>The <dfn title="dom-screen-canvasResolution"><code>canvasResolution</code></dfn> attribute of
+ the <code>Screen</code> object must return the pixel density, in image pixels per coordinate space
+ units, that any <code>canvas</code> and <code>CanvasRenderingContext2D</code> bitmaps created
+ during this <span title="concept-task">task</span> will use (or have used). <a
+ href="#refsCSSOMVIEW">[CSSOMVIEW]</a></p>
+
+ </div>
+
+
+
+ <div class="impl">
+
<h5>Color spaces and color correction</h5>
<p>The <code>canvas</code> APIs must perform color correction at only two points: when rendering
- images with their own gamma correction and color space information onto the canvas, to convert the
- image to the color space used by the canvas (e.g. using the 2D Context's <code
+ images with their own gamma correction and color space information onto a bitmap, to convert the
+ image to the color space used by the bitmaps (e.g. using the 2D Context's <code
title="dom-context-2d-drawImage">drawImage()</code> method with an <code>HTMLImageElement</code>
object), and when rendering the actual canvas bitmap to the output device.</p>
@@ -49062,82 +49681,98 @@
</div>
-<!--ADD-TOPIC:Security-->
+
+ <h5>Serializing bitmaps to a file</h5>
+
<div class="impl">
- <h5>Security with <code>canvas</code> elements</h5>
+ <p>When a user agent is to create <dfn>a serialization of the bitmap as a file</dfn>, optionally
+ with some given <var title="">arguments</var>, and optionally with a <var title="">native</var>
+ flag set, it must create an image file in the format given by the first value of <var
+ title="">arguments</var>, or, if there are no <var title="">arguments</var>, in the PNG format. <a
+ href="#refsPNG">[PNG]</a></p>
- <p><strong>Information leakage</strong> can occur if scripts from
- one <span>origin</span> can access information (e.g. read pixels)
- from images from another origin (one that isn't the <span
- title="same origin">same</span>).</p>
+ <p>If the <var title="">native</var> flag is set, or if the bitmap has one pixel per coordinate
+ space unit, then the image file must have the same pixel data (before compression, if applicable)
+ as the bitmap, and if the file format used supports encoding resolution metadata, the resolution
+ of that bitmap (device pixels per coordinate space units being interpreted as image pixels per CSS
+ pixel) must be given as well.</p>
- <p>To mitigate this, <code>canvas</code> elements are defined to
- have a flag indicating whether they are <i>origin-clean</i>. All
- <code>canvas</code> elements must start with their
- <i>origin-clean</i> set to true. The flag must be set to false if
- any of the following actions occur:</p>
+ <p>Otherwise, 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).</p>
- <ul>
+ <p>If <var title="">arguments</var> is not empty, the first value must be interpreted as a <span
+ title="MIME type">MIME type</span> giving the format to use. If the type has any parameters, it
+ must be treated as not supported.</p>
- <li><p>The element's 2D context's <code
- title="dom-context-2d-drawImage">drawImage()</code> method is
- called with an <code>HTMLImageElement</code> or an
- <code>HTMLVideoElement</code> whose <span>origin</span> is not the
- <span title="same origin">same</span> as that of the
- <code>Document</code> object that owns the <code>canvas</code>
- element.</p></li>
+ <p class="example">For example, the value "<code>image/png</code>" would mean to generate a PNG
+ image, the value "<code>image/jpeg</code>" would mean to generate a JPEG image, and the value
+ "<code>image/svg+xml</code>" 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).</p>
- <li><p>The element's 2D context's <code
- title="dom-context-2d-drawImage">drawImage()</code> method is
- called with an <code>HTMLCanvasElement</code> whose
- <i>origin-clean</i> flag is false.</p></li>
+ <p>User agents must support PNG ("<code>image/png</code>"). User agents may support other types.
+ If the user agent does not support the requested type, it must create the file using the PNG
+ format. <a href="#refsPNG">[PNG]</a></p>
- <li><p>The element's 2D context's <code
- title="dom-context-2d-fillStyle">fillStyle</code> attribute is set
- to a <code>CanvasPattern</code> object that was created from an
- <code>HTMLImageElement</code> or an <code>HTMLVideoElement</code>
- whose <span>origin</span> was not the <span title="same
- origin">same</span> as that of the <code>Document</code> object
- that owns the <code>canvas</code> element when the pattern was
- created.</p></li>
+ <p>User agents must <span title="converted to ASCII lowercase">convert the provided type to ASCII
+ lowercase</span> before establishing if they support that type.</p>
- <li><p>The element's 2D context's <code
- title="dom-context-2d-fillStyle">fillStyle</code> attribute is set
- to a <code>CanvasPattern</code> object that was created from an
- <code>HTMLCanvasElement</code> whose <i>origin-clean</i> flag was
- false when the pattern was created.</p></li>
+ <p>For image types that do not support an alpha channel, the serialized image must be the bitmap
+ image composited onto a solid black background using the source-over operator.</p>
- <li><p>The element's 2D context's <code
- title="dom-context-2d-strokeStyle">strokeStyle</code> attribute is
- set to a <code>CanvasPattern</code> object that was created from an
- <code>HTMLImageElement</code> or an <code>HTMLVideoElement</code>
- whose <span>origin</span> was not the <span title="same
- origin">same</span> as that of the <code>Document</code> object
- that owns the <code>canvas</code> element when the pattern was
- created.</p></li>
+ <p>If the first argument in <var title="">arguments</var> gives a type corresponding to one of the
+ types given in the first column of the following table, and the user agent supports that type,
+ then the subsequent arguments, if any, must be treated as described in the second cell of that
+ row.</p>
- <li><p>The element's 2D context's <code
- title="dom-context-2d-strokeStyle">strokeStyle</code> attribute is
- set to a <code>CanvasPattern</code> object that was created from an
- <code>HTMLCanvasElement</code> whose <i>origin-clean</i> flag was
- false when the pattern was created.</p></li>
+ </div>
- <li><p>The element's 2D context's <code
- title="dom-context-2d-fillText">fillText()</code> or <code
- title="dom-context-2d-fillText">strokeText()</code> methods are
- invoked and consider using a font that has an <span>origin</span>
- that is not the <span title="same origin">same</span> as that of
- the <code>Document</code> object that owns the <code>canvas</code>
- element. (The font doesn't even have to be used; all that matters
- is whether the font was considered for any of the glyphs
- drawn.)</p></li> <!-- because fonts could consider sensitive
- material, I guess; and because that sensitivity could extend to
- whether or not a particular glyph is in the font in the first
- place. -->
+ <table id="canvas-serialization-arguments">
+ <caption>Arguments for serialization methods</caption>
+ <thead>
+ <tr> <th> Type <th> Other arguments <th> Reference
+ <tbody>
+ <tr>
+ <td> <code>image/jpeg</code>
+ <td> The second argument<span class="impl">, if it</span> is a number in the range 0.0 to 1.0
+ inclusive<span class="impl">, must be</span> treated as the desired quality level. <span
+ class="impl">If it is not a number or is outside that range, the user agent must use its
+ default value, as if the argument had been omitted.</span>
+ <td> <a href="#refsJPEG">[JPEG]</a>
+ </table>
- </ul>
+ <div class="impl">
+ <p>For the purposes of these rules, an argument is considered to be a number if it is converted to
+ an IDL double value by the rules for handling arguments of type <code title="">any</code> in the
+ Web IDL specification. <a href="#refsWEBIDL">[WEBIDL]</a></p>
+
+ <p>Other arguments must be ignored and must not cause the user agent to throw an exception. A
+ future version of this specification will probably define other parameters to be passed to these
+ methods to allow authors to more carefully control compression settings, image metadata, etc.</p>
+
+ </div>
+
+
+<!--ADD-TOPIC:Security-->
+ <div class="impl">
+
+ <h5>Security with <code>canvas</code> elements</h5>
+
+ <!--END dev-html--><p><i>This section is non-normative.</i></p><!--START dev-html-->
+
+ <p><strong>Information leakage</strong> can occur if scripts from
+ one <span>origin</span> can access information (e.g. read pixels)
+ from images from another origin (one that isn't the <span
+ title="same origin">same</span>).</p>
+
+ <p>To mitigate this, bitmaps used with <code>canvas</code> elements are defined to have a flag
+ indicating whether they are <span title="concept-canvas-origin-clean">origin-clean</span>. All
+ bitmaps start with their <span title="concept-canvas-origin-clean">origin-clean</span> set to
+ true. The flag is set to false when cross-origin images or fonts are used.</p>
+
<p>The <code title="dom-canvas-toDataURL">toDataURL()</code>, <code
title="dom-canvas-toDataURLHD">toDataURLHD()</code>, <code
title="dom-canvas-toBlob">toBlob()</code>, <code
@@ -49146,10 +49781,9 @@
methods check the flag and will throw a <code>SecurityError</code>
exception rather than leak cross-origin data.</p>
- <p class="note">Even resetting the canvas state by changing its
- <code title="attr-canvas-width">width</code> or <code
- title="attr-canvas-height">height</code> attributes doesn't reset
- the <i>origin-clean</i> flag.</p>
+ <p>The flag can be reset in certain situations; for example, when a
+ <code>CanvasRenderingContext2D</code> is bound to a new <code>canvas</code>, the bitmap is cleared
+ and its flag reset.</p>
</div>
<!--REMOVE-TOPIC:Security-->
@@ -79292,9 +79926,8 @@
</table>
- <p><small>† This case is only possible if the <code
- title="attr-iframe-sandbox">sandbox</code> attribute also allows
- scripts.</small></p>
+ <p class="tablenote"><small>† This case is only possible if the <code
+ title="attr-iframe-sandbox">sandbox</code> attribute also allows scripts.</small></p>
<div class="impl">
@@ -87738,18 +88371,16 @@
<ol>
- <li><p>Run the oldest <span title="concept-task">task</span> on one
- of the <span>event loop</span>'s <span title="task queue">task
- queues</span>, ignoring tasks whose associated
- <code>Document</code>s are not <span>fully active</span>. The user
- agent may pick any <span>task queue</span>.</p></li>
+ <li><p>Run the oldest <span title="concept-task">task</span> on one of the <span>event
+ loop</span>'s <span title="task queue">task queues</span>, if any, ignoring tasks whose
+ associated <code>Document</code>s are not <span>fully active</span>. The user agent may pick any
+ <span>task queue</span>.</p></li>
- <!-- warning! if you renumber these steps, make sure to update the
- "spin the event loop" algorithm below! -->
+ <!-- warning! if you renumber these steps, make sure to update the "spin the event loop"
+ algorithm below! -->
- <li><p>If the <span>storage mutex</span> is now owned by the
- <span>event loop</span>, release it so that it is once again
- free.</p></li>
+ <li><p>If the <span>storage mutex</span> is now owned by the <span>event loop</span>, release it
+ so that it is once again free.</p></li>
<li><p>Remove that task from its <span>task queue</span>.</p></li>
@@ -87798,17 +88429,17 @@
<hr>
- <p>When the user agent is to <dfn>provide a stable state</dfn>, if
- any asynchronously-running algorithms are <dfn title="await a stable
- state">awaiting a stable state</dfn>, then the user agent must run
- their <dfn>synchronous section</dfn> and then resume running their
- asynchronous algorithm (if appropriate).</p>
+ <p>When the user agent is to <dfn>provide a stable state</dfn>, if any asynchronously-running
+ algorithms are <dfn title="await a stable state">awaiting a stable state</dfn>, then the user
+ agent must run their <dfn>synchronous section</dfn> and then resume running their asynchronous
+ algorithm (if appropriate).</p>
- <p class="note">A <span>synchronous section</span> never mutates
- the DOM, runs any script, or has any other side-effects.</p>
+ <p class="note">A <span>synchronous section</span> never mutates the DOM, runs any script, or has
+ any side-effects detectable from another <span>synchronous section</span>, and thus <span
+ title="synchronous section">synchronous sections</span> can be run in any order.</p>
- <p class="note">Steps in <span title="synchronous
- section">synchronous sections</span> are marked with ⌛.</p>
+ <p class="note">Steps in <span title="synchronous section">synchronous sections</span> are marked
+ with ⌛.</p>
<hr>
@@ -90716,7 +91347,7 @@
<!--ADD-TOPIC:Security-->
<div class="impl">
- <h5>Security and privacy</h5>
+ <h6>Security and privacy</h6>
<p>These mechanisms can introduce a number of concerns, in
particular privacy concerns.</p>
@@ -90806,7 +91437,7 @@
<div class="impl">
- <h5 id="sample-handler-impl">Sample user interface</h5>
+ <h6 id="sample-handler-impl">Sample user interface</h6>
<!--END dev-html--><p><i>This section is non-normative.</i></p><!--START dev-html-->
@@ -91066,10 +91697,285 @@
</ol>
</div>
-<!--TOPIC:HTML-->
+<!--TOPIC:Canvas-->
+ <h3>Images</h3>
+
+ <pre class="idl">interface <dfn>ImageBitmap</dfn> {
+ // opaque object
+};
+
+callback <dfn>ImageBitmapCallback</dfn> = void (<span>ImageBitmap</span> image);
+
+[NoInterfaceObject]
+interface <dfn>ImageBitmapFactories</dfn> {
+ void <span title="dom-createImageBitmap">createImageBitmap</span>(<span>HTMLImageElement</span> image, <span>ImageBitmapCallback</span> _callback);
+ void <span title="dom-createImageBitmap">createImageBitmap</span>(<span>HTMLVideoElement</span> image, <span>ImageBitmapCallback</span> _callback);
+ void <span title="dom-createImageBitmap">createImageBitmap</span>(<span>HTMLCanvasElement</span> image, <span>ImageBitmapCallback</span> _callback);
+ void <span title="dom-createImageBitmap">createImageBitmap</span>(<span>Blob</span> image, <span>ImageBitmapCallback</span> _callback);
+ void <span title="dom-createImageBitmap">createImageBitmap</span>(<span>ImageData</span> image, <span>ImageBitmapCallback</span> _callback);
+ void <span title="dom-createImageBitmap">createImageBitmap</span>(<span>CanvasRenderingContext2D</span> image, <span>ImageBitmapCallback</span> _callback);
+};
+<span>Window</span> implements <span>ImageBitmapFactories</span>;
+<span>WorkerUtils</span> implements <span>ImageBitmapFactories</span>;</pre>
+
+ <p>An <code>ImageBitmap</code> object represents a bitmap image that can be painted to a canvas
+ without undue latency.</p>
+
+ <p class="note">The exact judgement of what is undue latency of this is left up to the
+ implementer, but in general if making use of the bitmap requires network I/O, or even local disk
+ I/O, then the latency is probably undue; whereas if it only requires a blocking read from a GPU or
+ system RAM, the latency is probably acceptable.</p>
+
+ <dl class="domintro">
+
+ <dt><var title="">Window</var> . <code title="dom-createImageBitmap">createImageBitmap</code>(<var title="">image</var>, <var title="">callback</var>)</dt>
+
+ <dd>
+
+ <p>Takes <var title="">image</var>, which can be an <code>img</code> element,
+ <code>video</code>, or <code>canvas</code> element, a <code>Blob</code> object, an
+ <code>ImageData</code> object, or a <code>CanvasRenderingContext2D</code> object, and
+ asynchronously calls <var title="">callback</var> with a new <code>ImageBitmap</code> as its
+ argument when it has created one.</p>
+
+ <p>If no <code>ImageBitmap</code> object can be constructed, for example because the provided
+ <var title="">image</var> data is not actually an image, then the <var title="">callback</var>
+ is invoked with null as the value instead.</p>
+
+ <p>Throws an <code>InvalidStateError</code> exception if the source image is not in a valid
+ state (e.g. an <code>img</code> element that hasn't finished loading, or a
+ <code>CanvasRenderingContext2D</code> object whose bitmap data has zero length along one or both
+ dimensions). Throws a <code>SecurityError</code> exception if the script is not allowed to
+ access the image data of the source image (e.g. a <code>video</code> that is
+ <span>CORS-cross-origin</span>, or a <code>canvas</code> being drawn on by a script in a worker
+ from another <span>origin</span>).</p>
+
+ </dd>
+
+ </dl>
+
+ <div class="impl">
+
+ <p>An <code>ImageBitmap</code> object always has associated bitmap data, with a width and a
+ height. However, it is possible for this data to be corrupted. If an <code>ImageBitmap</code>
+ object's media data can be decoded without errors, it is said to be <dfn
+ title="concept-ImageBitmap-good">fully decodable</dfn>.</p>
+
+ <p>An <code>ImageBitmap</code> object can be obtained from a variety of different objects, using
+ the <dfn title="dom-createImageBitmap"><code>createImageBitmap()</code></dfn> method. This method
+ takes two arguments, <var title="">image</var> and <var title="">callback</var>. When invoked, the
+ method must act as follows:</p>
+ <!-- the canvas createPattern() and drawImage() methods have similar requirements -->
+
+ <dl>
+
+ <dt>If <var title="">image</var> is an <code>img</code> element
+
+ <dd>
+
+ <ol>
+
+ <li><p>If the <code>img</code> element is not <span title="img-all">completely
+ available</span>, then throw an <code>InvalidStateError</code> exception and abort these
+ steps.</p></li>
+
+<!--ADD-TOPIC:Security-->
+ <li><p>If the <span>origin</span> of the <code>img</code> element's image is not the <span>same
+ origin</span> as the <span>entry script</span>'s <span>origin</span>, then throw a
+ <code>SecurityError</code> exception and abort these steps.</p></li>
+<!--REMOVE-TOPIC:Security-->
+
+ <li><p>If the <code>img</code> element's media data is not a bitmap (e.g. it's a vector
+ graphic), then throw an <code>InvalidStateError</code> exception and abort these
+ steps.</p></li>
+
+ <li><p>Create a new <code>ImageBitmap</code> object.</p></li>
+
+ <li><p>Let the <code>ImageBitmap</code> object's bitmap data be a copy of the <code>img</code>
+ element's media data. If this is an animated image, the <code>ImageBitmap</code> object's
+ bitmap data must only consist of the animation's poster frame, or, if there is no poster frame,
+ the first frame of the animation.</p></li>
+
+ <li><p>Return, but continue running these steps asynchronously.</p></li>
+
+ <li><p><span>Queue a task</span> to invoke <var title="">callback</var> with the new
+ <code>ImageBitmap</code> object as its argument.</p></li>
+
+ </ol>
+
+ </dd>
+
+ <dt>If <var title="">image</var> is a <code>video</code> element
+
+ <dd>
+
+ <ol>
+
+ <li><p>If the <code>video</code> element's <code
+ title="dom-media-networkState">networkState</code> attribute is <code
+ title="dom-media-NETWORK_EMPTY">NETWORK_EMPTY</code>, then throw an
+ <code>InvalidStateError</code> exception and abort these steps.</p></li>
+
+<!--ADD-TOPIC:Security-->
+ <li><p>If the <span>origin</span> of the <code>video</code> element is not the <span>same
+ origin</span> as the <span>entry script</span>'s <span>origin</span>, then throw a
+ <code>SecurityError</code> exception and abort these steps.</p></li>
+<!--REMOVE-TOPIC:Security-->
+
+ <li><p>If the <code>video</code> element's <code title="dom-media-readyState">readyState</code>
+ attribute is either <code title="dom-media-HAVE_NOTHING">HAVE_NOTHING</code> or <code
+ title="dom-media-HAVE_METADATA">HAVE_METADATA</code>, then throw an
+ <code>InvalidStateError</code> exception and abort these steps.</p></li>
+
+ <li><p>Create a new <code>ImageBitmap</code> object.</p></li>
+
+ <li><p>Let the <code>ImageBitmap</code> object's bitmap data be a copy of the frame at the
+ <span>current playback position</span>, at the <span>media resource</span>'s <span
+ title="concept-video-intrinsic-width">intrinsic width</span> and <span
+ title="concept-video-intrinsic-height">intrinsic height</span> (i.e. after any aspect-ratio
+ correction has been applied).</p>
+
+ <li><p>Return, but continue running these steps asynchronously.</p></li>
+
+ <li><p><span>Queue a task</span> to invoke <var title="">callback</var> with the new
+ <code>ImageBitmap</code> object as its argument.</p></li>
+
+ </ol>
+
+ </dd>
+
+ <dt>If <var title="">image</var> is a <code>canvas</code> element
+
+ <dd>
+
+ <ol>
+
+<!--ADD-TOPIC:Security-->
+ <li><p>If the <code>canvas</code> element's bitmap data does not have its <span
+ title="concept-canvas-origin-clean">origin-clean</span> flag set, then throw an
+ <code>InvalidStateError</code> exception and abort these steps.</p></li>
+<!--REMOVE-TOPIC:Security-->
+
+ <li><p>If the <code>canvas</code> element's bitmap has either a horizontal dimension or a
+ vertical dimension equal to zero, then throw an <code>InvalidStateError</code> exception and
+ abort these steps.</p></li>
+
+ <li><p>Create a new <code>ImageBitmap</code> object.</p></li>
+
+ <li><p>Let the <code>ImageBitmap</code> object's bitmap data be a copy of the
+ <code>canvas</code> element's bitmap data.</p></li>
+
+ <li><p>Return, but continue running these steps asynchronously.</p></li>
+
+ <li><p><span>Queue a task</span> to invoke <var title="">callback</var> with the new
+ <code>ImageBitmap</code> object as its argument.</p></li>
+
+ </ol>
+
+ </dd>
+
+
+ <dt>If <var title="">image</var> is a <code>Blob</code> object
+
+ <dd>
+
+ <ol>
+
+ <li><p>If the <code>Blob</code> object has been neutered through the <code
+ title="dom-Blob-close">close</code> method, then throw an <code>InvalidStateError</code>
+ exception and abort these steps.</p></li>
+
+ <li><p>Return, but continue running these steps asynchronously.</p></li>
+
+ <li><p>Read the <code>Blob</code> object's data. If an <span title="file-error-read">error
+ occurs during reading of the object</span>, then <span>queue a task</span> to invoke <var
+ title="">callback</var> with null as the argument, and abort these steps.</p></li>
+
+ <li><p>Apply the <span title="Content-Type sniffing: image">image sniffing rules</span> to
+ determine the file format of the image data, with MIME type of the <code>Blob</code> (as given
+ by the <code>Blob</code> object's <code title="dom-Blob-type">type</code> attribute) giving the
+ official type.</p></li>
+
+ <li><p>If the image data is not in a supported file format (e.g. it's not actually an image at
+ all), or if the image data is corrupted in some fatal way such that the image dimensions cannot
+ be obtained, <span>queue a task</span> to invoke <var title="">callback</var> with null as the
+ argument, and abort these steps.</p></li>
+
+ <li><p>Create a new <code>ImageBitmap</code> object.</p></li>
+
+ <li><p>Let the <code>ImageBitmap</code> object's bitmap data be the image data read from the
+ <code>Blob</code> object. If this is an animated image, the <code>ImageBitmap</code> object's
+ bitmap data must only consist of the animation's poster frame, or, if there is no poster frame,
+ the first frame of the animation.</p></li>
+
+ <li><p><span>Queue a task</span> to invoke <var title="">callback</var> with the new
+ <code>ImageBitmap</code> object as its argument.</p></li>
+
+ </ol>
+
+ </dd>
+
+
+ <dt>If <var title="">image</var> is an <code>ImageData</code> object
+
+ <dd>
+
+ <ol>
+
+ <li><p>Create a new <code>ImageBitmap</code> object.</p></li>
+
+ <li><p>Let the <code>ImageBitmap</code> object's bitmap data be the image data given by the
+ <code>ImageData</code> object.</p></li>
+
+ <li><p>Return, but continue running these steps asynchronously.</p></li>
+
+ <li><p><span>Queue a task</span> to invoke <var title="">callback</var> with the new
+ <code>ImageBitmap</code> object as its argument.</p></li>
+
+ </ol>
+
+ </dd>
+
+ <dt>If <var title="">image</var> is a <code>CanvasRenderingContext2D</code> object
+
+ <dd>
+
+ <ol>
+
+<!--ADD-TOPIC:Security-->
+ <li><p>If the <code>CanvasRenderingContext2D</code> object's <span>scratch bitmap</span> does
+ not have its <span title="concept-canvas-origin-clean">origin-clean</span> flag set, then throw
+ an <code>InvalidStateError</code> exception and abort these steps.</p></li>
+<!--REMOVE-TOPIC:Security-->
+
+ <li><p>If the <code>CanvasRenderingContext2D</code> object's <span>scratch bitmap</span> has
+ either a horizontal dimension or a vertical dimension equal to zero, then throw an
+ <code>InvalidStateError</code> exception and abort these steps.</p></li>
+
+ <li><p>Create a new <code>ImageBitmap</code> object.</p></li>
+
+ <li><p>Let the <code>ImageBitmap</code> object's bitmap data be a copy of the
+ <code>CanvasRenderingContext2D</code> object's <span>scratch bitmap</span>.</p></li>
+
+ <li><p>Return, but continue running these steps asynchronously.</p></li>
+
+ <li><p><span>Queue a task</span> to invoke <var title="">callback</var> with the new
+ <code>ImageBitmap</code> object as its argument.</p></li>
+
+ </ol>
+
+ </dd>
+
+ </dl>
+
+ </div>
+
+
+<!--TOPIC:HTML-->
+
<h2 id="editing"><dfn>User interaction</dfn></h2>
@@ -97173,9 +98079,10 @@
href="#refsHTML">[HTML]</a></p>
<!--START complete-->
- <p>The DOM APIs (<code>Node</code> objects, <code>Document</code>
- objects, etc) are not available to workers in this version of this
- specification.</p>
+ <p>The DOM APIs — specifically, all the interfaces defind in the DOM Core specification
+ other than exceptions — must not be <span title="expose">exposed</span> if the
+ <span>JavaScript global environment</span> is a <span>worker environment</span>. <a
+ href="#hrefDOMCORE">[DOMCORE]</a></p>
<h4>Importing scripts and libraries</h4>
@@ -113199,8 +114106,8 @@
<td><i>see below</i>
</table>
- <p>The 'x<!---->xx-large' value is a non-CSS value used here to
- indicate a font size 50% larger than 'xx-large'.</p>
+ <p class="tablenote"><small>The 'x<!---->xx-large' value is a non-CSS value used here to
+ indicate a font size 50% larger than 'xx-large'.</small></p>
</li>
@@ -113944,10 +114851,11 @@
<code>video</code> elements are expected to be treated as replaced
elements.</p>
- <p>A <code>canvas</code> element that <span>represents</span>
- <span>embedded content</span> is expected to be treated as a
- replaced element. Other <code>canvas</code> elements are expected to
- be treated as ordinary elements in the rendering model.</p>
+ <p>A <code>canvas</code> element that <span>represents</span> <span>embedded content</span> is
+ expected to be treated as a replaced element; the contents of such elements are the element's
+ bitmap, if any, or else a transparent black bitmap with the same intrinsic dimensions as the
+ element. Other <code>canvas</code> elements are expected to be treated as ordinary elements in the
+ rendering model.</p>
<p>An <code>object</code> element that <span>represents</span> an
image, plugin, or <span>nested browsing context</span> is expected
@@ -120962,8 +121870,10 @@
</tr>
</table>
- <p>An asterisk (*) in a cell indicates that the actual rules are more complicated than indicated in the table above.</p>
+ <p class="tablenote"><small>An asterisk (*) in a cell indicates that the actual rules are more
+ complicated than indicated in the table above.</small></p>
+
<p>† Categories in the "Parents" column refer to parents that
list the given categories in their content model, not to elements
that themselves are in those categories. For example, the
@@ -122292,8 +123202,10 @@
<td> "<code title="attr-textarea-wrap-soft">soft</code>";
"<code title="attr-textarea-wrap-hard">hard</code>"
</table>
- <p>An asterisk (*) in a cell indicates that the actual rules are more complicated than indicated in the table above.</p>
+ <p class="tablenote"><small>An asterisk (*) in a cell indicates that the actual rules are more
+ complicated than indicated in the table above.</small></p>
+
<hr>
<table id="ix-event-handlers">
@@ -123492,7 +124404,7 @@
<dd><cite><a href="http://dev.w3.org/csswg/css3-color/">CSS Color Module Level 3</a></cite>, T. Çelik, C. Lilley, L. Baron. W3C.</dd>
<dt id="refsCSSFONTS">[CSSFONTS]</dt>
- <dd><cite><a href="http://www.w3.org/TR/css3-fonts/">CSS Fonts Module Level 3</a></cite>, J. Daggett. W3C.</dd>
+ <dd><cite><a href="http://dev.w3.org/csswg/css3-fonts/">CSS Fonts Module Level 3</a></cite>, J. Daggett. W3C.</dd>
<dt id="refsCSSIMAGES">[CSSIMAGES]</dt>
<dd><cite><a href="http://dev.w3.org/csswg/css4-images/">CSS Image Values and Replaced Content Module</a></cite>, E. Etemad, T. Atkins. W3C.</dd>
More information about the Commit-Watchers
mailing list