HTML Standard Tracker

Filter

File a bug

SVNBugCommentTime (UTC)
3810<canvas> example.2009-09-11 09:56
@@ -29317,20 +29317,69 @@ function AddCloud(data, x, y) { ... }</pre>
 
    <li><p>Composite <var title="">A</var> within the clipping region
    over the current canvas bitmap using the current composition
    operator.</p></li>
 
   </ol>
 
   </div>
 
 
+  <h6>Examples</h6>
+
+  <p><i>This section is non-normative.</i></p>
+
+  <p>Here is an example of a script that uses canvas to draw pretty
+  glowing lines.</p>
+
+  &lt;pre>&lt;canvas width="800" height="450">&lt;/canvas>
+&lt;script>
+
+ 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></pre>
+
+
 
   <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
   <code title="dom-context-2d-drawImage">drawImage()</code> method

|