[html5] r7030 - [giow] (0) Pattern transforms, first draft Affected topics: Canvas
whatwg at whatwg.org
whatwg at whatwg.org
Mon Mar 26 15:57:42 PDT 2012
Author: ianh
Date: 2012-03-26 15:57:41 -0700 (Mon, 26 Mar 2012)
New Revision: 7030
Modified:
complete.html
index
source
Log:
[giow] (0) Pattern transforms, first draft
Affected topics: Canvas
Modified: complete.html
===================================================================
--- complete.html 2012-03-26 05:11:00 UTC (rev 7029)
+++ complete.html 2012-03-26 22:57:41 UTC (rev 7030)
@@ -34854,7 +34854,7 @@
<h5 id=2dcontext><span class=secno>4.8.11.1 </span>The 2D context</h5>
- <!-- v2: we're on v4.1. suggestions for next version are marked v5. suggestions for subsequent versions are marked v6, v7. -->
+ <!-- v2: we're on v5. suggestions for subsequent versions are marked v6, v7. -->
@@ -35016,6 +35016,7 @@
interface <dfn id=canvaspattern>CanvasPattern</dfn> {
// opaque object
+ void <a href=#dom-canvaspattern-settransform title=dom-canvaspattern-setTransform>setTransform</a>(<a href=#svgmatrix>SVGMatrix</a> transform);
};
interface <dfn id=textmetrics>TextMetrics</dfn> {
@@ -37149,6 +37150,15 @@
</dd>
+ <dt><var title="">pattern</var> . <code title=dom-canvaspattern-setTransform><a href=#dom-canvaspattern-settransform>setTransform</a></code>(<var title="">transform</var>)</dt>
+
+ <dd>
+
+ <p>Sets the transformation matrix that will be used when rendering
+ the pattern during a fill or stroke painting operation.</p>
+
+ </dd>
+
</dl><div class=impl>
<p>To create objects of this type, the <dfn id=dom-context-2d-createpattern title=dom-context-2d-createPattern><code>createPattern(<var title="">image</var>, <var title="">repetition</var>)</code></dfn>
@@ -37186,35 +37196,59 @@
exception.</p>
<!-- drawImage() has an equivalent paragraph -->
- <p>Patterns must be painted so that the top left of the first image
- is anchored at the origin of the coordinate space, and images are
- then repeated horizontally to the left and right, if the
- <code>repeat-x</code> string was specified, or vertically up and
- down, if the <code>repeat-y</code> string was specified, or in all
- four directions all over the canvas, if the <code>repeat</code>
- string was specified, to create the repeated pattern that is used
- for rendering. The images are not scaled by this process; one CSS
- pixel of the image must be painted on one coordinate space unit in
- generating the repeated pattern. When rendered, however, patterns
- must actually be painted only where the stroking or filling effect
- requires that they be drawn, and the repeated pattern must be
- affected by the <a href=#transformations title=dom-context-2d-transformation>current
- transformation matrix</a>. Pixels not covered by the repeating
- pattern (if the <code>repeat</code> string was not specified) must
- be transparent black.</p>
+ <p>Patterns have a transformation matrix, which controls how the
+ pattern is used when it is painted. Initially, a pattern's
+ transformation matrix must be the identity transform.</p>
- <p>If the original image data is a bitmap image, the value painted
- at a point in the area of the repetitions is computed by filtering
- the original image data. The user agent may use any filtering
- algorithm (for example bilinear interpolation or nearest-neighbor).
- When the filtering algorithm requires a pixel value from outside the
- original image data, it must instead use the value from wrapping the
- pixel's coordinates to the original image's dimensions. (That is,
- the filter uses 'repeat' behavior, regardless of the value of
- <var title="">repetition</var>.)
- <!-- drawImage() has a similar paragraph with different rules -->
+ <p>When the <dfn id=dom-canvaspattern-settransform title=dom-canvaspattern-setTransform><code>setTransform()</code></dfn>
+ method is invoked on the pattern, the user agent must replace the
+ pattern's transformation matrix with the one described by the
+ <code><a href=#svgmatrix>SVGMatrix</a></code> object provided as an argument to the
+ method.</p>
- <p>When the <code title=dom-context-2d-createPattern><a href=#dom-context-2d-createpattern>createPattern()</a></code> method
+ <p>When a pattern is to be rendered within an area, the user agent
+ must run the following steps to determine what is rendered:</p>
+
+ <ol><li><p>Create an infinite transparent black bitmap.</li>
+
+ <li>
+
+ <p>Place a copy of the image on the bitmap, anchored such that its
+ top left corner is at the origin of the coordinate space, with one
+ coordinate space unit per CSS pixel of the image, then place
+ repeated copies of this image horizontally to the left and right,
+ if the <code>repeat-x</code> string was specified, or vertically
+ up and down, if the <code>repeat-y</code> string was specified, or
+ in all four directions all over the bitmap, if the
+ <code>repeat</code> string was specified.</p>
+
+ <p>If the original image data is a bitmap image, the value painted
+ at a point in the area of the repetitions is computed by filtering
+ the original image data. The user agent may use any filtering
+ algorithm (for example bilinear interpolation or
+ nearest-neighbor). When the filtering algorithm requires a pixel
+ value from outside the original image data, it must instead use
+ the value from wrapping the pixel's coordinates to the original
+ image's dimensions. (That is, the filter uses 'repeat' behavior,
+ regardless of the value of <var title="">repetition</var>.)
+ <!-- drawImage() has a similar paragraph with different rules -->
+
+ </li>
+
+ <li><p>Transform the resulting bitmap according to the pattern's
+ transformation matrix.</li>
+
+ <li><p>Transform the resulting bitmap again, this time according to
+ the <a href=#transformations title=dom-context-2d-transformation>current
+ transformation matrix</a>.</li>
+
+ <li><p>Replace any part of the image outside the area in which the
+ pattern is to be rendered with transparent black.</li>
+
+ <li><p>The resulting bitmap is what is to be rendered, with the
+ same origin and same scale.</li>
+
+ </ol><p>When the <code title=dom-context-2d-createPattern><a href=#dom-context-2d-createpattern>createPattern()</a></code> method
is passed an animated image as its <var title="">image</var>
argument, the user agent must use the poster frame of the animation,
or, if there is no poster frame, the first frame of the
@@ -37230,13 +37264,6 @@
correction has been applied).</p>
<!-- drawImage() has an equivalent paragraph -->
- <!--
- Requests for v5 features:
- * apply transforms to patterns, so you don't have to create
- transformed patterns manually by rendering them to an off-screen
- canvas then using that canvas as the pattern.
- -->
-
</div>
<div class=impl>
Modified: index
===================================================================
--- index 2012-03-26 05:11:00 UTC (rev 7029)
+++ index 2012-03-26 22:57:41 UTC (rev 7030)
@@ -34854,7 +34854,7 @@
<h5 id=2dcontext><span class=secno>4.8.11.1 </span>The 2D context</h5>
- <!-- v2: we're on v4.1. suggestions for next version are marked v5. suggestions for subsequent versions are marked v6, v7. -->
+ <!-- v2: we're on v5. suggestions for subsequent versions are marked v6, v7. -->
@@ -35016,6 +35016,7 @@
interface <dfn id=canvaspattern>CanvasPattern</dfn> {
// opaque object
+ void <a href=#dom-canvaspattern-settransform title=dom-canvaspattern-setTransform>setTransform</a>(<a href=#svgmatrix>SVGMatrix</a> transform);
};
interface <dfn id=textmetrics>TextMetrics</dfn> {
@@ -37149,6 +37150,15 @@
</dd>
+ <dt><var title="">pattern</var> . <code title=dom-canvaspattern-setTransform><a href=#dom-canvaspattern-settransform>setTransform</a></code>(<var title="">transform</var>)</dt>
+
+ <dd>
+
+ <p>Sets the transformation matrix that will be used when rendering
+ the pattern during a fill or stroke painting operation.</p>
+
+ </dd>
+
</dl><div class=impl>
<p>To create objects of this type, the <dfn id=dom-context-2d-createpattern title=dom-context-2d-createPattern><code>createPattern(<var title="">image</var>, <var title="">repetition</var>)</code></dfn>
@@ -37186,35 +37196,59 @@
exception.</p>
<!-- drawImage() has an equivalent paragraph -->
- <p>Patterns must be painted so that the top left of the first image
- is anchored at the origin of the coordinate space, and images are
- then repeated horizontally to the left and right, if the
- <code>repeat-x</code> string was specified, or vertically up and
- down, if the <code>repeat-y</code> string was specified, or in all
- four directions all over the canvas, if the <code>repeat</code>
- string was specified, to create the repeated pattern that is used
- for rendering. The images are not scaled by this process; one CSS
- pixel of the image must be painted on one coordinate space unit in
- generating the repeated pattern. When rendered, however, patterns
- must actually be painted only where the stroking or filling effect
- requires that they be drawn, and the repeated pattern must be
- affected by the <a href=#transformations title=dom-context-2d-transformation>current
- transformation matrix</a>. Pixels not covered by the repeating
- pattern (if the <code>repeat</code> string was not specified) must
- be transparent black.</p>
+ <p>Patterns have a transformation matrix, which controls how the
+ pattern is used when it is painted. Initially, a pattern's
+ transformation matrix must be the identity transform.</p>
- <p>If the original image data is a bitmap image, the value painted
- at a point in the area of the repetitions is computed by filtering
- the original image data. The user agent may use any filtering
- algorithm (for example bilinear interpolation or nearest-neighbor).
- When the filtering algorithm requires a pixel value from outside the
- original image data, it must instead use the value from wrapping the
- pixel's coordinates to the original image's dimensions. (That is,
- the filter uses 'repeat' behavior, regardless of the value of
- <var title="">repetition</var>.)
- <!-- drawImage() has a similar paragraph with different rules -->
+ <p>When the <dfn id=dom-canvaspattern-settransform title=dom-canvaspattern-setTransform><code>setTransform()</code></dfn>
+ method is invoked on the pattern, the user agent must replace the
+ pattern's transformation matrix with the one described by the
+ <code><a href=#svgmatrix>SVGMatrix</a></code> object provided as an argument to the
+ method.</p>
- <p>When the <code title=dom-context-2d-createPattern><a href=#dom-context-2d-createpattern>createPattern()</a></code> method
+ <p>When a pattern is to be rendered within an area, the user agent
+ must run the following steps to determine what is rendered:</p>
+
+ <ol><li><p>Create an infinite transparent black bitmap.</li>
+
+ <li>
+
+ <p>Place a copy of the image on the bitmap, anchored such that its
+ top left corner is at the origin of the coordinate space, with one
+ coordinate space unit per CSS pixel of the image, then place
+ repeated copies of this image horizontally to the left and right,
+ if the <code>repeat-x</code> string was specified, or vertically
+ up and down, if the <code>repeat-y</code> string was specified, or
+ in all four directions all over the bitmap, if the
+ <code>repeat</code> string was specified.</p>
+
+ <p>If the original image data is a bitmap image, the value painted
+ at a point in the area of the repetitions is computed by filtering
+ the original image data. The user agent may use any filtering
+ algorithm (for example bilinear interpolation or
+ nearest-neighbor). When the filtering algorithm requires a pixel
+ value from outside the original image data, it must instead use
+ the value from wrapping the pixel's coordinates to the original
+ image's dimensions. (That is, the filter uses 'repeat' behavior,
+ regardless of the value of <var title="">repetition</var>.)
+ <!-- drawImage() has a similar paragraph with different rules -->
+
+ </li>
+
+ <li><p>Transform the resulting bitmap according to the pattern's
+ transformation matrix.</li>
+
+ <li><p>Transform the resulting bitmap again, this time according to
+ the <a href=#transformations title=dom-context-2d-transformation>current
+ transformation matrix</a>.</li>
+
+ <li><p>Replace any part of the image outside the area in which the
+ pattern is to be rendered with transparent black.</li>
+
+ <li><p>The resulting bitmap is what is to be rendered, with the
+ same origin and same scale.</li>
+
+ </ol><p>When the <code title=dom-context-2d-createPattern><a href=#dom-context-2d-createpattern>createPattern()</a></code> method
is passed an animated image as its <var title="">image</var>
argument, the user agent must use the poster frame of the animation,
or, if there is no poster frame, the first frame of the
@@ -37230,13 +37264,6 @@
correction has been applied).</p>
<!-- drawImage() has an equivalent paragraph -->
- <!--
- Requests for v5 features:
- * apply transforms to patterns, so you don't have to create
- transformed patterns manually by rendering them to an off-screen
- canvas then using that canvas as the pattern.
- -->
-
</div>
<div class=impl>
Modified: source
===================================================================
--- source 2012-03-26 05:11:00 UTC (rev 7029)
+++ source 2012-03-26 22:57:41 UTC (rev 7030)
@@ -40531,7 +40531,7 @@
<h5 id="2dcontext">The 2D context</h5>
- <!-- v2: we're on v4.1. suggestions for next version are marked v5. suggestions for subsequent versions are marked v6, v7. -->
+ <!-- v2: we're on v5. suggestions for subsequent versions are marked v6, v7. -->
<!--START 2dcontext-->
@@ -40698,6 +40698,7 @@
interface <dfn>CanvasPattern</dfn> {
// opaque object
+ void <span title="dom-canvaspattern-setTransform">setTransform</span>(<span>SVGMatrix</span> transform);
};
interface <dfn>TextMetrics</dfn> {
@@ -43284,6 +43285,15 @@
</dd>
+ <dt><var title="">pattern</var> . <code title="dom-canvaspattern-setTransform">setTransform</code>(<var title="">transform</var>)</dt>
+
+ <dd>
+
+ <p>Sets the transformation matrix that will be used when rendering
+ the pattern during a fill or stroke painting operation.</p>
+
+ </dd>
+
</dl>
<div class="impl">
@@ -43330,34 +43340,63 @@
exception.</p>
<!-- drawImage() has an equivalent paragraph -->
- <p>Patterns must be painted so that the top left of the first image
- is anchored at the origin of the coordinate space, and images are
- then repeated horizontally to the left and right, if the
- <code>repeat-x</code> string was specified, or vertically up and
- down, if the <code>repeat-y</code> string was specified, or in all
- four directions all over the canvas, if the <code>repeat</code>
- string was specified, to create the repeated pattern that is used
- for rendering. The images are not scaled by this process; one CSS
- pixel of the image must be painted on one coordinate space unit in
- generating the repeated pattern. When rendered, however, patterns
- must actually be painted only where the stroking or filling effect
- requires that they be drawn, and the repeated pattern must be
- affected by the <span title="dom-context-2d-transformation">current
- transformation matrix</span>. Pixels not covered by the repeating
- pattern (if the <code>repeat</code> string was not specified) must
- be transparent black.</p>
+ <p>Patterns have a transformation matrix, which controls how the
+ pattern is used when it is painted. Initially, a pattern's
+ transformation matrix must be the identity transform.</p>
- <p>If the original image data is a bitmap image, the value painted
- at a point in the area of the repetitions is computed by filtering
- the original image data. The user agent may use any filtering
- algorithm (for example bilinear interpolation or nearest-neighbor).
- When the filtering algorithm requires a pixel value from outside the
- original image data, it must instead use the value from wrapping the
- pixel's coordinates to the original image's dimensions. (That is,
- the filter uses 'repeat' behavior, regardless of the value of
- <var title="">repetition</var>.)
- <!-- drawImage() has a similar paragraph with different rules -->
+ <p>When the <dfn
+ title="dom-canvaspattern-setTransform"><code>setTransform()</code></dfn>
+ method is invoked on the pattern, the user agent must replace the
+ pattern's transformation matrix with the one described by the
+ <code>SVGMatrix</code> object provided as an argument to the
+ method.</p>
+ <p>When a pattern is to be rendered within an area, the user agent
+ must run the following steps to determine what is rendered:</p>
+
+ <ol>
+
+ <li><p>Create an infinite transparent black bitmap.</p></li>
+
+ <li>
+
+ <p>Place a copy of the image on the bitmap, anchored such that its
+ top left corner is at the origin of the coordinate space, with one
+ coordinate space unit per CSS pixel of the image, then place
+ repeated copies of this image horizontally to the left and right,
+ if the <code>repeat-x</code> string was specified, or vertically
+ up and down, if the <code>repeat-y</code> string was specified, or
+ in all four directions all over the bitmap, if the
+ <code>repeat</code> string was specified.</p>
+
+ <p>If the original image data is a bitmap image, the value painted
+ at a point in the area of the repetitions is computed by filtering
+ the original image data. The user agent may use any filtering
+ algorithm (for example bilinear interpolation or
+ nearest-neighbor). When the filtering algorithm requires a pixel
+ value from outside the original image data, it must instead use
+ the value from wrapping the pixel's coordinates to the original
+ image's dimensions. (That is, the filter uses 'repeat' behavior,
+ regardless of the value of <var title="">repetition</var>.)
+ <!-- drawImage() has a similar paragraph with different rules -->
+
+ </li>
+
+ <li><p>Transform the resulting bitmap according to the pattern's
+ transformation matrix.</p></li>
+
+ <li><p>Transform the resulting bitmap again, this time according to
+ the <span title="dom-context-2d-transformation">current
+ transformation matrix</span>.</p></li>
+
+ <li><p>Replace any part of the image outside the area in which the
+ pattern is to be rendered with transparent black.</p></li>
+
+ <li><p>The resulting bitmap is what is to be rendered, with the
+ same origin and same scale.</p></li>
+
+ </ol>
+
<p>When the <code
title="dom-context-2d-createPattern">createPattern()</code> method
is passed an animated image as its <var title="">image</var>
@@ -43376,13 +43415,6 @@
correction has been applied).</p>
<!-- drawImage() has an equivalent paragraph -->
- <!--
- Requests for v5 features:
- * apply transforms to patterns, so you don't have to create
- transformed patterns manually by rendering them to an off-screen
- canvas then using that canvas as the pattern.
- -->
-
</div>
<div class="impl">
More information about the Commit-Watchers
mailing list