[html5] r8397 - [giow] (1) Add a couple of ImageData() constructors, and (in order to make that [...]
whatwg at whatwg.org
whatwg at whatwg.org
Wed Jan 15 14:06:57 PST 2014
Author: ianh
Date: 2014-01-15 14:06:56 -0800 (Wed, 15 Jan 2014)
New Revision: 8397
Modified:
complete.html
index
source
Log:
[giow] (1) Add a couple of ImageData() constructors, and (in order to make that feasible) drop all the HD stuff on <canvas>.
Fixing https://www.w3.org/Bugs/Public/show_bug.cgi?id=24301
Affected topics: Canvas, DOM APIs, Security
Modified: complete.html
===================================================================
--- complete.html 2014-01-14 00:43:20 UTC (rev 8396)
+++ complete.html 2014-01-15 22:06:56 UTC (rev 8397)
@@ -298,7 +298,7 @@
<header class=head id=head><p><a href=http://www.whatwg.org/ class=logo><img width=101 src=/images/logo alt=WHATWG height=101></a></p>
<hgroup><h1 class=allcaps>HTML</h1>
- <h2 class="no-num no-toc">Living Standard — Last Updated 14 January 2014</h2>
+ <h2 class="no-num no-toc">Living Standard — Last Updated 15 January 2014</h2>
</hgroup><dl><dt><strong>Web developer edition:</strong></dt>
<dd><strong><a href=http://developers.whatwg.org/>http://developers.whatwg.org/</a></strong></dd>
<dt>Multiple-page version:</dt>
@@ -881,10 +881,9 @@
<li><a href=#drawing-model><span class=secno>4.12.4.2.20 </span>Drawing model</a></li>
<li><a href=#best-practices><span class=secno>4.12.4.2.21 </span>Best practices</a></li>
<li><a href=#examples-0><span class=secno>4.12.4.2.22 </span>Examples</a></ol></li>
- <li><a href=#pixel-density><span class=secno>4.12.4.3 </span>Pixel density</a></li>
- <li><a href=#color-spaces-and-color-correction><span class=secno>4.12.4.4 </span>Color spaces and color correction</a></li>
- <li><a href=#serializing-bitmaps-to-a-file><span class=secno>4.12.4.5 </span>Serializing bitmaps to a file</a></li>
- <li><a href=#security-with-canvas-elements><span class=secno>4.12.4.6 </span>Security with <code>canvas</code> elements</a></ol></ol></li>
+ <li><a href=#color-spaces-and-color-correction><span class=secno>4.12.4.3 </span>Color spaces and color correction</a></li>
+ <li><a href=#serializing-bitmaps-to-a-file><span class=secno>4.12.4.4 </span>Serializing bitmaps to a file</a></li>
+ <li><a href=#security-with-canvas-elements><span class=secno>4.12.4.5 </span>Security with <code>canvas</code> elements</a></ol></ol></li>
<li><a href=#common-idioms><span class=secno>4.13 </span>Common idioms without dedicated elements</a>
<ol>
<li><a href=#the-main-part-of-the-content><span class=secno>4.13.1 </span>The main part of the content</a></li>
@@ -8244,8 +8243,9 @@
<dt>If <var title="">input</var> is an <code><a href=#imagedata>ImageData</a></code> object</dt>
+<!--CLEANUP-->
<dd><p>Let <var title="">output</var> be a newly constructed <code><a href=#imagedata>ImageData</a></code> object
- whose <code title=dom-imagedata-width><a href=#dom-imagedata-width>width</a></code>, <code title=dom-imagedata-height><a href=#dom-imagedata-height>height</a></code>, and <code title=dom-imagedata-resolution><a href=#dom-imagedata-resolution>resolution</a></code> attributes have values equal to the
+ whose <code title=dom-imagedata-width><a href=#dom-imagedata-width>width</a></code> and <code title=dom-imagedata-height><a href=#dom-imagedata-height>height</a></code> have values equal to the
corresponding attributes on <var title="">input</var>, and whose <code title=dom-imagedata-data><a href=#dom-imagedata-data>data</a></code> attribute has the value obtained from invoking the
<a href=#internal-structured-cloning-algorithm>internal structured cloning algorithm</a> recursively with the value of the <code title=dom-imagedata-data><a href=#dom-imagedata-data>data</a></code> attribute on <var title="">input</var> as the new "<var title="">input</var>" argument and <var title="">memory</var> as the new "<var title="">memory</var>" argument.</dd>
@@ -53563,9 +53563,7 @@
<a href=#canvasproxy>CanvasProxy</a> <a href=#dom-canvas-transfercontroltoproxy title=dom-canvas-transferControlToProxy>transferControlToProxy</a>();
DOMString <a href=#dom-canvas-todataurl title=dom-canvas-toDataURL>toDataURL</a>(optional DOMString type, any... arguments);
- DOMString <a href=#dom-canvas-todataurlhd title=dom-canvas-toDataURLHD>toDataURLHD</a>(optional DOMString type, any... arguments);
void <a href=#dom-canvas-toblob title=dom-canvas-toBlob>toBlob</a>(<a href=#filecallback>FileCallback</a>? _callback, optional DOMString type, any... arguments);
- void <a href=#dom-canvas-toblobhd title=dom-canvas-toBlobHD>toBlobHD</a>(<a href=#filecallback>FileCallback</a>? _callback, optional DOMString type, any... arguments);
};</pre>
</dd>
</dl><!--REMOVE-TOPIC:DOM APIs--><p>The <code><a href=#the-canvas-element>canvas</a></code> element provides scripts with a resolution-dependent bitmap canvas,
@@ -53620,6 +53618,9 @@
<p>The intrinsic dimensions of the <code><a href=#the-canvas-element>canvas</a></code> element when it <a href=#represents>represents</a>
<a href=#embedded-content>embedded content</a> are equal to the dimensions of the element's bitmap.</p>
+ <p>The user agent must use a square pixel density consisting of one pixel of image data per
+ coordinate space unit for the bitmaps of a <code><a href=#the-canvas-element>canvas</a></code> and its rendering contexts.</p>
+
<p class=note>A <code><a href=#the-canvas-element>canvas</a></code> element can be sized arbitrarily by a style sheet, its
bitmap is then subject to the 'object-fit' CSS property. <a href=#refsCSSIMAGES>[CSSIMAGES]</a></p>
@@ -53661,9 +53662,6 @@
</div>
- <p class=note>The bitmaps used with <code><a href=#the-canvas-element>canvas</a></code> elements can have arbitrary pixel
- densities. Typically, the density will match that of the user's screen.</p>
-
<hr><!--ADD-TOPIC:DOM APIs--><dl class=domintro><dt><var title="">context</var> = <var title="">canvas</var> . <code title=dom-canvas-getContext><a href=#dom-canvas-getcontext>getContext</a></code>(<var title="">contextId</var> [, ... ])</dt>
<dd>
@@ -53839,7 +53837,6 @@
</ol><hr></div>
<dl class=domintro><dt><var title="">url</var> = <var title="">canvas</var> . <code title=dom-canvas-toDataURL><a href=#dom-canvas-todataurl>toDataURL</a></code>( [ <var title="">type</var>, ... ] )</dt>
- <dt><var title="">url</var> = <var title="">canvas</var> . <code title=dom-canvas-toDataURLHD><a href=#dom-canvas-todataurlhd>toDataURLHD</a></code>( [ <var title="">type</var>, ... ] )</dt>
<dd>
@@ -53858,14 +53855,9 @@
not supported. (The one exception to this is if the canvas has either no height or no width, in
which case the result might simply be "<code title="">data:,</code>".)</p>
- <p>The <code title=dom-canvas-toDataURL><a href=#dom-canvas-todataurl>toDataURL()</a></code> method returns the data at a
- resolution of 96dpi. The <code title=dom-canvas-toDataURLHD><a href=#dom-canvas-todataurlhd>toDataURLHD()</a></code> method
- returns it at the native canvas bitmap resolution.</p>
-
</dd>
<dt><var title="">canvas</var> . <code title=dom-canvas-toBlob><a href=#dom-canvas-toblob>toBlob</a></code>(<var title="">callback</var> [, <var title="">type</var>, ... ])</dt>
- <dt><var title="">canvas</var> . <code title=dom-canvas-toBlobHD><a href=#dom-canvas-toblobhd>toBlobHD</a></code>(<var title="">callback</var> [, <var title="">type</var>, ... ])</dt>
<dd>
@@ -53878,16 +53870,12 @@
image is generated, as given <a href=#canvas-serialization-arguments>in the table
below</a>.</p>
- <p>The <code title=dom-canvas-toBlob><a href=#dom-canvas-toblob>toBlob()</a></code> method provides the data at a resolution
- of 96dpi. The <code title=dom-canvas-toBlobHD><a href=#dom-canvas-toblobhd>toBlobHD()</a></code> method provides it at the
- native canvas bitmap resolution.</p>
-
</dd>
</dl><div class=impl>
- <p>The <dfn id=dom-canvas-todataurl title=dom-canvas-toDataURL><code>toDataURL()</code></dfn> and <dfn id=dom-canvas-todataurlhd title=dom-canvas-toDataURLHD><code>toDataURLHD()</code></dfn> methods must run the following
- steps:</p>
+ <p>The <dfn id=dom-canvas-todataurl title=dom-canvas-toDataURL><code>toDataURL()</code></dfn> method must run the
+ following steps:</p>
<ol><!--ADD-TOPIC:Security--><li><p>If the <code><a href=#the-canvas-element>canvas</a></code> element's bitmap's <a href=#concept-canvas-origin-clean title=concept-canvas-origin-clean>origin-clean</a> flag is set to false, throw a
<code><a href=#securityerror>SecurityError</a></code> exception and abort these steps.</p>
@@ -53899,9 +53887,7 @@
<li><p>Let <var title="">file</var> be <a href=#a-serialization-of-the-bitmap-as-a-file title="a serialization of the bitmap as a file">a
serialization of the <code>canvas</code> element's bitmap as a file</a>, using the method's
- arguments (if any) as the <var title="">arguments</var>, and with the <var title="">native</var>
- flag set if the method is the <code title=dom-canvas-toDataURLHD><a href=#dom-canvas-todataurlhd>toDataURLHD()</a></code> method,
- and not otherwise.</li>
+ arguments (if any) as the <var title="">arguments</var>.</li>
<li><p>Return a <a href=#data-protocol title="data protocol"><code title="">data:</code> URL</a> representing
<var title="">file</var>. <a href=#refsRFC2397>[RFC2397]</a></p>
@@ -53909,7 +53895,7 @@
<!-- should we explicitly require the URL to be base64-encoded and not have any parameters, to
ensure the same exact URL is generated in each browser? -->
- </ol><p>The <dfn id=dom-canvas-toblob title=dom-canvas-toBlob><code>toBlob()</code></dfn> and <dfn id=dom-canvas-toblobhd title=dom-canvas-toBlobHD><code>toBlobHD()</code></dfn> methods must run the following
+ </ol><p>The <dfn id=dom-canvas-toblob title=dom-canvas-toBlob><code>toBlob()</code></dfn> method must run the following
steps:</p>
<ol><!--ADD-TOPIC:Security--><li><p>If the <code><a href=#the-canvas-element>canvas</a></code> element's bitmap's <a href=#concept-canvas-origin-clean title=concept-canvas-origin-clean>origin-clean</a> flag is set to false, throw a
@@ -53927,7 +53913,7 @@
dimension or its vertical dimension is zero) then let <var title="">result</var> be null.</p>
<p>Otherwise, let <var title="">result</var> be a <code><a href=#blob>Blob</a></code> object representing <a href=#a-serialization-of-the-bitmap-as-a-file title="a serialization of the bitmap as a file">a serialization of the <code>canvas</code>
- element's bitmap as a file</a>, using <var title="">arguments</var>, and with the <var title="">native</var> flag set if the method is the <code title=dom-canvas-toBlobHD><a href=#dom-canvas-toblobhd>toBlobHD()</a></code> method, and not otherwise. <a href=#refsFILEAPI>[FILEAPI]</a> </p>
+ element's bitmap as a file</a>, using <var title="">arguments</var>. <a href=#refsFILEAPI>[FILEAPI]</a> </p>
</li>
@@ -54185,13 +54171,9 @@
// pixel manipulation
<a href=#imagedata>ImageData</a> <a href=#dom-context-2d-createimagedata title=dom-context-2d-createImageData>createImageData</a>(double sw, double sh);
<a href=#imagedata>ImageData</a> <a href=#dom-context-2d-createimagedata title=dom-context-2d-createImageData>createImageData</a>(<a href=#imagedata>ImageData</a> imagedata);
- <a href=#imagedata>ImageData</a> <a href=#dom-context-2d-createimagedatahd title=dom-context-2d-createImageDataHD>createImageDataHD</a>(double sw, double sh);
<a href=#imagedata>ImageData</a> <a href=#dom-context-2d-getimagedata title=dom-context-2d-getImageData>getImageData</a>(double sx, double sy, double sw, double sh);
- <a href=#imagedata>ImageData</a> <a href=#dom-context-2d-getimagedatahd title=dom-context-2d-getImageDataHD>getImageDataHD</a>(double sx, double sy, double sw, double sh);
void <a href=#dom-context-2d-putimagedata title=dom-context-2d-putImageData>putImageData</a>(<a href=#imagedata>ImageData</a> imagedata, double dx, double dy);
void <a href=#dom-context-2d-putimagedata title=dom-context-2d-putImageData>putImageData</a>(<a href=#imagedata>ImageData</a> imagedata, double dx, double dy, double dirtyX, double dirtyY, double dirtyWidth, double dirtyHeight);
- void <a href=#dom-context-2d-putimagedatahd title=dom-context-2d-putImageDataHD>putImageDataHD</a>(<a href=#imagedata>ImageData</a> imagedata, double dx, double dy);
- void <a href=#dom-context-2d-putimagedatahd title=dom-context-2d-putImageDataHD>putImageDataHD</a>(<a href=#imagedata>ImageData</a> imagedata, double dx, double dy, double dirtyX, double dirtyY, double dirtyWidth, double dirtyHeight);
};
<a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a> implements <a href=#canvasdrawingstyles>CanvasDrawingStyles</a>;
<a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a> implements <a href=#canvaspathmethods>CanvasPathMethods</a>;
@@ -54273,10 +54255,11 @@
DOMString? <span title=dom-HitRegionOptions-role>role</span> = null;
};
+[<a href=#dom-imagedata title=dom-imagedata>Constructor</a>(unsigned long sw, unsigned long sh),
+ <a href=#dom-imagedata title=dom-imagedata>Constructor</a>(<a href=#uint8clampedarray>Uint8ClampedArray</a> data, unsigned long sw, optional unsigned long sh)]
interface <dfn id=imagedata>ImageData</dfn> {
readonly attribute unsigned long <a href=#dom-imagedata-width title=dom-imagedata-width>width</a>;
readonly attribute unsigned long <a href=#dom-imagedata-height title=dom-imagedata-height>height</a>;
- readonly attribute double <a href=#dom-imagedata-resolution title=dom-imagedata-resolution>resolution</a>;
readonly attribute <a href=#uint8clampedarray>Uint8ClampedArray</a> <a href=#dom-imagedata-data title=dom-imagedata-data>data</a>;
};
@@ -58506,7 +58489,8 @@
<h6 id=pixel-manipulation><span class=secno>4.12.4.2.16 </span><dfn>Pixel manipulation</dfn></h6>
- <dl class=domintro><dt><var title="">imagedata</var> = <var title="">context</var> . <code title=dom-context-2d-createImageData><a href=#dom-context-2d-createimagedata>createImageData</a></code>(<var title="">sw</var>, <var title="">sh</var>)</dt>
+ <dl class=domintro><dt><var title="">imagedata</var> = new <code title=dom-imagedata><a href=#dom-imagedata>ImageData</a></code>(<var title="">sw</var>, <var title="">sh</var>)</dt>
+ <dt><var title="">imagedata</var> = <var title="">context</var> . <code title=dom-context-2d-createImageData><a href=#dom-context-2d-createimagedata>createImageData</a></code>(<var title="">sw</var>, <var title="">sh</var>)</dt>
<dd>
@@ -58527,16 +58511,13 @@
</dd>
- <dt><var title="">imagedata</var> = <var title="">context</var> . <code title=dom-context-2d-createImageDataHD><a href=#dom-context-2d-createimagedatahd>createImageDataHD</a></code>(<var title="">sw</var>, <var title="">sh</var>)</dt>
+ <dt><var title="">imagedata</var> = new <code title=dom-imagedata><a href=#dom-imagedata>ImageData</a></code>(<var title="">data</var>, <var title="">sw</var> [, <var title="">sh</var> ] )</dt>
<dd>
- <p>Returns an <code><a href=#imagedata>ImageData</a></code> object whose dimensions equal the dimensions given in the
- arguments, multiplied by the number of pixels in the canvas bitmap that correspond to each
- coordinate space unit. All the pixels in the returned object are transparent black.</p>
+ <p>Returns an <code><a href=#imagedata>ImageData</a></code> object using the data provided in the <code><a href=#uint8clampedarray>Uint8ClampedArray</a></code> argument, interpreted using the given dimensions.</p>
- <p>Throws an <code><a href=#indexsizeerror>IndexSizeError</a></code> exception if the either of the width or height
- arguments are zero.</p>
+ <p>Throws an <code><a href=#indexsizeerror>IndexSizeError</a></code> exception if the given data and dimensions can't be interpreted consistently.</p>
</dd>
@@ -58550,49 +58531,18 @@
<p>Throws an <code><a href=#indexsizeerror>IndexSizeError</a></code> exception if the either of the width or height
arguments are zero.</p>
- <p>The data will be returned with one pixel of image data for each coordinate space unit on the
- canvas (ignoring transforms).</p>
-
</dd>
- <dt><var title="">imagedata</var> = <var title="">context</var> . <code title=dom-context-2d-getImageDataHD><a href=#dom-context-2d-getimagedatahd>getImageDataHD</a></code>(<var title="">sx</var>, <var title="">sy</var>, <var title="">sw</var>, <var title="">sh</var>)</dt>
-
- <dd>
-
- <p>Returns an <code><a href=#imagedata>ImageData</a></code> object containing the image data for the given rectangle of
- the bitmap.</p>
-
- <p>Throws an <code><a href=#indexsizeerror>IndexSizeError</a></code> exception if the either of the width or height
- arguments are zero.</p>
-
- <p>The data will be returned at the same resolution as the canvas bitmap.</p>
-
- </dd>
-
<dt><var title="">imagedata</var> . <code title=dom-imagedata-width><a href=#dom-imagedata-width>width</a></code></dt>
<dt><var title="">imagedata</var> . <code title=dom-imagedata-height><a href=#dom-imagedata-height>height</a></code></dt>
<dd>
- <p>Returns the actual dimensions of the data in the <code><a href=#imagedata>ImageData</a></code> object, in pixels.
- For objects returned by the non-HD variants of the methods in this API, this will correspond to
- the dimensions given to the methods. For the HD variants, the number of pixels might be
- different than the number of corresponding coordinate space units.</p>
+ <p>Returns the actual dimensions of the data in the <code><a href=#imagedata>ImageData</a></code> object, in
+ pixels.</p>
</dd>
- <dt><var title="">imagedata</var> . <code title=dom-imagedata-resolution><a href=#dom-imagedata-resolution>resolution</a></code></dt>
-
- <dd>
-
- <p>Returns the theoretical number of pixels in the <code><a href=#imagedata>ImageData</a></code> object's data per
- corresponding coordinate space unit. This value is automatically determined from the source
- image when the <code><a href=#imagedata>ImageData</a></code> object is created. It is only used to ensure that
- <code><a href=#imagebitmap>ImageBitmap</a></code> objects have the right pixel density when generated from
- <code><a href=#imagedata>ImageData</a></code> objects.</p>
-
- </dd>
-
<dt><var title="">imagedata</var> . <code title=dom-imagedata-data><a href=#dom-imagedata-data>data</a></code></dt>
<dd>
@@ -58615,68 +58565,57 @@
<p>Throws a <code><a href=#notsupportederror>NotSupportedError</a></code> exception if any of the arguments are not finite.</p>
- <p>Each pixel in the image data is mapped to one coordinate space unit on the bitmap, regardless
- of the value of the <code title=dom-imagedata-resolution><a href=#dom-imagedata-resolution>resolution</a></code> attribute.</p>
-
</dd>
- <dt><var title="">context</var> . <code title=dom-context-2d-putImageDataHD><a href=#dom-context-2d-putimagedatahd>putImageDataHD</a></code>(<var title="">imagedata</var>, <var title="">dx</var>, <var title="">dy</var> [, <var title="">dirtyX</var>, <var title="">dirtyY</var>, <var title="">dirtyWidth</var>, <var title="">dirtyHeight</var> ])</dt>
+ </dl><div class=impl>
- <dd>
+ <p>The <dfn id=dom-imagedata title=dom-imagedata><code>ImageData()</code></dfn> constructors and the <dfn id=dom-context-2d-createimagedata title=dom-context-2d-createImageData><code>createImageData()</code></dfn> methods are used to
+ instantiate new <code><a href=#imagedata>ImageData</a></code> objects.</p>
- <p>Paints the data from the given <code><a href=#imagedata>ImageData</a></code> object onto the bitmap, at the bitmap's
- native pixel density (regardless of the value of the <code><a href=#imagedata>ImageData</a></code> object's <code title=dom-imagedata-resolution><a href=#dom-imagedata-resolution>resolution</a></code> attribute). If a dirty rectangle is provided,
- only the pixels from that rectangle are painted.</p>
+ <p>When the <code title=dom-imagedata><a href=#dom-imagedata>ImageData()</a></code> constructor is invoked with two
+ numeric arguments <var title="">sw</var> and <var title="">sh</var>, it must return a new
+ <code><a href=#imagedata>ImageData</a></code> object representing a rectangle with a width equal to <var title="">sw</var> and a height equal to <var title="">sh</var>, if both <var title="">sw</var>
+ and <var title="">sh</var> are non-zero. If one or both of <var title="">sw</var> and <var title="">sh</var> are zero, then the constructor must throw an <code><a href=#indexsizeerror>IndexSizeError</a></code>
+ exception instead.</p>
- <p>The <code title=dom-context-2d-globalAlpha><a href=#dom-context-2d-globalalpha>globalAlpha</a></code> and <code title=dom-context-2d-globalCompositeOperation><a href=#dom-context-2d-globalcompositeoperation>globalCompositeOperation</a></code> attributes, as
- well as the shadow attributes, are ignored for the purposes of this method call; pixels in the
- canvas are replaced wholesale, with no composition, alpha blending, no shadows, etc.</p>
+ <p>When the <code title=dom-imagedata><a href=#dom-imagedata>ImageData()</a></code> constructor is invoked with its first
+ argument being an <code><a href=#uint8clampedarray>Uint8ClampedArray</a></code> <var title="">source</var> and its second and
+ (optionally) third argument(s) being numeric arguments <var title="">sw</var> and <var title="">sh</var>, it must run the following steps:
- <p>Throws a <code><a href=#notsupportederror>NotSupportedError</a></code> exception if any of the arguments are not finite.</p>
+ <ol><li><p>Let <var title="">length</var> be the number of bytes in <var title="">source</var>.</li>
- </dd>
+ <li><p>If <var title="">length</var> is not a non-zero integral multiple of four, throw an
+ <code><a href=#invalidstateerror>InvalidStateError</a></code> exception and abort these steps.</li>
- </dl><div class=impl>
+ <li><p>Let <var title="">length</var> be <var title="">length</var> divided by four.</p>
- <p>The <code title=dom-context-2d-createImageData><a href=#dom-context-2d-createimagedata>createImageData()</a></code> and <code title=dom-context-2d-createImageDataHD><a href=#dom-context-2d-createimagedatahd>createImageDataHD()</a></code> methods are used to
- instantiate new blank <code><a href=#imagedata>ImageData</a></code> objects.</p>
+ <li><p>If <var title="">length</var> is not an integral multiple of <var title="">sw</var>,
+ throw an <code><a href=#indexsizeerror>IndexSizeError</a></code> exception and abort these steps.</li> <!-- nothing
+ non-zero is an integral multiple of 0, so this will throw for sw=0 -->
- <p>When the <dfn id=dom-context-2d-createimagedata title=dom-context-2d-createImageData><code>createImageData()</code></dfn>
- method is invoked with two arguments <var title="">sw</var> and <var title="">sh</var>, it must
- return a new <code><a href=#imagedata>ImageData</a></code> object representing a rectangle with a width in equal to the
- absolute magnitude of <var title="">sw</var> and a height equal to the absolute magnitude of <var title="">sh</var>, and with a 1.0 pixel density, if both <var title="">sw</var> and <var title="">sh</var> are non-zero. If one or both of <var title="">sw</var> and <var title="">sh</var> are zero, then the method must throw an <code><a href=#indexsizeerror>IndexSizeError</a></code> exception
- instead. When invoked with a single <var title="">imagedata</var> argument, it must return a new
- <code><a href=#imagedata>ImageData</a></code> object representing a rectangle with the same dimensions and pixel density
- as the <code><a href=#imagedata>ImageData</a></code> object passed as the argument. When the method returns an
- <code><a href=#imagedata>ImageData</a></code> object, it must be filled with transparent black.</p>
+ <li><p>Let <var title="">height</var> be <var title="">length</var> divided by <var title="">sw</var>.</li>
- <p>When the <dfn id=dom-context-2d-createimagedatahd title=dom-context-2d-createImageDataHD><code>createImageDataHD()</code></dfn>
- method is invoked and both of its arguments (<var title="">sw</var> and <var title="">sh</var>)
- are non-zero, it must return a new <code><a href=#imagedata>ImageData</a></code> object representing a rectangle with a
- width equal to the absolute magnitude of <var title="">sw</var> multiplied by <var title="">scale</var>, a height equal to the absolute magnitude of <var title="">sh</var>
- multiplied by <var title="">scale</var>, and a pixel density equal to <var title="">scale</var>,
- where <var title="">scale</var> is the number of pixels in the <a href=#scratch-bitmap>scratch bitmap</a> per
- coordinate space units. The <code><a href=#imagedata>ImageData</a></code> object returned must be filled with transparent
- black. If either or both of the arguments are zero, the method must instead throw an
- <code><a href=#indexsizeerror>IndexSizeError</a></code> exception.</p>
+ <li><p>If the <var title="">sh</var> argument was not omitted, and its value is not equal to
+ <var title="">height</var>, then throw an <code><a href=#indexsizeerror>IndexSizeError</a></code> exception and abort these
+ steps.</li>
- <p>The <dfn id=dom-context-2d-getimagedata title=dom-context-2d-getImageData><code>getImageData(<var title="">sx</var>, <var title="">sy</var>, <var title="">sw</var>, <var title="">sh</var>)</code></dfn> method must, if
- either the <var title="">sw</var> or <var title="">sh</var> arguments are zero, throw an
- <code><a href=#indexsizeerror>IndexSizeError</a></code> exception; otherwise,
- <!--ADD-TOPIC:Security-->
- if the <a href=#scratch-bitmap>scratch bitmap</a>'s <a href=#concept-canvas-origin-clean title=concept-canvas-origin-clean>origin-clean</a>
- flag is set to false, it must throw a <code><a href=#securityerror>SecurityError</a></code> exception;
- <!--REMOVE-TOPIC:Security-->
- otherwise, it must return an <code><a href=#imagedata>ImageData</a></code> object with width <var title="">sw</var> and
- height <var title="">sh</var> representing the <a href=#scratch-bitmap>scratch bitmap</a> for the area of that
- bitmap denoted by the rectangle whose corners are the four points (<var title="">sx</var>, <var title="">sy</var>), (<span title=""><var title="">sx</var>+<var title="">sw</var></span>, <var title="">sy</var>), (<span title=""><var title="">sx</var>+<var title="">sw</var></span>, <span title=""><var title="">sy</var>+<var title="">sh</var></span>), (<var title="">sx</var>, <span title=""><var title="">sy</var>+<var title="">sh</var></span>), in the bitmap's coordinate space
- units. If the bitmap does not represent each coordinate space unit square using exactly one pixel,
- the value of each pixel in the returned object must be derived from the value(s) of the pixel(s)
- in the bitmap that correspond to the same coordinate. Pixels outside the <a href=#scratch-bitmap>scratch
- bitmap</a> must be returned as transparent black. Pixels must be returned as non-premultiplied
- alpha values. The pixel density of the object returned must be 1.0.</p>
+ <li><p>Return a new <code><a href=#imagedata>ImageData</a></code> object whose width is <var title="">sw</var>, whose
+ height is <var title="">height</var>, and whose data is <var title="">source</var>.</li>
- <p>The <dfn id=dom-context-2d-getimagedatahd title=dom-context-2d-getImageDataHD><code>getImageDataHD(<var title="">sx</var>,
+ </ol><p>When the <code title=dom-context-2d-createImageData><a href=#dom-context-2d-createimagedata>createImageData()</a></code> method is
+ invoked with two numeric arguments <var title="">sw</var> and <var title="">sh</var>, it must
+ return a new <code><a href=#imagedata>ImageData</a></code> object representing a transparent black rectangle with a width
+ equal to the absolute magnitude of <var title="">sw</var> and a height equal to the absolute
+ magnitude of <var title="">sh</var>, if both <var title="">sw</var> and <var title="">sh</var>
+ are non-zero. If one or both of <var title="">sw</var> and <var title="">sh</var> are zero, then
+ the constructor must throw an <code><a href=#indexsizeerror>IndexSizeError</a></code> exception instead.</p>
+
+ <p>When the <code title=dom-context-2d-createImageData><a href=#dom-context-2d-createimagedata>createImageData()</a></code> method is
+ invoked with a single <var title="">imagedata</var> argument, it must return a new
+ <code><a href=#imagedata>ImageData</a></code> object representing a transparent black rectangle with the same dimensions
+ as the <code><a href=#imagedata>ImageData</a></code> object passed as the argument.</p>
+
+ <p>The <dfn id=dom-context-2d-getimagedata title=dom-context-2d-getImageData><code>getImageData(<var title="">sx</var>,
<var title="">sy</var>, <var title="">sw</var>, <var title="">sh</var>)</code></dfn> method must,
if either the <var title="">sw</var> or <var title="">sh</var> arguments are zero, throw an
<code><a href=#indexsizeerror>IndexSizeError</a></code> exception; otherwise,
@@ -58684,20 +58623,18 @@
if the <a href=#scratch-bitmap>scratch bitmap</a>'s <a href=#concept-canvas-origin-clean title=concept-canvas-origin-clean>origin-clean</a>
flag is set to false, it must throw a <code><a href=#securityerror>SecurityError</a></code> exception;
<!--REMOVE-TOPIC:Security-->
- otherwise, it must return an <code><a href=#imagedata>ImageData</a></code> object with width <var title="">sw</var>
- multiplied by <var title="">scale</var> and height <var title="">sh</var> multiplied by <var title="">scale</var> representing the <a href=#scratch-bitmap>scratch bitmap</a> for the area of that bitmap
+ otherwise, it must return an <code><a href=#imagedata>ImageData</a></code> object with width <var title="">sw</var> and
+ height <var title="">sh</var> representing the <a href=#scratch-bitmap>scratch bitmap</a> for the area of that bitmap
denoted by the rectangle whose corners are the four points (<var title="">sx</var>, <var title="">sy</var>), (<span title=""><var title="">sx</var>+<var title="">sw</var></span>, <var title="">sy</var>), (<span title=""><var title="">sx</var>+<var title="">sw</var></span>, <span title=""><var title="">sy</var>+<var title="">sh</var></span>), (<var title="">sx</var>, <span title=""><var title="">sy</var>+<var title="">sh</var></span>), in the bitmap's coordinate space
units. Pixels outside the <a href=#scratch-bitmap>scratch bitmap</a> must be returned as transparent black.
- Pixels must be returned as non-premultiplied alpha values. The pixel density of the object
- returned must be <var title="">scale</var>. For the purposes of this paragraph, <var title="">scale</var> is the number of pixels in the <a href=#scratch-bitmap>scratch bitmap</a> per coordinate
- space units.</p>
+ Pixels must be returned as non-premultiplied alpha values.</p>
+<!--CLEANUP-->
<p>New <code><a href=#imagedata>ImageData</a></code> objects must be initialized so that their <dfn id=dom-imagedata-width title=dom-imagedata-width><code>width</code></dfn> attribute is set to the number of pixels per
row in the image data, their <dfn id=dom-imagedata-height title=dom-imagedata-height><code>height</code></dfn> attribute
- is set to the number of rows in the image data, their <dfn id=dom-imagedata-resolution title=dom-imagedata-resolution><code>resolution</code></dfn> is set to the object's pixel
- density, and their <dfn id=dom-imagedata-data title=dom-imagedata-data><code>data</code></dfn> attribute is
- initialized to a <code><a href=#uint8clampedarray>Uint8ClampedArray</a></code> object. The <code><a href=#uint8clampedarray>Uint8ClampedArray</a></code> object
- must use a <a href=#canvas-pixel-arraybuffer>Canvas Pixel <code>ArrayBuffer</code></a> for its storage, and must have a
+ is set to the number of rows in the image data, and their <dfn id=dom-imagedata-data title=dom-imagedata-data><code>data</code></dfn> attribute, except where an existing array is provided, is
+ initialized to a new <code><a href=#uint8clampedarray>Uint8ClampedArray</a></code> object. The <code><a href=#uint8clampedarray>Uint8ClampedArray</a></code> object
+ must use a new <a href=#canvas-pixel-arraybuffer>Canvas Pixel <code>ArrayBuffer</code></a> for its storage, and must have a
zero start offset and a length equal to the length of its storage, in bytes. The <a href=#canvas-pixel-arraybuffer>Canvas
Pixel <code>ArrayBuffer</code></a> must contain the image data. At least one pixel's worth of
image data must be returned. <a href=#refsTYPEDARRAY>[TYPEDARRAY]</a></p>
@@ -58709,15 +58646,15 @@
the 8 bit value for that component. The components must be assigned consecutive indices starting
with 0 for the top left pixel's red component. <a href=#refsTYPEDARRAY>[TYPEDARRAY]</a></p>
- <p>The <dfn id=dom-context-2d-putimagedata title=dom-context-2d-putImageData><code>putImageData()</code></dfn> and <dfn id=dom-context-2d-putimagedatahd title=dom-context-2d-putImageDataHD><code>putImageDataHD()</code></dfn> methods write data from
+ <p>The <dfn id=dom-context-2d-putimagedata title=dom-context-2d-putImageData><code>putImageData()</code></dfn> method writes data from
<code><a href=#imagedata>ImageData</a></code> structures back to the rendering context's <a href=#scratch-bitmap>scratch bitmap</a>.
- Their arguments are: <var title="">imagedata</var>, <var title="">dx</var>, <var title="">dy</var>, <var title="">dirtyX</var>, <var title="">dirtyY</var>, <var title="">dirtyWidth</var>, and <var title="">dirtyHeight</var>.</p>
+ Its arguments are: <var title="">imagedata</var>, <var title="">dx</var>, <var title="">dy</var>, <var title="">dirtyX</var>, <var title="">dirtyY</var>, <var title="">dirtyWidth</var>, and <var title="">dirtyHeight</var>.</p>
- <p>When the last four arguments to these methods are omitted, they must be assumed to have the
+ <p>When the last four arguments to this method are omitted, they must be assumed to have the
values 0, 0, the <code title=dom-imagedata-width><a href=#dom-imagedata-width>width</a></code> member of the <var title="">imagedata</var> structure, and the <code title=dom-imagedata-height><a href=#dom-imagedata-height>height</a></code>
member of the <var title="">imagedata</var> structure, respectively.</p>
- <p>When invoked, these methods must act as follows:</p>
+ <p>When invoked, the method must act as follows:</p>
<ol><li>
@@ -58753,58 +58690,17 @@
</li>
- <li>
+ <li><p>For all integer values of <var title="">x</var> and <var title="">y</var> where <span title=""><var title="">dirtyX</var> ≤ <var title="">x</var> < <span title=""><var title="">dirtyX</var>+<var title="">dirtyWidth</var></span></span> and <span title=""><var title="">dirtyY</var> ≤ <var title="">y</var> < <span title=""><var title="">dirtyY</var>+<var title="">dirtyHeight</var></span></span>, copy the
+ four channels of the pixel with coordinate (<var title="">x</var>, <var title="">y</var>) in
+ the <var title="">imagedata</var> data structure to the pixel with coordinate (<span title=""><var title="">dx</var>+<var title="">x</var></span>, <span title=""><var title="">dy</var>+<var title="">y</var></span>) in the rendering context's <a href=#scratch-bitmap>scratch
+ bitmap</a>.</li>
- <p>Run the appropriate steps from the following list:</p>
+ </ol><p>The handling of pixel rounding when the specified coordinates are not integers is not defined
+ by this specification, except that the following must result in no visible changes to the
+ rendering:</p>
- <dl class=switch><dt>If the method was <code title=dom-context-2d-putImageData><a href=#dom-context-2d-putimagedata>putImageData()</a></code></dt>
+ <pre>context.putImageData(context.getImageData(x, y, w, h), p, q);</pre>
- <dd>
-
- <p>Draw the region of the image data in the horizontal rectangle whose top left corner is at
- (<var title="">dirtyX</var>,<var title="">dirtyY</var>) and whose bottom right corner is at
- (<span title=""><var title="">dirtyX</var>+<var title="">dirtyWidth</var></span>,<span title=""><var title="">dirtyY</var>+<var title="">dirtyHeight</var></span>) onto the rendering
- context's <a href=#scratch-bitmap>scratch bitmap</a>, aligned such that the top left of the rectangle is at
- coordinate (<var title="">dx</var>,<var title="">dy</var>).</p>
-
- <p>If the <code title=dom-context-2d-imageSmoothingEnabled><a href=#dom-context-2d-imagesmoothingenabled>imageSmoothingEnabled</a></code>
- attribute is set to true, then the user agent should attempt to apply a smoothing algorithm to
- the image data if the <a href=#scratch-bitmap>scratch bitmap</a> does not have exactly one device pixel per
- coordinate space unit.</p>
-
- </dd>
-
- <dt>If the method was <code title=dom-context-2d-putImageDataHD><a href=#dom-context-2d-putimagedatahd>putImageDataHD()</a></code></dt>
-
- <dd>
-
- <ol><li>
-
- <p>Let <var title="">dx<sub title="">device</sub></var> be the x-coordinate of the device pixel in
- the <a href=#scratch-bitmap>scratch bitmap</a> corresponding to the <var title="">dx</var> coordinate in
- the <a href=#scratch-bitmap>scratch bitmap</a>'s coordinate space.</p>
-
- <p>Let <var title="">dy<sub title="">device</sub></var> be the y-coordinate of the device pixel in
- the <a href=#scratch-bitmap>scratch bitmap</a> corresponding to the <var title="">dy</var> coordinate in
- the <a href=#scratch-bitmap>scratch bitmap</a>'s coordinate space.</p>
-
- </li>
-
- <li><p>For all integer values of <var title="">x</var> and <var title="">y</var> where <span title=""><var title="">dirtyX</var> ≤ <var title="">x</var> < <span title=""><var title="">dirtyX</var>+<var title="">dirtyWidth</var></span></span> and <span title=""><var title="">dirtyY</var> ≤ <var title="">y</var> < <span title=""><var title="">dirtyY</var>+<var title="">dirtyHeight</var></span></span>, copy the
- four channels of the pixel with coordinate (<var title="">x</var>, <var title="">y</var>) in
- the <var title="">imagedata</var> data structure to the pixel with coordinate (<span title=""><var title="">dx<sub title="">device</sub></var>+<var title="">x</var></span>, <span title=""><var title="">dy<sub title="">device</sub></var>+<var title="">y</var></span>) in the
- rendering context's <a href=#scratch-bitmap>scratch bitmap</a>.</li>
-
- </ol></dd>
-
- </dl></li>
-
- </ol><p>The handling of pixel rounding when the specified coordinates do not exactly map to the device
- coordinate space is not defined by this specification, except that the following must result in no
- visible changes to the rendering:</p>
-
- <pre>context.putImageDataHD(context.getImageDataHD(x, y, w, h), p, q);</pre>
-
<p>...for any value of <var title="">x</var>, <var title="">y</var>, <var title="">w</var>, and
<var title="">h</var> and where <var title="">p</var> is the smaller of <var title="">x</var> and
the sum of <var title="">x</var> and <var title="">w</var>, and <var title="">q</var> is the
@@ -58814,21 +58710,16 @@
<pre>context.createImageData(w, h);
context.getImageData(0, 0, w, h);</pre>
- <p>...must return <code><a href=#imagedata>ImageData</a></code> objects with the same dimensions as each other, and the
- following two calls:</p>
-
- <pre>context.createImageDataHD(w, h);
-context.getImageDataHD(0, 0, w, h);</pre>
-
- <p>...must also return <code><a href=#imagedata>ImageData</a></code> objects with the same dimensions as each other, for
- any value of <var title="">w</var> and <var title="">h</var> in both cases. In other words, while
- user agents may round the arguments of these methods so that they map to device pixel boundaries,
+<!--CLEANUP-->
+ <p>...must return <code><a href=#imagedata>ImageData</a></code> objects with the same dimensions as each other, for
+ any value of <var title="">w</var> and <var title="">h</var>. In other words, while
+ user agents may round the arguments of these methods,
any rounding performed must be performed consistently for all of the methods described in this
- section.</p>
+ section. (The constructors only work with integer values.)</p>
<p class=note>Due to the lossy nature of converting to and from premultiplied alpha color
- values, pixels that have just been set using <code title=dom-context-2d-putImageDataHD><a href=#dom-context-2d-putimagedatahd>putImageDataHD()</a></code> might be returned to an equivalent
- <code title=dom-context-2d-getImageDataHD><a href=#dom-context-2d-getimagedatahd>getImageDataHD()</a></code> as different values.</p>
+ values, pixels that have just been set using <code title=dom-context-2d-putImageData><a href=#dom-context-2d-putimagedata>putImageData()</a></code> might be returned to an equivalent
+ <code title=dom-context-2d-getImageData><a href=#dom-context-2d-getimagedata>getImageData()</a></code> as different values.</p>
<p>The current path, <a href=#transformations title=dom-context-2d-transformation>transformation matrix</a>,
<a href=#shadows title=shadows>shadow attributes</a>, <a href=#dom-context-2d-globalalpha title=dom-context-2d-globalAlpha>global
@@ -58846,7 +58737,7 @@
var context = canvas.getContext('2d');
// create a blank slate
-var data = context.createImageDataHD(canvas.width, canvas.height);
+var data = context.createImageData(canvas.width, canvas.height);
// create some plasma
FillPlasma(data, 'green'); // green plasma
@@ -58855,7 +58746,7 @@
AddCloud(data, data.width/2, data.height/2); // put a cloud in the middle
// paint the plasma+cloud on the canvas
-context.putImageDataHD(data, 0, 0);
+context.putImageData(data, 0, 0);
// support methods
function FillPlasma(data, color) { ... }
@@ -58865,7 +58756,7 @@
<div class=example>
- <p>Here is an example of using <code title=dom-context-2d-getImageDataHD><a href=#dom-context-2d-getimagedatahd>getImageDataHD()</a></code> and <code title=dom-context-2d-putImageDataHD><a href=#dom-context-2d-putimagedatahd>putImageDataHD()</a></code> to implement an edge detection
+ <p>Here is an example of using <code title=dom-context-2d-getImageData><a href=#dom-context-2d-getimagedata>getImageData()</a></code> and <code title=dom-context-2d-putImageData><a href=#dom-context-2d-putimagedata>putImageData()</a></code> to implement an edge detection
filter.</p>
<pre><!DOCTYPE HTML>
@@ -58886,10 +58777,10 @@
context.drawImage(image, 0, 0);
// get the image data to manipulate
- var input = context.getImageDataHD(0, 0, canvas.width, canvas.height);
+ var input = context.getImageData(0, 0, canvas.width, canvas.height);
// get an empty slate to put the data into
- var output = context.createImageDataHD(canvas.width, canvas.height);
+ var output = context.createImageData(canvas.width, canvas.height);
// alias some variables for convenience
// notice that we are using input.width and input.height here
@@ -58913,7 +58804,7 @@
}
// put the image data back after manipulation
- context.putImageDataHD(output, 0, 0);
+ context.putImageData(output, 0, 0);
}
</script>
</head>
@@ -59459,49 +59350,10 @@
- <h5 id=pixel-density><span class=secno>4.12.4.3 </span>Pixel density</h5>
- <p>The user agent may use any square pixel density for the bitmaps of a <code><a href=#the-canvas-element>canvas</a></code> and
- its rendering contexts. Once a <code><a href=#the-canvas-element>canvas</a></code> has a bitmap, that canvas must keep its
- resolution for its lifetime.</p>
-
- <p class=note>In general, user agents are encouraged to use a pixel density equal to the screen
- pixel density. Ideally, the number of device pixels per CSS pixel would be a multiple of two.
- Several factors can affect the screen pixel density: most prominently the actual display pixel
- density, but also important is the current zoom level.</p>
-
- <p>All the bitmaps created during a single <a href=#concept-task title=concept-task>task</a> for
- <code><a href=#the-canvas-element>canvas</a></code> elements and <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> objects must have the same
- pixel density.
- <a href=#fingerprinting-vector class=fingerprint title="fingerprinting vector"><img src=http://images.whatwg.org/fingerprint.png width=46 alt="(This is a fingerprinting vector.)" height=64></a>
- </p>
-
- <pre class=idl>partial interface <a href=#screen id=Screen-partial>Screen</a> {
- readonly attribute double <a href=#dom-screen-canvasresolution title=dom-screen-canvasResolution>canvasResolution</a>;
-};</pre>
-
- <dl class=domintro><dt><var title="">window</var> . <code title=dom-Window-screen>screen</code> . <code title=dom-screen-canvasResolution><a href=#dom-screen-canvasresolution>canvasResolution</a></code></dt>
-
- <dd>
-
- <p>Returns the pixel density that has been, or will be, used for bitmaps during this <a href=#concept-task title=concept-task>task</a>.</p>
-
- </dd>
-
- </dl><div class=impl>
-
- <p>The <dfn id=dom-screen-canvasresolution title=dom-screen-canvasResolution><code>canvasResolution</code></dfn> attribute of
- the <code><a href=#screen>Screen</a></code> object must return the pixel density, in image pixels per coordinate space
- units, that any <code><a href=#the-canvas-element>canvas</a></code> and <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> bitmaps created
- during this <a href=#concept-task title=concept-task>task</a> will use (or have used). <a href=#refsCSSOMVIEW>[CSSOMVIEW]</a></p>
-
- </div>
-
-
-
<div class=impl>
- <h5 id=color-spaces-and-color-correction><span class=secno>4.12.4.4 </span>Color spaces and color correction</h5>
+ <h5 id=color-spaces-and-color-correction><span class=secno>4.12.4.3 </span>Color spaces and color correction</h5>
<p>The <code><a href=#the-canvas-element>canvas</a></code> APIs must perform color correction at only two points: when rendering
images with their own gamma correction and color space information onto a bitmap, to convert the
@@ -59509,14 +59361,12 @@
object), and when rendering the actual canvas bitmap to the output device.</p>
<p class=note>Thus, in the 2D context, colors used to draw shapes onto the canvas will exactly
- match colors obtained through the <code title=dom-context-2d-getImageDataHD><a href=#dom-context-2d-getimagedatahd>getImageDataHD()</a></code> method.</p>
+ match colors obtained through the <code title=dom-context-2d-getImageData><a href=#dom-context-2d-getimagedata>getImageData()</a></code> method.</p>
- <p>The <code title=dom-canvas-toDataURL><a href=#dom-canvas-todataurl>toDataURL()</a></code> and <code title=dom-canvas-toDataURLHD><a href=#dom-canvas-todataurlhd>toDataURLHD()</a></code> methods must not include color space
+ <p>The <code title=dom-canvas-toDataURL><a href=#dom-canvas-todataurl>toDataURL()</a></code> method must not include color space
information in the resources they return. Where the output format allows it, the color of pixels
in resources created by <code title=dom-canvas-toDataURL><a href=#dom-canvas-todataurl>toDataURL()</a></code> must match those
- returned by the <code title=dom-context-2d-getImageData><a href=#dom-context-2d-getimagedata>getImageData()</a></code> method, and the
- color of pixels in resources created by <code title=dom-canvas-toDataURLHD><a href=#dom-canvas-todataurlhd>toDataURLHD()</a></code>
- must match those returned by the <code title=dom-context-2d-getImageDataHD><a href=#dom-context-2d-getimagedatahd>getImageDataHD()</a></code> method.</p>
+ returned by the <code title=dom-context-2d-getImageData><a href=#dom-context-2d-getimagedata>getImageData()</a></code> method.</p>
<p>In user agents that support CSS, the color space used by a <code><a href=#the-canvas-element>canvas</a></code> element must
match the color space used for processing any colors for that element in CSS.</p>
@@ -59527,14 +59377,14 @@
of images that have no color correction information (such as those returned by the <code title=dom-canvas-toDataURL><a href=#dom-canvas-todataurl>toDataURL()</a></code> method) must be rendered with no color
correction.</p>
- <p class=note>Thus, in the 2D context, calling the <code title=dom-context-2d-drawImage><a href=#dom-context-2d-drawimage>drawImage()</a></code> method to render the output of the <code title=dom-canvas-toDataURLHD><a href=#dom-canvas-todataurlhd>toDataURLHD()</a></code> method to the canvas, given the appropriate
+ <p class=note>Thus, in the 2D context, calling the <code title=dom-context-2d-drawImage><a href=#dom-context-2d-drawimage>drawImage()</a></code> method to render the output of the <code title=dom-canvas-toDataURL><a href=#dom-canvas-todataurl>toDataURL()</a></code> method to the canvas, given the appropriate
dimensions, has no visible effect.</p>
</div>
- <h5 id=serializing-bitmaps-to-a-file><span class=secno>4.12.4.5 </span>Serializing bitmaps to a file</h5>
+ <h5 id=serializing-bitmaps-to-a-file><span class=secno>4.12.4.4 </span>Serializing bitmaps to a file</h5>
<div class=impl>
@@ -59601,7 +59451,7 @@
<!--ADD-TOPIC:Security-->
<div class=impl>
- <h5 id=security-with-canvas-elements><span class=secno>4.12.4.6 </span>Security with <code><a href=#the-canvas-element>canvas</a></code> elements</h5>
+ <h5 id=security-with-canvas-elements><span class=secno>4.12.4.5 </span>Security with <code><a href=#the-canvas-element>canvas</a></code> elements</h5>
<p><i>This section is non-normative.</i></p>
@@ -59613,7 +59463,7 @@
bitmaps start with their <a href=#concept-canvas-origin-clean title=concept-canvas-origin-clean>origin-clean</a> set to
true. The flag is set to false when cross-origin images or fonts are used.</p>
- <p>The <code title=dom-canvas-toDataURL><a href=#dom-canvas-todataurl>toDataURL()</a></code>, <code title=dom-canvas-toDataURLHD><a href=#dom-canvas-todataurlhd>toDataURLHD()</a></code>, <code title=dom-canvas-toBlob><a href=#dom-canvas-toblob>toBlob()</a></code>, <code title=dom-context-2d-getImageData><a href=#dom-context-2d-getimagedata>getImageData()</a></code>, and <code title=dom-context-2d-getImageDataHD><a href=#dom-context-2d-getimagedatahd>getImageDataHD()</a></code> methods check the flag and will
+ <p>The <code title=dom-canvas-toDataURL><a href=#dom-canvas-todataurl>toDataURL()</a></code>, <code title=dom-canvas-toBlob><a href=#dom-canvas-toblob>toBlob()</a></code>, and <code title=dom-context-2d-getImageData><a href=#dom-context-2d-getimagedata>getImageData()</a></code> methods check the flag and will
throw a <code><a href=#securityerror>SecurityError</a></code> exception rather than leak cross-origin data.</p>
<p>The flag can be reset in certain situations; for example, when a
@@ -75185,7 +75035,6 @@
<pre class=idl>interface <dfn id=imagebitmap>ImageBitmap</dfn> {
readonly attribute unsigned long <a href=#dom-imagebitmap-width title=dom-ImageBitmap-width>width</a>;
readonly attribute unsigned long <a href=#dom-imagebitmap-height title=dom-ImageBitmap-height>height</a>;
- readonly attribute double <a href=#dom-imagebitmap-resolution title=dom-ImageBitmap-resolution>resolution</a>;
};
typedef (<a href=#htmlimageelement>HTMLImageElement</a> or
@@ -75254,18 +75103,10 @@
</dd>
- <dt><var title="">imageBitmap</var> . <code title=dom-ImageBitmap-resolution><a href=#dom-imagebitmap-resolution>resolution</a></code></dt>
-
- <dd>
-
- <p>Returns the intrinsic linear pixel density of the image, in image pixels per CSS pixels.</p>
-
- </dd>
-
</dl><div class=impl>
- <p>An <code><a href=#imagebitmap>ImageBitmap</a></code> object always has associated bitmap data, with a width, a
- height, and a pixel density. However, it is possible for this data to be corrupted. If an <code><a href=#imagebitmap>ImageBitmap</a></code>
+ <p>An <code><a href=#imagebitmap>ImageBitmap</a></code> object always has associated bitmap data, with a width and a
+ height. However, it is possible for this data to be corrupted. If an <code><a href=#imagebitmap>ImageBitmap</a></code>
object's media data can be decoded without errors, it is said to be <dfn id=concept-imagebitmap-good title=concept-ImageBitmap-good>fully decodable</dfn>.</p>
<p>An <code><a href=#imagebitmap>ImageBitmap</a></code> object can be obtained from a variety of different objects, using
@@ -75432,9 +75273,7 @@
<li><p>Create a new <code><a href=#imagebitmap>ImageBitmap</a></code> object.</li>
<li><p>Let the <code><a href=#imagebitmap>ImageBitmap</a></code> object's bitmap data be the image data given by the
- <code><a href=#imagedata>ImageData</a></code> object, <a href=#cropped-to-the-source-rectangle>cropped to the source rectangle</a>, using the value
- of the object's <code title=dom-imagedata-resolution><a href=#dom-imagedata-resolution>resolution</a></code> attribute as the
- object's pixel density.</li>
+ <code><a href=#imagedata>ImageData</a></code> object, <a href=#cropped-to-the-source-rectangle>cropped to the source rectangle</a>.</li>
<li><p>Return a new <code><a href=#promise>Promise</a></code>, but continue running these steps asynchronously.</li>
@@ -75524,9 +75363,6 @@
</li>
- <li><p>Let <var title="">output</var>'s pixel density be <var title="">input</var>'s pixel
- density.</li>
-
<li><p>Return <var title="">output</var>.</li>
</ol><p>The <dfn id=dom-imagebitmap-width title=dom-ImageBitmap-width><code>width</code></dfn> attribute must return the
@@ -75535,9 +75371,6 @@
<p>The <dfn id=dom-imagebitmap-height title=dom-ImageBitmap-height><code>height</code></dfn> attribute must return the
<code><a href=#imagebitmap>ImageBitmap</a></code> object's height, in CSS pixels.</p>
- <p>The <dfn id=dom-imagebitmap-resolution title=dom-ImageBitmap-resolution><code>resolution</code></dfn> attribute must return the
- <code><a href=#imagebitmap>ImageBitmap</a></code> object's linear pixel density, in image data pixels per CSS pixel.</p>
-
</div>
<div class=example>
@@ -101993,7 +101826,6 @@
<li><code><a href=#propertynodelist>PropertyNodeList</a></code>
<li><code><a href=#radionodelist>RadioNodeList</a></code>
<li><code><a href=#relatedevent>RelatedEvent</a></code>
- <li><code>Screen</code>, <a href=#Screen-partial>partial</a>
<li><code><a href=#sharedworker>SharedWorker</a></code>
<li><code><a href=#sharedworkerglobalscope>SharedWorkerGlobalScope</a></code>
<li><code><a href=#storage-0>Storage</a></code>
Modified: index
===================================================================
--- index 2014-01-14 00:43:20 UTC (rev 8396)
+++ index 2014-01-15 22:06:56 UTC (rev 8397)
@@ -298,7 +298,7 @@
<header class=head id=head><p><a href=http://www.whatwg.org/ class=logo><img width=101 src=/images/logo alt=WHATWG height=101></a></p>
<hgroup><h1 class=allcaps>HTML</h1>
- <h2 class="no-num no-toc">Living Standard — Last Updated 14 January 2014</h2>
+ <h2 class="no-num no-toc">Living Standard — Last Updated 15 January 2014</h2>
</hgroup><dl><dt><strong>Web developer edition:</strong></dt>
<dd><strong><a href=http://developers.whatwg.org/>http://developers.whatwg.org/</a></strong></dd>
<dt>Multiple-page version:</dt>
@@ -881,10 +881,9 @@
<li><a href=#drawing-model><span class=secno>4.12.4.2.20 </span>Drawing model</a></li>
<li><a href=#best-practices><span class=secno>4.12.4.2.21 </span>Best practices</a></li>
<li><a href=#examples-0><span class=secno>4.12.4.2.22 </span>Examples</a></ol></li>
- <li><a href=#pixel-density><span class=secno>4.12.4.3 </span>Pixel density</a></li>
- <li><a href=#color-spaces-and-color-correction><span class=secno>4.12.4.4 </span>Color spaces and color correction</a></li>
- <li><a href=#serializing-bitmaps-to-a-file><span class=secno>4.12.4.5 </span>Serializing bitmaps to a file</a></li>
- <li><a href=#security-with-canvas-elements><span class=secno>4.12.4.6 </span>Security with <code>canvas</code> elements</a></ol></ol></li>
+ <li><a href=#color-spaces-and-color-correction><span class=secno>4.12.4.3 </span>Color spaces and color correction</a></li>
+ <li><a href=#serializing-bitmaps-to-a-file><span class=secno>4.12.4.4 </span>Serializing bitmaps to a file</a></li>
+ <li><a href=#security-with-canvas-elements><span class=secno>4.12.4.5 </span>Security with <code>canvas</code> elements</a></ol></ol></li>
<li><a href=#common-idioms><span class=secno>4.13 </span>Common idioms without dedicated elements</a>
<ol>
<li><a href=#the-main-part-of-the-content><span class=secno>4.13.1 </span>The main part of the content</a></li>
@@ -8244,8 +8243,9 @@
<dt>If <var title="">input</var> is an <code><a href=#imagedata>ImageData</a></code> object</dt>
+<!--CLEANUP-->
<dd><p>Let <var title="">output</var> be a newly constructed <code><a href=#imagedata>ImageData</a></code> object
- whose <code title=dom-imagedata-width><a href=#dom-imagedata-width>width</a></code>, <code title=dom-imagedata-height><a href=#dom-imagedata-height>height</a></code>, and <code title=dom-imagedata-resolution><a href=#dom-imagedata-resolution>resolution</a></code> attributes have values equal to the
+ whose <code title=dom-imagedata-width><a href=#dom-imagedata-width>width</a></code> and <code title=dom-imagedata-height><a href=#dom-imagedata-height>height</a></code> have values equal to the
corresponding attributes on <var title="">input</var>, and whose <code title=dom-imagedata-data><a href=#dom-imagedata-data>data</a></code> attribute has the value obtained from invoking the
<a href=#internal-structured-cloning-algorithm>internal structured cloning algorithm</a> recursively with the value of the <code title=dom-imagedata-data><a href=#dom-imagedata-data>data</a></code> attribute on <var title="">input</var> as the new "<var title="">input</var>" argument and <var title="">memory</var> as the new "<var title="">memory</var>" argument.</dd>
@@ -53563,9 +53563,7 @@
<a href=#canvasproxy>CanvasProxy</a> <a href=#dom-canvas-transfercontroltoproxy title=dom-canvas-transferControlToProxy>transferControlToProxy</a>();
DOMString <a href=#dom-canvas-todataurl title=dom-canvas-toDataURL>toDataURL</a>(optional DOMString type, any... arguments);
- DOMString <a href=#dom-canvas-todataurlhd title=dom-canvas-toDataURLHD>toDataURLHD</a>(optional DOMString type, any... arguments);
void <a href=#dom-canvas-toblob title=dom-canvas-toBlob>toBlob</a>(<a href=#filecallback>FileCallback</a>? _callback, optional DOMString type, any... arguments);
- void <a href=#dom-canvas-toblobhd title=dom-canvas-toBlobHD>toBlobHD</a>(<a href=#filecallback>FileCallback</a>? _callback, optional DOMString type, any... arguments);
};</pre>
</dd>
</dl><!--REMOVE-TOPIC:DOM APIs--><p>The <code><a href=#the-canvas-element>canvas</a></code> element provides scripts with a resolution-dependent bitmap canvas,
@@ -53620,6 +53618,9 @@
<p>The intrinsic dimensions of the <code><a href=#the-canvas-element>canvas</a></code> element when it <a href=#represents>represents</a>
<a href=#embedded-content>embedded content</a> are equal to the dimensions of the element's bitmap.</p>
+ <p>The user agent must use a square pixel density consisting of one pixel of image data per
+ coordinate space unit for the bitmaps of a <code><a href=#the-canvas-element>canvas</a></code> and its rendering contexts.</p>
+
<p class=note>A <code><a href=#the-canvas-element>canvas</a></code> element can be sized arbitrarily by a style sheet, its
bitmap is then subject to the 'object-fit' CSS property. <a href=#refsCSSIMAGES>[CSSIMAGES]</a></p>
@@ -53661,9 +53662,6 @@
</div>
- <p class=note>The bitmaps used with <code><a href=#the-canvas-element>canvas</a></code> elements can have arbitrary pixel
- densities. Typically, the density will match that of the user's screen.</p>
-
<hr><!--ADD-TOPIC:DOM APIs--><dl class=domintro><dt><var title="">context</var> = <var title="">canvas</var> . <code title=dom-canvas-getContext><a href=#dom-canvas-getcontext>getContext</a></code>(<var title="">contextId</var> [, ... ])</dt>
<dd>
@@ -53839,7 +53837,6 @@
</ol><hr></div>
<dl class=domintro><dt><var title="">url</var> = <var title="">canvas</var> . <code title=dom-canvas-toDataURL><a href=#dom-canvas-todataurl>toDataURL</a></code>( [ <var title="">type</var>, ... ] )</dt>
- <dt><var title="">url</var> = <var title="">canvas</var> . <code title=dom-canvas-toDataURLHD><a href=#dom-canvas-todataurlhd>toDataURLHD</a></code>( [ <var title="">type</var>, ... ] )</dt>
<dd>
@@ -53858,14 +53855,9 @@
not supported. (The one exception to this is if the canvas has either no height or no width, in
which case the result might simply be "<code title="">data:,</code>".)</p>
- <p>The <code title=dom-canvas-toDataURL><a href=#dom-canvas-todataurl>toDataURL()</a></code> method returns the data at a
- resolution of 96dpi. The <code title=dom-canvas-toDataURLHD><a href=#dom-canvas-todataurlhd>toDataURLHD()</a></code> method
- returns it at the native canvas bitmap resolution.</p>
-
</dd>
<dt><var title="">canvas</var> . <code title=dom-canvas-toBlob><a href=#dom-canvas-toblob>toBlob</a></code>(<var title="">callback</var> [, <var title="">type</var>, ... ])</dt>
- <dt><var title="">canvas</var> . <code title=dom-canvas-toBlobHD><a href=#dom-canvas-toblobhd>toBlobHD</a></code>(<var title="">callback</var> [, <var title="">type</var>, ... ])</dt>
<dd>
@@ -53878,16 +53870,12 @@
image is generated, as given <a href=#canvas-serialization-arguments>in the table
below</a>.</p>
- <p>The <code title=dom-canvas-toBlob><a href=#dom-canvas-toblob>toBlob()</a></code> method provides the data at a resolution
- of 96dpi. The <code title=dom-canvas-toBlobHD><a href=#dom-canvas-toblobhd>toBlobHD()</a></code> method provides it at the
- native canvas bitmap resolution.</p>
-
</dd>
</dl><div class=impl>
- <p>The <dfn id=dom-canvas-todataurl title=dom-canvas-toDataURL><code>toDataURL()</code></dfn> and <dfn id=dom-canvas-todataurlhd title=dom-canvas-toDataURLHD><code>toDataURLHD()</code></dfn> methods must run the following
- steps:</p>
+ <p>The <dfn id=dom-canvas-todataurl title=dom-canvas-toDataURL><code>toDataURL()</code></dfn> method must run the
+ following steps:</p>
<ol><!--ADD-TOPIC:Security--><li><p>If the <code><a href=#the-canvas-element>canvas</a></code> element's bitmap's <a href=#concept-canvas-origin-clean title=concept-canvas-origin-clean>origin-clean</a> flag is set to false, throw a
<code><a href=#securityerror>SecurityError</a></code> exception and abort these steps.</p>
@@ -53899,9 +53887,7 @@
<li><p>Let <var title="">file</var> be <a href=#a-serialization-of-the-bitmap-as-a-file title="a serialization of the bitmap as a file">a
serialization of the <code>canvas</code> element's bitmap as a file</a>, using the method's
- arguments (if any) as the <var title="">arguments</var>, and with the <var title="">native</var>
- flag set if the method is the <code title=dom-canvas-toDataURLHD><a href=#dom-canvas-todataurlhd>toDataURLHD()</a></code> method,
- and not otherwise.</li>
+ arguments (if any) as the <var title="">arguments</var>.</li>
<li><p>Return a <a href=#data-protocol title="data protocol"><code title="">data:</code> URL</a> representing
<var title="">file</var>. <a href=#refsRFC2397>[RFC2397]</a></p>
@@ -53909,7 +53895,7 @@
<!-- should we explicitly require the URL to be base64-encoded and not have any parameters, to
ensure the same exact URL is generated in each browser? -->
- </ol><p>The <dfn id=dom-canvas-toblob title=dom-canvas-toBlob><code>toBlob()</code></dfn> and <dfn id=dom-canvas-toblobhd title=dom-canvas-toBlobHD><code>toBlobHD()</code></dfn> methods must run the following
+ </ol><p>The <dfn id=dom-canvas-toblob title=dom-canvas-toBlob><code>toBlob()</code></dfn> method must run the following
steps:</p>
<ol><!--ADD-TOPIC:Security--><li><p>If the <code><a href=#the-canvas-element>canvas</a></code> element's bitmap's <a href=#concept-canvas-origin-clean title=concept-canvas-origin-clean>origin-clean</a> flag is set to false, throw a
@@ -53927,7 +53913,7 @@
dimension or its vertical dimension is zero) then let <var title="">result</var> be null.</p>
<p>Otherwise, let <var title="">result</var> be a <code><a href=#blob>Blob</a></code> object representing <a href=#a-serialization-of-the-bitmap-as-a-file title="a serialization of the bitmap as a file">a serialization of the <code>canvas</code>
- element's bitmap as a file</a>, using <var title="">arguments</var>, and with the <var title="">native</var> flag set if the method is the <code title=dom-canvas-toBlobHD><a href=#dom-canvas-toblobhd>toBlobHD()</a></code> method, and not otherwise. <a href=#refsFILEAPI>[FILEAPI]</a> </p>
+ element's bitmap as a file</a>, using <var title="">arguments</var>. <a href=#refsFILEAPI>[FILEAPI]</a> </p>
</li>
@@ -54185,13 +54171,9 @@
// pixel manipulation
<a href=#imagedata>ImageData</a> <a href=#dom-context-2d-createimagedata title=dom-context-2d-createImageData>createImageData</a>(double sw, double sh);
<a href=#imagedata>ImageData</a> <a href=#dom-context-2d-createimagedata title=dom-context-2d-createImageData>createImageData</a>(<a href=#imagedata>ImageData</a> imagedata);
- <a href=#imagedata>ImageData</a> <a href=#dom-context-2d-createimagedatahd title=dom-context-2d-createImageDataHD>createImageDataHD</a>(double sw, double sh);
<a href=#imagedata>ImageData</a> <a href=#dom-context-2d-getimagedata title=dom-context-2d-getImageData>getImageData</a>(double sx, double sy, double sw, double sh);
- <a href=#imagedata>ImageData</a> <a href=#dom-context-2d-getimagedatahd title=dom-context-2d-getImageDataHD>getImageDataHD</a>(double sx, double sy, double sw, double sh);
void <a href=#dom-context-2d-putimagedata title=dom-context-2d-putImageData>putImageData</a>(<a href=#imagedata>ImageData</a> imagedata, double dx, double dy);
void <a href=#dom-context-2d-putimagedata title=dom-context-2d-putImageData>putImageData</a>(<a href=#imagedata>ImageData</a> imagedata, double dx, double dy, double dirtyX, double dirtyY, double dirtyWidth, double dirtyHeight);
- void <a href=#dom-context-2d-putimagedatahd title=dom-context-2d-putImageDataHD>putImageDataHD</a>(<a href=#imagedata>ImageData</a> imagedata, double dx, double dy);
- void <a href=#dom-context-2d-putimagedatahd title=dom-context-2d-putImageDataHD>putImageDataHD</a>(<a href=#imagedata>ImageData</a> imagedata, double dx, double dy, double dirtyX, double dirtyY, double dirtyWidth, double dirtyHeight);
};
<a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a> implements <a href=#canvasdrawingstyles>CanvasDrawingStyles</a>;
<a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a> implements <a href=#canvaspathmethods>CanvasPathMethods</a>;
@@ -54273,10 +54255,11 @@
DOMString? <span title=dom-HitRegionOptions-role>role</span> = null;
};
+[<a href=#dom-imagedata title=dom-imagedata>Constructor</a>(unsigned long sw, unsigned long sh),
+ <a href=#dom-imagedata title=dom-imagedata>Constructor</a>(<a href=#uint8clampedarray>Uint8ClampedArray</a> data, unsigned long sw, optional unsigned long sh)]
interface <dfn id=imagedata>ImageData</dfn> {
readonly attribute unsigned long <a href=#dom-imagedata-width title=dom-imagedata-width>width</a>;
readonly attribute unsigned long <a href=#dom-imagedata-height title=dom-imagedata-height>height</a>;
- readonly attribute double <a href=#dom-imagedata-resolution title=dom-imagedata-resolution>resolution</a>;
readonly attribute <a href=#uint8clampedarray>Uint8ClampedArray</a> <a href=#dom-imagedata-data title=dom-imagedata-data>data</a>;
};
@@ -58506,7 +58489,8 @@
<h6 id=pixel-manipulation><span class=secno>4.12.4.2.16 </span><dfn>Pixel manipulation</dfn></h6>
- <dl class=domintro><dt><var title="">imagedata</var> = <var title="">context</var> . <code title=dom-context-2d-createImageData><a href=#dom-context-2d-createimagedata>createImageData</a></code>(<var title="">sw</var>, <var title="">sh</var>)</dt>
+ <dl class=domintro><dt><var title="">imagedata</var> = new <code title=dom-imagedata><a href=#dom-imagedata>ImageData</a></code>(<var title="">sw</var>, <var title="">sh</var>)</dt>
+ <dt><var title="">imagedata</var> = <var title="">context</var> . <code title=dom-context-2d-createImageData><a href=#dom-context-2d-createimagedata>createImageData</a></code>(<var title="">sw</var>, <var title="">sh</var>)</dt>
<dd>
@@ -58527,16 +58511,13 @@
</dd>
- <dt><var title="">imagedata</var> = <var title="">context</var> . <code title=dom-context-2d-createImageDataHD><a href=#dom-context-2d-createimagedatahd>createImageDataHD</a></code>(<var title="">sw</var>, <var title="">sh</var>)</dt>
+ <dt><var title="">imagedata</var> = new <code title=dom-imagedata><a href=#dom-imagedata>ImageData</a></code>(<var title="">data</var>, <var title="">sw</var> [, <var title="">sh</var> ] )</dt>
<dd>
- <p>Returns an <code><a href=#imagedata>ImageData</a></code> object whose dimensions equal the dimensions given in the
- arguments, multiplied by the number of pixels in the canvas bitmap that correspond to each
- coordinate space unit. All the pixels in the returned object are transparent black.</p>
+ <p>Returns an <code><a href=#imagedata>ImageData</a></code> object using the data provided in the <code><a href=#uint8clampedarray>Uint8ClampedArray</a></code> argument, interpreted using the given dimensions.</p>
- <p>Throws an <code><a href=#indexsizeerror>IndexSizeError</a></code> exception if the either of the width or height
- arguments are zero.</p>
+ <p>Throws an <code><a href=#indexsizeerror>IndexSizeError</a></code> exception if the given data and dimensions can't be interpreted consistently.</p>
</dd>
@@ -58550,49 +58531,18 @@
<p>Throws an <code><a href=#indexsizeerror>IndexSizeError</a></code> exception if the either of the width or height
arguments are zero.</p>
- <p>The data will be returned with one pixel of image data for each coordinate space unit on the
- canvas (ignoring transforms).</p>
-
</dd>
- <dt><var title="">imagedata</var> = <var title="">context</var> . <code title=dom-context-2d-getImageDataHD><a href=#dom-context-2d-getimagedatahd>getImageDataHD</a></code>(<var title="">sx</var>, <var title="">sy</var>, <var title="">sw</var>, <var title="">sh</var>)</dt>
-
- <dd>
-
- <p>Returns an <code><a href=#imagedata>ImageData</a></code> object containing the image data for the given rectangle of
- the bitmap.</p>
-
- <p>Throws an <code><a href=#indexsizeerror>IndexSizeError</a></code> exception if the either of the width or height
- arguments are zero.</p>
-
- <p>The data will be returned at the same resolution as the canvas bitmap.</p>
-
- </dd>
-
<dt><var title="">imagedata</var> . <code title=dom-imagedata-width><a href=#dom-imagedata-width>width</a></code></dt>
<dt><var title="">imagedata</var> . <code title=dom-imagedata-height><a href=#dom-imagedata-height>height</a></code></dt>
<dd>
- <p>Returns the actual dimensions of the data in the <code><a href=#imagedata>ImageData</a></code> object, in pixels.
- For objects returned by the non-HD variants of the methods in this API, this will correspond to
- the dimensions given to the methods. For the HD variants, the number of pixels might be
- different than the number of corresponding coordinate space units.</p>
+ <p>Returns the actual dimensions of the data in the <code><a href=#imagedata>ImageData</a></code> object, in
+ pixels.</p>
</dd>
- <dt><var title="">imagedata</var> . <code title=dom-imagedata-resolution><a href=#dom-imagedata-resolution>resolution</a></code></dt>
-
- <dd>
-
- <p>Returns the theoretical number of pixels in the <code><a href=#imagedata>ImageData</a></code> object's data per
- corresponding coordinate space unit. This value is automatically determined from the source
- image when the <code><a href=#imagedata>ImageData</a></code> object is created. It is only used to ensure that
- <code><a href=#imagebitmap>ImageBitmap</a></code> objects have the right pixel density when generated from
- <code><a href=#imagedata>ImageData</a></code> objects.</p>
-
- </dd>
-
<dt><var title="">imagedata</var> . <code title=dom-imagedata-data><a href=#dom-imagedata-data>data</a></code></dt>
<dd>
@@ -58615,68 +58565,57 @@
<p>Throws a <code><a href=#notsupportederror>NotSupportedError</a></code> exception if any of the arguments are not finite.</p>
- <p>Each pixel in the image data is mapped to one coordinate space unit on the bitmap, regardless
- of the value of the <code title=dom-imagedata-resolution><a href=#dom-imagedata-resolution>resolution</a></code> attribute.</p>
-
</dd>
- <dt><var title="">context</var> . <code title=dom-context-2d-putImageDataHD><a href=#dom-context-2d-putimagedatahd>putImageDataHD</a></code>(<var title="">imagedata</var>, <var title="">dx</var>, <var title="">dy</var> [, <var title="">dirtyX</var>, <var title="">dirtyY</var>, <var title="">dirtyWidth</var>, <var title="">dirtyHeight</var> ])</dt>
+ </dl><div class=impl>
- <dd>
+ <p>The <dfn id=dom-imagedata title=dom-imagedata><code>ImageData()</code></dfn> constructors and the <dfn id=dom-context-2d-createimagedata title=dom-context-2d-createImageData><code>createImageData()</code></dfn> methods are used to
+ instantiate new <code><a href=#imagedata>ImageData</a></code> objects.</p>
- <p>Paints the data from the given <code><a href=#imagedata>ImageData</a></code> object onto the bitmap, at the bitmap's
- native pixel density (regardless of the value of the <code><a href=#imagedata>ImageData</a></code> object's <code title=dom-imagedata-resolution><a href=#dom-imagedata-resolution>resolution</a></code> attribute). If a dirty rectangle is provided,
- only the pixels from that rectangle are painted.</p>
+ <p>When the <code title=dom-imagedata><a href=#dom-imagedata>ImageData()</a></code> constructor is invoked with two
+ numeric arguments <var title="">sw</var> and <var title="">sh</var>, it must return a new
+ <code><a href=#imagedata>ImageData</a></code> object representing a rectangle with a width equal to <var title="">sw</var> and a height equal to <var title="">sh</var>, if both <var title="">sw</var>
+ and <var title="">sh</var> are non-zero. If one or both of <var title="">sw</var> and <var title="">sh</var> are zero, then the constructor must throw an <code><a href=#indexsizeerror>IndexSizeError</a></code>
+ exception instead.</p>
- <p>The <code title=dom-context-2d-globalAlpha><a href=#dom-context-2d-globalalpha>globalAlpha</a></code> and <code title=dom-context-2d-globalCompositeOperation><a href=#dom-context-2d-globalcompositeoperation>globalCompositeOperation</a></code> attributes, as
- well as the shadow attributes, are ignored for the purposes of this method call; pixels in the
- canvas are replaced wholesale, with no composition, alpha blending, no shadows, etc.</p>
+ <p>When the <code title=dom-imagedata><a href=#dom-imagedata>ImageData()</a></code> constructor is invoked with its first
+ argument being an <code><a href=#uint8clampedarray>Uint8ClampedArray</a></code> <var title="">source</var> and its second and
+ (optionally) third argument(s) being numeric arguments <var title="">sw</var> and <var title="">sh</var>, it must run the following steps:
- <p>Throws a <code><a href=#notsupportederror>NotSupportedError</a></code> exception if any of the arguments are not finite.</p>
+ <ol><li><p>Let <var title="">length</var> be the number of bytes in <var title="">source</var>.</li>
- </dd>
+ <li><p>If <var title="">length</var> is not a non-zero integral multiple of four, throw an
+ <code><a href=#invalidstateerror>InvalidStateError</a></code> exception and abort these steps.</li>
- </dl><div class=impl>
+ <li><p>Let <var title="">length</var> be <var title="">length</var> divided by four.</p>
- <p>The <code title=dom-context-2d-createImageData><a href=#dom-context-2d-createimagedata>createImageData()</a></code> and <code title=dom-context-2d-createImageDataHD><a href=#dom-context-2d-createimagedatahd>createImageDataHD()</a></code> methods are used to
- instantiate new blank <code><a href=#imagedata>ImageData</a></code> objects.</p>
+ <li><p>If <var title="">length</var> is not an integral multiple of <var title="">sw</var>,
+ throw an <code><a href=#indexsizeerror>IndexSizeError</a></code> exception and abort these steps.</li> <!-- nothing
+ non-zero is an integral multiple of 0, so this will throw for sw=0 -->
- <p>When the <dfn id=dom-context-2d-createimagedata title=dom-context-2d-createImageData><code>createImageData()</code></dfn>
- method is invoked with two arguments <var title="">sw</var> and <var title="">sh</var>, it must
- return a new <code><a href=#imagedata>ImageData</a></code> object representing a rectangle with a width in equal to the
- absolute magnitude of <var title="">sw</var> and a height equal to the absolute magnitude of <var title="">sh</var>, and with a 1.0 pixel density, if both <var title="">sw</var> and <var title="">sh</var> are non-zero. If one or both of <var title="">sw</var> and <var title="">sh</var> are zero, then the method must throw an <code><a href=#indexsizeerror>IndexSizeError</a></code> exception
- instead. When invoked with a single <var title="">imagedata</var> argument, it must return a new
- <code><a href=#imagedata>ImageData</a></code> object representing a rectangle with the same dimensions and pixel density
- as the <code><a href=#imagedata>ImageData</a></code> object passed as the argument. When the method returns an
- <code><a href=#imagedata>ImageData</a></code> object, it must be filled with transparent black.</p>
+ <li><p>Let <var title="">height</var> be <var title="">length</var> divided by <var title="">sw</var>.</li>
- <p>When the <dfn id=dom-context-2d-createimagedatahd title=dom-context-2d-createImageDataHD><code>createImageDataHD()</code></dfn>
- method is invoked and both of its arguments (<var title="">sw</var> and <var title="">sh</var>)
- are non-zero, it must return a new <code><a href=#imagedata>ImageData</a></code> object representing a rectangle with a
- width equal to the absolute magnitude of <var title="">sw</var> multiplied by <var title="">scale</var>, a height equal to the absolute magnitude of <var title="">sh</var>
- multiplied by <var title="">scale</var>, and a pixel density equal to <var title="">scale</var>,
- where <var title="">scale</var> is the number of pixels in the <a href=#scratch-bitmap>scratch bitmap</a> per
- coordinate space units. The <code><a href=#imagedata>ImageData</a></code> object returned must be filled with transparent
- black. If either or both of the arguments are zero, the method must instead throw an
- <code><a href=#indexsizeerror>IndexSizeError</a></code> exception.</p>
+ <li><p>If the <var title="">sh</var> argument was not omitted, and its value is not equal to
+ <var title="">height</var>, then throw an <code><a href=#indexsizeerror>IndexSizeError</a></code> exception and abort these
+ steps.</li>
- <p>The <dfn id=dom-context-2d-getimagedata title=dom-context-2d-getImageData><code>getImageData(<var title="">sx</var>, <var title="">sy</var>, <var title="">sw</var>, <var title="">sh</var>)</code></dfn> method must, if
- either the <var title="">sw</var> or <var title="">sh</var> arguments are zero, throw an
- <code><a href=#indexsizeerror>IndexSizeError</a></code> exception; otherwise,
- <!--ADD-TOPIC:Security-->
- if the <a href=#scratch-bitmap>scratch bitmap</a>'s <a href=#concept-canvas-origin-clean title=concept-canvas-origin-clean>origin-clean</a>
- flag is set to false, it must throw a <code><a href=#securityerror>SecurityError</a></code> exception;
- <!--REMOVE-TOPIC:Security-->
- otherwise, it must return an <code><a href=#imagedata>ImageData</a></code> object with width <var title="">sw</var> and
- height <var title="">sh</var> representing the <a href=#scratch-bitmap>scratch bitmap</a> for the area of that
- bitmap denoted by the rectangle whose corners are the four points (<var title="">sx</var>, <var title="">sy</var>), (<span title=""><var title="">sx</var>+<var title="">sw</var></span>, <var title="">sy</var>), (<span title=""><var title="">sx</var>+<var title="">sw</var></span>, <span title=""><var title="">sy</var>+<var title="">sh</var></span>), (<var title="">sx</var>, <span title=""><var title="">sy</var>+<var title="">sh</var></span>), in the bitmap's coordinate space
- units. If the bitmap does not represent each coordinate space unit square using exactly one pixel,
- the value of each pixel in the returned object must be derived from the value(s) of the pixel(s)
- in the bitmap that correspond to the same coordinate. Pixels outside the <a href=#scratch-bitmap>scratch
- bitmap</a> must be returned as transparent black. Pixels must be returned as non-premultiplied
- alpha values. The pixel density of the object returned must be 1.0.</p>
+ <li><p>Return a new <code><a href=#imagedata>ImageData</a></code> object whose width is <var title="">sw</var>, whose
+ height is <var title="">height</var>, and whose data is <var title="">source</var>.</li>
- <p>The <dfn id=dom-context-2d-getimagedatahd title=dom-context-2d-getImageDataHD><code>getImageDataHD(<var title="">sx</var>,
+ </ol><p>When the <code title=dom-context-2d-createImageData><a href=#dom-context-2d-createimagedata>createImageData()</a></code> method is
+ invoked with two numeric arguments <var title="">sw</var> and <var title="">sh</var>, it must
+ return a new <code><a href=#imagedata>ImageData</a></code> object representing a transparent black rectangle with a width
+ equal to the absolute magnitude of <var title="">sw</var> and a height equal to the absolute
+ magnitude of <var title="">sh</var>, if both <var title="">sw</var> and <var title="">sh</var>
+ are non-zero. If one or both of <var title="">sw</var> and <var title="">sh</var> are zero, then
+ the constructor must throw an <code><a href=#indexsizeerror>IndexSizeError</a></code> exception instead.</p>
+
+ <p>When the <code title=dom-context-2d-createImageData><a href=#dom-context-2d-createimagedata>createImageData()</a></code> method is
+ invoked with a single <var title="">imagedata</var> argument, it must return a new
+ <code><a href=#imagedata>ImageData</a></code> object representing a transparent black rectangle with the same dimensions
+ as the <code><a href=#imagedata>ImageData</a></code> object passed as the argument.</p>
+
+ <p>The <dfn id=dom-context-2d-getimagedata title=dom-context-2d-getImageData><code>getImageData(<var title="">sx</var>,
<var title="">sy</var>, <var title="">sw</var>, <var title="">sh</var>)</code></dfn> method must,
if either the <var title="">sw</var> or <var title="">sh</var> arguments are zero, throw an
<code><a href=#indexsizeerror>IndexSizeError</a></code> exception; otherwise,
@@ -58684,20 +58623,18 @@
if the <a href=#scratch-bitmap>scratch bitmap</a>'s <a href=#concept-canvas-origin-clean title=concept-canvas-origin-clean>origin-clean</a>
flag is set to false, it must throw a <code><a href=#securityerror>SecurityError</a></code> exception;
<!--REMOVE-TOPIC:Security-->
- otherwise, it must return an <code><a href=#imagedata>ImageData</a></code> object with width <var title="">sw</var>
- multiplied by <var title="">scale</var> and height <var title="">sh</var> multiplied by <var title="">scale</var> representing the <a href=#scratch-bitmap>scratch bitmap</a> for the area of that bitmap
+ otherwise, it must return an <code><a href=#imagedata>ImageData</a></code> object with width <var title="">sw</var> and
+ height <var title="">sh</var> representing the <a href=#scratch-bitmap>scratch bitmap</a> for the area of that bitmap
denoted by the rectangle whose corners are the four points (<var title="">sx</var>, <var title="">sy</var>), (<span title=""><var title="">sx</var>+<var title="">sw</var></span>, <var title="">sy</var>), (<span title=""><var title="">sx</var>+<var title="">sw</var></span>, <span title=""><var title="">sy</var>+<var title="">sh</var></span>), (<var title="">sx</var>, <span title=""><var title="">sy</var>+<var title="">sh</var></span>), in the bitmap's coordinate space
units. Pixels outside the <a href=#scratch-bitmap>scratch bitmap</a> must be returned as transparent black.
- Pixels must be returned as non-premultiplied alpha values. The pixel density of the object
- returned must be <var title="">scale</var>. For the purposes of this paragraph, <var title="">scale</var> is the number of pixels in the <a href=#scratch-bitmap>scratch bitmap</a> per coordinate
- space units.</p>
+ Pixels must be returned as non-premultiplied alpha values.</p>
+<!--CLEANUP-->
<p>New <code><a href=#imagedata>ImageData</a></code> objects must be initialized so that their <dfn id=dom-imagedata-width title=dom-imagedata-width><code>width</code></dfn> attribute is set to the number of pixels per
row in the image data, their <dfn id=dom-imagedata-height title=dom-imagedata-height><code>height</code></dfn> attribute
- is set to the number of rows in the image data, their <dfn id=dom-imagedata-resolution title=dom-imagedata-resolution><code>resolution</code></dfn> is set to the object's pixel
- density, and their <dfn id=dom-imagedata-data title=dom-imagedata-data><code>data</code></dfn> attribute is
- initialized to a <code><a href=#uint8clampedarray>Uint8ClampedArray</a></code> object. The <code><a href=#uint8clampedarray>Uint8ClampedArray</a></code> object
- must use a <a href=#canvas-pixel-arraybuffer>Canvas Pixel <code>ArrayBuffer</code></a> for its storage, and must have a
+ is set to the number of rows in the image data, and their <dfn id=dom-imagedata-data title=dom-imagedata-data><code>data</code></dfn> attribute, except where an existing array is provided, is
+ initialized to a new <code><a href=#uint8clampedarray>Uint8ClampedArray</a></code> object. The <code><a href=#uint8clampedarray>Uint8ClampedArray</a></code> object
+ must use a new <a href=#canvas-pixel-arraybuffer>Canvas Pixel <code>ArrayBuffer</code></a> for its storage, and must have a
zero start offset and a length equal to the length of its storage, in bytes. The <a href=#canvas-pixel-arraybuffer>Canvas
Pixel <code>ArrayBuffer</code></a> must contain the image data. At least one pixel's worth of
image data must be returned. <a href=#refsTYPEDARRAY>[TYPEDARRAY]</a></p>
@@ -58709,15 +58646,15 @@
the 8 bit value for that component. The components must be assigned consecutive indices starting
with 0 for the top left pixel's red component. <a href=#refsTYPEDARRAY>[TYPEDARRAY]</a></p>
- <p>The <dfn id=dom-context-2d-putimagedata title=dom-context-2d-putImageData><code>putImageData()</code></dfn> and <dfn id=dom-context-2d-putimagedatahd title=dom-context-2d-putImageDataHD><code>putImageDataHD()</code></dfn> methods write data from
+ <p>The <dfn id=dom-context-2d-putimagedata title=dom-context-2d-putImageData><code>putImageData()</code></dfn> method writes data from
<code><a href=#imagedata>ImageData</a></code> structures back to the rendering context's <a href=#scratch-bitmap>scratch bitmap</a>.
- Their arguments are: <var title="">imagedata</var>, <var title="">dx</var>, <var title="">dy</var>, <var title="">dirtyX</var>, <var title="">dirtyY</var>, <var title="">dirtyWidth</var>, and <var title="">dirtyHeight</var>.</p>
+ Its arguments are: <var title="">imagedata</var>, <var title="">dx</var>, <var title="">dy</var>, <var title="">dirtyX</var>, <var title="">dirtyY</var>, <var title="">dirtyWidth</var>, and <var title="">dirtyHeight</var>.</p>
- <p>When the last four arguments to these methods are omitted, they must be assumed to have the
+ <p>When the last four arguments to this method are omitted, they must be assumed to have the
values 0, 0, the <code title=dom-imagedata-width><a href=#dom-imagedata-width>width</a></code> member of the <var title="">imagedata</var> structure, and the <code title=dom-imagedata-height><a href=#dom-imagedata-height>height</a></code>
member of the <var title="">imagedata</var> structure, respectively.</p>
- <p>When invoked, these methods must act as follows:</p>
+ <p>When invoked, the method must act as follows:</p>
<ol><li>
@@ -58753,58 +58690,17 @@
</li>
- <li>
+ <li><p>For all integer values of <var title="">x</var> and <var title="">y</var> where <span title=""><var title="">dirtyX</var> ≤ <var title="">x</var> < <span title=""><var title="">dirtyX</var>+<var title="">dirtyWidth</var></span></span> and <span title=""><var title="">dirtyY</var> ≤ <var title="">y</var> < <span title=""><var title="">dirtyY</var>+<var title="">dirtyHeight</var></span></span>, copy the
+ four channels of the pixel with coordinate (<var title="">x</var>, <var title="">y</var>) in
+ the <var title="">imagedata</var> data structure to the pixel with coordinate (<span title=""><var title="">dx</var>+<var title="">x</var></span>, <span title=""><var title="">dy</var>+<var title="">y</var></span>) in the rendering context's <a href=#scratch-bitmap>scratch
+ bitmap</a>.</li>
- <p>Run the appropriate steps from the following list:</p>
+ </ol><p>The handling of pixel rounding when the specified coordinates are not integers is not defined
+ by this specification, except that the following must result in no visible changes to the
+ rendering:</p>
- <dl class=switch><dt>If the method was <code title=dom-context-2d-putImageData><a href=#dom-context-2d-putimagedata>putImageData()</a></code></dt>
+ <pre>context.putImageData(context.getImageData(x, y, w, h), p, q);</pre>
- <dd>
-
- <p>Draw the region of the image data in the horizontal rectangle whose top left corner is at
- (<var title="">dirtyX</var>,<var title="">dirtyY</var>) and whose bottom right corner is at
- (<span title=""><var title="">dirtyX</var>+<var title="">dirtyWidth</var></span>,<span title=""><var title="">dirtyY</var>+<var title="">dirtyHeight</var></span>) onto the rendering
- context's <a href=#scratch-bitmap>scratch bitmap</a>, aligned such that the top left of the rectangle is at
- coordinate (<var title="">dx</var>,<var title="">dy</var>).</p>
-
- <p>If the <code title=dom-context-2d-imageSmoothingEnabled><a href=#dom-context-2d-imagesmoothingenabled>imageSmoothingEnabled</a></code>
- attribute is set to true, then the user agent should attempt to apply a smoothing algorithm to
- the image data if the <a href=#scratch-bitmap>scratch bitmap</a> does not have exactly one device pixel per
- coordinate space unit.</p>
-
- </dd>
-
- <dt>If the method was <code title=dom-context-2d-putImageDataHD><a href=#dom-context-2d-putimagedatahd>putImageDataHD()</a></code></dt>
-
- <dd>
-
- <ol><li>
-
- <p>Let <var title="">dx<sub title="">device</sub></var> be the x-coordinate of the device pixel in
- the <a href=#scratch-bitmap>scratch bitmap</a> corresponding to the <var title="">dx</var> coordinate in
- the <a href=#scratch-bitmap>scratch bitmap</a>'s coordinate space.</p>
-
- <p>Let <var title="">dy<sub title="">device</sub></var> be the y-coordinate of the device pixel in
- the <a href=#scratch-bitmap>scratch bitmap</a> corresponding to the <var title="">dy</var> coordinate in
- the <a href=#scratch-bitmap>scratch bitmap</a>'s coordinate space.</p>
-
- </li>
-
- <li><p>For all integer values of <var title="">x</var> and <var title="">y</var> where <span title=""><var title="">dirtyX</var> ≤ <var title="">x</var> < <span title=""><var title="">dirtyX</var>+<var title="">dirtyWidth</var></span></span> and <span title=""><var title="">dirtyY</var> ≤ <var title="">y</var> < <span title=""><var title="">dirtyY</var>+<var title="">dirtyHeight</var></span></span>, copy the
- four channels of the pixel with coordinate (<var title="">x</var>, <var title="">y</var>) in
- the <var title="">imagedata</var> data structure to the pixel with coordinate (<span title=""><var title="">dx<sub title="">device</sub></var>+<var title="">x</var></span>, <span title=""><var title="">dy<sub title="">device</sub></var>+<var title="">y</var></span>) in the
- rendering context's <a href=#scratch-bitmap>scratch bitmap</a>.</li>
-
- </ol></dd>
-
- </dl></li>
-
- </ol><p>The handling of pixel rounding when the specified coordinates do not exactly map to the device
- coordinate space is not defined by this specification, except that the following must result in no
- visible changes to the rendering:</p>
-
- <pre>context.putImageDataHD(context.getImageDataHD(x, y, w, h), p, q);</pre>
-
<p>...for any value of <var title="">x</var>, <var title="">y</var>, <var title="">w</var>, and
<var title="">h</var> and where <var title="">p</var> is the smaller of <var title="">x</var> and
the sum of <var title="">x</var> and <var title="">w</var>, and <var title="">q</var> is the
@@ -58814,21 +58710,16 @@
<pre>context.createImageData(w, h);
context.getImageData(0, 0, w, h);</pre>
- <p>...must return <code><a href=#imagedata>ImageData</a></code> objects with the same dimensions as each other, and the
- following two calls:</p>
-
- <pre>context.createImageDataHD(w, h);
-context.getImageDataHD(0, 0, w, h);</pre>
-
- <p>...must also return <code><a href=#imagedata>ImageData</a></code> objects with the same dimensions as each other, for
- any value of <var title="">w</var> and <var title="">h</var> in both cases. In other words, while
- user agents may round the arguments of these methods so that they map to device pixel boundaries,
+<!--CLEANUP-->
+ <p>...must return <code><a href=#imagedata>ImageData</a></code> objects with the same dimensions as each other, for
+ any value of <var title="">w</var> and <var title="">h</var>. In other words, while
+ user agents may round the arguments of these methods,
any rounding performed must be performed consistently for all of the methods described in this
- section.</p>
+ section. (The constructors only work with integer values.)</p>
<p class=note>Due to the lossy nature of converting to and from premultiplied alpha color
- values, pixels that have just been set using <code title=dom-context-2d-putImageDataHD><a href=#dom-context-2d-putimagedatahd>putImageDataHD()</a></code> might be returned to an equivalent
- <code title=dom-context-2d-getImageDataHD><a href=#dom-context-2d-getimagedatahd>getImageDataHD()</a></code> as different values.</p>
+ values, pixels that have just been set using <code title=dom-context-2d-putImageData><a href=#dom-context-2d-putimagedata>putImageData()</a></code> might be returned to an equivalent
+ <code title=dom-context-2d-getImageData><a href=#dom-context-2d-getimagedata>getImageData()</a></code> as different values.</p>
<p>The current path, <a href=#transformations title=dom-context-2d-transformation>transformation matrix</a>,
<a href=#shadows title=shadows>shadow attributes</a>, <a href=#dom-context-2d-globalalpha title=dom-context-2d-globalAlpha>global
@@ -58846,7 +58737,7 @@
var context = canvas.getContext('2d');
// create a blank slate
-var data = context.createImageDataHD(canvas.width, canvas.height);
+var data = context.createImageData(canvas.width, canvas.height);
// create some plasma
FillPlasma(data, 'green'); // green plasma
@@ -58855,7 +58746,7 @@
AddCloud(data, data.width/2, data.height/2); // put a cloud in the middle
// paint the plasma+cloud on the canvas
-context.putImageDataHD(data, 0, 0);
+context.putImageData(data, 0, 0);
// support methods
function FillPlasma(data, color) { ... }
@@ -58865,7 +58756,7 @@
<div class=example>
- <p>Here is an example of using <code title=dom-context-2d-getImageDataHD><a href=#dom-context-2d-getimagedatahd>getImageDataHD()</a></code> and <code title=dom-context-2d-putImageDataHD><a href=#dom-context-2d-putimagedatahd>putImageDataHD()</a></code> to implement an edge detection
+ <p>Here is an example of using <code title=dom-context-2d-getImageData><a href=#dom-context-2d-getimagedata>getImageData()</a></code> and <code title=dom-context-2d-putImageData><a href=#dom-context-2d-putimagedata>putImageData()</a></code> to implement an edge detection
filter.</p>
<pre><!DOCTYPE HTML>
@@ -58886,10 +58777,10 @@
context.drawImage(image, 0, 0);
// get the image data to manipulate
- var input = context.getImageDataHD(0, 0, canvas.width, canvas.height);
+ var input = context.getImageData(0, 0, canvas.width, canvas.height);
// get an empty slate to put the data into
- var output = context.createImageDataHD(canvas.width, canvas.height);
+ var output = context.createImageData(canvas.width, canvas.height);
// alias some variables for convenience
// notice that we are using input.width and input.height here
@@ -58913,7 +58804,7 @@
}
// put the image data back after manipulation
- context.putImageDataHD(output, 0, 0);
+ context.putImageData(output, 0, 0);
}
</script>
</head>
@@ -59459,49 +59350,10 @@
- <h5 id=pixel-density><span class=secno>4.12.4.3 </span>Pixel density</h5>
- <p>The user agent may use any square pixel density for the bitmaps of a <code><a href=#the-canvas-element>canvas</a></code> and
- its rendering contexts. Once a <code><a href=#the-canvas-element>canvas</a></code> has a bitmap, that canvas must keep its
- resolution for its lifetime.</p>
-
- <p class=note>In general, user agents are encouraged to use a pixel density equal to the screen
- pixel density. Ideally, the number of device pixels per CSS pixel would be a multiple of two.
- Several factors can affect the screen pixel density: most prominently the actual display pixel
- density, but also important is the current zoom level.</p>
-
- <p>All the bitmaps created during a single <a href=#concept-task title=concept-task>task</a> for
- <code><a href=#the-canvas-element>canvas</a></code> elements and <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> objects must have the same
- pixel density.
- <a href=#fingerprinting-vector class=fingerprint title="fingerprinting vector"><img src=http://images.whatwg.org/fingerprint.png width=46 alt="(This is a fingerprinting vector.)" height=64></a>
- </p>
-
- <pre class=idl>partial interface <a href=#screen id=Screen-partial>Screen</a> {
- readonly attribute double <a href=#dom-screen-canvasresolution title=dom-screen-canvasResolution>canvasResolution</a>;
-};</pre>
-
- <dl class=domintro><dt><var title="">window</var> . <code title=dom-Window-screen>screen</code> . <code title=dom-screen-canvasResolution><a href=#dom-screen-canvasresolution>canvasResolution</a></code></dt>
-
- <dd>
-
- <p>Returns the pixel density that has been, or will be, used for bitmaps during this <a href=#concept-task title=concept-task>task</a>.</p>
-
- </dd>
-
- </dl><div class=impl>
-
- <p>The <dfn id=dom-screen-canvasresolution title=dom-screen-canvasResolution><code>canvasResolution</code></dfn> attribute of
- the <code><a href=#screen>Screen</a></code> object must return the pixel density, in image pixels per coordinate space
- units, that any <code><a href=#the-canvas-element>canvas</a></code> and <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> bitmaps created
- during this <a href=#concept-task title=concept-task>task</a> will use (or have used). <a href=#refsCSSOMVIEW>[CSSOMVIEW]</a></p>
-
- </div>
-
-
-
<div class=impl>
- <h5 id=color-spaces-and-color-correction><span class=secno>4.12.4.4 </span>Color spaces and color correction</h5>
+ <h5 id=color-spaces-and-color-correction><span class=secno>4.12.4.3 </span>Color spaces and color correction</h5>
<p>The <code><a href=#the-canvas-element>canvas</a></code> APIs must perform color correction at only two points: when rendering
images with their own gamma correction and color space information onto a bitmap, to convert the
@@ -59509,14 +59361,12 @@
object), and when rendering the actual canvas bitmap to the output device.</p>
<p class=note>Thus, in the 2D context, colors used to draw shapes onto the canvas will exactly
- match colors obtained through the <code title=dom-context-2d-getImageDataHD><a href=#dom-context-2d-getimagedatahd>getImageDataHD()</a></code> method.</p>
+ match colors obtained through the <code title=dom-context-2d-getImageData><a href=#dom-context-2d-getimagedata>getImageData()</a></code> method.</p>
- <p>The <code title=dom-canvas-toDataURL><a href=#dom-canvas-todataurl>toDataURL()</a></code> and <code title=dom-canvas-toDataURLHD><a href=#dom-canvas-todataurlhd>toDataURLHD()</a></code> methods must not include color space
+ <p>The <code title=dom-canvas-toDataURL><a href=#dom-canvas-todataurl>toDataURL()</a></code> method must not include color space
information in the resources they return. Where the output format allows it, the color of pixels
in resources created by <code title=dom-canvas-toDataURL><a href=#dom-canvas-todataurl>toDataURL()</a></code> must match those
- returned by the <code title=dom-context-2d-getImageData><a href=#dom-context-2d-getimagedata>getImageData()</a></code> method, and the
- color of pixels in resources created by <code title=dom-canvas-toDataURLHD><a href=#dom-canvas-todataurlhd>toDataURLHD()</a></code>
- must match those returned by the <code title=dom-context-2d-getImageDataHD><a href=#dom-context-2d-getimagedatahd>getImageDataHD()</a></code> method.</p>
+ returned by the <code title=dom-context-2d-getImageData><a href=#dom-context-2d-getimagedata>getImageData()</a></code> method.</p>
<p>In user agents that support CSS, the color space used by a <code><a href=#the-canvas-element>canvas</a></code> element must
match the color space used for processing any colors for that element in CSS.</p>
@@ -59527,14 +59377,14 @@
of images that have no color correction information (such as those returned by the <code title=dom-canvas-toDataURL><a href=#dom-canvas-todataurl>toDataURL()</a></code> method) must be rendered with no color
correction.</p>
- <p class=note>Thus, in the 2D context, calling the <code title=dom-context-2d-drawImage><a href=#dom-context-2d-drawimage>drawImage()</a></code> method to render the output of the <code title=dom-canvas-toDataURLHD><a href=#dom-canvas-todataurlhd>toDataURLHD()</a></code> method to the canvas, given the appropriate
+ <p class=note>Thus, in the 2D context, calling the <code title=dom-context-2d-drawImage><a href=#dom-context-2d-drawimage>drawImage()</a></code> method to render the output of the <code title=dom-canvas-toDataURL><a href=#dom-canvas-todataurl>toDataURL()</a></code> method to the canvas, given the appropriate
dimensions, has no visible effect.</p>
</div>
- <h5 id=serializing-bitmaps-to-a-file><span class=secno>4.12.4.5 </span>Serializing bitmaps to a file</h5>
+ <h5 id=serializing-bitmaps-to-a-file><span class=secno>4.12.4.4 </span>Serializing bitmaps to a file</h5>
<div class=impl>
@@ -59601,7 +59451,7 @@
<!--ADD-TOPIC:Security-->
<div class=impl>
- <h5 id=security-with-canvas-elements><span class=secno>4.12.4.6 </span>Security with <code><a href=#the-canvas-element>canvas</a></code> elements</h5>
+ <h5 id=security-with-canvas-elements><span class=secno>4.12.4.5 </span>Security with <code><a href=#the-canvas-element>canvas</a></code> elements</h5>
<p><i>This section is non-normative.</i></p>
@@ -59613,7 +59463,7 @@
bitmaps start with their <a href=#concept-canvas-origin-clean title=concept-canvas-origin-clean>origin-clean</a> set to
true. The flag is set to false when cross-origin images or fonts are used.</p>
- <p>The <code title=dom-canvas-toDataURL><a href=#dom-canvas-todataurl>toDataURL()</a></code>, <code title=dom-canvas-toDataURLHD><a href=#dom-canvas-todataurlhd>toDataURLHD()</a></code>, <code title=dom-canvas-toBlob><a href=#dom-canvas-toblob>toBlob()</a></code>, <code title=dom-context-2d-getImageData><a href=#dom-context-2d-getimagedata>getImageData()</a></code>, and <code title=dom-context-2d-getImageDataHD><a href=#dom-context-2d-getimagedatahd>getImageDataHD()</a></code> methods check the flag and will
+ <p>The <code title=dom-canvas-toDataURL><a href=#dom-canvas-todataurl>toDataURL()</a></code>, <code title=dom-canvas-toBlob><a href=#dom-canvas-toblob>toBlob()</a></code>, and <code title=dom-context-2d-getImageData><a href=#dom-context-2d-getimagedata>getImageData()</a></code> methods check the flag and will
throw a <code><a href=#securityerror>SecurityError</a></code> exception rather than leak cross-origin data.</p>
<p>The flag can be reset in certain situations; for example, when a
@@ -75185,7 +75035,6 @@
<pre class=idl>interface <dfn id=imagebitmap>ImageBitmap</dfn> {
readonly attribute unsigned long <a href=#dom-imagebitmap-width title=dom-ImageBitmap-width>width</a>;
readonly attribute unsigned long <a href=#dom-imagebitmap-height title=dom-ImageBitmap-height>height</a>;
- readonly attribute double <a href=#dom-imagebitmap-resolution title=dom-ImageBitmap-resolution>resolution</a>;
};
typedef (<a href=#htmlimageelement>HTMLImageElement</a> or
@@ -75254,18 +75103,10 @@
</dd>
- <dt><var title="">imageBitmap</var> . <code title=dom-ImageBitmap-resolution><a href=#dom-imagebitmap-resolution>resolution</a></code></dt>
-
- <dd>
-
- <p>Returns the intrinsic linear pixel density of the image, in image pixels per CSS pixels.</p>
-
- </dd>
-
</dl><div class=impl>
- <p>An <code><a href=#imagebitmap>ImageBitmap</a></code> object always has associated bitmap data, with a width, a
- height, and a pixel density. However, it is possible for this data to be corrupted. If an <code><a href=#imagebitmap>ImageBitmap</a></code>
+ <p>An <code><a href=#imagebitmap>ImageBitmap</a></code> object always has associated bitmap data, with a width and a
+ height. However, it is possible for this data to be corrupted. If an <code><a href=#imagebitmap>ImageBitmap</a></code>
object's media data can be decoded without errors, it is said to be <dfn id=concept-imagebitmap-good title=concept-ImageBitmap-good>fully decodable</dfn>.</p>
<p>An <code><a href=#imagebitmap>ImageBitmap</a></code> object can be obtained from a variety of different objects, using
@@ -75432,9 +75273,7 @@
<li><p>Create a new <code><a href=#imagebitmap>ImageBitmap</a></code> object.</li>
<li><p>Let the <code><a href=#imagebitmap>ImageBitmap</a></code> object's bitmap data be the image data given by the
- <code><a href=#imagedata>ImageData</a></code> object, <a href=#cropped-to-the-source-rectangle>cropped to the source rectangle</a>, using the value
- of the object's <code title=dom-imagedata-resolution><a href=#dom-imagedata-resolution>resolution</a></code> attribute as the
- object's pixel density.</li>
+ <code><a href=#imagedata>ImageData</a></code> object, <a href=#cropped-to-the-source-rectangle>cropped to the source rectangle</a>.</li>
<li><p>Return a new <code><a href=#promise>Promise</a></code>, but continue running these steps asynchronously.</li>
@@ -75524,9 +75363,6 @@
</li>
- <li><p>Let <var title="">output</var>'s pixel density be <var title="">input</var>'s pixel
- density.</li>
-
<li><p>Return <var title="">output</var>.</li>
</ol><p>The <dfn id=dom-imagebitmap-width title=dom-ImageBitmap-width><code>width</code></dfn> attribute must return the
@@ -75535,9 +75371,6 @@
<p>The <dfn id=dom-imagebitmap-height title=dom-ImageBitmap-height><code>height</code></dfn> attribute must return the
<code><a href=#imagebitmap>ImageBitmap</a></code> object's height, in CSS pixels.</p>
- <p>The <dfn id=dom-imagebitmap-resolution title=dom-ImageBitmap-resolution><code>resolution</code></dfn> attribute must return the
- <code><a href=#imagebitmap>ImageBitmap</a></code> object's linear pixel density, in image data pixels per CSS pixel.</p>
-
</div>
<div class=example>
@@ -101993,7 +101826,6 @@
<li><code><a href=#propertynodelist>PropertyNodeList</a></code>
<li><code><a href=#radionodelist>RadioNodeList</a></code>
<li><code><a href=#relatedevent>RelatedEvent</a></code>
- <li><code>Screen</code>, <a href=#Screen-partial>partial</a>
<li><code><a href=#sharedworker>SharedWorker</a></code>
<li><code><a href=#sharedworkerglobalscope>SharedWorkerGlobalScope</a></code>
<li><code><a href=#storage-0>Storage</a></code>
Modified: source
===================================================================
--- source 2014-01-14 00:43:20 UTC (rev 8396)
+++ source 2014-01-15 22:06:56 UTC (rev 8397)
@@ -7842,10 +7842,10 @@
<dt>If <var data-x="">input</var> is an <code>ImageData</code> object</dt>
+<!--CLEANUP-->
<dd><p>Let <var data-x="">output</var> be a newly constructed <code>ImageData</code> object
- whose <code data-x="dom-imagedata-width">width</code>, <code
- data-x="dom-imagedata-height">height</code>, and <code
- data-x="dom-imagedata-resolution">resolution</code> attributes have values equal to the
+ whose <code data-x="dom-imagedata-width">width</code> and <code
+ data-x="dom-imagedata-height">height</code> have values equal to the
corresponding attributes on <var data-x="">input</var>, and whose <code
data-x="dom-imagedata-data">data</code> attribute has the value obtained from invoking the
<span>internal structured cloning algorithm</span> recursively with the value of the <code
@@ -59260,9 +59260,7 @@
<span>CanvasProxy</span> <span data-x="dom-canvas-transferControlToProxy">transferControlToProxy</span>();
DOMString <span data-x="dom-canvas-toDataURL">toDataURL</span>(optional DOMString type, any... arguments);
- DOMString <span data-x="dom-canvas-toDataURLHD">toDataURLHD</span>(optional DOMString type, any... arguments);
void <span data-x="dom-canvas-toBlob">toBlob</span>(<span>FileCallback</span>? _callback, optional DOMString type, any... arguments);
- void <span data-x="dom-canvas-toBlobHD">toBlobHD</span>(<span>FileCallback</span>? _callback, optional DOMString type, any... arguments);
};</pre>
</dd>
</dl><!--REMOVE-TOPIC:DOM APIs-->
@@ -59325,6 +59323,9 @@
<p>The intrinsic dimensions of the <code>canvas</code> element when it <span>represents</span>
<span>embedded content</span> are equal to the dimensions of the element's bitmap.</p>
+ <p>The user agent must use a square pixel density consisting of one pixel of image data per
+ coordinate space unit for the bitmaps of a <code>canvas</code> and its rendering contexts.</p>
+
<p class="note">A <code>canvas</code> element can be sized arbitrarily by a style sheet, its
bitmap is then subject to the 'object-fit' CSS property. <a
href="#refsCSSIMAGES">[CSSIMAGES]</a></p>
@@ -59383,9 +59384,6 @@
</div>
- <p class="note">The bitmaps used with <code>canvas</code> elements can have arbitrary pixel
- densities. Typically, the density will match that of the user's screen.</p>
-
<hr>
<!--ADD-TOPIC:DOM APIs-->
@@ -59615,7 +59613,6 @@
<dl class="domintro">
<dt><var data-x="">url</var> = <var data-x="">canvas</var> . <code data-x="dom-canvas-toDataURL">toDataURL</code>( [ <var data-x="">type</var>, ... ] )</dt>
- <dt><var data-x="">url</var> = <var data-x="">canvas</var> . <code data-x="dom-canvas-toDataURLHD">toDataURLHD</code>( [ <var data-x="">type</var>, ... ] )</dt>
<dd>
@@ -59635,14 +59632,9 @@
not supported. (The one exception to this is if the canvas has either no height or no width, in
which case the result might simply be "<code data-x="">data:,</code>".)</p>
- <p>The <code data-x="dom-canvas-toDataURL">toDataURL()</code> method returns the data at a
- resolution of 96dpi. The <code data-x="dom-canvas-toDataURLHD">toDataURLHD()</code> method
- returns it at the native canvas bitmap resolution.</p>
-
</dd>
<dt><var data-x="">canvas</var> . <code data-x="dom-canvas-toBlob">toBlob</code>(<var data-x="">callback</var> [, <var data-x="">type</var>, ... ])</dt>
- <dt><var data-x="">canvas</var> . <code data-x="dom-canvas-toBlobHD">toBlobHD</code>(<var data-x="">callback</var> [, <var data-x="">type</var>, ... ])</dt>
<dd>
@@ -59655,19 +59647,14 @@
image is generated, as given <a href="#canvas-serialization-arguments">in the table
below</a>.</p>
- <p>The <code data-x="dom-canvas-toBlob">toBlob()</code> method provides the data at a resolution
- of 96dpi. The <code data-x="dom-canvas-toBlobHD">toBlobHD()</code> method provides it at the
- native canvas bitmap resolution.</p>
-
</dd>
</dl>
<div class="impl">
- <p>The <dfn data-x="dom-canvas-toDataURL"><code>toDataURL()</code></dfn> and <dfn
- data-x="dom-canvas-toDataURLHD"><code>toDataURLHD()</code></dfn> methods must run the following
- steps:</p>
+ <p>The <dfn data-x="dom-canvas-toDataURL"><code>toDataURL()</code></dfn> method must run the
+ following steps:</p>
<ol>
@@ -59685,9 +59672,7 @@
<li><p>Let <var data-x="">file</var> be <span data-x="a serialization of the bitmap as a file">a
serialization of the <code>canvas</code> element's bitmap as a file</span>, using the method's
- arguments (if any) as the <var data-x="">arguments</var>, and with the <var data-x="">native</var>
- flag set if the method is the <code data-x="dom-canvas-toDataURLHD">toDataURLHD()</code> method,
- and not otherwise.</p></li>
+ arguments (if any) as the <var data-x="">arguments</var>.</p></li>
<li><p>Return a <span data-x="data protocol"><code data-x="">data:</code> URL</span> representing
<var data-x="">file</var>. <a href="#refsRFC2397">[RFC2397]</a></p>
@@ -59697,8 +59682,7 @@
</ol>
- <p>The <dfn data-x="dom-canvas-toBlob"><code>toBlob()</code></dfn> and <dfn
- data-x="dom-canvas-toBlobHD"><code>toBlobHD()</code></dfn> methods must run the following
+ <p>The <dfn data-x="dom-canvas-toBlob"><code>toBlob()</code></dfn> method must run the following
steps:</p>
<ol>
@@ -59721,9 +59705,7 @@
<p>Otherwise, let <var data-x="">result</var> be a <code>Blob</code> object representing <span
data-x="a serialization of the bitmap as a file">a serialization of the <code>canvas</code>
- element's bitmap as a file</span>, using <var data-x="">arguments</var>, and with the <var
- data-x="">native</var> flag set if the method is the <code
- data-x="dom-canvas-toBlobHD">toBlobHD()</code> method, and not otherwise. <a
+ element's bitmap as a file</span>, using <var data-x="">arguments</var>. <a
href="#refsFILEAPI">[FILEAPI]</a> </p>
</li>
@@ -60011,13 +59993,9 @@
// pixel manipulation
<span>ImageData</span> <span data-x="dom-context-2d-createImageData">createImageData</span>(double sw, double sh);
<span>ImageData</span> <span data-x="dom-context-2d-createImageData">createImageData</span>(<span>ImageData</span> imagedata);
- <span>ImageData</span> <span data-x="dom-context-2d-createImageDataHD">createImageDataHD</span>(double sw, double sh);
<span>ImageData</span> <span data-x="dom-context-2d-getImageData">getImageData</span>(double sx, double sy, double sw, double sh);
- <span>ImageData</span> <span data-x="dom-context-2d-getImageDataHD">getImageDataHD</span>(double sx, double sy, double sw, double sh);
void <span data-x="dom-context-2d-putImageData">putImageData</span>(<span>ImageData</span> imagedata, double dx, double dy);
void <span data-x="dom-context-2d-putImageData">putImageData</span>(<span>ImageData</span> imagedata, double dx, double dy, double dirtyX, double dirtyY, double dirtyWidth, double dirtyHeight);
- void <span data-x="dom-context-2d-putImageDataHD">putImageDataHD</span>(<span>ImageData</span> imagedata, double dx, double dy);
- void <span data-x="dom-context-2d-putImageDataHD">putImageDataHD</span>(<span>ImageData</span> imagedata, double dx, double dy, double dirtyX, double dirtyY, double dirtyWidth, double dirtyHeight);
};
<span>CanvasRenderingContext2D</span> implements <span>CanvasDrawingStyles</span>;
<span>CanvasRenderingContext2D</span> implements <span>CanvasPathMethods</span>;
@@ -60099,10 +60077,11 @@
DOMString? <span data-x="dom-HitRegionOptions-role">role</span> = null;
};
+[<span data-x="dom-imagedata">Constructor</span>(unsigned long sw, unsigned long sh),
+ <span data-x="dom-imagedata">Constructor</span>(<span>Uint8ClampedArray</span> data, unsigned long sw, optional unsigned long sh)]
interface <dfn>ImageData</dfn> {
readonly attribute unsigned long <span data-x="dom-imagedata-width">width</span>;
readonly attribute unsigned long <span data-x="dom-imagedata-height">height</span>;
- readonly attribute double <span data-x="dom-imagedata-resolution">resolution</span>;
readonly attribute <span>Uint8ClampedArray</span> <span data-x="dom-imagedata-data">data</span>;
};
@@ -65150,6 +65129,7 @@
<dl class="domintro">
+ <dt><var data-x="">imagedata</var> = new <code data-x="dom-imagedata">ImageData</code>(<var data-x="">sw</var>, <var data-x="">sh</var>)</dt>
<dt><var data-x="">imagedata</var> = <var data-x="">context</var> . <code data-x="dom-context-2d-createImageData">createImageData</code>(<var data-x="">sw</var>, <var data-x="">sh</var>)</dt>
<dd>
@@ -65171,16 +65151,13 @@
</dd>
- <dt><var data-x="">imagedata</var> = <var data-x="">context</var> . <code data-x="dom-context-2d-createImageDataHD">createImageDataHD</code>(<var data-x="">sw</var>, <var data-x="">sh</var>)</dt>
+ <dt><var data-x="">imagedata</var> = new <code data-x="dom-imagedata">ImageData</code>(<var data-x="">data</var>, <var data-x="">sw</var> [, <var data-x="">sh</var> ] )</dt>
<dd>
- <p>Returns an <code>ImageData</code> object whose dimensions equal the dimensions given in the
- arguments, multiplied by the number of pixels in the canvas bitmap that correspond to each
- coordinate space unit. All the pixels in the returned object are transparent black.</p>
+ <p>Returns an <code>ImageData</code> object using the data provided in the <code>Uint8ClampedArray</code> argument, interpreted using the given dimensions.</p>
- <p>Throws an <code>IndexSizeError</code> exception if the either of the width or height
- arguments are zero.</p>
+ <p>Throws an <code>IndexSizeError</code> exception if the given data and dimensions can't be interpreted consistently.</p>
</dd>
@@ -65194,49 +65171,18 @@
<p>Throws an <code>IndexSizeError</code> exception if the either of the width or height
arguments are zero.</p>
- <p>The data will be returned with one pixel of image data for each coordinate space unit on the
- canvas (ignoring transforms).</p>
-
</dd>
- <dt><var data-x="">imagedata</var> = <var data-x="">context</var> . <code data-x="dom-context-2d-getImageDataHD">getImageDataHD</code>(<var data-x="">sx</var>, <var data-x="">sy</var>, <var data-x="">sw</var>, <var data-x="">sh</var>)</dt>
-
- <dd>
-
- <p>Returns an <code>ImageData</code> object containing the image data for the given rectangle of
- the bitmap.</p>
-
- <p>Throws an <code>IndexSizeError</code> exception if the either of the width or height
- arguments are zero.</p>
-
- <p>The data will be returned at the same resolution as the canvas bitmap.</p>
-
- </dd>
-
<dt><var data-x="">imagedata</var> . <code data-x="dom-imagedata-width">width</code></dt>
<dt><var data-x="">imagedata</var> . <code data-x="dom-imagedata-height">height</code></dt>
<dd>
- <p>Returns the actual dimensions of the data in the <code>ImageData</code> object, in pixels.
- For objects returned by the non-HD variants of the methods in this API, this will correspond to
- the dimensions given to the methods. For the HD variants, the number of pixels might be
- different than the number of corresponding coordinate space units.</p>
+ <p>Returns the actual dimensions of the data in the <code>ImageData</code> object, in
+ pixels.</p>
</dd>
- <dt><var data-x="">imagedata</var> . <code data-x="dom-imagedata-resolution">resolution</code></dt>
-
- <dd>
-
- <p>Returns the theoretical number of pixels in the <code>ImageData</code> object's data per
- corresponding coordinate space unit. This value is automatically determined from the source
- image when the <code>ImageData</code> object is created. It is only used to ensure that
- <code>ImageBitmap</code> objects have the right pixel density when generated from
- <code>ImageData</code> objects.</p>
-
- </dd>
-
<dt><var data-x="">imagedata</var> . <code data-x="dom-imagedata-data">data</code></dt>
<dd>
@@ -65260,82 +65206,69 @@
<p>Throws a <code>NotSupportedError</code> exception if any of the arguments are not finite.</p>
- <p>Each pixel in the image data is mapped to one coordinate space unit on the bitmap, regardless
- of the value of the <code data-x="dom-imagedata-resolution">resolution</code> attribute.</p>
-
</dd>
- <dt><var data-x="">context</var> . <code data-x="dom-context-2d-putImageDataHD">putImageDataHD</code>(<var data-x="">imagedata</var>, <var data-x="">dx</var>, <var data-x="">dy</var> [, <var data-x="">dirtyX</var>, <var data-x="">dirtyY</var>, <var data-x="">dirtyWidth</var>, <var data-x="">dirtyHeight</var> ])</dt>
+ </dl>
- <dd>
+ <div class="impl">
- <p>Paints the data from the given <code>ImageData</code> object onto the bitmap, at the bitmap's
- native pixel density (regardless of the value of the <code>ImageData</code> object's <code
- data-x="dom-imagedata-resolution">resolution</code> attribute). If a dirty rectangle is provided,
- only the pixels from that rectangle are painted.</p>
+ <p>The <dfn data-x="dom-imagedata"><code>ImageData()</code></dfn> constructors and the <dfn
+ data-x="dom-context-2d-createImageData"><code>createImageData()</code></dfn> methods are used to
+ instantiate new <code>ImageData</code> objects.</p>
- <p>The <code data-x="dom-context-2d-globalAlpha">globalAlpha</code> and <code
- data-x="dom-context-2d-globalCompositeOperation">globalCompositeOperation</code> attributes, as
- well as the shadow attributes, are ignored for the purposes of this method call; pixels in the
- canvas are replaced wholesale, with no composition, alpha blending, no shadows, etc.</p>
+ <p>When the <code data-x="dom-imagedata">ImageData()</code> constructor is invoked with two
+ numeric arguments <var data-x="">sw</var> and <var data-x="">sh</var>, it must return a new
+ <code>ImageData</code> object representing a rectangle with a width equal to <var
+ data-x="">sw</var> and a height equal to <var data-x="">sh</var>, if both <var data-x="">sw</var>
+ and <var data-x="">sh</var> are non-zero. If one or both of <var data-x="">sw</var> and <var
+ data-x="">sh</var> are zero, then the constructor must throw an <code>IndexSizeError</code>
+ exception instead.</p>
- <p>Throws a <code>NotSupportedError</code> exception if any of the arguments are not finite.</p>
+ <p>When the <code data-x="dom-imagedata">ImageData()</code> constructor is invoked with its first
+ argument being an <code>Uint8ClampedArray</code> <var data-x="">source</var> and its second and
+ (optionally) third argument(s) being numeric arguments <var data-x="">sw</var> and <var
+ data-x="">sh</var>, it must run the following steps:
- </dd>
+ <ol>
- </dl>
+ <li><p>Let <var data-x="">length</var> be the number of bytes in <var
+ data-x="">source</var>.</p></li>
- <div class="impl">
+ <li><p>If <var data-x="">length</var> is not a non-zero integral multiple of four, throw an
+ <code>InvalidStateError</code> exception and abort these steps.</p></li>
- <p>The <code data-x="dom-context-2d-createImageData">createImageData()</code> and <code
- data-x="dom-context-2d-createImageDataHD">createImageDataHD()</code> methods are used to
- instantiate new blank <code>ImageData</code> objects.</p>
+ <li><p>Let <var data-x="">length</var> be <var data-x="">length</var> divided by four.</p>
- <p>When the <dfn data-x="dom-context-2d-createImageData"><code>createImageData()</code></dfn>
- method is invoked with two arguments <var data-x="">sw</var> and <var data-x="">sh</var>, it must
- return a new <code>ImageData</code> object representing a rectangle with a width in equal to the
- absolute magnitude of <var data-x="">sw</var> and a height equal to the absolute magnitude of <var
- data-x="">sh</var>, and with a 1.0 pixel density, if both <var data-x="">sw</var> and <var
- data-x="">sh</var> are non-zero. If one or both of <var data-x="">sw</var> and <var
- data-x="">sh</var> are zero, then the method must throw an <code>IndexSizeError</code> exception
- instead. When invoked with a single <var data-x="">imagedata</var> argument, it must return a new
- <code>ImageData</code> object representing a rectangle with the same dimensions and pixel density
- as the <code>ImageData</code> object passed as the argument. When the method returns an
- <code>ImageData</code> object, it must be filled with transparent black.</p>
+ <li><p>If <var data-x="">length</var> is not an integral multiple of <var data-x="">sw</var>,
+ throw an <code>IndexSizeError</code> exception and abort these steps.</p></li> <!-- nothing
+ non-zero is an integral multiple of 0, so this will throw for sw=0 -->
- <p>When the <dfn data-x="dom-context-2d-createImageDataHD"><code>createImageDataHD()</code></dfn>
- method is invoked and both of its arguments (<var data-x="">sw</var> and <var data-x="">sh</var>)
- are non-zero, it must return a new <code>ImageData</code> object representing a rectangle with a
- width equal to the absolute magnitude of <var data-x="">sw</var> multiplied by <var
- data-x="">scale</var>, a height equal to the absolute magnitude of <var data-x="">sh</var>
- multiplied by <var data-x="">scale</var>, and a pixel density equal to <var data-x="">scale</var>,
- where <var data-x="">scale</var> is the number of pixels in the <span>scratch bitmap</span> per
- coordinate space units. The <code>ImageData</code> object returned must be filled with transparent
- black. If either or both of the arguments are zero, the method must instead throw an
- <code>IndexSizeError</code> exception.</p>
+ <li><p>Let <var data-x="">height</var> be <var data-x="">length</var> divided by <var
+ data-x="">sw</var>.</p></li>
- <p>The <dfn data-x="dom-context-2d-getImageData"><code>getImageData(<var data-x="">sx</var>, <var
- data-x="">sy</var>, <var data-x="">sw</var>, <var data-x="">sh</var>)</code></dfn> method must, if
- either the <var data-x="">sw</var> or <var data-x="">sh</var> arguments are zero, throw an
- <code>IndexSizeError</code> exception; otherwise,
- <!--ADD-TOPIC:Security-->
- if the <span>scratch bitmap</span>'s <span data-x="concept-canvas-origin-clean">origin-clean</span>
- flag is set to false, it must throw a <code>SecurityError</code> exception;
- <!--REMOVE-TOPIC:Security-->
- otherwise, it must return an <code>ImageData</code> object with width <var data-x="">sw</var> and
- height <var data-x="">sh</var> representing the <span>scratch bitmap</span> for the area of that
- bitmap denoted by the rectangle whose corners are the four points (<var data-x="">sx</var>, <var
- data-x="">sy</var>), (<span data-x=""><var data-x="">sx</var>+<var data-x="">sw</var></span>, <var
- data-x="">sy</var>), (<span data-x=""><var data-x="">sx</var>+<var data-x="">sw</var></span>, <span
- data-x=""><var data-x="">sy</var>+<var data-x="">sh</var></span>), (<var data-x="">sx</var>, <span
- data-x=""><var data-x="">sy</var>+<var data-x="">sh</var></span>), in the bitmap's coordinate space
- units. If the bitmap does not represent each coordinate space unit square using exactly one pixel,
- the value of each pixel in the returned object must be derived from the value(s) of the pixel(s)
- in the bitmap that correspond to the same coordinate. Pixels outside the <span>scratch
- bitmap</span> must be returned as transparent black. Pixels must be returned as non-premultiplied
- alpha values. The pixel density of the object returned must be 1.0.</p>
+ <li><p>If the <var data-x="">sh</var> argument was not omitted, and its value is not equal to
+ <var data-x="">height</var>, then throw an <code>IndexSizeError</code> exception and abort these
+ steps.</p></li>
- <p>The <dfn data-x="dom-context-2d-getImageDataHD"><code>getImageDataHD(<var data-x="">sx</var>,
+ <li><p>Return a new <code>ImageData</code> object whose width is <var data-x="">sw</var>, whose
+ height is <var data-x="">height</var>, and whose data is <var data-x="">source</var>.</p></li>
+
+ </ol>
+
+ <p>When the <code data-x="dom-context-2d-createImageData">createImageData()</code> method is
+ invoked with two numeric arguments <var data-x="">sw</var> and <var data-x="">sh</var>, it must
+ return a new <code>ImageData</code> object representing a transparent black rectangle with a width
+ equal to the absolute magnitude of <var data-x="">sw</var> and a height equal to the absolute
+ magnitude of <var data-x="">sh</var>, if both <var data-x="">sw</var> and <var data-x="">sh</var>
+ are non-zero. If one or both of <var data-x="">sw</var> and <var data-x="">sh</var> are zero, then
+ the constructor must throw an <code>IndexSizeError</code> exception instead.</p>
+
+ <p>When the <code data-x="dom-context-2d-createImageData">createImageData()</code> method is
+ invoked with a single <var data-x="">imagedata</var> argument, it must return a new
+ <code>ImageData</code> object representing a transparent black rectangle with the same dimensions
+ as the <code>ImageData</code> object passed as the argument.</p>
+
+ <p>The <dfn data-x="dom-context-2d-getImageData"><code>getImageData(<var data-x="">sx</var>,
<var data-x="">sy</var>, <var data-x="">sw</var>, <var data-x="">sh</var>)</code></dfn> method must,
if either the <var data-x="">sw</var> or <var data-x="">sh</var> arguments are zero, throw an
<code>IndexSizeError</code> exception; otherwise,
@@ -65343,28 +65276,23 @@
if the <span>scratch bitmap</span>'s <span data-x="concept-canvas-origin-clean">origin-clean</span>
flag is set to false, it must throw a <code>SecurityError</code> exception;
<!--REMOVE-TOPIC:Security-->
- otherwise, it must return an <code>ImageData</code> object with width <var data-x="">sw</var>
- multiplied by <var data-x="">scale</var> and height <var data-x="">sh</var> multiplied by <var
- data-x="">scale</var> representing the <span>scratch bitmap</span> for the area of that bitmap
+ otherwise, it must return an <code>ImageData</code> object with width <var data-x="">sw</var> and
+ height <var data-x="">sh</var> representing the <span>scratch bitmap</span> for the area of that bitmap
denoted by the rectangle whose corners are the four points (<var data-x="">sx</var>, <var
data-x="">sy</var>), (<span data-x=""><var data-x="">sx</var>+<var data-x="">sw</var></span>, <var
data-x="">sy</var>), (<span data-x=""><var data-x="">sx</var>+<var data-x="">sw</var></span>, <span
data-x=""><var data-x="">sy</var>+<var data-x="">sh</var></span>), (<var data-x="">sx</var>, <span
data-x=""><var data-x="">sy</var>+<var data-x="">sh</var></span>), in the bitmap's coordinate space
units. Pixels outside the <span>scratch bitmap</span> must be returned as transparent black.
- Pixels must be returned as non-premultiplied alpha values. The pixel density of the object
- returned must be <var data-x="">scale</var>. For the purposes of this paragraph, <var
- data-x="">scale</var> is the number of pixels in the <span>scratch bitmap</span> per coordinate
- space units.</p>
+ Pixels must be returned as non-premultiplied alpha values.</p>
+<!--CLEANUP-->
<p>New <code>ImageData</code> objects must be initialized so that their <dfn
data-x="dom-imagedata-width"><code>width</code></dfn> attribute is set to the number of pixels per
row in the image data, their <dfn data-x="dom-imagedata-height"><code>height</code></dfn> attribute
- is set to the number of rows in the image data, their <dfn
- data-x="dom-imagedata-resolution"><code>resolution</code></dfn> is set to the object's pixel
- density, and their <dfn data-x="dom-imagedata-data"><code>data</code></dfn> attribute is
- initialized to a <code>Uint8ClampedArray</code> object. The <code>Uint8ClampedArray</code> object
- must use a <span>Canvas Pixel <code>ArrayBuffer</code></span> for its storage, and must have a
+ is set to the number of rows in the image data, and their <dfn data-x="dom-imagedata-data"><code>data</code></dfn> attribute, except where an existing array is provided, is
+ initialized to a new <code>Uint8ClampedArray</code> object. The <code>Uint8ClampedArray</code> object
+ must use a new <span>Canvas Pixel <code>ArrayBuffer</code></span> for its storage, and must have a
zero start offset and a length equal to the length of its storage, in bytes. The <span>Canvas
Pixel <code>ArrayBuffer</code></span> must contain the image data. At least one pixel's worth of
image data must be returned. <a href="#refsTYPEDARRAY">[TYPEDARRAY]</a></p>
@@ -65376,19 +65304,18 @@
the 8 bit value for that component. The components must be assigned consecutive indices starting
with 0 for the top left pixel's red component. <a href="#refsTYPEDARRAY">[TYPEDARRAY]</a></p>
- <p>The <dfn data-x="dom-context-2d-putImageData"><code>putImageData()</code></dfn> and <dfn
- data-x="dom-context-2d-putImageDataHD"><code>putImageDataHD()</code></dfn> methods write data from
+ <p>The <dfn data-x="dom-context-2d-putImageData"><code>putImageData()</code></dfn> method writes data from
<code>ImageData</code> structures back to the rendering context's <span>scratch bitmap</span>.
- Their arguments are: <var data-x="">imagedata</var>, <var data-x="">dx</var>, <var
+ Its arguments are: <var data-x="">imagedata</var>, <var data-x="">dx</var>, <var
data-x="">dy</var>, <var data-x="">dirtyX</var>, <var data-x="">dirtyY</var>, <var
data-x="">dirtyWidth</var>, and <var data-x="">dirtyHeight</var>.</p>
- <p>When the last four arguments to these methods are omitted, they must be assumed to have the
+ <p>When the last four arguments to this method are omitted, they must be assumed to have the
values 0, 0, the <code data-x="dom-imagedata-width">width</code> member of the <var
data-x="">imagedata</var> structure, and the <code data-x="dom-imagedata-height">height</code>
member of the <var data-x="">imagedata</var> structure, respectively.</p>
- <p>When invoked, these methods must act as follows:</p>
+ <p>When invoked, the method must act as follows:</p>
<ol>
@@ -65442,74 +65369,24 @@
</li>
- <li>
+ <li><p>For all integer values of <var data-x="">x</var> and <var data-x="">y</var> where <span
+ data-x=""><var data-x="">dirtyX</var> ≤ <var data-x="">x</var> < <span
+ data-x=""><var data-x="">dirtyX</var>+<var data-x="">dirtyWidth</var></span></span> and <span
+ data-x=""><var data-x="">dirtyY</var> ≤ <var data-x="">y</var> < <span
+ data-x=""><var data-x="">dirtyY</var>+<var data-x="">dirtyHeight</var></span></span>, copy the
+ four channels of the pixel with coordinate (<var data-x="">x</var>, <var data-x="">y</var>) in
+ the <var data-x="">imagedata</var> data structure to the pixel with coordinate (<span
+ data-x=""><var data-x="">dx</var>+<var data-x="">x</var></span>, <span data-x=""><var
+ data-x="">dy</var>+<var data-x="">y</var></span>) in the rendering context's <span>scratch
+ bitmap</span>.</p></li>
- <p>Run the appropriate steps from the following list:</p>
-
- <dl class="switch">
-
- <dt>If the method was <code data-x="dom-context-2d-putImageData">putImageData()</code></dt>
-
- <dd>
-
- <p>Draw the region of the image data in the horizontal rectangle whose top left corner is at
- (<var data-x="">dirtyX</var>,<var data-x="">dirtyY</var>) and whose bottom right corner is at
- (<span data-x=""><var data-x="">dirtyX</var>+<var data-x="">dirtyWidth</var></span>,<span
- data-x=""><var data-x="">dirtyY</var>+<var data-x="">dirtyHeight</var></span>) onto the rendering
- context's <span>scratch bitmap</span>, aligned such that the top left of the rectangle is at
- coordinate (<var data-x="">dx</var>,<var data-x="">dy</var>).</p>
-
- <p>If the <code data-x="dom-context-2d-imageSmoothingEnabled">imageSmoothingEnabled</code>
- attribute is set to true, then the user agent should attempt to apply a smoothing algorithm to
- the image data if the <span>scratch bitmap</span> does not have exactly one device pixel per
- coordinate space unit.</p>
-
- </dd>
-
- <dt>If the method was <code data-x="dom-context-2d-putImageDataHD">putImageDataHD()</code></dt>
-
- <dd>
-
- <ol>
-
- <li>
-
- <p>Let <var data-x="">dx<sub data-x="">device</sub></var> be the x-coordinate of the device pixel in
- the <span>scratch bitmap</span> corresponding to the <var data-x="">dx</var> coordinate in
- the <span>scratch bitmap</span>'s coordinate space.</p>
-
- <p>Let <var data-x="">dy<sub data-x="">device</sub></var> be the y-coordinate of the device pixel in
- the <span>scratch bitmap</span> corresponding to the <var data-x="">dy</var> coordinate in
- the <span>scratch bitmap</span>'s coordinate space.</p>
-
- </li>
-
- <li><p>For all integer values of <var data-x="">x</var> and <var data-x="">y</var> where <span
- data-x=""><var data-x="">dirtyX</var> ≤ <var data-x="">x</var> < <span
- data-x=""><var data-x="">dirtyX</var>+<var data-x="">dirtyWidth</var></span></span> and <span
- data-x=""><var data-x="">dirtyY</var> ≤ <var data-x="">y</var> < <span
- data-x=""><var data-x="">dirtyY</var>+<var data-x="">dirtyHeight</var></span></span>, copy the
- four channels of the pixel with coordinate (<var data-x="">x</var>, <var data-x="">y</var>) in
- the <var data-x="">imagedata</var> data structure to the pixel with coordinate (<span
- data-x=""><var data-x="">dx<sub data-x="">device</sub></var>+<var data-x="">x</var></span>, <span
- data-x=""><var data-x="">dy<sub data-x="">device</sub></var>+<var data-x="">y</var></span>) in the
- rendering context's <span>scratch bitmap</span>.</p></li>
-
- </ol>
-
- </dd>
-
- </dl>
-
- </li>
-
</ol>
- <p>The handling of pixel rounding when the specified coordinates do not exactly map to the device
- coordinate space is not defined by this specification, except that the following must result in no
- visible changes to the rendering:</p>
+ <p>The handling of pixel rounding when the specified coordinates are not integers is not defined
+ by this specification, except that the following must result in no visible changes to the
+ rendering:</p>
- <pre>context.putImageDataHD(context.getImageDataHD(x, y, w, h), p, q);</pre>
+ <pre>context.putImageData(context.getImageData(x, y, w, h), p, q);</pre>
<p>...for any value of <var data-x="">x</var>, <var data-x="">y</var>, <var data-x="">w</var>, and
<var data-x="">h</var> and where <var data-x="">p</var> is the smaller of <var data-x="">x</var> and
@@ -65520,22 +65397,17 @@
<pre>context.createImageData(w, h);
context.getImageData(0, 0, w, h);</pre>
- <p>...must return <code>ImageData</code> objects with the same dimensions as each other, and the
- following two calls:</p>
-
- <pre>context.createImageDataHD(w, h);
-context.getImageDataHD(0, 0, w, h);</pre>
-
- <p>...must also return <code>ImageData</code> objects with the same dimensions as each other, for
- any value of <var data-x="">w</var> and <var data-x="">h</var> in both cases. In other words, while
- user agents may round the arguments of these methods so that they map to device pixel boundaries,
+<!--CLEANUP-->
+ <p>...must return <code>ImageData</code> objects with the same dimensions as each other, for
+ any value of <var data-x="">w</var> and <var data-x="">h</var>. In other words, while
+ user agents may round the arguments of these methods,
any rounding performed must be performed consistently for all of the methods described in this
- section.</p>
+ section. (The constructors only work with integer values.)</p>
<p class="note">Due to the lossy nature of converting to and from premultiplied alpha color
values, pixels that have just been set using <code
- data-x="dom-context-2d-putImageDataHD">putImageDataHD()</code> might be returned to an equivalent
- <code data-x="dom-context-2d-getImageDataHD">getImageDataHD()</code> as different values.</p>
+ data-x="dom-context-2d-putImageData">putImageData()</code> might be returned to an equivalent
+ <code data-x="dom-context-2d-getImageData">getImageData()</code> as different values.</p>
<p>The current path, <span data-x="dom-context-2d-transformation">transformation matrix</span>,
<span data-x="shadows">shadow attributes</span>, <span data-x="dom-context-2d-globalAlpha">global
@@ -65554,7 +65426,7 @@
var context = canvas.getContext('2d');
// create a blank slate
-var data = context.createImageDataHD(canvas.width, canvas.height);
+var data = context.createImageData(canvas.width, canvas.height);
// create some plasma
FillPlasma(data, 'green'); // green plasma
@@ -65563,7 +65435,7 @@
AddCloud(data, data.width/2, data.height/2); // put a cloud in the middle
// paint the plasma+cloud on the canvas
-context.putImageDataHD(data, 0, 0);
+context.putImageData(data, 0, 0);
// support methods
function FillPlasma(data, color) { ... }
@@ -65574,8 +65446,8 @@
<div class="example">
<p>Here is an example of using <code
- data-x="dom-context-2d-getImageDataHD">getImageDataHD()</code> and <code
- data-x="dom-context-2d-putImageDataHD">putImageDataHD()</code> to implement an edge detection
+ data-x="dom-context-2d-getImageData">getImageData()</code> and <code
+ data-x="dom-context-2d-putImageData">putImageData()</code> to implement an edge detection
filter.</p>
<pre><!DOCTYPE HTML>
@@ -65596,10 +65468,10 @@
context.drawImage(image, 0, 0);
// get the image data to manipulate
- var input = context.getImageDataHD(0, 0, canvas.width, canvas.height);
+ var input = context.getImageData(0, 0, canvas.width, canvas.height);
// get an empty slate to put the data into
- var output = context.createImageDataHD(canvas.width, canvas.height);
+ var output = context.createImageData(canvas.width, canvas.height);
// alias some variables for convenience
// notice that we are using input.width and input.height here
@@ -65623,7 +65495,7 @@
}
// put the image data back after manipulation
- context.putImageDataHD(output, 0, 0);
+ context.putImageData(output, 0, 0);
}
</script>
</head>
@@ -66053,53 +65925,9 @@
<!--END 2dcontext-->
- <h5>Pixel density</h5>
- <p>The user agent may use any square pixel density for the bitmaps of a <code>canvas</code> and
- its rendering contexts. Once a <code>canvas</code> has a bitmap, that canvas must keep its
- resolution for its lifetime.</p>
-
- <p class="note">In general, user agents are encouraged to use a pixel density equal to the screen
- pixel density. Ideally, the number of device pixels per CSS pixel would be a multiple of two.
- Several factors can affect the screen pixel density: most prominently the actual display pixel
- density, but also important is the current zoom level.</p>
-
- <p>All the bitmaps created during a single <span data-x="concept-task">task</span> for
- <code>canvas</code> elements and <code>CanvasRenderingContext2D</code> objects must have the same
- pixel density.
- <!--INSERT FINGERPRINT-->
- </p>
-
- <pre class="idl">partial interface <span id="Screen-partial">Screen</span> {
- readonly attribute double <span data-x="dom-screen-canvasResolution">canvasResolution</span>;
-};</pre>
-
- <dl class="domintro">
-
- <dt><var data-x="">window</var> . <code data-x="dom-Window-screen">screen</code> . <code data-x="dom-screen-canvasResolution">canvasResolution</code></dt>
-
- <dd>
-
- <p>Returns the pixel density that has been, or will be, used for bitmaps during this <span data-x="concept-task">task</span>.</p>
-
- </dd>
-
- </dl>
-
<div class="impl">
- <p>The <dfn data-x="dom-screen-canvasResolution"><code>canvasResolution</code></dfn> attribute of
- the <code>Screen</code> object must return the pixel density, in image pixels per coordinate space
- units, that any <code>canvas</code> and <code>CanvasRenderingContext2D</code> bitmaps created
- during this <span data-x="concept-task">task</span> will use (or have used). <a
- href="#refsCSSOMVIEW">[CSSOMVIEW]</a></p>
-
- </div>
-
-
-
- <div class="impl">
-
<h5>Color spaces and color correction</h5>
<p>The <code>canvas</code> APIs must perform color correction at only two points: when rendering
@@ -66110,16 +65938,12 @@
<p class="note">Thus, in the 2D context, colors used to draw shapes onto the canvas will exactly
match colors obtained through the <code
- data-x="dom-context-2d-getImageDataHD">getImageDataHD()</code> method.</p>
+ data-x="dom-context-2d-getImageData">getImageData()</code> method.</p>
- <p>The <code data-x="dom-canvas-toDataURL">toDataURL()</code> and <code
- data-x="dom-canvas-toDataURLHD">toDataURLHD()</code> methods must not include color space
+ <p>The <code data-x="dom-canvas-toDataURL">toDataURL()</code> method must not include color space
information in the resources they return. Where the output format allows it, the color of pixels
in resources created by <code data-x="dom-canvas-toDataURL">toDataURL()</code> must match those
- returned by the <code data-x="dom-context-2d-getImageData">getImageData()</code> method, and the
- color of pixels in resources created by <code data-x="dom-canvas-toDataURLHD">toDataURLHD()</code>
- must match those returned by the <code
- data-x="dom-context-2d-getImageDataHD">getImageDataHD()</code> method.</p>
+ returned by the <code data-x="dom-context-2d-getImageData">getImageData()</code> method.</p>
<p>In user agents that support CSS, the color space used by a <code>canvas</code> element must
match the color space used for processing any colors for that element in CSS.</p>
@@ -66133,7 +65957,7 @@
<p class="note">Thus, in the 2D context, calling the <code
data-x="dom-context-2d-drawImage">drawImage()</code> method to render the output of the <code
- data-x="dom-canvas-toDataURLHD">toDataURLHD()</code> method to the canvas, given the appropriate
+ data-x="dom-canvas-toDataURL">toDataURL()</code> method to the canvas, given the appropriate
dimensions, has no visible effect.</p>
</div>
@@ -66231,10 +66055,8 @@
true. The flag is set to false when cross-origin images or fonts are used.</p>
<p>The <code data-x="dom-canvas-toDataURL">toDataURL()</code>, <code
- data-x="dom-canvas-toDataURLHD">toDataURLHD()</code>, <code
- data-x="dom-canvas-toBlob">toBlob()</code>, <code
- data-x="dom-context-2d-getImageData">getImageData()</code>, and <code
- data-x="dom-context-2d-getImageDataHD">getImageDataHD()</code> methods check the flag and will
+ data-x="dom-canvas-toBlob">toBlob()</code>, and <code
+ data-x="dom-context-2d-getImageData">getImageData()</code> methods check the flag and will
throw a <code>SecurityError</code> exception rather than leak cross-origin data.</p>
<p>The flag can be reset in certain situations; for example, when a
@@ -84089,7 +83911,6 @@
<pre class="idl">interface <dfn>ImageBitmap</dfn> {
readonly attribute unsigned long <span data-x="dom-ImageBitmap-width">width</span>;
readonly attribute unsigned long <span data-x="dom-ImageBitmap-height">height</span>;
- readonly attribute double <span data-x="dom-ImageBitmap-resolution">resolution</span>;
};
typedef (<span>HTMLImageElement</span> or
@@ -84161,20 +83982,12 @@
</dd>
- <dt><var data-x="">imageBitmap</var> . <code data-x="dom-ImageBitmap-resolution">resolution</code></dt>
-
- <dd>
-
- <p>Returns the intrinsic linear pixel density of the image, in image pixels per CSS pixels.</p>
-
- </dd>
-
</dl>
<div class="impl">
- <p>An <code>ImageBitmap</code> object always has associated bitmap data, with a width, a
- height, and a pixel density. However, it is possible for this data to be corrupted. If an <code>ImageBitmap</code>
+ <p>An <code>ImageBitmap</code> object always has associated bitmap data, with a width and a
+ height. However, it is possible for this data to be corrupted. If an <code>ImageBitmap</code>
object's media data can be decoded without errors, it is said to be <dfn
data-x="concept-ImageBitmap-good">fully decodable</dfn>.</p>
@@ -84371,9 +84184,7 @@
<li><p>Create a new <code>ImageBitmap</code> object.</p></li>
<li><p>Let the <code>ImageBitmap</code> object's bitmap data be the image data given by the
- <code>ImageData</code> object, <span>cropped to the source rectangle</span>, using the value
- of the object's <code data-x="dom-imagedata-resolution">resolution</code> attribute as the
- object's pixel density.</p></li>
+ <code>ImageData</code> object, <span>cropped to the source rectangle</span>.</p></li>
<li><p>Return a new <code>Promise</code>, but continue running these steps asynchronously.</p></li>
@@ -84485,9 +84296,6 @@
</li>
- <li><p>Let <var data-x="">output</var>'s pixel density be <var data-x="">input</var>'s pixel
- density.</p></li>
-
<li><p>Return <var data-x="">output</var>.</p></li>
</ol>
@@ -84498,9 +84306,6 @@
<p>The <dfn data-x="dom-ImageBitmap-height"><code>height</code></dfn> attribute must return the
<code>ImageBitmap</code> object's height, in CSS pixels.</p>
- <p>The <dfn data-x="dom-ImageBitmap-resolution"><code>resolution</code></dfn> attribute must return the
- <code>ImageBitmap</code> object's linear pixel density, in image data pixels per CSS pixel.</p>
-
</div>
<div class="example">
More information about the Commit-Watchers
mailing list