Skip to content
Permalink
Browse files

[gow] (2) Define that <canvas>'s drawImage() can take a <video>.

git-svn-id: http://svn.whatwg.org/webapps@2845 340c8d12-0b0e-0410-8428-c7bf67bfef74
  • Loading branch information...
Hixie committed Feb 20, 2009
1 parent 0022bc8 commit 52cf200398faf03ede2dfa2f6eb5545692fd6750
Showing with 95 additions and 61 deletions.
  1. +43 −26 index
  2. +52 −35 source
69 index
@@ -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-&mdash;-date:-01-jan-1901>Draft Recommendation &mdash; 19 February 2009</h2>
<h2 class="no-num no-toc" id=draft-recommendation-&mdash;-date:-01-jan-1901>Draft Recommendation &mdash; 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>
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
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);
<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
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>

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>
87 source

<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
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);
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
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

<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

0 comments on commit 52cf200

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