HTML Standard Tracker

Diff (omit for latest revision)
Filter

Short URL: http://html5.org/r/7509

File a bug

SVNBugCommentTime (UTC)
7509[Authors] [Gecko] [Internet Explorer] [Opera] [Webkit] First draft of a way to do canvas in workers.2012-11-16 20:26
Index: source
===================================================================
--- source	(revision 7508)
+++ source	(revision 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 &lt;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&#x2021; <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&#x2020;
+     <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>&#x2020; 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>&#x2021; 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>&lt;!DOCTYPE HTML>
+&lt;title>Clock&lt;/title>
+&lt;canvas>&lt;/canvas> <!-- defaults to 300x150 -->
+&lt;script>
+  var canvas = document.getElementsByTagName('canvas')[0];
+  var proxy = canvas.transferControlToProxy());
+  var worker = new Worker('clock.js');
+  worker.postMessage(proxy, [proxy]);
+&lt;/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 &#x231B;.</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 &#x231B;.)</p></li>
+
+   <li><p>&#x231B; <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 &lt;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 &mdash; 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 &mdash; 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 &mdash; 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 &mdash; 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 &#x0906; 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 &#x00C1;, &#x00FF;, &#x0066;, and &#x03A9; are anchored, the ideographic baseline is where glyphs like &#x79C1; and &#x9054; 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 &lt;color&gt;
-  value">parsed as CSS &lt;color&gt; 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 &lt;color&gt; 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
+  &lt;color&gt; value">parsed as CSS &lt;color&gt; 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
+  &lt;color&gt; 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="">&omega;</var>)</span>, <span title="">y(<var
    title="">&omega;</var>)</span>), with the color at <var
    title="">&omega;</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 "&#x0058;&#x0058;&#x0058;" 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>&nbsp;&le;&nbsp;<var
-       title="">x</var>&nbsp;&lt;&nbsp;<span title=""><var
-       title="">dirtyX</var>+<var title="">dirtyWidth</var></span></span>
-       and <span title=""><var title="">dirtyY</var>&nbsp;&le;&nbsp;<var
-       title="">y</var>&nbsp;&lt;&nbsp;<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>&nbsp;&le;&nbsp;<var title="">x</var>&nbsp;&lt;&nbsp;<span
+       title=""><var title="">dirtyX</var>+<var title="">dirtyWidth</var></span></span> and <span
+       title=""><var title="">dirtyY</var>&nbsp;&le;&nbsp;<var title="">y</var>&nbsp;&lt;&nbsp;<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>&dagger; This case is only possible if the <code
-  title="attr-iframe-sandbox">sandbox</code> attribute also allows
-  scripts.</small></p>
+  <p class="tablenote"><small>&dagger; 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 &#x231B;.</p>
+  <p class="note">Steps in <span title="synchronous section">synchronous sections</span> are marked
+  with &#x231B;.</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 &mdash; specifically, all the interfaces defind in the DOM Core specification
+  other than exceptions &mdash; 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>&dagger; 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. &Ccedil;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>

|