[html5] r1166 - /
whatwg at whatwg.org
whatwg at whatwg.org
Mon Jan 21 18:22:44 PST 2008
Author: ianh
Date: 2008-01-21 18:22:38 -0800 (Mon, 21 Jan 2008)
New Revision: 1166
Modified:
index
source
Log:
[e] (1) canvas: typos, clarifications, fix old examples, add new examples
Modified: index
===================================================================
--- index 2008-01-18 02:45:39 UTC (rev 1165)
+++ index 2008-01-22 02:22:38 UTC (rev 1166)
@@ -24,7 +24,7 @@
<h1 id=html-5>HTML 5</h1>
- <h2 class="no-num no-toc" id=working>Working Draft — 18 January 2008</h2>
+ <h2 class="no-num no-toc" id=working>Working Draft — 22 January 2008</h2>
<p>You can take part in this work. <a
href="http://www.whatwg.org/mailing-list">Join the working group's
@@ -15982,7 +15982,7 @@
<p>This specification only defines one context, with the name "<code
title=canvas-context-2d><a href="#d">2d</a></code>". If <code
title=dom-canvas-getContext><a href="#getcontext">getContext()</a></code>
- is called with that exact string for tis <var title="">contextId</var>
+ is called with that exact string for its <var title="">contextId</var>
argument, then the UA must return a reference to an object implementing
<code><a
href="#canvasrenderingcontext2d">CanvasRenderingContext2D</a></code>.
@@ -16146,7 +16146,7 @@
// pixel manipulation
<a href="#imagedata">ImageData</a> <a href="#getimagedata" title=dom-context-2d-getImageData>getImageData</a>(in float sx, in float sy, in float sw, in float sh);
- void <a href="#putimagedata" title=dom-context-2d-putImageData>putImageData</a>(in <a href="#imagedata">ImageData</a> image, in float dx, in float dy);
+ void <a href="#putimagedata" title=dom-context-2d-putImageData>putImageData</a>(in <a href="#imagedata">ImageData</a> imagedata, in float dx, in float dy);
// drawing text is not supported in this version of the API
// (there is no way to predict what metrics the fonts will have,
@@ -16980,7 +16980,7 @@
<p>The <dfn id=strokerect
title=dom-context-2d-strokeRect><code>strokeRect()</code></dfn> method
- must draw stroke the specified rectangle's path using the <code
+ must stroke the specified rectangle's path using the <code
title=dom-context-2d-strokeStyle><a
href="#strokestyle">strokeStyle</a></code>, <code
title=dom-context-2d-lineWidth><a href="#linewidth">lineWidth</a></code>,
@@ -17254,6 +17254,11 @@
since the image is just repeating what was stated in the previous
paragraph. -->
+ <p class=note>When a canvas is drawn onto itself, the drawing model
+ requires the source to be copied before the image is drawn back onto the
+ canvas, so it is possible to copy parts of a canvas onto overlapping parts
+ of itself.
+
<p>Images are painted without affecting the current path, and are subject
to <a href="#shadows0" title=shadows>shadow effects</a>, <a
href="#globalalpha" title=dom-context-2d-globalAlpha>global alpha</a>, <a
@@ -17274,27 +17279,27 @@
title="">sh</var>)</code></dfn> method must return an <code><a
href="#imagedata">ImageData</a></code> object representing the underlying
pixel data for the area of the canvas denoted by the rectangle which has
- one corner at the (<var title="">sx</var>, <var title="">sy</var>)
- coordinate, and that has width <var title="">sw</var> and height <var
- title="">sh</var>. Pixels outside the canvas must be returned as
- transparent black. Pixels must be returned as non-premultiplied alpha
- values.
+ its top left corner at the (<var title="">sx</var>, <var
+ title="">sy</var>) coordinate, and that has width <var title="">sw</var>
+ and height <var title="">sh</var>. Pixels outside the canvas must be
+ returned as transparent black. Pixels must be returned as
+ non-premultiplied alpha values.
<p><code><a href="#imagedata">ImageData</a></code> objects must be
- initialised so that their <dfn id=height2
+ initialised so that their <dfn id=width2
+ title=dom-imagedata-width><code>width</code></dfn> attribute is set to
+ <var title="">w</var>, the number of physical device pixels per row in the
+ image data, their <dfn id=height2
title=dom-imagedata-height><code>height</code></dfn> attribute is set to
- <var title="">h</var>, the number of rows in the image data, their <dfn
- id=width2 title=dom-imagedata-width><code>width</code></dfn> attribute is
- set to <var title="">w</var>, the number of physical device pixels per row
- in the image data, and the <dfn id=data1
- title=dom-imagedata-data><code>data</code></dfn> attribute is initialised
- to an array of <var title="">h</var>×<var title="">w</var>×4
- integers. The pixels must be represented in this array in left-to-right
- order, row by row, starting at the top left, with each pixel's red, green,
- blue, and alpha components being given in that order. Each component of
- each device pixel represented in this array must be in the range 0..255,
- representing the 8 bit value for that component. At least one pixel must
- be returned.
+ <var title="">h</var>, the number of rows in the image data, and the <dfn
+ id=data1 title=dom-imagedata-data><code>data</code></dfn> attribute is
+ initialised to an array of <var title="">h</var>×<var
+ title="">w</var>×4 integers. The pixels must be represented in this
+ array in left-to-right order, row by row, starting at the top left, with
+ each pixel's red, green, blue, and alpha components being given in that
+ order. Each component of each device pixel represented in this array must
+ be in the range 0..255, representing the 8 bit value for that component.
+ At least one pixel must be returned.
<p>The values of the <code title=dom-imagedata-data><a
href="#data1">data</a></code> array may be changed (the length of the
@@ -17305,13 +17310,13 @@
algorithm, and if the result is not a number, a
<code>TYPE_MISMATCH_ERR</code> exception must be raised. If the result is
less than 0, it must be clamped to zero. If the result is more than 255,
- it must be clamed to 255. If the number is not an integer, it must be
+ it must be clamped to 255. If the number is not an integer, it must be
rounded to the nearest integer using the IEEE 754r <i>roundTiesToEven</i>
rounding mode. <a href="#refsECMA262">[ECMA262]</a> <a
href="#refsIEEE754r">[IEEE754R]</a>
<p class=note>The width and height (<var title="">w</var> and <var
- title="">h</var>) might be different than the <var title="">sw</var> and
+ title="">h</var>) might be different from the <var title="">sw</var> and
<var title="">sh</var> arguments to the function, e.g. if the canvas is
backed by a high-resolution bitmap.
@@ -17325,10 +17330,10 @@
<p>The <dfn id=putimagedata
title=dom-context-2d-putImageData><code>putImageData(<var
- title="">image</var>, <var title="">dx</var>, <var
+ title="">imagedata</var>, <var title="">dx</var>, <var
title="">dy</var>)</code></dfn> method must take the given <code><a
href="#imagedata">ImageData</a></code> structure, and place it at the
- specified location <var title="">dx</var>,<var title="">dy</var> in the
+ specified location (<var title="">dx</var>, <var title="">dy</var>) in the
canvas coordinate space, mapping each pixel represented by the <code><a
href="#imagedata">ImageData</a></code> structure into one device pixel.
@@ -17387,7 +17392,14 @@
title=dom-context-2d-putImageData><a
href="#putimagedata">putImageData()</a></code> operations.
- <p>The current transformation matrix must not affect the <code
+ <p>The current path, <a href="#transformations0"
+ title=dom-context-2d-transformation>transformation matrix</a>, <a
+ href="#shadows0" title=shadows>shadow attributes</a>, <a
+ href="#globalalpha" title=dom-context-2d-globalAlpha>global alpha</a>, <a
+ href="#clipping" title="clipping path">clipping path</a>, and <a
+ href="#globalcompositeoperation"
+ title=dom-context-2d-globalCompositeOperation>global composition
+ operator</a> must not affect the <code
title=dom-context-2d-getImageData><a
href="#getimagedata">getImageData()</a></code> and <code
title=dom-context-2d-putImageData><a
@@ -17399,7 +17411,7 @@
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
+ object, one would not necessarily know what resolution the canvas
expected (how many pixels the canvas wants to paint over one coordinate
space unit pixel).</p>
@@ -17423,23 +17435,86 @@
};
}
+ // create a blank slate
+ var data = CreateImageData(actualWidth, actualHeight);
+
// create some plasma
- var plasma = CreateImageData(actualWidth, actualHeight);
- FillPlasma(plasma, 'green'); // green plasma
+ FillPlasma(data, 'green'); // green plasma
- // create a cloud
- var could = CreateImageData(actualWidth, actualHeight);
- FillCloud(cloud, actualWidth/2, actualHeight/2); // put a cloud in the middle
+ // add a cloud to the plasma
+ AddCloud(data, 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);
+ // paint the plasma+cloud on the canvas
+ context.putImageData(data, 0, 0);
- function FillPlasma(data) { ... }
- function FillCload(data, x, y) { ... }
+ // support methods
+ function FillPlasma(data, color) { ... }
+ function AddCload(data, x, y) { ... }
</pre>
</div>
+ <div class=example>
+ <p>Here is an example of using <code title=dom-context-2d-getImageData><a
+ href="#getimagedata">getImageData()</a></code> and <code
+ title=dom-context-2d-putImageData><a
+ href="#putimagedata">putImageData()</a></code> to implement an edge
+ detection filter.</p>
+
+ <pre><!DOCTYPE HTML>
+<html>
+ <head>
+ <title>Edge detection demo</title>
+ <script>
+ var image = new Image();
+ function init() {
+ image.onload = demo;
+ image.src = "image.jpeg";
+ }
+ function demo() {
+ var canvas = document.getElementsByTagName('canvas')[0];
+ var context = canvas.getContext('2d');
+
+ // draw the image onto the canvas
+ context.drawImage(image, 0, 0);
+
+ // get the image data to manipulate
+ var input = context.getImageData(0, 0, canvas.width, canvas.height);
+
+ // edge detection
+ // notice that we are using input.width and input.height here
+ // as they might not be the same as canvas.width and canvas.height
+ // (in particular, they might be different on high-res displays)
+ var w = input.width, h = input.height;
+ var inputData = input.data;
+ var outputData = new Array(w*h*4);
+ for (var y = 1; y < h-1; y += 1) {
+ for (var x = 1; x < w-1; x += 1) {
+ for (var c = 0; c < 3; c += 1) {
+ var i = (y*w + x)*4 + c;
+ outputData[i] = 127 + -inputData[i - w*4 - 4] - inputData[i - w*4] - inputData[i - w*4 + 4] +
+ -inputData[i - 4] + 8*inputData[i] - inputData[i + 4] +
+ -inputData[i + w*4 - 4] - inputData[i + w*4] - inputData[i + w*4 + 4];
+ }
+ outputData[(y*w + x)*4 + 3] = 255; // alpha
+ }
+ }
+
+ // put the image data back after manipulation
+ var output = {
+ width: w,
+ height: h,
+ data: outputData
+ };
+ context.putImageData(output, 0, 0);
+ }
+ </script>
+ </head>
+ <body onload="init()">
+ <canvas></canvas>
+ </body>
+</html></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 2008-01-18 02:45:39 UTC (rev 1165)
+++ source 2008-01-22 02:22:38 UTC (rev 1166)
@@ -13537,7 +13537,7 @@
<p>This specification only defines one context, with the name "<code
title="canvas-context-2d">2d</code>". If <code
title="dom-canvas-getContext">getContext()</code> is called with
- that exact string for tis <var title="">contextId</var> argument,
+ that exact string for its <var title="">contextId</var> argument,
then the UA must return a reference to an object implementing
<code>CanvasRenderingContext2D</code>. Other specifications may
define their own contexts, which would return different objects.</p>
@@ -13697,7 +13697,7 @@
// pixel manipulation
<span>ImageData</span> <span title="dom-context-2d-getImageData">getImageData</span>(in float sx, in float sy, in float sw, in float sh);
- void <span title="dom-context-2d-putImageData">putImageData</span>(in <span>ImageData</span> image, in float dx, in float dy);
+ void <span title="dom-context-2d-putImageData">putImageData</span>(in <span>ImageData</span> imagedata, in float dx, in float dy);
// drawing text is not supported in this version of the API
// (there is no way to predict what metrics the fonts will have,
@@ -14536,7 +14536,7 @@
<p>The <dfn
title="dom-context-2d-strokeRect"><code>strokeRect()</code></dfn>
- method must draw stroke the specified rectangle's path using the
+ method must stroke the specified rectangle's path using the
<code title="dom-context-2d-strokeStyle">strokeStyle</code>, <code
title="dom-context-2d-lineWidth">lineWidth</code>, <code
title="dom-context-2d-lineJoin">lineJoin</code>, and (if
@@ -14837,6 +14837,11 @@
since the image is just repeating what was stated in the previous
paragraph. -->
+ <p class="note">When a canvas is drawn onto itself, the drawing
+ model requires the source to be copied before the image is drawn
+ back onto the canvas, so it is possible to copy parts of a canvas
+ onto overlapping parts of itself.</p>
+
<p>Images are painted without affecting the current path, and are
subject to <span title="shadows">shadow effects</span>, <span
title="dom-context-2d-globalAlpha">global alpha</span>, <span
@@ -14856,28 +14861,28 @@
title="">sx</var>, <var title="">sy</var>, <var title="">sw</var>,
<var title="">sh</var>)</code></dfn> method must return an
<code>ImageData</code> object representing the underlying pixel data
- for the area of the canvas denoted by the rectangle which has one
- corner at the (<var title="">sx</var>, <var title="">sy</var>)
- coordinate, and that has width <var title="">sw</var> and height
- <var title="">sh</var>. Pixels outside the canvas must be returned
- as transparent black. Pixels must be returned as non-premultiplied
- alpha values.</p>
+ for the area of the canvas denoted by the rectangle which has its
+ top left corner at the (<var title="">sx</var>, <var
+ title="">sy</var>) coordinate, and that has width <var
+ title="">sw</var> and height <var title="">sh</var>. Pixels outside
+ the canvas must be returned as transparent black. Pixels must be
+ returned as non-premultiplied alpha values.</p>
<p><code>ImageData</code> objects must be initialised so that their
- <dfn title="dom-imagedata-height"><code>height</code></dfn>
- attribute is set to <var title="">h</var>, the number of rows in the
- image data, their <dfn
- title="dom-imagedata-width"><code>width</code></dfn> attribute is
- set to <var title="">w</var>, the number of physical device pixels
- per row in the image data, and the <dfn
- title="dom-imagedata-data"><code>data</code></dfn> attribute is
- initialised to an array of <var title="">h</var>×<var
- title="">w</var>×4 integers. The pixels must be represented in
- this array in left-to-right order, row by row, starting at the top
- left, with each pixel's red, green, blue, and alpha components being
- given in that order. Each component of each device pixel represented
- in this array must be in the range 0..255, representing the 8 bit
- value for that component. At least one pixel must be returned.</p>
+ <dfn title="dom-imagedata-width"><code>width</code></dfn> attribute
+ is set to <var title="">w</var>, the number of physical device
+ pixels per row in the image data, their <dfn
+ title="dom-imagedata-height"><code>height</code></dfn> attribute is
+ set to <var title="">h</var>, the number of rows in the image data,
+ and the <dfn title="dom-imagedata-data"><code>data</code></dfn>
+ attribute is initialised to an array of <var
+ title="">h</var>×<var title="">w</var>×4 integers. The
+ pixels must be represented in this array in left-to-right order, row
+ by row, starting at the top left, with each pixel's red, green,
+ blue, and alpha components being given in that order. Each component
+ of each device pixel represented in this array must be in the range
+ 0..255, representing the 8 bit value for that component. At least
+ one pixel must be returned.</p>
<p>The values of the <code title="dom-imagedata-data">data</code>
array may be changed (the length of the array, and the other
@@ -14887,14 +14892,14 @@
ToNumber algorithm, and if the result is not a number, a
<code>TYPE_MISMATCH_ERR</code> exception must be raised. If the
result is less than 0, it must be clamped to zero. If the result is
- more than 255, it must be clamed to 255. If the number is not an
+ more than 255, it must be clamped to 255. If the number is not an
integer, it must be rounded to the nearest integer using the IEEE
754r <i>roundTiesToEven</i> rounding mode. <a
href="#refsECMA262">[ECMA262]</a> <a
href="#refsIEEE754r">[IEEE754R]</a></p>
<p class="note">The width and height (<var title="">w</var> and <var
- title="">h</var>) might be different than the <var title="">sw</var>
+ title="">h</var>) might be different from the <var title="">sw</var>
and <var title="">sh</var> arguments to the function, e.g. if the
canvas is backed by a high-resolution bitmap.</p>
@@ -14908,11 +14913,11 @@
<p>The <dfn
title="dom-context-2d-putImageData"><code>putImageData(<var
- title="">image</var>, <var title="">dx</var>, <var
+ title="">imagedata</var>, <var title="">dx</var>, <var
title="">dy</var>)</code></dfn> method must take the given
<code>ImageData</code> structure, and place it at the specified
- location <var title="">dx</var>,<var title="">dy</var> in the canvas
- coordinate space, mapping each pixel represented by the
+ location (<var title="">dx</var>, <var title="">dy</var>) in the
+ canvas coordinate space, mapping each pixel represented by the
<code>ImageData</code> structure into one device pixel.</p>
<p>If the first argument to the method is not an object whose
@@ -14969,7 +14974,13 @@
title="dom-context-2d-putImageData">putImageData()</code>
operations.</p>
- <p>The current transformation matrix must not affect the <code
+ <p>The current path, <span
+ title="dom-context-2d-transformation">transformation matrix</span>,
+ <span title="shadows">shadow attributes</span>, <span
+ title="dom-context-2d-globalAlpha">global alpha</span>, <span
+ title="clipping path">clipping path</span>, and <span
+ title="dom-context-2d-globalCompositeOperation">global composition
+ operator</span> must not affect the <code
title="dom-context-2d-getImageData">getImageData()</code> and <code
title="dom-context-2d-putImageData">putImageData()</code>
methods.</p>
@@ -14981,7 +14992,7 @@
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
+ <code>ImageData</code> object, one would not necessarily know what
resolution the canvas expected (how many pixels the canvas wants to
paint over one coordinate space unit pixel).</p>
@@ -15005,25 +15016,89 @@
};
}
+ // create a blank slate
+ var data = CreateImageData(actualWidth, actualHeight);
+
// create some plasma
- var plasma = CreateImageData(actualWidth, actualHeight);
- FillPlasma(plasma, 'green'); // green plasma
+ FillPlasma(data, 'green'); // green plasma
- // create a cloud
- var could = CreateImageData(actualWidth, actualHeight);
- FillCloud(cloud, actualWidth/2, actualHeight/2); // put a cloud in the middle
+ // add a cloud to the plasma
+ AddCloud(data, 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);
+ // paint the plasma+cloud on the canvas
+ context.putImageData(data, 0, 0);
- function FillPlasma(data) { ... }
- function FillCload(data, x, y) { ... }
+ // support methods
+ function FillPlasma(data, color) { ... }
+ function AddCload(data, x, y) { ... }
</pre>
</div>
+ <div class="example">
+ <p>Here is an example of using <code
+ title="dom-context-2d-getImageData">getImageData()</code> and <code
+ title="dom-context-2d-putImageData">putImageData()</code> to
+ implement an edge detection filter.</p>
+
+ <pre><!DOCTYPE HTML>
+<html>
+ <head>
+ <title>Edge detection demo</title>
+ <script>
+ var image = new Image();
+ function init() {
+ image.onload = demo;
+ image.src = "image.jpeg";
+ }
+ function demo() {
+ var canvas = document.getElementsByTagName('canvas')[0];
+ var context = canvas.getContext('2d');
+
+ // draw the image onto the canvas
+ context.drawImage(image, 0, 0);
+
+ // get the image data to manipulate
+ var input = context.getImageData(0, 0, canvas.width, canvas.height);
+
+ // edge detection
+ // notice that we are using input.width and input.height here
+ // as they might not be the same as canvas.width and canvas.height
+ // (in particular, they might be different on high-res displays)
+ var w = input.width, h = input.height;
+ var inputData = input.data;
+ var outputData = new Array(w*h*4);
+ for (var y = 1; y < h-1; y += 1) {
+ for (var x = 1; x < w-1; x += 1) {
+ for (var c = 0; c < 3; c += 1) {
+ var i = (y*w + x)*4 + c;
+ outputData[i] = 127 + -inputData[i - w*4 - 4] - inputData[i - w*4] - inputData[i - w*4 + 4] +
+ -inputData[i - 4] + 8*inputData[i] - inputData[i + 4] +
+ -inputData[i + w*4 - 4] - inputData[i + w*4] - inputData[i + w*4 + 4];
+ }
+ outputData[(y*w + x)*4 + 3] = 255; // alpha
+ }
+ }
+
+ // put the image data back after manipulation
+ var output = {
+ width: w,
+ height: h,
+ data: outputData
+ };
+ context.putImageData(output, 0, 0);
+ }
+ </script>
+ </head>
+ <body onload="init()">
+ <canvas></canvas>
+ </body>
+</html></pre>
+
+ </div>
+
+
<h6>Drawing model</h6>
<p>When a shape or image is painted, user agents must follow these
More information about the Commit-Watchers
mailing list