[html5] r814 - /

[whatwg at whatwg.org]

Author: ianh
Date: 2007-05-15 16:59:45 -0700 (Tue, 15 May 2007)
New Revision: 814

Modified:
   index
   source
Log:
[ea] (2) Add an example of creating ImageData objects

Modified: index
===================================================================
--- index	2007-05-15 23:01:05 UTC (rev 813)
+++ index	2007-05-15 23:59:45 UTC (rev 814)
@@ -16710,6 +16710,53 @@
    title=dom-context-2d-putImageData><a
    href="#putimagedata">putImageData()</a></code> methods.
 
+  <div class=example>
+   <p>The data returned by <code title=dom-context-2d-getImageData><a
+    href="#getimagedata">getImageData()</a></code> is at the resolution of
+    the canvas backing store, which is likely to not be one device pixel to
+    each CSS pixel if the display used is a high resolution display. Thus,
+    while one could create an <code><a href="#imagedata">ImageData</a></code>
+    object, one would net necessarily know what resolution the canvas
+    expected (how many pixels the canvas wants to paint over one coordinate
+    space unit pixel).</p>
+
+   <p>In the following example, the script first obtains the size of the
+    canvas backing store, and then generates a few new <code><a
+    href="#imagedata">ImageData</a></code> objects which can be used.</p>
+
+   <pre>
+  // canvas is a reference to a <canvas> element
+  // (note: this example uses JavaScript 1.7 features)
+  var context = canvas.getContext('2d');
+  var backingStore = context.getImageData(0, 0, canvas.width, canvas.height);
+  var actualWidth = backingStore.width;
+  var actualHeight = backingStore.height;
+
+  function CreateImageData(w, h) {
+    return {
+      height: h,
+      width: w,
+      data: [i for (i in function (n) { for (let i = 0; i < n; i += 1) yield 0 }(w*h*4)) ]
+    };
+  }
+
+  // create some plasma
+  var plasma = CreateImageData(actualWidth, actualHeight);
+  FillPlasma(plasma, 'green'); // green plasma
+
+  // create a cloud
+  var could = CreateImageData(actualWidth, actualHeight);
+  FillCloud(cloud, actualWidth/2, actualHeight/2); // put a cloud in the middle
+
+  // paint them on top of each other
+  context.putImageData(plasma, 0, 0);
+  context.putImageData(cloud, 0, 0);
+
+  function FillPlasma(data) { ... }
+  function FillCload(data, x, y) { ... }
+</pre>
+  </div>
+
   <h6 id=drawing><span class=secno>3.14.11.1.11. </span>Drawing model</h6>
 
   <p>When a shape or image is painted, user agents must follow these steps,

Modified: source
===================================================================
--- source	2007-05-15 23:01:05 UTC (rev 813)
+++ source	2007-05-15 23:59:45 UTC (rev 814)
@@ -14328,8 +14328,56 @@
   title="dom-context-2d-putImageData">putImageData()</code>
   methods.</p>
 
+  <div class="example">
 
+   <p>The data returned by <code
+   title="dom-context-2d-getImageData">getImageData()</code> is at the
+   resolution of the canvas backing store, which is likely to not be
+   one device pixel to each CSS pixel if the display used is a high
+   resolution display. Thus, while one could create an
+   <code>ImageData</code> object, one would net necessarily know what
+   resolution the canvas expected (how many pixels the canvas wants to
+   paint over one coordinate space unit pixel).</p>
 
+   <p>In the following example, the script first obtains the size of
+   the canvas backing store, and then generates a few new
+   <code>ImageData</code> objects which can be used.</p>
+
+   <pre>
+  // canvas is a reference to a <canvas> element
+  // (note: this example uses JavaScript 1.7 features)
+  var context = canvas.getContext('2d');
+  var backingStore = context.getImageData(0, 0, canvas.width, canvas.height);
+  var actualWidth = backingStore.width;
+  var actualHeight = backingStore.height;
+
+  function CreateImageData(w, h) {
+    return {
+      height: h,
+      width: w,
+      data: [i for (i in function (n) { for (let i = 0; i < n; i += 1) yield 0 }(w*h*4)) ]
+    };
+  }
+
+  // create some plasma
+  var plasma = CreateImageData(actualWidth, actualHeight);
+  FillPlasma(plasma, 'green'); // green plasma
+
+  // create a cloud
+  var could = CreateImageData(actualWidth, actualHeight);
+  FillCloud(cloud, actualWidth/2, actualHeight/2); // put a cloud in the middle
+
+  // paint them on top of each other
+  context.putImageData(plasma, 0, 0);
+  context.putImageData(cloud, 0, 0);
+
+  function FillPlasma(data) { ... }
+  function FillCload(data, x, y) { ... }
+</pre>
+
+  </div>
+
+
   <h6>Drawing model</h6>
 
   <p>When a shape or image is painted, user agents must follow these