hixie: <canvas> example. (whatwg r3810)

hixie: <canvas> example. (whatwg r3810)

http://dev.w3.org/cvsweb/html5/spec/Overview.html?r1=1.2978&r2=1.2979&f=h
http://html5.org/tools/web-apps-tracker?from=3809&to=3810

===================================================================
RCS file: /sources/public/html5/spec/Overview.html,v
retrieving revision 1.2978
retrieving revision 1.2979
diff -u -d -r1.2978 -r1.2979
--- Overview.html 11 Sep 2009 09:32:13 -0000 1.2978
+++ Overview.html 11 Sep 2009 09:51:29 -0000 1.2979
@@ -584,7 +584,8 @@
          <li><a href="#text"><span class="secno">4.8.11.1.9 </span>Text</a></li>
          <li><a href="#images"><span class="secno">4.8.11.1.10 </span>Images</a></li>
          <li><a href="#pixel-manipulation"><span class="secno">4.8.11.1.11 </span>Pixel manipulation</a></li>
-         <li><a href="#drawing-model"><span class="secno">4.8.11.1.12 </span>Drawing model</a></ol></li>
+         <li><a href="#drawing-model"><span class="secno">4.8.11.1.12 </span>Drawing model</a></li>
+         <li><a href="#examples"><span class="secno">4.8.11.1.13 </span>Examples</a></ol></li>
        <li><a href="#color-spaces-and-color-correction"><span class="secno">4.8.11.2 </span>Color spaces and color correction</a></li>
        <li><a href="#security-with-canvas-elements"><span class="secno">4.8.11.3 </span>Security with <code>canvas</code> elements</a></ol></li>
      <li><a href="#the-map-element"><span class="secno">4.8.12 </span>The <code>map</code> element</a></li>
@@ -741,13 +742,13 @@
      <li><a href="#general"><span class="secno">5.4.1 </span>General</a></li>
      <li><a href="#vcard"><span class="secno">5.4.2 </span>vCard</a>
       <ol>
-       <li><a href="#examples"><span class="secno">5.4.2.1 </span>Examples</a></ol></li>
+       <li><a href="#examples-0"><span class="secno">5.4.2.1 </span>Examples</a></ol></li>
      <li><a href="#vevent"><span class="secno">5.4.3 </span>vEvent</a>
       <ol>
-       <li><a href="#examples-0"><span class="secno">5.4.3.1 </span>Examples</a></ol></li>
+       <li><a href="#examples-1"><span class="secno">5.4.3.1 </span>Examples</a></ol></li>
      <li><a href="#licensing-works"><span class="secno">5.4.4 </span>Licensing works</a>
       <ol>
-       <li><a href="#examples-1"><span class="secno">5.4.4.1 </span>Examples</a></ol></ol></li>
+       <li><a href="#examples-2"><span class="secno">5.4.4.1 </span>Examples</a></ol></ol></li>
    <li><a href="#converting-html-to-other-formats"><span class="secno">5.5 </span>Converting HTML to other formats</a>
     <ol>
      <li><a href="#json"><span class="secno">5.5.1 </span>JSON</a></li>
@@ -23630,7 +23631,49 @@
    over the current canvas bitmap using the current composition
    operator.</li>
 
-  </ol></div><div class="impl">
+  </ol></div><h6 id="examples"><span class="secno">4.8.11.1.13 </span>Examples</h6><p><i>This section is non-normative.</i><p>Here is an example of a script that uses canvas to draw pretty
+  glowing lines.</p>
+
+  &lt;pre&gt;&lt;canvas width="800" height="450"&gt;&lt;/canvas&gt;
+&lt;script&gt;
+
+ var context = document.getElementsByTagName('canvas')[0].getContext('2d');
+
+ var lastX = context.canvas.width * Math.random();
+ var lastY = context.canvas.height * Math.random();
+ var hue = 0;
+ function line() {
+   context.save();
+   context.translate(context.canvas.width/2, context.canvas.height/2);
+   context.scale(0.9, 0.9);
+   context.translate(-context.canvas.width/2, -context.canvas.height/2);
+   context.beginPath();
+   context.lineWidth = 5 + Math.random() * 10;
+   context.moveTo(lastX, lastY);
+   lastX = context.canvas.width * Math.random();
+   lastY = context.canvas.height * Math.random();
+   context.bezierCurveTo(context.canvas.width * Math.random(),
+                         context.canvas.height * Math.random(),
+                         context.canvas.width * Math.random(),
+                         context.canvas.height * Math.random(),
+                         lastX, lastY);
+
+   hue = hue + 10 * Math.random();
+   context.strokeStyle = 'hsl(' + hue + ', 50%, 50%)';
+   context.shadowColor = 'white';
+   context.shadowBlur = 10;
+   context.stroke();
+   context.restore();
+ }
+ setInterval(line, 50);
+
+ function blank() {
+   context.fillStyle = 'rgba(0,0,0,0.1)';
+   context.fillRect(0, 0, context.canvas.width, context.canvas.height);
+ }
+ setInterval(blank, 40);
+
+&lt;/script&gt;<div class="impl">
 
   <h5 id="color-spaces-and-color-correction"><span class="secno">4.8.11.2 </span>Color spaces and color correction</h5>
 
@@ -39869,7 +39912,7 @@
     <a href="#url">URL</a>s are specified.</p>
    <dd>
 
-  </dl><h5 id="examples"><span class="secno">5.4.2.1 </span>Examples</h5><div class="example">
+  </dl><h5 id="examples-0"><span class="secno">5.4.2.1 </span>Examples</h5><div class="example">
 
    <p>Here is a long example <code title="md-vcard"><a href="#md-vcard">vcard</a></code> for a
    fictional character called "Jack Bauer":</p>
@@ -40455,7 +40498,7 @@
 
     </ul></li>
 
-  </ol><h5 id="examples-0"><span class="secno">5.4.3.1 </span>Examples</h5><!-- get more from http://www.ietf.org/rfc/rfc2445.txt --><div class="example">
+  </ol><h5 id="examples-1"><span class="secno">5.4.3.1 </span>Examples</h5><!-- get more from http://www.ietf.org/rfc/rfc2445.txt --><div class="example">
 
    <p>Here is an example of a page that uses the <code title="md-vevent"><a href="#md-vevent">vevent</a></code> vocabulary to mark up an event:</p>
 
@@ -40580,7 +40623,7 @@
    </dd>
 
   </dl><p>In addition, exactly one property with the name <code title="md-about"><a href="#md-about">about</a></code> must be present within each <a href="#concept-item" title="concept-item">item</a> with the type <code title="md-work"><a href="#md-work">work</a></code>, giving the <a href="#url">URL</a> of the
-  work.<h5 id="examples-1"><span class="secno">5.4.4.1 </span>Examples</h5><div class="example">
+  work.<h5 id="examples-2"><span class="secno">5.4.4.1 </span>Examples</h5><div class="example">
 
    <p>This example shows an embedded image entitled <cite>My
    Pond</cite>, licensed under the Creative Commons Attribution-Share

Received on Friday, 11 September 2009 09:52:32 UTC