HTML Standard Tracker

Filter

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
@@ -13,23 +13,24 @@
  !
  !-->
 <!--START validation-->
 <pre class="idl">
  interface Screen { }; // CSSOM
  interface URL { }; // URL API
  interface Blob { }; // File API
  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
  interface DOMSettableTokenList { attribute any value; }; // DOM Core
  interface SVGMatrix { }; // SVG
 </pre>
 <!--DEFER snapshot complete-->
 <!--START complete--><!--START dev-html-->
 
    <!-- An advisory for those reading this source. -->
@@ -3167,29 +3168,31 @@ a.setAttribute('href', 'http://example.com/'); // change the content attribute d
     used in the definition of the <code>canvas</code> element's 2D
     API. <a href="#refsTYPEDARRAY">[TYPEDARRAY]</a></p>
 
    </dd>
 
 
    <dt>File API</dt>
 
    <dd>
 
-    <p>This specification uses the following interfaces defined in the
+    <p>This specification uses the following features defined in the
     File API specification: <a href="#refsFILEAPI">[FILEAPI]</a></p>
 
     <ul class="brief">
 
      <li><dfn><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
     API specification: <a
     href="#refsFILESYSTEMAPI">[FILESYSTEMAPI]</a></p>
 
     <ul class="brief">
 
      <li><dfn><code>FileCallback</code></dfn></li>
 
@@ -3284,20 +3287,24 @@ a.setAttribute('href', 'http://example.com/'); // change the content attribute d
 
     <p>Parts of the Fullscreen specification, in particular the
     <dfn>top layer</dfn> concept, are used to define the rendering of
     the <code>dialog</code> element. <a
     href="#refsFULLSCREEN">[FULLSCREEN]</a>
 
     <p>The term <dfn>CSS styling attribute</dfn> is defined in the
     <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>
 
 
 <!--TOPIC:Canvas-->
 
    <dt>SVG</dt>
 
    <dd>
 
     <p>The following interface is defined in the SVG specification: <a
@@ -3305,20 +3312,34 @@ a.setAttribute('href', 'http://example.com/'); // change the content attribute d
 
     <ul class="brief">
      <li><dfn><code>SVGMatrix</code></dfn>
     </ul>
 
     <!-- mention that the parser supports it? -->
 
    </dd>
 
 
+   <dt>WebGL</dt>
+
+   <dd>
+
+    <p>The following interface is defined in the WebGL specification: <a
+    href="#refsWEBGL">[WEBGL]</a></p>
+
+    <ul class="brief">
+     <li><dfn><code>WebGLRenderingContext</code></dfn>
+    </ul>
+
+   </dd>
+
+
 <!--TOPIC:HTML-->
 
    <!-- mention that the parser supports mathml? -->
 
 
 <!--TOPIC:Video Text Tracks-->
 
    <dt>WebVTT</dt>
 
    <dd>
@@ -6880,27 +6901,23 @@ is conforming depends on which specs apply, and leaves it at that. -->
    number.</p></li>
 
    <li><p>Return <var title="">result</var>.</p>
 
   </ol>
 
   </div>
 
   <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
   zero or more words (known as tokens) separated by one or more <span
   title="space character">space characters</span>, where words consist
   of any string of one or more characters, none of which are <span
   title="space character">space characters</span>.</p>
 
@@ -9914,20 +9931,21 @@ interface <dfn>Transferable</dfn> { };</pre>
   an object has been transferred, it cannot be transferred, or indeed
   used, again.)</p>
 
   </div>
 
   <p>The following <code>Transferable</code> types exist:</p>
 
   <ul class="brief">
    <li><code>MessagePort</code>
    <li><code>ArrayBuffer</code> <a href="#refsTYPEDARRAY">[TYPEDARRAY]</a>
+   <li><code>CanvasProxy</code>
   </ul>
 
 
   <div class="impl">
 
   <h4>Safe passing of structured data</h4>
 
   <p>When a user agent is required to obtain a <dfn>structured
   clone</dfn> of a value, optionally with a <i>transfer map</i>, it
   must run the following algorithm, which either returns a separate
@@ -10033,20 +10051,25 @@ interface <dfn>Transferable</dfn> { };</pre>
      equal to the corresponding attributes on <var
      title="">input</var>, and whose <code
      title="dom-imagedata-data">data</code> attribute has the value
      obtained from invoking the <span>internal structured cloning
      algorithm</span> recursively with the value of the <code
      title="dom-imagedata-data">data</code> attribute on <var
      title="">input</var> as the new "<var title="">input</var>"
      argument and <var title="">memory</var> as the new "<var
      title="">memory</var>" argument.</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>
 
      <dd><p>...</p></dd>
 
      <dt>If <var title="">input</var> is an <code>ArrayBufferView</code> object</dt>
 
      <dd><p>...</p></dd>
 -->
 
@@ -26271,21 +26294,24 @@ interface <dfn>HTMLImageElement</dfn> : <span>HTMLElement</span> {
 
   <p>An <code>img</code> element is initially <span
   title="img-none">unavailable</span>.</p>
 
   <p>When an <code>img</code> element is <span
   title="img-available">available</span>, it <span>provides a paint
   source</span> whose width is the image's intrinsic width, whose
   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
   whenever that element is created with a <code
   title="attr-img-src">src</code> attribute,
   a <code title="attr-img-srcset">srcset</code> attribute, or both.
   A user agent that obtains images immediately must also synchronously
   <span>update the image data</span> of an <code>img</code> element
   whenever that element has its
   <code title="attr-img-src">src</code>,
@@ -27227,22 +27253,22 @@ interface <dfn>HTMLImageElement</dfn> : <span>HTMLElement</span> {
   title="dom-img-naturalWidth"><code>naturalWidth</code></dfn> and
   <dfn title="dom-img-naturalHeight"><code>naturalHeight</code></dfn>
   must return the intrinsic width and height of the image, in CSS
   pixels, if the image is <i title="img-available">available</i>, or
   else 0. <a href="#refsCSS">[CSS]</a></p>
 
   <p>The IDL attribute <dfn
   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>
   <p>Otherwise, the attribute must return false.</p>
 
   <p class="note">The value of <code
   title="dom-img-complete">complete</code> can thus change while a
   <span title="concept-script">script</span> is executing.</p>
 
   <p>Three constructors are provided for creating
@@ -42269,529 +42295,683 @@ dictionary <dfn>TrackEventInit</dfn> : <span>EventInit</span> {
    <dt><span title="element-dfn-contexts">Contexts in which this element can be used</span>:</dt>
    <dd>Where <span>embedded content</span> is expected.</dd>
    <dt><span title="element-dfn-content-model">Content model</span>:</dt>
    <dd><span>Transparent</span>, but with no <span>interactive content</span> descendants except for <code>a</code> elements, <code>button</code> elements, <code>input</code> elements whose <code title="attr-input-type">type</code> attribute are in the <span title="attr-input-type-checkbox">Checkbox</span> or <span title="attr-input-type-radio">Radio Button</span> states, and <code>input</code> elements that are <span title="concept-button">buttons</span>.</dd> <!-- and maybe <select>, I guess? I've left it our for now, since I guess authors might make accessible selects if they're simple enough, and it's not obvious how to distinguish the simple ones from the complex ones... -->
    <dt><span title="element-dfn-attributes">Content attributes</span>:</dt>
    <dd><span>Global attributes</span></dd>
    <dd><code title="attr-canvas-width">width</code></dd>
    <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-->
 
   <p>The <code>canvas</code> element provides scripts with a resolution-dependent bitmap canvas,
   which can be used for rendering graphs, game graphics, art, or other visual images on the fly.</p>
 
   <p>Authors should not use the <code>canvas</code> element in a document when a more suitable
   element is available. For example, it is inappropriate to use a <code>canvas</code> element to
   render a page heading: if the desired presentation of the heading is graphically intense, it
   should be marked up using appropriate elements (typically <code>h1</code>) and then styled using
   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
   has been disabled, the <code>canvas</code> element <span>represents</span> its <span>fallback
   content</span> instead.</p>
 
   <!-- CANVAS-FOCUS-FALLBACK -->
   <p>When a <code>canvas</code> element <span>represents</span> <span>embedded content</span>, the
   user can still focus descendants of the <code>canvas</code> element (in the <span>fallback
   content</span>). When an element is focused, it is the target of keyboard interaction events (even
   though the element itself is not visible). This allows authors to make an interactive canvas
   keyboard-accessible: authors should have a one-to-one mapping of interactive regions to focusable
   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
   values that are <span title="valid non-negative integer">valid non-negative integers</span>. <span
   class="impl">The <span>rules for parsing non-negative integers</span> must be used to obtain their
   numeric values. If an attribute is missing, or if parsing its value returns an error, then the
   default value must be used instead.</span> The <code title="attr-canvas-width">width</code>
   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>
 
-  <div class="impl">
+  <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>
 
-  <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>
+  <div class="impl">
 
-  <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>
+  <hr>
 
-  <p>When the canvas is initialized, its bitmap must be cleared to transparent black.</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 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> bitmap can also have a <span>hit region list</span>, as described in the
+  <code>CanvasRenderingContext2D</code> section below.</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>
 
   <!--ADD-TOPIC:DOM APIs-->
   <dl class="domintro">
 
    <dt><var title="">context</var> = <var title="">canvas</var> . <code title="dom-canvas-getContext">getContext</code>(<var title="">contextId</var> [, ... ])</dt>
 
    <dd>
 
     <p>Returns an object that exposes an API for drawing on the canvas. The first argument specifies
-    the desired API. Subsequent arguments are handled by that API.</p>
+    the desired API, either "<code title="canvas-context-2d">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>
 
     <p>Returns false if calling <code title="dom-canvas-getContext">getContext()</code> with the
     same arguments would definitely return null, and true otherwise.</p>
 
     <p>This return value is not a guarantee that <code
     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
   invoked, must return false if calling <code title="dom-canvas-getContext">getContext()</code> on
   the same object and with the same arguments would definitely return null at this time, and true
   otherwise.</p>
 
-  <p>New context types may be registered in the <a
-  href="http://wiki.whatwg.org/wiki/CanvasContexts">WHATWG Wiki CanvasContexts page</a>. <a
-  href="#refsWHATWGWIKI">[WHATWGWIKI]</a></p>
-
-  <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>
-
-  <dl>
-
-   <dt>Keyword</dt>
+  <hr>
 
-   <dd><p>The value of <var title="">contextID</var> that will return the object for the new
-   API.</p></dd>
+  <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>
 
+  <ol>
 
-   <dt>Specification</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>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>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>Compatible with</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>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>
+   <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>
 
-  </dl>
+  </ol>
 
-  <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>
+  <hr>
 
   </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>
    <dt><var title="">url</var> = <var title="">canvas</var> . <code title="dom-canvas-toDataURLHD">toDataURLHD</code>( [ <var title="">type</var>, ... ] )</dt>
 
    <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>
 
    <dt><var title="">canvas</var> . <code title="dom-canvas-toBlob">toBlob</code>(<var title="">callback</var> [, <var title="">type</var>, ... ])</dt>
    <dt><var title="">canvas</var> . <code title="dom-canvas-toBlobHD">toBlobHD</code>(<var title="">callback</var> [, <var title="">type</var>, ... ])</dt>
 
    <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>
 
   </dl>
 
   <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>
-
-  <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 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>
-
-  <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>
+  <!--ADD-TOPIC:Workers-->
+  <h5>Proxying canvases to workers</h5>
 
-  <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>
+  <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>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>
+  <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>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>
+  <dl class="domintro">
 
-  </div>
+   <dt><var title="">canvasProxy</var> = <var title="">canvas</var> . <code title="dom-canvas-transferControlToProxy">transferControlToProxy</code>()</dt>
 
-  <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">
+    <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>
 
-  <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>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>
 
-  <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>
+   </dd>
 
-  </div>
-  <!--REMOVE-TOPIC:DOM APIs-->
+   <dt><var title="">canvasProxy</var> . <code title="dom-CanvasProxy-setContext">setContext</code>(<var title="">context</var>)</dt>
+
+   <dd>
 
+    <p>Sets the <code>CanvasProxy</code> object's <code>canvas</code> element's rendering context to
+    the given object.</p>
 
-  <div data-component="HTML Canvas 2D Context (editor: Ian Hickson)">
+    <p>Throws an <code>InvalidStateError</code> exception if the <code>CanvasProxy</code> has been
+    <span title="transfer a Transferable object">transfered</span>.</p>
 
-  <h5 id="2dcontext">The 2D context</h5>
+   </dd>
 
-  <!-- v2: we're on v5. suggestions for subsequent versions are marked v6, v7, v8. -->
+  </dl>
 
-  <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>
+  <hr>
 
-  <div class="impl">
+  <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>
+
+  <ol>
+
+   <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>
+
+   <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>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>
+   <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
 <!--
   // v7 we've also received requests for:
           attribute boolean <span title="dom-context-2d-forceHighQuality">forceHighQuality</span> // (default false)
   // when enabled, it would prevent the UA from falling back on lower-quality but faster rendering routines
   // useful e.g. for when an image manipulation app uses <canvas> both for UI previews and the actual work
 
 -->
@@ -42823,21 +43003,21 @@ dictionary <dfn>TrackEventInit</dfn> : <span>EventInit</span> {
   - nested layers
     - the ability to composite an entire set of drawing operations with one shadow all at once
       http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2008-August/015567.html
 
 -->
   // colors and styles (see also the <span>CanvasDrawingStyles</span> interface)
            attribute (DOMString or CanvasGradient or CanvasPattern) <span title="dom-context-2d-strokeStyle">strokeStyle</span>; // (default black)
            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
 -->
   // shadows
            attribute unrestricted double <span title="dom-context-2d-shadowOffsetX">shadowOffsetX</span>; // (default 0)
            attribute unrestricted double <span title="dom-context-2d-shadowOffsetY">shadowOffsetY</span>; // (default 0)
            attribute unrestricted double <span title="dom-context-2d-shadowBlur">shadowBlur</span>; // (default 0)
            attribute DOMString <span title="dom-context-2d-shadowColor">shadowColor</span>; // (default transparent black)
 
@@ -42865,23 +43045,23 @@ dictionary <dfn>TrackEventInit</dfn> : <span>EventInit</span> {
   boolean <span title="dom-context-2d-isPointInPath">isPointInPath</span>(<span>Path</span> path, unrestricted double x, unrestricted double y);
 
   // text (see also the <span>CanvasDrawingStyles</span> interface)
   void <span title="dom-context-2d-fillText">fillText</span>(DOMString text, unrestricted double x, unrestricted double y, optional unrestricted double maxWidth);
   void <span title="dom-context-2d-strokeText">strokeText</span>(DOMString text, unrestricted double x, unrestricted double y, optional unrestricted double maxWidth);<!-- v6DVT
   void <span title="dom-context-2d-fillVerticalText">fillVerticalText</span>(DOMString text, unrestricted double x, unrestricted double y, optional unrestricted double maxHeight);
   void <span title="dom-context-2d-strokeVerticalText">strokeVerticalText</span>(DOMString text, unrestricted double x, unrestricted double y, optional unrestricted double maxHeight); -->
   <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);
   void <span title="dom-context-2d-removeHitRegion">removeHitRegion</span>(<span>HitRegionOptions</span> options);
 
   // pixel manipulation
   <span>ImageData</span> <span title="dom-context-2d-createImageData">createImageData</span>(double sw, double sh);
   <span>ImageData</span> <span title="dom-context-2d-createImageData">createImageData</span>(<span>ImageData</span> imagedata);
   <span>ImageData</span> <span title="dom-context-2d-createImageDataHD">createImageDataHD</span>(double sw, double sh);
   <span>ImageData</span> <span title="dom-context-2d-getImageData">getImageData</span>(double sx, double sy, double sw, double sh);
@@ -42904,20 +43084,21 @@ interface <dfn>CanvasDrawingStyles</dfn> {
 
   // dashed lines
   void <span title="dom-context-2d-setLineDash">setLineDash</span>(sequence&lt;unrestricted double> segments); // default empty
   sequence&lt;unrestricted double> <span title="dom-context-2d-getLineDash">getLineDash</span>();
            attribute unrestricted double <span title="dom-context-2d-lineDashOffset">lineDashOffset</span>;
 
   // text
            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]
 interface <dfn>CanvasPathMethods</dfn> {
   // shared path API methods
   void <span title="dom-context-2d-closePath">closePath</span>();
   void <span title="dom-context-2d-moveTo">moveTo</span>(unrestricted double x, unrestricted double y);
   void <span title="dom-context-2d-lineTo">lineTo</span>(unrestricted double x, unrestricted double y);
   void <span title="dom-context-2d-quadraticCurveTo">quadraticCurveTo</span>(unrestricted double cpx, unrestricted double cpy, unrestricted double x, unrestricted double y);
   void <span title="dom-context-2d-bezierCurveTo">bezierCurveTo</span>(unrestricted double cp1x, unrestricted double cp1y, unrestricted double cp2x, unrestricted double cp2y, unrestricted double x, unrestricted double y);
@@ -42992,142 +43173,495 @@ interface <dfn>Path</dfn> {
 };
 <span>Path</span> implements <span>CanvasPathMethods</span>;</pre>
 
  <!-- ARC-ORDER note (see above):
       some demos rely on the precise order of the arc() and arcTo()
       methods, see https://bugzilla.mozilla.org/show_bug.cgi?id=623437
       for an example, and its duplicates for more -->
 
   <dl class="domintro">
 
+   <dt><var title="">context</var> = <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>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>
 
-  <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>
+   <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
    > naturally harmless places, e.g. having a function that scales by x then
    > translates by 1/x and wanting it to work when x=0 (which ought to draw
    > nothing, since anything it draws is zero pixels wide), and it's a bit
    > annoying to track down and fix those issues, so I'd probably like it if
    > they were harmless in canvas methods. Opera appears to silently not draw
    > anything if the transformation matrix is not finite, but Firefox throws
    > 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>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>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 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>
+  <dl>
 
-  <p class="note">Similar concerns exist with font-related properties;
-  the rules for those are described in detail in the relevant section
-  below.</p>
+   <dt>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>
 
-  </div>
+   <dd><p>The "computed value of the 'color' property" for the purposes of determining the computed
+   value of the <code title="">currentColor</code> keyword is 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>
 
+   <dt>In all other cases</dt>
 
-  <h6>Resolution</h6>
+   <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>
 
-  <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>
+  </dl>
 
-  <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>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>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">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>
 
-  <pre class="idl">partial interface <span>Screen</span> {
-  readonly attribute double <span title="dom-screen-canvasResolution">canvasResolution</span>;
-};</pre>
+  <p class="note">Similar concerns exist with font-related properties; the rules for those are
+  described in detail in the relevant section below.</p>
 
-  <dl class="domintro">
+  </div>
 
-   <dt><var title="">window</var> . <code title="dom-Window-screen">screen</code> . <code title="dom-screen-canvasResolution">canvasResolution</code></dt>
 
-   <dd>
+  <h6>Implementation notes</h6>
 
-    <p>Returns the resolution that has been, or will be, used for bitmaps during this <span title="concept-task">task</span>.</p>
+  <!--END dev-html--><p><i>This section is non-normative.</i></p><!--START dev-html-->
 
-   </dd>
+  <p>Although the way the specification is written it might sound like an implementation needs to
+  track up to four bitmaps per canvas or rendering context &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>
 
-  </dl>
+  <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>
 
-  <div class="impl">
+  <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>
 
-  <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>
+  <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>
 
-  </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>
    <li>The current <span>clipping region</span>.</li>
    <li>The current values of the following attributes: <code
    title="dom-context-2d-strokeStyle">strokeStyle</code>, <code
    title="dom-context-2d-fillStyle">fillStyle</code>, <code
    title="dom-context-2d-globalAlpha">globalAlpha</code>, <code
    title="dom-context-2d-lineWidth">lineWidth</code>, <code
    title="dom-context-2d-lineCap">lineCap</code>, <code
@@ -43135,29 +43669,29 @@ interface <dfn>Path</dfn> {
    title="dom-context-2d-miterLimit">miterLimit</code>, <code
    title="dom-context-2d-lineDashOffset">lineDashOffset</code>, <code
    title="dom-context-2d-shadowOffsetX">shadowOffsetX</code>, <code
    title="dom-context-2d-shadowOffsetY">shadowOffsetY</code>, <code
    title="dom-context-2d-shadowBlur">shadowBlur</code>, <code
    title="dom-context-2d-shadowColor">shadowColor</code>, <code
    title="dom-context-2d-globalCompositeOperation">globalCompositeOperation</code>, <code
    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">
 
    <dt><var title="">context</var> . <code title="dom-context-2d-save">save</code>()</dt>
 
    <dd>
 
     <p>Pushes the current state onto the stack.</p>
 
    </dd>
@@ -43167,29 +43701,30 @@ interface <dfn>Path</dfn> {
    <dd>
 
     <p>Pops the top state on the stack, restoring the context to that state.</p>
 
    </dd>
 
   </dl>
 
   <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.
 >
 > save(id)
 > restore(id)
 >
 > If id is not provided, then save() works as defined now. The same for
 > restore().
@@ -43224,33 +43759,31 @@ idea from Mihai:
     <p>Creates a new <code>DrawingStyle</code> object, optionally
     using a specific element for resolving relative keywords and sizes
     in font specifications.</p>
 
    </dd>
 
   </dl>
 
   <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>
 
 
   <h6>Line styles</h6>
 
   <dl class="domintro">
 
    <dt><var title="">context</var> . <code title="dom-context-2d-lineWidth">lineWidth</code> [ = <var title="">value</var> ]</dt>
    <dt><var title="">styles</var> . <code title="dom-context-2d-lineWidth">lineWidth</code> [ = <var title="">value</var> ]</dt>
@@ -43822,75 +44355,89 @@ hairline width with transform. ack Shaun Morris.  -->
 
    </dd>
 
    <dt><var title="">context</var> . <code title="dom-context-2d-textAlign">textAlign</code> [ = <var title="">value</var> ]</dt>
    <dt><var title="">styles</var> . <code title="dom-context-2d-textAlign">textAlign</code> [ = <var title="">value</var> ]</dt>
 
    <dd>
 
     <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>
 
    <dt><var title="">context</var> . <code title="dom-context-2d-textBaseline">textBaseline</code> [ = <var title="">value</var> ]</dt>
    <dt><var title="">styles</var> . <code title="dom-context-2d-textBaseline">textBaseline</code> [ = <var title="">value</var> ]</dt>
 
    <dd>
 
     <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'
   property of CSS (but without supporting property-independent style
   sheet syntax like 'inherit'), and the resulting font must be
   assigned to the context, with the 'line-height' component forced to
   'normal', with the 'font-size' component converted to CSS pixels,
   and with system fonts being computed to explicit values. If the new
   value is syntactically incorrect (including using
   property-independent style sheet syntax like 'inherit' or
   'initial'), then it must be ignored, without assigning a new font
   value. <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
   make the font look very ugly.</p>
 
   <p>On getting, the <code title="dom-context-2d-font">font</code>
   attribute must return the <span title="serializing a CSS
   value">serialized form</span> of the current font of the context
   (with no 'line-height' component). <a
   href="#refsCSSOM">[CSSOM]</a></p>
@@ -43903,77 +44450,98 @@ hairline width with transform. ack Shaun Morris.  -->
 
    <p>...the expression <code title="">context.font</code> would
    evaluate to the string "<code
    title="">italic&nbsp;12px&nbsp;&quot;Unknown&nbsp;Font&quot;,&nbsp;sans-serif</code>". The
    "400" font-weight doesn't appear because that is the default
    value. The line-height doesn't appear because it is forced to
    "normal", the default value.</p>
 
   </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
-
-
-  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>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>
+
+  <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>
 
   <dl>
 
    <dt><dfn title="dom-context-2d-textBaseline-top"><code>top</code></dfn>
    <dd>The top of the em square</dd>
 
    <dt><dfn title="dom-context-2d-textBaseline-hanging"><code>hanging</code></dfn>
@@ -43986,28 +44554,52 @@ hairline width with transform. ack Shaun Morris.  -->
    <dd>The alphabetic baseline</dd>
 
    <dt><dfn title="dom-context-2d-textBaseline-ideographic"><code>ideographic</code></dfn>
    <dd>The ideographic baseline</dd>
 
    <dt><dfn title="dom-context-2d-textBaseline-bottom"><code>bottom</code></dfn>
    <dd>The bottom of the em square</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,
-  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
    than or equal to zero, return an empty array.</p></li>
 
    <li><p>Replace all the <span title="space character">space
    characters</span> in <var title="">text</var> with U+0020 SPACE
    characters.</p></li>
 
@@ -44015,41 +44607,58 @@ hairline width with transform. ack Shaun Morris.  -->
    title="">target</var>, as given by that object's <code
    title="dom-context-2d-font">font</code> attribute.</p></li>
 
    <li>
 
     <p>Apply the appropriate step from the following list to determine
     the value of <var title="">direction</var>:</p>
 
     <dl class="switch">
 
-     <dt>If the <var title="">target</var> object's <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>
 
    <li><p>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 'font'
    property of the inline box set to <var title="">font</var>, the
    'direction' property of the inline box set to <var
@@ -44075,53 +44684,53 @@ hairline width with transform. ack Shaun Morris.  -->
     variables are determined by the <code
     title="dom-context-2d-textAlign">textAlign</code> and <code
     title="dom-context-2d-textBaseline">textBaseline</code> values as
     follows:</p>
 
     <p>Horizontal position:</p>
 
     <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
      position be the left edge of the inline box, and let <var
      title="">physical alignment</var> be <i>left</i>.</dd>
 
 
      <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
      position be the right edge of the inline box, and let <var
      title="">physical alignment</var> be <i>right</i>.</dd>
 
 
      <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
      inline box, and let <var title="">physical alignment</var> be
      <i title="">center</i>.</dd>
 
     </dl>
 
     <p>Vertical position:</p>
 
@@ -44188,23 +44797,22 @@ hairline width with transform. ack Shaun Morris.  -->
 
     <p>Let <var title="">result</var> be an array constructed by
     iterating over each glyph in the inline box from left to right (if
     any), adding to the array, for each glyph, the shape of the glyph
     as it is in the inline box, positioned on a coordinate space using
     CSS pixels with its origin is at the <var title="">anchor
     point</var>.</p>
 
    </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>
 
 
   <h6>Building paths</h6>
 
   <p>Each object implementing the <code>CanvasPathMethods</code>
   interface has a <span title="concept-path">path</span>. A <dfn
   title="concept-path">path</dfn> has a list of zero or more subpaths.
   Each subpath consists of a list of one or more points, connected by
@@ -45248,21 +45856,20 @@ try {
    <li><p>Create a new subpath in the <code>Path</code> object with
    (<var title="">x<sub title="">final</sub></var>, <var
    title="">y<sub title="">final</sub></var>) as the only point in the
    subpath.</p></li>
 
   </ol>
 
   </div>
 
 
-
   <h6><dfn title="dom-context-2d-transformation">Transformations</dfn></h6>
 
   <p>Each <code>CanvasRenderingContext2D</code> object has a
   <i>current transformation matrix</i>, as well as methods (described
   in this section) to manipulate it. When a
   <code>CanvasRenderingContext2D</code> object is created, its
   transformation matrix must be initialized to the identity
   transform.</p>
 
   <p>The transformation matrix is applied to coordinates when creating
@@ -45445,20 +46052,108 @@ try {
   <var title="">f</var>)</code> method with the same arguments.</p>
 
   <p>The <dfn
   title="dom-context-2d-resetTransform"><code>resetTransform()</code></dfn>
   method must reset the current transform to the identity matrix.</p>
 
   </div>
 
 
 
+  <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">
 
    <dt><var title="">context</var> . <code title="dom-context-2d-fillStyle">fillStyle</code> [ = <var title="">value</var> ]</dt>
 
    <dd>
 
     <p>Returns the current style used for filling shapes.</p>
@@ -45517,30 +46212,34 @@ try {
   -->
 
   <p>The <dfn
   title="dom-context-2d-fillStyle"><code>fillStyle</code></dfn>
   attribute represents the color or style to use inside shapes, and
   the <dfn
   title="dom-context-2d-strokeStyle"><code>strokeStyle</code></dfn>
   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
   <span>live</span>, meaning that changes made to the object after the
   assignment do affect subsequent stroking or filling of shapes.</p>
 
   <p>On getting, if the value is a color, then the <span
   title="serialization of a color">serialization of the color</span>
   must be returned. Otherwise, if it is not a color but a
   <code>CanvasGradient</code> or <code>CanvasPattern</code>, then the
@@ -45566,23 +46265,22 @@ try {
   the level of precision necessary for the alpha value, when reparsed, to be interpreted as the same
   alpha value.</p> <!-- if people complain this is unreadable, expand it into a <dl> with two nested
   <ol>s -->
 
   <p>When the context is created, the <code
   title="dom-context-2d-fillStyle">fillStyle</code> and <code
   title="dom-context-2d-strokeStyle">strokeStyle</code> attributes
   must initially have the string value <code
   title="">#000000</code>.</p>
 
-  <p>When the value is a color, it must not be affected by the
-  transformation matrix when used to draw on the canvas.</p> <!-- so
-  singular matrices don't affect solid color fillStyles -->
+  <p>When the value is a color, it must not be affected by the transformation matrix when used to
+  draw on bitmaps.</p> <!-- so singular matrices don't affect solid color fillStyles -->
 
   </div>
 
   <hr>
 
   <p>There are two types of gradients, linear gradients and radial
   gradients, both represented by objects implementing the opaque
   <code>CanvasGradient</code> interface.</p>
 
   <p id="interpolation">Once a gradient has been created (see below),
@@ -45742,21 +46440,21 @@ try {
    <li><p>For all values of <var title="">&omega;</var> where <span
    title="">r(<var title="">&omega;</var>)&nbsp;&gt;&nbsp;0</span>,
    starting with the value of <var title="">&omega;</var> nearest to
    positive infinity and ending with the value of <var
    title="">&omega;</var> nearest to negative infinity, draw the
    circumference of the circle with radius <span title="">r(<var
    title="">&omega;</var>)</span> at position (<span title="">x(<var
    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>
 
   <p class="note">This effectively creates a cone, touched by the two
   circles defined in the creation of the gradient, with the part of
   the cone before the start circle (0.0) using the color of the first
   offset, the part of the cone after the end circle (1.0) using the
   color of the last offset, and areas outside the cone untouched by
   the gradient (transparent black).</p>
@@ -45808,161 +46506,126 @@ try {
     <p>Sets the transformation matrix that will be used when rendering
     the pattern during a fill or stroke painting operation.</p>
 
    </dd>
 
   </dl>
 
   <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>
-
-  <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 -->
-
-  <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 -->
-
-  <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 -->
+  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>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>
+  <ol>
 
-  <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>Let <var title="">image</var> be the first argument and <var title="">repetition</var> be
+   the second argument.</p></li>
+
+   <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>
+
+   <li><p>If <var title="">repetition</var> is the empty string, let it be "<code
+   title="">repeat</code>".</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>
 
   <ol>
 
    <li><p>Create an infinite transparent black bitmap.</p></li>
 
    <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>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>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
     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>
 
    <li><p>Transform the resulting bitmap according to the pattern's
    transformation matrix.</p></li>
 
    <li><p>Transform the resulting bitmap again, this time according to
    the <span title="dom-context-2d-transformation">current
    transformation matrix</span>.</p></li>
 
    <li><p>Replace any part of the image outside the area in which the
    pattern is to be rendered with transparent black.</p></li>
 
    <li><p>The resulting bitmap is what is to be rendered, with the
    same origin and same scale.</p></li>
 
   </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
   transformation matrix is singular, the resulting style must be
   transparent black (otherwise the gradient or pattern would be
   collapsed to a point or line, leaving the other pixels undefined).
   Linear gradients and solid colors always define all points even with
   singular tranformation matrices.</p>
 
   </div>
 
 
 
 
-  <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
   title="">x</var> and <var title="">y</var> coordinates of the top
   left of the rectangle, and the second two give the width <var
   title="">w</var> and height <var title="">h</var> of the rectangle,
   respectively.</p>
 
   <div class="impl">
 
@@ -45987,59 +46650,59 @@ try {
   operators</span>.</p>
 
   </div>
 
   <dl class="domintro">
 
    <dt><var title="">context</var> . <code title="dom-context-2d-clearRect">clearRect</code>(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</dt>
 
    <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>
 
    <dt><var title="">context</var> . <code title="dom-context-2d-fillRect">fillRect</code>(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</dt>
 
    <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>
 
    <dt><var title="">context</var> . <code title="dom-context-2d-strokeRect">strokeRect</code>(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</dt>
 
    <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>
 
   </dl>
 
   <div class="impl">
 
   <p>The <dfn title="dom-context-2d-clearRect"><code>clearRect(<var
   title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var
   title="">h</var>)</code></dfn> method must run the following steps:</p>
 
   <ol>
 
-   <li><p>Let <var title="">pixels</var> be the set of pixels in the
-   specified rectangle that also intersect the current <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>
 
   <p class="note">If either height or width are zero, this method has
   no effect, since the set of pixels would be empty.</p>
 
   <p>The <dfn title="dom-context-2d-fillRect"><code>fillRect(<var
   title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var
   title="">h</var>)</code></dfn> method must paint the specified
   rectangular area using the <code
@@ -46077,21 +46740,21 @@ try {
   title="">w</var></span>, <span title=""><var
   title="">y</var></span>+<var title="">h</var>), and (<span
   title=""><var title="">x</var></span>, <span title=""><var
   title="">y</var>+<var title="">h</var></span>), connected to each
   other in that order by straight lines.</p>
 
   </div>
 
 
 
-  <h6>Drawing text to the canvas</h6>
+  <h6>Drawing text to the bitmap</h6>
 
   <dl class="domintro">
 
    <dt><var title="">context</var> . <code title="dom-context-2d-fillText">fillText</code>(<var title="">text</var>, <var title="">x</var>, <var title="">y</var> [, <var title="">maxWidth</var> ] )</dt>
    <dt><var title="">context</var> . <code title="dom-context-2d-strokeText">strokeText</code>(<var title="">text</var>, <var title="">x</var>, <var title="">y</var> [, <var title="">maxWidth</var> ] )</dt>
 
    <dd>
 
     <p>Fills or strokes (respectively) the given text at the given
     position. If a maximum width is provided, the text will be scaled
@@ -46123,22 +46786,22 @@ try {
    <dd>
 
     <p>Returns the measurement described below.</p>
 
    </dd>
 
   </dl>
 
   <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
   <dfn
   title="dom-context-2d-strokeText"><code>strokeText()</code></dfn>
   methods take three or four arguments, <var title="">text</var>, <var
   title="">x</var>, <var title="">y</var>, and optionally <var
   title="">maxWidth</var>, and render the given <var
   title="">text</var> at the given (<var title="">x</var>, <var
   title="">y</var>) coordinates ensuring that the text isn't wider
@@ -46184,30 +46847,40 @@ try {
 
     <p>These shapes 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 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
 enough to actual specify vertical text rendering (how long have we
 been waiting now?)
 
 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>
   and <dfn
   title="dom-context-2d-strokeVerticalText"><code>strokeVerticalText()</code></dfn>
   methods take three or four arguments, <var title="">text</var>, <var
   title="">x</var>, <var title="">y</var>, and optionally <var
   title="">maxHeight</var>, and render the given <var
   title="">text</var> as vertical text at the given (<var
   title="">x</var>, <var title="">y</var>) coordinates ensuring that
@@ -46341,34 +47014,25 @@ HAVE REJIGGED HOW TEXT WORKS IN v5
     <span>clipping region</span>, and <span
     title="dom-context-2d-globalCompositeOperation">global composition
     operators</span>.</p>
 
    </li>
 
   </ol>
 
 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
   origin">same</span> as that of the <code>Document</code> object that
   owns the <code>canvas</code> element (even if "using a font" means
   just checking if that font has a particular glyph in it before
   falling back to another font), then the method must throw a
   <code>SecurityError</code> exception.
 <!--REMOVE-TOPIC:Security-->
   Otherwise, it must return the new <code>TextMetrics</code> object.
@@ -46670,24 +47334,39 @@ v6DVT (also check for '- -' bits in the part above) -->
     <span title="dom-context-2d-globalCompositeOperation">global
     composition operators</span>, but <em>should</em> be subject to
     the <span>clipping region</span>. (The effect of transformations
     is described above and varies based on which path is being
     used.)</p>
 
    </li>
 
    <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>
 
   <p>The <dfn
   title="dom-context-2d-drawCustomFocusRing"><code>drawCustomFocusRing(<var
   title="">element</var>)</code></dfn> method, when invoked, must run
   the following steps:</p>
 
@@ -46712,54 +47391,74 @@ v6DVT (also check for '- -' bits in the part above) -->
     <span title="dom-context-2d-globalCompositeOperation">global
     composition operators</span>, but <em>should</em> be subject to
     the <span>clipping region</span>. (The effect of transformations
     is described above and varies based on which path is being
     used.)</p>
 
    </li>
 
    <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>
 
    <li><p>Let <var title="">the specified rectangle</var> be the
    rectangle of the bounding box of the intended path.</p></li>
 
    <li><p>Let <var title="">notional child</var> be a hypothetical
    element that is a rendered child of the <code>canvas</code> element
    whose dimensions are those of <var title="">the specified
    rectangle</var>.</p></li>
 
    <li><p><span title="scroll an element into view">Scroll <var
    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>
 
   <p class="note" id="inform">"Inform the user", as used in this
   section, could mean calling a system accessibility API, which would
   notify assistive technologies such as magnification tools. To
   properly drive magnification based on a focus change, a system
   accessibility API driving a screen magnifier needs the bounds for
   the newly focused object. The methods above are intended to enable
   this by allowing the user agent to report the bounding box of the
@@ -46889,40 +47588,36 @@ v6DVT (also check for '- -' bits in the part above) -->
  document.getElementsByTagName('canvas')[0].addEventListener('change', redraw, true);
  document.getElementsByTagName('canvas')[0].addEventListener('click', processClick, false);
  redraw();
 &lt;/script></pre>
 <!-- http://software.hixie.ch/utilities/js/live-dom-viewer/saved/340 -->
 
   </div>
 
 
 
-  <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">
    <li><code title="">drawImage(<var title="">image</var>, <var title="">dx</var>, <var title="">dy</var>)</code>
    <li><code title="">drawImage(<var title="">image</var>, <var title="">dx</var>, <var title="">dy</var>, <var title="">dw</var>, <var title="">dh</var>)</code>
    <li><code title="">drawImage(<var title="">image</var>, <var title="">sx</var>, <var title="">sy</var>, <var title="">sw</var>, <var title="">sh</var>, <var title="">dx</var>, <var title="">dy</var>, <var title="">dw</var>, <var title="">dh</var>)</code>
   </ul>
 
-  <!-- v3: drawImage() of an ImageData object might make sense (when resizing as well as filtering) - ack Charles Pritchard -->
-
-  <p>Each of those three can take either an
-  <code>HTMLImageElement</code>, an <code>HTMLCanvasElement</code>, or
-  an <code>HTMLVideoElement</code> for the <var title="">image</var>
-  argument.</p>
+  </div>
 
   <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>
    <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>, <var title="">dw</var>, <var title="">dh</var>)</dt>
    <dt><var title="">context</var> . <code title="dom-context-2d-drawImage">drawImage</code>(<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>)</dt>
 
    <dd>
 
     <p>Draws the given image onto the canvas. The arguments are
@@ -46937,184 +47632,139 @@ v6DVT (also check for '- -' bits in the part above) -->
     the one of the source rectangle dimensions is zero, throws an
     <code>IndexSizeError</code> exception. If the image isn't yet
     fully decoded, then nothing is drawn.</p>
 
    </dd>
 
   </dl>
 
   <div class="impl">
 
-  <p>If not specified, the <var title="">dw</var> and <var
-  title="">dh</var> arguments must default to the values of <var
-  title="">sw</var> and <var title="">sh</var>, interpreted such that
-  one CSS pixel in the image is treated as one unit in the canvas
-  coordinate space. If the <var title="">sx</var>, <var
-  title="">sy</var>, <var title="">sw</var>, and <var
-  title="">sh</var> arguments are omitted, they must default to 0, 0,
-  the image's intrinsic width in image pixels, and the image's
-  intrinsic height in image pixels, respectively. If the image has no
-  intrinsic dimensions, the <i>concrete object size</i> must be used
-  instead, as determined using the CSS "<a
-  href="http://dev.w3.org/csswg/css3-images/#default-sizing">Concrete
-  Object Size Resolution</a>" algorithm, with the <i>specified
-  size</i> having neither a definite width nor height, nor any
-  additional contraints, the object's intrinsic properties being those
-  of the <var title="">image</var> argument, and the <i>default object
-  size</i> being the size of the <code>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 -->
-
-  <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 -->
-
-  <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 -->
-
-  <p>The source rectangle is the rectangle whose corners are the four
-  points (<var title="">sx</var>, <var title="">sy</var>), (<span title=""><var
-  title="">sx</var>+<var title="">sw</var></span>, <var
-  title="">sy</var>), (<span title=""><var title="">sx</var>+<var
-  title="">sw</var></span>, <span title=""><var title="">sy</var>+<var
-  title="">sh</var></span>), (<var title="">sx</var>, <span title=""><var
-  title="">sy</var>+<var title="">sh</var></span>).</p>
-
-  <p>If 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>
+  <ol>
 
-  <p>The destination rectangle is the rectangle whose corners are the
-  four points (<var title="">dx</var>, <var title="">dy</var>),
-  (<span title=""><var title="">dx</var>+<var title="">dw</var></span>, <var
-  title="">dy</var>), (<span title=""><var title="">dx</var>+<var
-  title="">dw</var></span>, <span title=""><var title="">dy</var>+<var
-  title="">dh</var></span>), (<var title="">dx</var>, <span title=""><var
-  title="">dy</var>+<var title="">dh</var></span>).</p>
-
-  <p>When the source rectangle is outside the source image, it must be
-  clipped to the source image, and the destination rectangle must be
-  clipped in the same proportion.</p>
-
-  <p>When <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>
+   <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>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>
-
-  <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 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 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>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>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>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>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>
+
+    <p>Establish the source and destination rectangles as follows:</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 source rectangle is the rectangle whose corners are the four points (<var
+    title="">sx</var>, <var title="">sy</var>), (<span title=""><var title="">sx</var>+<var
+    title="">sw</var></span>, <var title="">sy</var>), (<span title=""><var title="">sx</var>+<var
+    title="">sw</var></span>, <span title=""><var title="">sy</var>+<var title="">sh</var></span>),
+    (<var title="">sx</var>, <span title=""><var title="">sy</var>+<var
+    title="">sh</var></span>).</p>
+
+    <p>The destination rectangle is the rectangle whose corners are the four points (<var
+    title="">dx</var>, <var title="">dy</var>), (<span title=""><var title="">dx</var>+<var
+    title="">dw</var></span>, <var title="">dy</var>), (<span title=""><var title="">dx</var>+<var
+    title="">dw</var></span>, <span title=""><var title="">dy</var>+<var title="">dh</var></span>),
+    (<var title="">dx</var>, <span title=""><var title="">dy</var>+<var
+    title="">dh</var></span>).</p>
+
+    <p>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>
+
+   </li>
+
+   <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>
+
+   <li>
+
+    <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>The image data must be processed in the original direction, even if the dimensions given are
+    negative. <!-- note: that last sentence has several times been needed to correct people who
+    suggested that 5,5,-2,-2 was different than 3,3,2,2 --></p>
+
+    <p>If the <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 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 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
    from others.</p></li>
 
    <li><p>Optionally, a reference to another region that acts as the
    <dfn title="hit region's parent">parent</dfn> for this
    one.</p></li>
 
    <li><p>A count of regions that have this one as their <span
@@ -47127,25 +47777,25 @@ v6DVT (also check for '- -' bits in the part above) -->
    of the <span>hit region's parent</span>, if any, or of the
    <code>canvas</code> element, if not, is to be used
    instead.</p></li>
 
    <li>
 
     <p>Optionally, either a <span title="hit region's
     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
     following:</p>
 
     <ul class="brief">
 
      <li><p>Optionally, a <dfn title="hit region's
      label">label</dfn>.</p>
 
@@ -47159,22 +47809,21 @@ v6DVT (also check for '- -' bits in the part above) -->
    </li>
 
   </ul>
 
   <dl class="domintro">
 
    <dt><var title="">context</var> . <code title="dom-context-2d-addHitRegion">addHitRegion</code>(<var title="">options</var>)</dt>
 
    <dd>
 
-    <p>Adds a hit region to the canvas bitmap. The argument is an
-    object with the following members:</p>
+    <p>Adds a hit region to the bitmap. The argument is an object with the following members:</p>
 
     <dl>
 
      <dt><code title="dom-HitRegionOptions-path">path</code> (default null)
 
      <dd>A <code>Path</code> object that describes the pixels that
      form part of the region. If this member is not provided or is set
      to null, the <span>current default path</span> is used
      instead.</dd>
 <!--
@@ -47227,28 +47876,28 @@ v6DVT (also check for '- -' bits in the part above) -->
 
     <p>Hit regions can be used for a variety of purposes:</p>
 
     <ul>
 
      <li>With an ID, they can make hit detection easier by having the
      user agent check which region the mouse is over and include the
      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>
 
    </dd>
 
    <dt><var title="">context</var> . <code title="dom-context-2d-removeHitRegion">removeHitRegion</code>(<var title="">options</var>)</dt>
 
    <dd>
 
@@ -47269,60 +47918,50 @@ v6DVT (also check for '- -' bits in the part above) -->
   <div class="impl">
 
   <p>A <span>hit region</span> <var title="">A</var> is an
   <dfn>ancestor region</dfn> of a <span>hit region</span> <var
   title="">B</var> if <var title="">B</var> has a <span title="hit
   region's parent">parent</span> and its <span title="hit region's
   parent">parent</span> is either <var title="">A</var> or another
   <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>
 
    <li><p>If <var title="">ID</var> is null, 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 ID">ID</span>
    is a <span>case-sensitive</span> match for <var title="">ID</var>,
    then return that <span>hit region</span> and abort these
    steps.</p></li>
 
    <li><p>Otherwise, return nothing.</p></li>
 
   </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
    control">control</span> is <var title="">control</var>, then
    return that <span>hit region</span> and abort these
    steps.</p></li>
 
    <li><p>Otherwise, return nothing.</p></li>
 
   </ol>
@@ -47361,100 +48000,92 @@ v6DVT (also check for '- -' bits in the part above) -->
    title="hit region's cursor specification">cursor
    specification</span> other than "<code title="">inherit</code>",
    then return that <span>hit region's cursor specification</span>
    and abort these steps.</p></li>
 
    <li><p>If <var title="">region</var> has a <span title="hit
    region's parent">parent</span>, then let <var
    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
    pixels">set of pixels</span> contains <var title="">pixel</var>,
    then return that <span>hit region</span> and abort these
    steps.</p></li>
 
    <li><p>Otherwise, return nothing.</p></li>
 
   </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
    empty <span title="hit region's set of pixels">set of
    pixels</span> and a zero <span title="hit region's child
    count">child count</span>, if any. If there is no such <span>hit
    region</span>, abort these steps.</p></li>
 
    <li><p>If <var title="">victim</var> has a <span title="hit
    region's parent">parent</span>, then decrement that <span>hit
    region's child count</span> by one.</p></li>
 
    <li><p>Remove <var title="">victim</var> from <var
    title="">list</var>.</p></li>
 
    <li><p>Jump back to the step labeled <i>loop</i>.</p></li>
 
   </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>
 
   <p>When the <dfn
   title="dom-context-2d-addHitRegion"><code>addHitRegion()</code></dfn>
   method is invoked, the user agent must run the following steps:</p>
 
   <ol>
 
    <li><p>Let <var title="">arguments</var> be the dictionary object
@@ -47487,35 +48118,35 @@ v6DVT (also check for '- -' bits in the part above) -->
 
    <li><p>If the <var title="">arguments</var> object's <code
    title="dom-HitRegionOptions-id">id</code> member is the
    empty string, let it be null instead.</p></li>
 
    <li><p>If the <var title="">arguments</var> object's <code
    title="dom-HitRegionOptions-id">id</code> member is not null, then
    let <var title="">previous region for this ID</var> be <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>
 
    <li><p>If the <var title="">arguments</var> object's <code
    title="dom-HitRegionOptions-parent">parent</code> member is the
    empty string, let it be null instead.</p></li>
 
    <li><p>If the <var title="">arguments</var> object's <code
    title="dom-HitRegionOptions-parent">parent</code> member is not
    null, then let <var title="">parent region</var> be <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>
 
    <li><p>If the <var title="">arguments</var> object's <code
    title="dom-HitRegionOptions-label">label</code> member is the
    empty string, let it be null instead.</p></li>
 
    <li>
 
@@ -47707,85 +48338,75 @@ v6DVT (also check for '- -' bits in the part above) -->
     title="dom-context-2d-addHitRegion">addHitRegion()</code>
     call.</p>
 
    </li>
 
    <li><p>If the <var title="">arguments</var> object's <code
    title="dom-HitRegionOptions-control">control</code> member is not
    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>
 
    <!-- the parent region can't have a control, because no region with
    a control can be a parent - we check for that above. Thus, it is
    safe to remove the previous region for the control without worrying
    that our parent is going to be affected.
 
    It's also safe to remove the previous region with this ID and all
    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
-   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 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
+   <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>
 
   <p>When the <dfn
   title="dom-context-2d-removeHitRegion"><code>removeHitRegion()</code></dfn>
   method is invoked, the user agent must run the following steps:</p>
 
   <ol>
 
-   <li><p>Let <var title="">region</var> be <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>
 
   </div>
 
   <hr>
 
   <p>The <code>MouseEvent</code> interface is extended to support hit
   regions:</p>
 
@@ -47813,112 +48434,106 @@ partial dictionary <span>MouseEventInit</span> {
 
   <div class="impl">
 
   <p>The <dfn title="dom-MouseEvent-region"><code>region</code></dfn>
   attribute on <code>MouseEvent</code> objects must return the value
   it was initialized to. When the object is created, this attribute
   must be initialized to null. It represents the <span>hit region's
   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>
 
    <li><p>If the pointing device is not indicating a pixel on the
    <code>canvas</code>, act as normal and abort these steps.</p></li>
 
    <li><p>Let <var title="">pixel</var> be the pixel indicated by the
    pointing device.</p></li>
 
    <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>
 
    <li><p>Let <var title="">id</var> be the <var
    title="">region</var>'s <span title="hit region's ID">ID</span>, if
    any.</p></li>
 
    <li><p>If there is an <var title="">id</var>, then initialize the
    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
    <code>canvas</code> element.</p></li>
 
    <li><p>Continue dispatching the event, but with the updated event
    object and target as given in the above steps.</p></li>
 
   </ol>
 
   <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>
 
   <p>User agents are encouraged to make use of the information present
   in a <code>canvas</code> element's <span>hit region list</span> to
   improve the accessibility of <code>canvas</code> elements.</p>
 
   <p>Each <span>hit region</span> should be handled in a fashion
   equivalent to a node in a virtual DOM tree rooted at the
   <code>canvas</code> element. The hierarchy of this virtual DOM tree
   must match the hierarchy of the <span title="hit region">hit
   regions</span>, as described by the <span title="hit region's
   parent">parent</span> of each region. Regions without a <span
   title="hit region's parent">parent</span> must be treated as
   children of the <code>canvas</code> element for the purpose of this
   virtual DOM tree. For each node in such a DOM tree, the <span>hit
   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>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>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'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 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
   <span>hit region's bounding circumference</span>, and then read the
   <span>hit region's label</span> to the user. Similarly, a desktop
   user agent with a virtual accessibility focus separate from the
   keyboard input focus could allow the user to navigate through the
   hit regions, using the virtual DOM tree described above to enable
   hierarchical navigation. When an interactive control inside the
   <code>canvas</code> element is focused, if the control has a
@@ -47962,37 +48577,37 @@ partial dictionary <span>MouseEventInit</span> {
     pixels in the canvas bitmap that correspond to each coordinate
     space unit. All the pixels in the returned object are transparent
     black.</p>
 
    </dd>
 
    <dt><var title="">imagedata</var> = <var title="">context</var> . <code title="dom-context-2d-getImageData">getImageData</code>(<var title="">sx</var>, <var title="">sy</var>, <var title="">sw</var>, <var title="">sh</var>)</dt>
 
    <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>
 
     <p>The data will be returned with one pixel of image data for each
     coordinate space unit on the canvas (ignoring transforms).</p>
 
    </dd>
 
    <dt><var title="">imagedata</var> = <var title="">context</var> . <code title="dom-context-2d-getImageDataHD">getImageDataHD</code>(<var title="">sx</var>, <var title="">sy</var>, <var title="">sw</var>, <var title="">sh</var>)</dt>
 
    <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>
 
     <p>The data will be returned at the same resolution as the canvas
     bitmap.</p>
 
    </dd>
 
    <dt><var title="">imagedata</var> . <code title="dom-imagedata-width">width</code></dt>
@@ -48014,48 +48629,45 @@ partial dictionary <span>MouseEventInit</span> {
    <dd>
 
     <p>Returns the one-dimensional array containing the data in RGBA order, as integers in the range 0 to 255.</p>
 
    </dd>
 
    <dt><var title="">context</var> . <code title="dom-context-2d-putImageData">putImageData</code>(<var title="">imagedata</var>, <var title="">dx</var>, <var title="">dy</var> [, <var title="">dirtyX</var>, <var title="">dirtyY</var>, <var title="">dirtyWidth</var>, <var title="">dirtyHeight</var> ])</dt>
 
    <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
     title="dom-context-2d-globalCompositeOperation">globalCompositeOperation</code>
     attributes, as well as the shadow attributes, are ignored for the
     purposes of this method call; pixels in the canvas are replaced
     wholesale, with no composition, alpha blending, no shadows,
     etc.</p>
 
     <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>
 
    <dt><var title="">context</var> . <code title="dom-context-2d-putImageDataHD">putImageDataHD</code>(<var title="">imagedata</var>, <var title="">dx</var>, <var title="">dy</var> [, <var title="">dirtyX</var>, <var title="">dirtyY</var>, <var title="">dirtyWidth</var>, <var title="">dirtyHeight</var> ])</dt>
 
    <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
     title="dom-context-2d-globalCompositeOperation">globalCompositeOperation</code>
     attributes, as well as the shadow attributes, are ignored for the
     purposes of this method call; pixels in the canvas are replaced
     wholesale, with no composition, alpha blending, no shadows,
     etc.</p>
 
     <p>Throws a <code>NotSupportedError</code> exception if any of the
@@ -48080,84 +48692,68 @@ partial dictionary <span>MouseEventInit</span> {
   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> and a height equal to
   the absolute magnitude of <var title="">sh</var>. When invoked with
   a single <var title="">imagedata</var> argument, it must return a
   new <code>ImageData</code> object representing a rectangle with the
   same dimensions as the <code>ImageData</code> object passed as the
   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>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>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,
   <!--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>
   attribute is set to the number of pixels per row in the image data,
   their <dfn title="dom-imagedata-height"><code>height</code></dfn>
   attribute is set to the number of rows in the image data, and their
   <dfn title="dom-imagedata-data"><code>data</code></dfn> attribute is
   initialized to a <code>Uint8ClampedArray</code> object. The
   <code>Uint8ClampedArray</code> object must use a <span>Canvas Pixel
   <code>ArrayBuffer</code></span> for its storage, and must have a
@@ -48170,28 +48766,25 @@ partial dictionary <span>MouseEventInit</span> {
   <p>A <dfn>Canvas Pixel <code>ArrayBuffer</code></dfn> is an
   <code>ArrayBuffer</code> that whose data is represented in
   left-to-right order, row by row top to bottom, starting with the top
   left, with each pixel's red, green, blue, and alpha components being
   given in that order for each pixel. Each component of each pixel
   represented in this array must be in the range 0..255, representing
   the 8 bit value for that component. The components must be assigned
   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
   must be assumed to have the values 0, 0, the <code
   title="dom-imagedata-width">width</code> member of the <var
   title="">imagedata</var> structure, and the <code
   title="dom-imagedata-height">height</code> member of the <var
   title="">imagedata</var> structure, respectively.</p>
 
   <p>When invoked, these methods must act as follows:</p>
@@ -48245,87 +48838,76 @@ partial dictionary <span>MouseEventInit</span> {
     title="">dirtyHeight</var> be the value of that <code
     title="dom-imagedata-height">height</code> attribute, minus the
     value of <var title="">dirtyY</var>.</p>
 
    </li>
 
    <li>
 
     <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>
 
    <li>
 
     <p>Run the appropriate steps from the following list:</p>
 
     <dl class="switch">
 
      <dt>If the method was <code title="dom-context-2d-putImageData">putImageData()</code></dt>
 
      <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>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>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 <span>scratch bitmap</span> does not have exactly one device pixel per
+      coordinate space unit.</p>
 
      </dd>
 
      <dt>If the method was <code title="dom-context-2d-putImageDataHD">putImageDataHD()</code></dt>
 
      <dd>
 
       <ol>
 
        <li>
 
-        <p>Let <var title="">dx<sub>device</sub></var> be the x-coordinate
-        of the device pixel in the canvas bitmap corresponding to the <var
-        title="">dx</var> coordinate in the canvas coordinate space.</p>
+        <p>Let <var title="">dx<sub>device</sub></var> be the x-coordinate of the device pixel in
+        the <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>
 
      </dd>
 
     </dl>
 
    </li>
 
   </ol>
@@ -48504,42 +49086,36 @@ function AddCloud(data, x, y) { ... }</pre>
   <div class="impl">
 
   <p>All drawing operations are affected by the global compositing
   attributes, <code
   title="dom-context-2d-globalAlpha">globalAlpha</code> and <code
   title="dom-context-2d-globalCompositeOperation">globalCompositeOperation</code>.</p>
 
   <!-- 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>
 
   <dl>
 
    <dt><dfn title="gcop-source-atop"><code>source-atop</code></dfn></dt>
 
    <dd><var title="">A</var> atop <var title="">B</var>. <span class="note">Display the
    source image wherever both images are opaque. Display the
    destination image wherever the destination image is opaque but the
@@ -48872,38 +49448,38 @@ function AddCloud(data, x, y) { ... }</pre>
    subjected to the current transformation matrix.</p></li>
 
    <li><p><span>When shadows are drawn</span>, render the shadow from
    image <var title="">A</var>, using the current shadow styles,
    creating image <var title="">B</var>.</p></li>
 
    <li><p><span>When shadows are drawn</span>, multiply the alpha
    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-->
 
   <p>When a canvas is interactive, authors should include focusable
   elements in the element's fallback content corresponding to each
   focusable part of the canvas, as in the <a
   href="#drawCustomFocusRingExample">example above</a>.</p>
 
   <p>To indicate which focusable part of the canvas is currently
@@ -49011,30 +49587,73 @@ function AddCloud(data, x, y) { ... }</pre>
    context.fillRect(0, 0, context.canvas.width, context.canvas.height);
  }
  setInterval(blank, 40);
 
 &lt;/script></pre>
 
   </div>
 
   <!--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>
 
   <p class="note">Thus, in the 2D context, colors used to draw shapes onto the canvas will exactly
   match colors obtained through the <code
   title="dom-context-2d-getImageDataHD">getImageDataHD()</code> method.</p>
 
   <p>The <code title="dom-canvas-toDataURL">toDataURL()</code> and <code
   title="dom-canvas-toDataURLHD">toDataURLHD()</code> methods must not include color space
   information in the resources they return. Where the output format allows it, the color of pixels
@@ -49055,108 +49674,123 @@ function AddCloud(data, x, y) { ... }</pre>
   correction.</p>
 
   <p class="note">Thus, in the 2D context, calling the <code
   title="dom-context-2d-drawImage">drawImage()</code> method to render the output of the <code
   title="dom-canvas-toDataURLHD">toDataURLHD()</code> method to the canvas, given the appropriate
   dimensions, has no visible effect.</p>
 
   </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>
-
-   <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 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>HTMLCanvasElement</code> whose <i>origin-clean</i> flag was
-   false when the pattern was created.</p></li>
-
-   <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>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-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>
-
-   <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. -->
+  <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>
 
-  </ul>
+  <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>
+
+  </div>
+
+  <table id="canvas-serialization-arguments">
+   <caption>Arguments for serialization methods</caption>
+   <thead>
+    <tr> <th> Type <th> Other arguments <th> Reference
+   <tbody>
+    <tr>
+     <td> <code>image/jpeg</code>
+     <td> The second argument<span class="impl">, if it</span> is a number in the range 0.0 to 1.0
+     inclusive<span class="impl">, must be</span> treated as the desired quality level. <span
+     class="impl">If it is not a number or is outside that range, the user agent must use its
+     default value, as if the argument had been omitted.</span>
+     <td> <a href="#refsJPEG">[JPEG]</a>
+  </table>
+
+  <div class="impl">
+
+  <p>For the purposes of these rules, an argument is considered to be a number if it is converted to
+  an IDL double value by the rules for handling arguments of type <code title="">any</code> in the
+  Web IDL specification. <a href="#refsWEBIDL">[WEBIDL]</a></p>
+
+  <p>Other arguments must be ignored and must not cause the user agent to throw an exception. A
+  future version of this specification will probably define other parameters to be passed to these
+  methods to allow authors to more carefully control compression settings, image metadata, etc.</p>
+
+  </div>
+
+
+<!--ADD-TOPIC:Security-->
+  <div class="impl">
+
+  <h5>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
   title="dom-context-2d-getImageData">getImageData()</code>, and <code
   title="dom-context-2d-getImageDataHD">getImageDataHD()</code>
   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-->
 
 
 <!--TOPIC:HTML-->
   <h4>The <dfn><code>map</code></dfn> element</h4>
 
   <dl class="element">
    <dt><span title="element-dfn-categories">Categories</span>:</dt>
@@ -79285,23 +79919,22 @@ END:VCARD</pre>
      <td>name that exists and is an ancestor that is not top
      <td>specified ancestor
      <td>specified ancestor
      <td>none
      <td>none
      <td>none
      <td>none
 
   </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">
 
   <hr>
 
   <p>An algorithm is <dfn>allowed to show a pop-up</dfn> if, in the
   <span title="concept-task">task</span> in which the algorithm is
   running, either:</p>
 
   <ul class="brief">
@@ -87731,32 +88364,30 @@ interface <dfn>NavigatorOnLine</dfn> {
   release the <span>storage mutex</span>.</p>
 
 
   <h5>Processing model</h5>
 
   <p>An <span>event loop</span> must continually run through the
   following steps for as long as it exists:</p>
 
   <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>
 
    <li><p><span>Perform a microtask checkpoint</span>.</p></li>
 
    <li><p><span>Provide a stable state</span>.</p></li>
 
    <li><p>If necessary, update the rendering or user interface of any
    <code>Document</code> or <span>browsing context</span> to reflect
    the current state.</p></li>
@@ -87791,31 +88422,31 @@ interface <dfn>NavigatorOnLine</dfn> {
 
    </li>
 
    <li><p>Let the <span>running mutation observers</span> flag be
    false.</p></li>
 
   </ol>
 
   <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>
 
   <p>When an algorithm says to <dfn>spin the event loop</dfn> until
   a condition <var title="">goal</var> is met, the user agent must run
   the following steps:</p>
 
   <ol>
 
    <li><p>Let <var title="">task source</var> be the <span>task
@@ -90709,21 +91340,21 @@ interface <dfn>NavigatorContentUtils</dfn> {
 
   </ol>
 
   </div>
 
 
 
 <!--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>
 
   <p><strong>Hijacking all Web usage.</strong> User agents should not
   allow schemes that are key to its normal operation, such as
   <code>http</code> or <code>https</code>, to be rerouted through
   third-party sites. This would allow a user's activities to be
   trivially tracked, and would allow user information, even in secure
   connections, to be collected.</p>
@@ -90799,21 +91430,21 @@ interface <dfn>NavigatorContentUtils</dfn> {
   prompting the user for credentials themselves (a practice that would
   require the user to know whether to trust the third-party handler, a
   decision many users are unable to make or even understand).</p>
 
   </div>
 <!--REMOVE-TOPIC:Security-->
 
 
   <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-->
 
   <p>A simple implementation of this feature for a desktop Web browser
   might work as follows.</p>
 
   <p>The <code
   title="dom-navigator-registerContentHandler">registerContentHandler()</code>
   method could display a modal dialog box:</p>
 
@@ -91059,23 +91690,298 @@ interface <dfn>NavigatorStorageUtils</dfn> {
 
     <li><p>If the user's default search engine (as determined by the
     user agent) is one of the search engines in <var title="">search
     engines</var>, then return 2 and abort these steps.</p></li>
 
     <li><p>Return 1.</p></li>
 
    </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>
 
 
   <h3>The <dfn title="attr-hidden"><code>hidden</code></dfn> attribute</h3>
 
   <p>All <span>HTML elements</span> may have the <code
   title="attr-hidden">hidden</code> content attribute set. The <code
   title="attr-hidden">hidden</code> attribute is a <span>boolean
   attribute</span>. When specified on an element, it indicates that
@@ -97166,23 +98072,24 @@ interface <dfn>WorkerUtils</dfn> {
 };
 <span>WorkerUtils</span> implements <span>WindowTimers</span>;
 <span>WorkerUtils</span> implements <span>WindowBase64</span>;</pre>
 
   <!--END complete-->
   <p>The <code>WindowTimers</code> and <code>WindowBase64</code>
   interfaces are defined in the HTML specification. <a
   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>
 
   <p>When a script invokes the <dfn
   title="dom-WorkerGlobalScope-importScripts"><code>importScripts(<var
   title="">urls</var>)</code></dfn> method on a
   <code>WorkerGlobalScope</code> object, the user agent must run the
   following steps:</p>
 
@@ -113192,22 +114099,22 @@ br[clear=all i], br[clear=both i] { clear: both; }</pre>
       <tr>
        <td>6
        <td>xx-large
        <td>
       <tr>
        <td>7
        <td>x<!---->xx-large
        <td><i>see below</i>
     </table>
 
-    <p>The 'x<!---->xx-large' value is a non-CSS value used here to
-    indicate a font size 50% larger than 'xx-large'.</p>
+    <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>
 
   </ol>
 
 
   <h4>Bidirectional text</h4>
 
   <pre class="css">@namespace url(http://www.w3.org/1999/xhtml);
 
@@ -113937,24 +114844,25 @@ fieldset {
 
 
   <h3>Replaced elements</h3>
 
   <h4>Embedded content</h4>
 
   <p>The <code>embed</code>, <code>iframe</code>, and
   <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
   to be treated as a replaced element. Other <code>object</code>
   elements are expected to be treated as ordinary elements in the
   rendering model.</p>
 
   <p>An <code>applet</code> element that <span>represents</span> a
   <span>plugin</span> is expected to be treated as a replaced
   element. Other <code>applet</code> elements are expected to be
@@ -120955,21 +121863,23 @@ if (s = prompt('What is your name?')) {
      <td>Line breaking opportunity</td>
      <td><span title="Flow content">flow</span>;
          <span title="Phrasing content">phrasing</span></td>
      <td><span title="Phrasing content">phrasing</span></td>
      <td>empty</td>
      <td><span title="global attributes">globals</span></td>
      <td><code>HTMLElement</code></td>
     </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
   <code>a</code> element's "Parents" column says "phrasing", so any
   element whose content model contains the "phrasing" category could
   be a parent of an <code>a</code> element. Since the "flow" category
   includes all the "phrasing" elements, that means the
   <code>address</code> element could be a parent to an <code>a</code>
   element.</p>
@@ -122285,21 +123195,23 @@ if (s = prompt('What is your name?')) {
           <code title="attr-dim-width">video</code>
      <td> Horizontal dimension
      <td> <span>Valid non-negative integer</span>
     <tr>
      <th> <code title="">wrap</code>
      <td> <code title="attr-textarea-wrap">textarea</code>
      <td> How the value of the form control is to be wrapped for <span>form submission</span>
      <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">
    <caption>List of event handler content attributes</caption>
    <thead>
     <tr>
      <th> Attribute
      <th> Element(s)
      <th> Description
@@ -123485,21 +124397,21 @@ if (s = prompt('What is your name?')) {
    <dt id="refsCSSANIMATIONS">[CSSANIMATIONS]</dt>
    <dd>(Non-normative) <cite><a href="http://dev.w3.org/csswg/css3-animations/">CSS Animations</a></cite>, D. Jackson, D. Hyatt, C. Marrin, S. Galineau, L. Baron. W3C.</dd>
 
    <dt id="refsCSSATTR">[CSSATTR]</dt>
    <dd><cite><a href="http://dev.w3.org/csswg/css-style-attr/">CSS Styling Attribute Syntax</a></cite>, T. &Ccedil;elik, E. Etemad. W3C.</dd>
 
    <dt id="refsCSSCOLOR">[CSSCOLOR]</dt>
    <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>
 
    <dt id="refsCSSOM">[CSSOM]</dt>
    <dd><cite><a href="http://dev.w3.org/csswg/cssom/">Cascading Style Sheets Object Model (CSSOM)</a></cite>, A. van Kesteren. W3C.</dd>
 
    <dt id="refsCSSOMVIEW">[CSSOMVIEW]</dt>
    <dd><cite><a href="http://dev.w3.org/csswg/cssom-view/">CSSOM View Module</a></cite>, A. van Kesteren. W3C.</dd>
 

|