[agow] (2) Define what happens when you set the width/height attribut…

…es on <canvas> better.

git-svn-id: http://svn.whatwg.org/webapps@811 340c8d12-0b0e-0410-8428-c7bf67bfef74

index

@@ -15424,17 +15424,31 @@ brighter. A &lt;b>rat&lt;/b> scurries past the corner wall.&lt;/p></pre>
 
   <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 &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>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

source

@@ -13009,17 +13009,30 @@ brighter. A &lt;b>rat&lt;/b> scurries past the corner wall.&lt;/p></pre>
 
   <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 &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>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