Skip to content
Permalink
Browse files

[giow] (0) Pattern transforms, first draft

Affected topics: Canvas

git-svn-id: http://svn.whatwg.org/webapps@7030 340c8d12-0b0e-0410-8428-c7bf67bfef74
  • Loading branch information...
Hixie committed Mar 26, 2012
1 parent a2febc2 commit 3d14895182775327ccc23bd58181ae95a2c21d69
Showing with 192 additions and 106 deletions.
  1. +63 −36 complete.html
  2. +63 −36 index
  3. +66 −34 source

<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. -->




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> {

</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>
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 <code title=dom-context-2d-createPattern><a href=#dom-context-2d-createpattern>createPattern()</a></code> method
<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 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
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>
99 index

<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. -->




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> {

</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>
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 <code title=dom-context-2d-createPattern><a href=#dom-context-2d-createpattern>createPattern()</a></code> method
<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 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
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>
Oops, something went wrong.

0 comments on commit 3d14895

Please sign in to comment.
You can’t perform that action at this time.