[html5] r2845 - [gow] (2) Define that <canvas>'s drawImage() can take a <video>.
whatwg at whatwg.org
whatwg at whatwg.org
Thu Feb 19 17:10:20 PST 2009
Author: ianh
Date: 2009-02-19 17:10:19 -0800 (Thu, 19 Feb 2009)
New Revision: 2845
Modified:
index
source
Log:
[gow] (2) Define that <canvas>'s drawImage() can take a <video>.
Modified: index
===================================================================
--- index 2009-02-19 11:30:24 UTC (rev 2844)
+++ index 2009-02-20 01:10:19 UTC (rev 2845)
@@ -34,7 +34,7 @@
<div class=head>
<p><a class=logo href=http://www.whatwg.org/ rel=home><img alt=WHATWG src=/images/logo></a></p>
<h1>HTML 5</h1>
- <h2 class="no-num no-toc" id=draft-recommendation-—-date:-01-jan-1901>Draft Recommendation — 19 February 2009</h2>
+ <h2 class="no-num no-toc" id=draft-recommendation-—-date:-01-jan-1901>Draft Recommendation — 20 February 2009</h2>
<p>You can take part in this work. <a href=http://www.whatwg.org/mailing-list>Join the working group's discussion list.</a></p>
<p><strong>Web designers!</strong> We have a <a href=http://blog.whatwg.org/faq/>FAQ</a>, a <a href=http://forums.whatwg.org/>forum</a>, and a <a href=http://www.whatwg.org/mailing-list#help>help mailing list</a> for you!</p>
<dl><dt>Multiple-page version:</dt>
@@ -17782,9 +17782,10 @@
attribute must <a href=#reflect>reflect</a> the <code title=attr-video-poster><a href=#attr-video-poster>poster</a></code> content attribute.</p>
<hr><p>When no video data is available (the element's <code title=dom-media-readyState><a href=#dom-media-readystate>readyState</a></code> attribute is either
- <code title=dom-media-HAVE_NOTHING><a href=#dom-media-have_nothing>HAVE_NOTHING</a></code> or <code title=dom-media-HAVE_METADATA><a href=#dom-media-have_metadata>HAVE_METADATA</a></code>), the
- <code><a href=#video>video</a></code> element <a href=#represents>represents</a> either the
- <a href=#poster-frame>poster frame</a>, or nothing.</p>
+ <code title=dom-media-HAVE_NOTHING><a href=#dom-media-have_nothing>HAVE_NOTHING</a></code>, or <code title=dom-media-HAVE_METADATA><a href=#dom-media-have_metadata>HAVE_METADATA</a></code> but no video
+ data has yet been obtained at all), the <code><a href=#video>video</a></code> element
+ <a href=#represents>represents</a> either the <a href=#poster-frame>poster frame</a>, or
+ nothing.</p>
<p>When a <code><a href=#video>video</a></code> element is <a href=#dom-media-paused title=dom-media-paused>paused</a> and the <a href=#current-playback-position title="current
playback position">current playback position</a> is the first
@@ -20249,11 +20250,13 @@
void <span title="dom-context-2d-strokeVerticalText">strokeVerticalText</span>(in DOMString text, in float x, in float y, [Optional] in float maxHeight); -->
<a href=#textmetrics>TextMetrics</a> <a href=#dom-context-2d-measuretext title=dom-context-2d-measureText>measureText</a>(in DOMString text);
- // drawing images<!-- XXX add and define HTMLVideoElement variants -->
+ // drawing images
void <a href=#dom-context-2d-drawimage title=dom-context-2d-drawImage>drawImage</a>(in <a href=#htmlimageelement>HTMLImageElement</a> image, in float dx, in float dy, [Optional] in float dw, in float dh);
void <a href=#dom-context-2d-drawimage title=dom-context-2d-drawImage>drawImage</a>(in <a href=#htmlimageelement>HTMLImageElement</a> image, in float sx, in float sy, in float sw, in float sh, in float dx, in float dy, in float dw, in float dh);
void <a href=#dom-context-2d-drawimage title=dom-context-2d-drawImage>drawImage</a>(in <a href=#htmlcanvaselement>HTMLCanvasElement</a> image, in float dx, in float dy, [Optional] in float dw, in float dh);
void <a href=#dom-context-2d-drawimage title=dom-context-2d-drawImage>drawImage</a>(in <a href=#htmlcanvaselement>HTMLCanvasElement</a> image, in float sx, in float sy, in float sw, in float sh, in float dx, in float dy, in float dw, in float dh);
+ void <a href=#dom-context-2d-drawimage title=dom-context-2d-drawImage>drawImage</a>(in <a href=#htmlvideoelement>HTMLVideoElement</a> image, in float dx, in float dy, [Optional] in float dw, in float dh);
+ void <a href=#dom-context-2d-drawimage title=dom-context-2d-drawImage>drawImage</a>(in <a href=#htmlvideoelement>HTMLVideoElement</a> image, in float sx, in float sy, in float sw, in float sh, in float dx, in float dy, in float dw, in float dh);
// pixel manipulation
<a href=#imagedata>ImageData</a> <a href=#dom-context-2d-createimagedata title=dom-context-2d-createImageData>createImageData</a>(in float sw, in float sh);
@@ -21662,24 +21665,27 @@
<p>To draw images onto the canvas, the <dfn id=dom-context-2d-drawimage title=dom-context-2d-drawImage><code>drawImage</code></dfn> method
can be used.</p>
- <p>This method is overloaded with three variants: <code title="">drawImage(<var title="">image</var>, <var title="">dx</var>, <var title="">dy</var>)</code>, <code title="">drawImage(<var title="">image</var>, <var title="">dx</var>, <var title="">dy</var>, <var title="">dw</var>,
- <var title="">dh</var>)</code>, and <code title="">drawImage(<var title="">image</var>, <var title="">sx</var>, <var title="">sy</var>, <var title="">sw</var>, <var title="">sh</var>,
- <var title="">dx</var>, <var title="">dy</var>, <var title="">dw</var>, <var title="">dh</var>)</code>. (Actually it is
- overloaded with six; each of those three can take either an
- <code><a href=#htmlimageelement>HTMLImageElement</a></code> or an <code><a href=#htmlcanvaselement>HTMLCanvasElement</a></code>
- for the <var title="">image</var> argument.) If not specified, the
- <var title="">dw</var> and <var title="">dh</var> arguments must
- default to the values of <var title="">sw</var> and <var title="">sh</var>, interpreted such that one CSS pixel in the image
- is treated as one unit in the canvas coordinate space. If the <var title="">sx</var>, <var title="">sy</var>, <var title="">sw</var>,
- and <var title="">sh</var> arguments are omitted, they must default
- to 0, 0, the image's intrinsic width in image pixels, and the
- image's intrinsic height in image pixels, respectively.</p>
+ <p>This method can be invoked with three different sets of argments:</p>
+ <ul class=brief><li><code title="">drawImage(<var title="">image</var>, <var title="">dx</var>, <var title="">dy</var>)</code>
+ <li><code title="">drawImage(<var title="">image</var>, <var title="">dx</var>, <var title="">dy</var>, <var title="">dw</var>, <var title="">dh</var>)</code>
+ <li><code title="">drawImage(<var title="">image</var>, <var title="">sx</var>, <var title="">sy</var>, <var title="">sw</var>, <var title="">sh</var>, <var title="">dx</var>, <var title="">dy</var>, <var title="">dw</var>, <var title="">dh</var>)</code>
+ </ul><p>Each of those three can take either an
+ <code><a href=#htmlimageelement>HTMLImageElement</a></code>, an <code><a href=#htmlcanvaselement>HTMLCanvasElement</a></code>, or
+ an <code><a href=#htmlvideoelement>HTMLVideoElement</a></code> for the <var title="">image</var>
+ argument.</p>
+
+ <p>If not specified, the <var title="">dw</var> and <var title="">dh</var> arguments must default to the values of <var title="">sw</var> and <var title="">sh</var>, interpreted such that
+ one CSS pixel in the image is treated as one unit in the canvas
+ coordinate space. If the <var title="">sx</var>, <var title="">sy</var>, <var title="">sw</var>, and <var title="">sh</var> arguments are omitted, they must default to 0, 0,
+ the image's intrinsic width in image pixels, and the image's
+ intrinsic height in image pixels, respectively.</p>
+
<p>The <var title="">image</var> argument must be an instance of an
- <code><a href=#htmlimageelement>HTMLImageElement</a></code> or <code><a href=#htmlcanvaselement>HTMLCanvasElement</a></code>. If
- the <var title="">image</var> is of the wrong type or null, the
- implementation must raise a <code><a href=#type_mismatch_err>TYPE_MISMATCH_ERR</a></code>
- exception.</p>
+ <code><a href=#htmlimageelement>HTMLImageElement</a></code>, <code><a href=#htmlcanvaselement>HTMLCanvasElement</a></code>, or
+ <code><a href=#htmlvideoelement>HTMLVideoElement</a></code>. If the <var title="">image</var> is
+ of the wrong type or null, the implementation must raise a
+ <code><a href=#type_mismatch_err>TYPE_MISMATCH_ERR</a></code> exception.</p>
<!-- createPattern() has an equivalent paragraph -->
<p>If the <var title="">image</var> argument is an
@@ -21688,15 +21694,21 @@
exception.</p>
<!-- createPattern() has an equivalent paragraph -->
- <!-- handled by the next paragraph
+ <!-- handled by a later paragraph
<p>If the <var title="">image</var> argument is an
<code>HTMLCanvasElement</code> object with either a horizontal
dimension or a vertical dimension equal to zero, then the
- implementation must raise an <code>INVALID_STATE_ERR</code>
+ implementation must raise an <code>INVALID_SIZE_ERR</code>
exception.</p>
-->
<!-- createPattern() has an equivalent paragraph -->
+ <p>If the <var title="">image</var> argument is an
+ <code><a href=#htmlvideoelement>HTMLVideoElement</a></code> object whose <code title=dom-media-readyState><a href=#dom-media-readystate>readyState</a></code> attribute is either
+ <code title=dom-media-HAVE_NOTHING><a href=#dom-media-have_nothing>HAVE_NOTHING</a></code> or <code title=dom-media-HAVE_METADATA><a href=#dom-media-have_metadata>HAVE_METADATA</a></code>, then the
+ implementation must raise an <code><a href=#invalid_state_err>INVALID_STATE_ERR</a></code>
+ exception.</p>
+
<p>The source rectangle is the rectangle whose corners are the four
points (<var title="">sx</var>, <var title="">sy</var>), (<span><var title="">sx</var>+<var title="">sw</var></span>, <var title="">sy</var>), (<span><var title="">sx</var>+<var title="">sw</var></span>, <span><var title="">sy</var>+<var title="">sh</var></span>), (<var title="">sx</var>, <span><var title="">sy</var>+<var title="">sh</var></span>).</p>
@@ -21725,11 +21737,16 @@
onto overlapping parts of itself.</p>
<p>When the <code title=dom-context-2d-drawImage><a href=#dom-context-2d-drawimage>drawImage()</a></code> method is
- passed, as its <var title="">image</var> argument, an animated
- image, the poster frame of the animation, or the first frame of the
- animation if there is no poster frame, must be used.</p>
+ passed, as its <var title="">image</var> argument, an
+ <code><a href=#htmlimageelement>HTMLImageElement</a></code> representing an animated image, the
+ poster frame of the animation, or the first frame of the animation
+ if there is no poster frame, must be used.</p>
<!-- createPattern() has an equivalent paragraph -->
+ <p>When the <var title="">image</var> argument is an
+ <code><a href=#htmlvideoelement>HTMLVideoElement</a></code>, then the frame at the <a href=#current-playback-position>current
+ playback position</a> must be used as the source image.</p>
+
<p>Images are painted without affecting the current path, and are
subject to <a href=#shadows title=shadows>shadow effects</a>, <a href=#dom-context-2d-globalalpha title=dom-context-2d-globalAlpha>global alpha</a>, the <a href=#clipping-region title="clipping region">clipping region</a>, and <a href=#dom-context-2d-globalcompositeoperation title=dom-context-2d-globalCompositeOperation>global composition
operators</a>.</p>
Modified: source
===================================================================
--- source 2009-02-19 11:30:24 UTC (rev 2844)
+++ source 2009-02-20 01:10:19 UTC (rev 2845)
@@ -19034,10 +19034,11 @@
<p>When no video data is available (the element's <code
title="dom-media-readyState">readyState</code> attribute is either
- <code title="dom-media-HAVE_NOTHING">HAVE_NOTHING</code> or <code
- title="dom-media-HAVE_METADATA">HAVE_METADATA</code>), the
- <code>video</code> element <span>represents</span> either the
- <span>poster frame</span>, or nothing.</p>
+ <code title="dom-media-HAVE_NOTHING">HAVE_NOTHING</code>, or <code
+ title="dom-media-HAVE_METADATA">HAVE_METADATA</code> but no video
+ data has yet been obtained at all), the <code>video</code> element
+ <span>represents</span> either the <span>poster frame</span>, or
+ nothing.</p>
<p>When a <code>video</code> element is <span
title="dom-media-paused">paused</span> and the <span title="current
@@ -21956,11 +21957,13 @@
void <span title="dom-context-2d-strokeVerticalText">strokeVerticalText</span>(in DOMString text, in float x, in float y, [Optional] in float maxHeight); -->
<span>TextMetrics</span> <span title="dom-context-2d-measureText">measureText</span>(in DOMString text);
- // drawing images<!-- XXX add and define HTMLVideoElement variants -->
+ // drawing images
void <span title="dom-context-2d-drawImage">drawImage</span>(in <span>HTMLImageElement</span> image, in float dx, in float dy, [Optional] in float dw, in float dh);
void <span title="dom-context-2d-drawImage">drawImage</span>(in <span>HTMLImageElement</span> image, in float sx, in float sy, in float sw, in float sh, in float dx, in float dy, in float dw, in float dh);
void <span title="dom-context-2d-drawImage">drawImage</span>(in <span>HTMLCanvasElement</span> image, in float dx, in float dy, [Optional] in float dw, in float dh);
void <span title="dom-context-2d-drawImage">drawImage</span>(in <span>HTMLCanvasElement</span> image, in float sx, in float sy, in float sw, in float sh, in float dx, in float dy, in float dw, in float dh);
+ void <span title="dom-context-2d-drawImage">drawImage</span>(in <span>HTMLVideoElement</span> image, in float dx, in float dy, [Optional] in float dw, in float dh);
+ void <span title="dom-context-2d-drawImage">drawImage</span>(in <span>HTMLVideoElement</span> image, in float sx, in float sy, in float sw, in float sh, in float dx, in float dy, in float dw, in float dh);
// pixel manipulation
<span>ImageData</span> <span title="dom-context-2d-createImageData">createImageData</span>(in float sw, in float sh);
@@ -23696,33 +23699,34 @@
title="dom-context-2d-drawImage"><code>drawImage</code></dfn> method
can be used.</p>
- <p>This method is overloaded with three variants: <code
- title="">drawImage(<var title="">image</var>, <var
- title="">dx</var>, <var title="">dy</var>)</code>, <code
- title="">drawImage(<var title="">image</var>, <var
- title="">dx</var>, <var title="">dy</var>, <var title="">dw</var>,
- <var title="">dh</var>)</code>, and <code title="">drawImage(<var
- title="">image</var>, <var title="">sx</var>, <var
- title="">sy</var>, <var title="">sw</var>, <var title="">sh</var>,
- <var title="">dx</var>, <var title="">dy</var>, <var
- title="">dw</var>, <var title="">dh</var>)</code>. (Actually it is
- overloaded with six; each of those three can take either an
- <code>HTMLImageElement</code> or an <code>HTMLCanvasElement</code>
- for the <var title="">image</var> argument.) If not specified, the
- <var title="">dw</var> and <var title="">dh</var> arguments must
- default to the values of <var title="">sw</var> and <var
- title="">sh</var>, interpreted such that one CSS pixel in the image
- is treated as one unit in the canvas coordinate space. If the <var
- title="">sx</var>, <var title="">sy</var>, <var title="">sw</var>,
- and <var title="">sh</var> arguments are omitted, they must default
- to 0, 0, the image's intrinsic width in image pixels, and the
- image's intrinsic height in image pixels, respectively.</p>
+ <p>This method can be invoked with three different sets of argments:</p>
+ <ul class="brief">
+ <li><code title="">drawImage(<var title="">image</var>, <var title="">dx</var>, <var title="">dy</var>)</code>
+ <li><code title="">drawImage(<var title="">image</var>, <var title="">dx</var>, <var title="">dy</var>, <var title="">dw</var>, <var title="">dh</var>)</code>
+ <li><code title="">drawImage(<var title="">image</var>, <var title="">sx</var>, <var title="">sy</var>, <var title="">sw</var>, <var title="">sh</var>, <var title="">dx</var>, <var title="">dy</var>, <var title="">dw</var>, <var title="">dh</var>)</code>
+ </ul>
+
+ <p>Each of those three can take either an
+ <code>HTMLImageElement</code>, an <code>HTMLCanvasElement</code>, or
+ an <code>HTMLVideoElement</code> for the <var title="">image</var>
+ argument.</p>
+
+ <p>If not specified, the <var title="">dw</var> and <var
+ title="">dh</var> arguments must default to the values of <var
+ title="">sw</var> and <var title="">sh</var>, interpreted such that
+ one CSS pixel in the image is treated as one unit in the canvas
+ coordinate space. If the <var title="">sx</var>, <var
+ title="">sy</var>, <var title="">sw</var>, and <var
+ title="">sh</var> arguments are omitted, they must default to 0, 0,
+ the image's intrinsic width in image pixels, and the image's
+ intrinsic height in image pixels, respectively.</p>
+
<p>The <var title="">image</var> argument must be an instance of an
- <code>HTMLImageElement</code> or <code>HTMLCanvasElement</code>. If
- the <var title="">image</var> is of the wrong type or null, the
- implementation must raise a <code>TYPE_MISMATCH_ERR</code>
- exception.</p>
+ <code>HTMLImageElement</code>, <code>HTMLCanvasElement</code>, or
+ <code>HTMLVideoElement</code>. If the <var title="">image</var> is
+ of the wrong type or null, the implementation must raise a
+ <code>TYPE_MISMATCH_ERR</code> exception.</p>
<!-- createPattern() has an equivalent paragraph -->
<p>If the <var title="">image</var> argument is an
@@ -23732,15 +23736,23 @@
exception.</p>
<!-- createPattern() has an equivalent paragraph -->
- <!-- handled by the next paragraph
+ <!-- handled by a later paragraph
<p>If the <var title="">image</var> argument is an
<code>HTMLCanvasElement</code> object with either a horizontal
dimension or a vertical dimension equal to zero, then the
- implementation must raise an <code>INVALID_STATE_ERR</code>
+ implementation must raise an <code>INVALID_SIZE_ERR</code>
exception.</p>
-->
<!-- createPattern() has an equivalent paragraph -->
+ <p>If the <var title="">image</var> argument is an
+ <code>HTMLVideoElement</code> object whose <code
+ title="dom-media-readyState">readyState</code> attribute is either
+ <code title="dom-media-HAVE_NOTHING">HAVE_NOTHING</code> or <code
+ title="dom-media-HAVE_METADATA">HAVE_METADATA</code>, then the
+ implementation must raise an <code>INVALID_STATE_ERR</code>
+ exception.</p>
+
<p>The source rectangle is the rectangle whose corners are the four
points (<var title="">sx</var>, <var title="">sy</var>), (<span><var
title="">sx</var>+<var title="">sw</var></span>, <var
@@ -23780,11 +23792,16 @@
<p>When the <code
title="dom-context-2d-drawImage">drawImage()</code> method is
- passed, as its <var title="">image</var> argument, an animated
- image, the poster frame of the animation, or the first frame of the
- animation if there is no poster frame, must be used.</p>
+ passed, as its <var title="">image</var> argument, an
+ <code>HTMLImageElement</code> representing an animated image, the
+ poster frame of the animation, or the first frame of the animation
+ if there is no poster frame, must be used.</p>
<!-- createPattern() has an equivalent paragraph -->
+ <p>When the <var title="">image</var> argument is an
+ <code>HTMLVideoElement</code>, then the frame at the <span>current
+ playback position</span> must be used as the source image.</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>, the <span
More information about the Commit-Watchers
mailing list