[html5] r811 - /

[whatwg at whatwg.org]

Author: ianh
Date: 2007-05-15 15:44:53 -0700 (Tue, 15 May 2007)
New Revision: 811

Modified:
   index
   source
Log:
[agow] (2) Define what happens when you set the width/height attributes on <canvas> better.

Modified: index
===================================================================
--- index	2007-05-15 02:36:51 UTC (rev 810)
+++ index	2007-05-15 22:44:53 UTC (rev 811)
@@ -15424,17 +15424,31 @@
 
   <p>The canvas must initially be fully transparent black.
 
-  <p>If the <code title=attr-canvas-width><a href="#width3">width</a></code>
-   and <code title=attr-canvas-height><a href="#height3">height</a></code>
-   attributes are dynamically modified, the bitmap and any associated
-   contexts must be cleared back to their initial state and reinitialised
-   with the newly specified coordinate space dimensions.
+  <p>Whenever the <code title=attr-canvas-width><a
+   href="#width3">width</a></code> and <code title=attr-canvas-height><a
+   href="#height3">height</a></code> attributes are set (whether to a new
+   value or to the previous value), the bitmap and any associated contexts
+   must be cleared back to their initial state and reinitialised with the
+   newly specified coordinate space dimensions.
 
   <p>The <dfn id=width4 title=dom-canvas-width><code>width</code></dfn> and
    <dfn id=height4 title=dom-canvas-height><code>height</code></dfn> DOM
    attributes must <a href="#reflect">reflect</a> the content attributes of
    the same name.
 
+  <div class=example>
+   <p>Only one square appears to be drawn in the following example:</p>
+
+   <pre>
+  // canvas is a reference to a <canvas> element
+  var context = canvas.getContext('2d');
+  context.fillRect(0,0,50,50);
+  canvas.setAttribute('width', '300'); // clears the canvas
+  context.fillRect(0,100,50,50);
+  canvas.width = canvas.width; // clears the canvas
+  context.fillRect(100,0,50,50); // only this square remains</pre>
+  </div>
+
   <p>To draw on the canvas, authors must first obtain a reference to a <dfn
    id=context0>context</dfn> using the <dfn id=getcontext
    title=dom-canvas-getContext><code>getContext</code></dfn> method of the

Modified: source
===================================================================
--- source	2007-05-15 02:36:51 UTC (rev 810)
+++ source	2007-05-15 22:44:53 UTC (rev 811)
@@ -13009,17 +13009,30 @@
 
   <p>The canvas must initially be fully transparent black.</p>
 
-  <p>If the <code title="attr-canvas-width">width</code> and <code
-  title="attr-canvas-height">height</code> attributes are dynamically
-  modified, the bitmap and any associated contexts must be cleared
-  back to their initial state and reinitialised with the newly
-  specified coordinate space dimensions.</p>
+  <p>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 reinitialised with the newly specified coordinate space
+  dimensions.</p>
 
   <p>The <dfn title="dom-canvas-width"><code>width</code></dfn> and
   <dfn title="dom-canvas-height"><code>height</code></dfn> DOM
   attributes must <span>reflect</span> the content attributes of the
   same name.</p>
 
+  <div class="example">
+   <p>Only one square appears to be drawn in the following example:</p>
+   <pre>
+  // canvas is a reference to a <canvas> element
+  var context = canvas.getContext('2d');
+  context.fillRect(0,0,50,50);
+  canvas.setAttribute('width', '300'); // clears the canvas
+  context.fillRect(0,100,50,50);
+  canvas.width = canvas.width; // clears the canvas
+  context.fillRect(100,0,50,50); // only this square remains</pre>
+  </div>
+
   <p>To draw on the canvas, authors must first obtain a reference to a
   <dfn>context</dfn> using the <dfn
   title="dom-canvas-getContext"><code>getContext</code></dfn> method