Skip to content
Browse files

[o] (2) Transformations affect path creation as well as stroking and …

…filling.

git-svn-id: http://svn.whatwg.org/webapps@1158 340c8d12-0b0e-0410-8428-c7bf67bfef74
  • Loading branch information...
1 parent 2cbd2d2 commit bde29b68928129ea3a826b10e310104a9650f21e @Hixie Hixie committed
Showing with 96 additions and 70 deletions.
  1. +51 −37 index
  2. +45 −33 source
View
88 index
@@ -24,7 +24,7 @@
<h1 id=html-5>HTML 5</h1>
- <h2 class="no-num no-toc" id=working>Working Draft &mdash; 14 January 2008</h2>
+ <h2 class="no-num no-toc" id=working>Working Draft &mdash; 15 January 2008</h2>
<p>You can take part in this work. <a
href="http://www.whatwg.org/mailing-list">Join the working group's
@@ -16177,9 +16177,10 @@ interface <dfn id=imagedata>ImageData</dfn> {
title="drawing state">Drawing states</dfn> consist of:
<ul class=brief>
- <li>The current transformation matrix.
+ <li>The current <a href="#transformations0"
+ title=dom-context-2d-transformation>transformation matrix</a>.
- <li>The current clip region.
+ <li>The current <a href="#clipping">clipping path</a>.
<li>The current values of the following attributes: <code
title=dom-context-2d-strokeStyle><a
@@ -16222,12 +16223,13 @@ interface <dfn id=imagedata>ImageData</dfn> {
describes. If there is no saved state, the method must do nothing.
<h6 id=transformations><span class=secno>3.14.11.1.2. </span><dfn
- id=transformations0>Transformations</dfn></h6>
+ id=transformations0
+ title=dom-context-2d-transformation>Transformations</dfn></h6>
- <p>The transformation matrix is applied to all drawing operations prior to
- their being rendered. It is also applied when creating the clip region.</p>
- <!-- conformance criteria for actual drawing are
- described in "drawing model" below -->
+ <p>The transformation matrix is applied to coordinates when creating shapes
+ and paths.</p>
+ <!-- conformance criteria for actual drawing
+ are described in the various sections below -->
<p>When the context is created, the transformation matrix must initially be
the identity transform. It may then be adjusted using the transformation
@@ -16861,15 +16863,27 @@ notes on what would need to be defined for dashed lines:
<p>There are three methods that immediately draw rectangles to the bitmap.
They each take four arguments; the first two give the <var
title="">x</var> and <var title="">y</var> coordinates of the top left of
- the rectangle, and the second two give the width and height of the
- rectangle, respectively.
+ the rectangle, and the second two give the width <var title="">w</var> and
+ height <var title="">h</var> of the rectangle, respectively.
+
+ <p>The <a href="#transformations0"
+ title=dom-context-2d-transformation>current transformation matrix</a> must
+ be applied to the following four coordinates, which form the path that
+ must then be closed to get the specified rectangle: <span>(<var
+ title="">x</var>, <var title="">y</var>)</span>, <span>(<span><var
+ title="">x</var>+<var title="">w</var></span>, <var
+ title="">y</var>)</span>, <span>(<span><var title="">x</var>+<var
+ title="">w</var></span>, <span><var title="">y</var>+<var
+ title="">h</var></span>)</span>, <span>(<var title="">x</var>, <span><var
+ title="">y</var>+<var title="">h</var></span>)</span>.
<p>Shapes are painted without affecting the current path, and are subject
- to <span title=dom-context-2d->transformations</span>, <a href="#shadows0"
- title=shadows>shadow effects</a>, <span title=globalAlpha>global
- alpha</span>, <a href="#clipping" title="clipping path">clipping
- paths</a>, and <span title=globalCompositeOperation>global composition
- operators</span>.
+ to <a href="#shadows0" title=shadows>shadow effects</a>, <a
+ href="#globalalpha" title=dom-context-2d-globalAlpha>global alpha</a>, <a
+ href="#clipping" title="clipping path">clipping paths</a>, and <a
+ href="#globalcompositeoperation"
+ title=dom-context-2d-globalCompositeOperation>global composition
+ operators</a>.
<p>Negative values for width and height must cause the implementation to
raise an <code>INDEX_SIZE_ERR</code> exception.
@@ -16888,8 +16902,7 @@ notes on what would need to be defined for dashed lines:
<p>The <dfn id=strokerect
title=dom-context-2d-strokeRect><code>strokeRect()</code></dfn> method
- must draw stroke the path that would be created for the outline of a
- rectangle of the specified size using the <code
+ must draw 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>,
@@ -16916,6 +16929,12 @@ notes on what would need to be defined for dashed lines:
<p>Initially, the context's path must have zero subpaths.
+ <p>The coordinates given in the arguments to these methods must be
+ transformed according to the <a href="#transformations0"
+ title=dom-context-2d-transformation>current transformation matrix</a>
+ before applying the calculations described below and before adding any
+ points to the path.
+
<p>The <dfn id=beginpath
title=dom-context-2d-beginPath><code>beginPath()</code></dfn> method must
empty the list of subpaths so that the context once again has zero
@@ -17059,9 +17078,8 @@ notes on what would need to be defined for dashed lines:
href="#miterlimit">miterLimit</a></code> attributes.
<p>Paths, when filled or stroked, must be painted without affecting the
- current path, and must be subject to <a
- href="#transformations0">transformations</a>, <a href="#shadows0"
- title=shadows>shadow effects</a>, <a href="#globalalpha"
+ current path, and must be subject to <span>transformations</span>, <a
+ href="#shadows0" title=shadows>shadow effects</a>, <a href="#globalalpha"
title=dom-context-2d-globalAlpha>global alpha</a>, <a href="#clipping"
title="clipping path">clipping paths</a>, and <a
href="#globalcompositeoperation"
@@ -17076,9 +17094,8 @@ notes on what would need to be defined for dashed lines:
<p>The <dfn id=clip title=dom-context-2d-clip><code>clip()</code></dfn>
method must create a new <dfn id=clipping>clipping path</dfn> by
calculating the intersection of the current clipping path and the area
- described by the current path (after applying the <span>current
- transformation</span>), using the non-zero winding number rule. Open
- subpaths must be implicitly closed when computing the clipping path,
+ described by the current path, using the non-zero winding number rule.
+ Open subpaths must be implicitly closed when computing the clipping path,
without affecting the actual subpaths.
<p>When the context is created, the initial clipping path is the rectangle
@@ -17147,7 +17164,9 @@ notes on what would need to be defined for dashed lines:
<var title="">sy</var>, <var title="">sw</var>, <var title="">sh</var>)
must be painted on the region of the canvas specified by the destination
rectangle (<var title="">dx</var>, <var title="">dy</var>, <var
- title="">dw</var>, <var title="">dh</var>).
+ title="">dw</var>, <var title="">dh</var>), after applying the <a
+ href="#transformations0" title=dom-context-2d-transformation>current
+ transformation matrix</a>.
<p><img alt="" src="images/drawImage.png"></p>
<!-- no alt="" text
@@ -17155,10 +17174,9 @@ notes on what would need to be defined for dashed lines:
paragraph. -->
<p>Images are painted without affecting the current path, and are subject
- to <a href="#transformations0">transformations</a>, <a href="#shadows0"
- title=shadows>shadow effects</a>, <a href="#globalalpha"
- title=dom-context-2d-globalAlpha>global alpha</a>, <a href="#clipping"
- title="clipping path">clipping paths</a>, and <a
+ to <a href="#shadows0" title=shadows>shadow effects</a>, <a
+ href="#globalalpha" title=dom-context-2d-globalAlpha>global alpha</a>, <a
+ href="#clipping" title="clipping path">clipping paths</a>, and <a
href="#globalcompositeoperation"
title=dom-context-2d-globalCompositeOperation>global composition
operators</a>.</p>
@@ -17328,14 +17346,10 @@ notes on what would need to be defined for dashed lines:
in the order given (or act as if they do):
<ol>
- <li>If the current transformation matrix is infinite, then do nothing.
- Abort these steps.
-
- <li>The coordinates are transformed by the current transformation matrix.
-
<li>The shape or image is rendered, creating image <var title="">A</var>,
as described in the previous sections. For shapes, the current fill,
- stroke, and line styles must be honoured.
+ stroke, and line styles must be honoured, and the stroke must itself also
+ be subjected to the current transformation matrix.
<li>The shadow is rendered from image <var title="">A</var>, using the
current shadow styles, creating image <var title="">B</var>.
@@ -17347,10 +17361,10 @@ notes on what would need to be defined for dashed lines:
title=dom-context-2d-globalAlpha><a
href="#globalalpha">globalAlpha</a></code>.
- <li>Within the clip region (as affected by the current transformation
- matrix), the source image is composited over the current canvas bitmap
- using the current composition operator.
+ <li>Within the clipping path, the source image is composited over the
+ current canvas bitmap using the current composition operator.
</ol>
+ <!-- XXX add xrefs in the list above -->
<!--
<h5 id="3d">The 3D context</h5>
View
78 source
@@ -13731,8 +13731,8 @@ interface <dfn>ImageData</dfn> {
title="drawing state">Drawing states</dfn> consist of:</p>
<ul class="brief">
- <li>The current transformation matrix.</li>
- <li>The current clip region.</li>
+ <li>The current <span title="dom-context-2d-transformation">transformation matrix</span>.</li>
+ <li>The current <span>clipping path</span>.</li>
<li>The current values of the following attributes: <code
title="dom-context-2d-strokeStyle">strokeStyle</code>, <code
title="dom-context-2d-fillStyle">fillStyle</code>, <code
@@ -13766,12 +13766,11 @@ interface <dfn>ImageData</dfn> {
must do nothing.</p>
- <h6><dfn>Transformations</dfn></h6>
+ <h6><dfn title="dom-context-2d-transformation">Transformations</dfn></h6>
- <p>The transformation matrix is applied to all drawing operations
- prior to their being rendered. It is also applied when creating the
- clip region.</p> <!-- conformance criteria for actual drawing are
- described in "drawing model" below -->
+ <p>The transformation matrix is applied to coordinates when creating
+ shapes and paths.</p> <!-- conformance criteria for actual drawing
+ are described in the various sections below -->
<p>When the context is created, the transformation matrix must
initially be the identity transform. It may then be adjusted using
@@ -14427,15 +14426,26 @@ notes on what would need to be defined for dashed lines:
<p>There are three methods that immediately draw rectangles to the
bitmap. They each take four arguments; the first two give the <var
title="">x</var> and <var title="">y</var> coordinates of the top
- left of the rectangle, and the second two give the width and height
- of the rectangle, respectively.</p>
+ left of the rectangle, and the second two give the width <var
+ title="">w</var> and height <var title="">h</var> of the rectangle,
+ respectively.</p>
+
+ <p>The <span title="dom-context-2d-transformation">current
+ transformation matrix</span> must be applied to the following four
+ coordinates, which form the path that must then be closed to get the
+ specified rectangle: <span>(<var title="">x</var>, <var
+ title="">y</var>)</span>, <span>(<span><var title="">x</var>+<var
+ title="">w</var></span>, <var title="">y</var>)</span>,
+ <span>(<span><var title="">x</var>+<var title="">w</var></span>,
+ <span><var title="">y</var>+<var title="">h</var></span>)</span>,
+ <span>(<var title="">x</var>, <span><var title="">y</var>+<var
+ title="">h</var></span>)</span>.</p>
<p>Shapes are painted without affecting the current path, and are
- subject to <span title="dom-context-2d-">transformations</span>,
- <span title="shadows">shadow effects</span>, <span
- title="globalAlpha">global alpha</span>, <span title="clipping
- path">clipping paths</span>, and <span
- title="globalCompositeOperation">global composition
+ subject to <span title="shadows">shadow effects</span>, <span
+ title="dom-context-2d-globalAlpha">global alpha</span>, <span
+ title="clipping path">clipping paths</span>, and <span
+ title="dom-context-2d-globalCompositeOperation">global composition
operators</span>.</p>
<p>Negative values for width and height must cause the
@@ -14456,9 +14466,8 @@ notes on what would need to be defined for dashed lines:
<p>The <dfn
title="dom-context-2d-strokeRect"><code>strokeRect()</code></dfn>
- method must draw stroke the path that would be created for the
- outline of a rectangle of the specified size using the <code
- title="dom-context-2d-strokeStyle">strokeStyle</code>, <code
+ method must draw 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
appropriate) <code
@@ -14485,6 +14494,12 @@ notes on what would need to be defined for dashed lines:
<p>Initially, the context's path must have zero subpaths.</p>
+ <p>The coordinates given in the arguments to these methods must be
+ transformed according to the <span
+ title="dom-context-2d-transformation">current transformation
+ matrix</span> before applying the calculations described below and
+ before adding any points to the path.</p>
+
<p>The <dfn
title="dom-context-2d-beginPath"><code>beginPath()</code></dfn>
@@ -14664,8 +14679,7 @@ notes on what would need to be defined for dashed lines:
<p>The <dfn title="dom-context-2d-clip"><code>clip()</code></dfn>
method must create a new <dfn>clipping path</dfn> by calculating the
intersection of the current clipping path and the area described by
- the current path (after applying the <span>current
- transformation</span>), using the non-zero winding number rule. Open
+ the current path, using the non-zero winding number rule. Open
subpaths must be implicitly closed when computing the clipping path,
without affecting the actual subpaths.</p>
@@ -14742,15 +14756,16 @@ notes on what would need to be defined for dashed lines:
title="">sw</var>, <var title="">sh</var>) must be painted on the
region of the canvas specified by the destination rectangle (<var
title="">dx</var>, <var title="">dy</var>, <var title="">dw</var>,
- <var title="">dh</var>).</p>
+ <var title="">dh</var>), after applying the <span
+ title="dom-context-2d-transformation">current transformation
+ matrix</span>.</p>
<p><img src="images/drawImage.png" alt=""></p> <!-- no alt="" text
since the image is just repeating what was stated in the previous
paragraph. -->
<p>Images are painted without affecting the current path, and are
- subject to <span>transformations</span>, <span
- title="shadows">shadow effects</span>, <span
+ subject to <span title="shadows">shadow effects</span>, <span
title="dom-context-2d-globalAlpha">global alpha</span>, <span
title="clipping path">clipping paths</span>, and <span
title="dom-context-2d-globalCompositeOperation">global composition
@@ -14925,16 +14940,11 @@ notes on what would need to be defined for dashed lines:
<ol>
- <li>If the current transformation matrix is infinite, then do
- nothing. Abort these steps.</li>
-
- <li>The coordinates are transformed by the current transformation
- matrix.</li>
-
<li>The shape or image is rendered, creating image <var
title="">A</var>, as described in the previous sections. For
- shapes, the current fill, stroke, and line styles must be
- honoured.</li>
+ shapes, the current fill, stroke, and line styles must be honoured,
+ and the stroke must itself also be subjected to the current
+ transformation matrix.</li>
<li>The shadow is rendered from image <var title="">A</var>, using
the current shadow styles, creating image <var
@@ -14946,12 +14956,14 @@ notes on what would need to be defined for dashed lines:
<li>The source image has its alpha adjusted by <code
title="dom-context-2d-globalAlpha">globalAlpha</code>.</li>
- <li>Within the clip region (as affected by the current
- transformation matrix), the source image is composited over the
- current canvas bitmap using the current composition operator.</li>
+ <li>Within the clipping path, the source image is composited over
+ the current canvas bitmap using the current composition
+ operator.</li>
</ol>
+ <!-- XXX add xrefs in the list above -->
+
<!--
<h5 id="3d">The 3D context</h5>

0 comments on commit bde29b6

Please sign in to comment.
Something went wrong with that request. Please try again.