Skip to content

Commit

Permalink
getImageData/drawImageData proposal
Browse files Browse the repository at this point in the history 
git-svn-id: http://svn.whatwg.org/webapps@50 340c8d12-0b0e-0410-8428-c7bf67bfef74
  • Loading branch information
@Hixie
Hixie committed May 5, 2006
1 parent 18f734b commit d192464
Show file tree
Hide file tree
Showing 2 changed files with 212 additions and 89 deletions.
161 changes: 112 additions & 49 deletions index
View file
Expand Up @@ -35,7 +35,7 @@

<h1 id="web-applications">Web Applications 1.0</h1>

<h2 class="no-num no-toc" id="working">Working Draft &mdash; 3 May 2006</h2>
<h2 class="no-num no-toc" id="working">Working Draft &mdash; 5 May 2006</h2>

<p>You can take part in this work. <a
href="http://www.whatwg.org/mailing-list">Join the working group's
Expand Down Expand Up @@ -885,7 +885,10 @@
<li><a href="#images"><span class="secno">6.1.1.9. </span>Images</a>


<li><a href="#drawing"><span class="secno">6.1.1.10. </span>Drawing
<li><a href="#pixel"><span class="secno">6.1.1.10. </span><dfn
id="pixel0">Pixel manipulation</dfn></a>

<li><a href="#drawing"><span class="secno">6.1.1.11. </span>Drawing
model</a>
</ul>

Expand Down Expand Up @@ -15524,7 +15527,7 @@ http://lxr.mozilla.org/mozilla/source/dom/public/idl/html/nsIDOMNSHTMLTextAreaEl
class="idl">interface <dfn id="canvasrenderingcontext2d">CanvasRenderingContext2D</dfn> {<!-- XXX xrefs from IDL -->

// back-reference to the canvas
readonly attribute HTMLCanvasElement canvas;
readonly attribute HTMLCanvasElement canvas;

// state
void save(); // push state on state stack
Expand All @@ -15541,56 +15544,60 @@ http://lxr.mozilla.org/mozilla/source/dom/public/idl/html/nsIDOMNSHTMLTextAreaEl
-->

// compositing
attribute float globalAlpha; // (default 1.0)
attribute DOMString globalCompositeOperation; // (default over)
attribute float <span><a href="#globalalpha">globalAlpha</a></span>; // (default 1.0)
attribute DOMString <span><a href="#globalcompositeoperation">globalCompositeOperation</a></span>; // (default over)

// colours and styles
attribute DOMObject strokeStyle; // (default black)
attribute DOMObject fillStyle; // (default black)
CanvasGradient createLinearGradient(in float x0, in float y0, in float x1, in float y1);
CanvasGradient createRadialGradient(in float x0, in float y0, in float r0, in float x1, in float y1, in float r1);
CanvasPattern createPattern(in HTMLImageElement image, DOMString repetition);
CanvasPattern createPattern(in HTMLCanvasElement image, DOMString repetition);
attribute DOMObject <span><a href="#strokestyle">strokeStyle</a></span>; // (default black)
attribute DOMObject <span><a href="#fillstyle">fillStyle</a></span>; // (default black)
<span><a href="#canvasgradient0">CanvasGradient</a></span> <span><a href="#createlineargradientx0">createLinearGradient</a></span>(in float x0, in float y0, in float x1, in float y1);
<span><a href="#canvasgradient0">CanvasGradient</a></span> <span><a href="#createradialgradientx0">createRadialGradient</a></span>(in float x0, in float y0, in float r0, in float x1, in float y1, in float r1);
<span><a href="#canvaspattern0">CanvasPattern</a></span> <span><a href="#createpatternimage">createPattern</a></span>(in HTMLImageElement image, DOMString repetition);
<span><a href="#canvaspattern0">CanvasPattern</a></span> <span><a href="#createpatternimage">createPattern</a></span>(in HTMLCanvasElement image, DOMString repetition);

// line caps/joins
attribute float lineWidth; // (default 1)
attribute DOMString lineCap; // "butt", "round", "square" (default "butt")
attribute DOMString lineJoin; // "round", "bevel", "miter" (default "miter")
attribute float miterLimit; // (default 10)
attribute float <span><a href="#linewidth">lineWidth</a></span>; // (default 1)
attribute DOMString <span><a href="#linecap">lineCap</a></span>; // "butt", "round", "square" (default "butt")
attribute DOMString <span><a href="#linejoin">lineJoin</a></span>; // "round", "bevel", "miter" (default "miter")
attribute float <span><a href="#miterlimit">miterLimit</a></span>; // (default 10)

// shadows
attribute float shadowOffsetX; // (default 0)
attribute float shadowOffsetY; // (default 0)
attribute float shadowBlur; // (default 0)
attribute DOMString shadowColor; // (default black)
attribute float <span><a href="#shadowoffsetx">shadowOffsetX</a></span>; // (default 0)
attribute float <span><a href="#shadowoffsety">shadowOffsetY</a></span>; // (default 0)
attribute float <span><a href="#shadowblur">shadowBlur</a></span>; // (default 0)
attribute DOMString <span><a href="#shadowcolor">shadowColor</a></span>; // (default black)

// rects
void clearRect(in float x, in float y, in float w, in float h);
void fillRect(in float x, in float y, in float w, in float h);
void strokeRect(in float x, in float y, in float w, in float h);
void <span><a href="#clearrect">clearRect</a></span>(in float x, in float y, in float w, in float h);
void <span><a href="#fillrect">fillRect</a></span>(in float x, in float y, in float w, in float h);
void <span><a href="#strokerect">strokeRect</a></span>(in float x, in float y, in float w, in float h);

// path API
void beginPath();
void closePath();
void moveTo(in float x, in float y);
void lineTo(in float x, in float y);
void quadraticCurveTo(in float cpx, in float cpy, in float x, in float y);
void bezierCurveTo(in float cp1x, in float cp1y, in float cp2x, in float cp2y, in float x, in float y);
void arcTo(in float x1, in float y1, in float x2, in float y2, in float radius);
void rect(in float x, in float y, in float w, in float h);
void arc(in float x, in float y, in float radius, in float startAngle, in float endAngle, in boolean anticlockwise);
void fill();
void stroke();
void clip();
boolean isPointInPath(in float x, in float y);
void <span><a href="#beginpath">beginPath</a></span>();
void <span><a href="#closepath">closePath</a></span>();
void <span><a href="#movetox">moveTo</a></span>(in float x, in float y);
void <span><a href="#linetox">lineTo</a></span>(in float x, in float y);
void <span><a href="#quadraticcurvetocpx">quadraticCurveTo</a></span>(in float cpx, in float cpy, in float x, in float y);
void <span><a href="#beziercurvetocp1x">bezierCurveTo</a></span>(in float cp1x, in float cp1y, in float cp2x, in float cp2y, in float x, in float y);
void <span><a href="#arctox1">arcTo</a></span>(in float x1, in float y1, in float x2, in float y2, in float radius);
void <span><a href="#rectx">rect</a></span>(in float x, in float y, in float w, in float h);
void <span><a href="#arcx-y">arc</a></span>(in float x, in float y, in float radius, in float startAngle, in float endAngle, in boolean anticlockwise);
void <span><a href="#fill">fill</a></span>();
void <span><a href="#stroke">stroke</a></span>();
void <span><a href="#clip">clip</a></span>();
boolean <span><a href="#ispointinpath">isPointInPath</a></span>(in float x, in float y);

// drawing images
void drawImage(in HTMLImageElement image, in float dx, in float dy);
void drawImage(in HTMLImageElement image, in float dx, in float dy, in float dw, in float dh);
void drawImage(in HTMLImageElement image, in float sx, in float sy, in float sw, in float sh, in float dx, in float dy, in float dw, in float dh);
void drawImage(in HTMLCanvasElement image, in float dx, in float dy);
void drawImage(in HTMLCanvasElement image, in float dx, in float dy, in float dw, in float dh);
void drawImage(in HTMLCanvasElement image, in float sx, in float sy, in float sw, in float sh, in float dx, in float dy, in float dw, in float dh);
void <span><a href="#drawimage">drawImage</a></span>(in <span><a href="#htmlimageelement">HTMLImageElement</a></span> image, in float dx, in float dy);
void <span><a href="#drawimage">drawImage</a></span>(in <span><a href="#htmlimageelement">HTMLImageElement</a></span> image, in float dx, in float dy, in float dw, in float dh);
void <span><a href="#drawimage">drawImage</a></span>(in <span><a href="#htmlimageelement">HTMLImageElement</a></span> image, in float sx, in float sy, in float sw, in float sh, in float dx, in float dy, in float dw, in float dh);
void <span><a href="#drawimage">drawImage</a></span>(in <span><a href="#htmlcanvaselement">HTMLCanvasElement</a></span> image, in float dx, in float dy);
void <span><a href="#drawimage">drawImage</a></span>(in <span><a href="#htmlcanvaselement">HTMLCanvasElement</a></span> image, in float dx, in float dy, in float dw, in float dh);
void <span><a href="#drawimage">drawImage</a></span>(in <span><a href="#htmlcanvaselement">HTMLCanvasElement</a></span> image, in float sx, in float sy, in float sw, in float sh, in float dx, in float dy, in float dw, in float dh);

// pixel manipulation
<span><a href="#imagedata">ImageData</a></span> getImageData(in float sx, in float sy, in float sw, in float sh);
void <span><a href="#drawimagedataimage">drawImageData</a></span>(in <span><a href="#imagedata">ImageData</a></span> image, in float dx, in float dy);

// drawing text is not supported in this version of the API
// (there is no way to predict what metrics the fonts will have,
Expand All @@ -15600,11 +15607,17 @@ http://lxr.mozilla.org/mozilla/source/dom/public/idl/html/nsIDOMNSHTMLTextAreaEl

interface <dfn id="canvasgradient">CanvasGradient</dfn> {
// opaque object
void addColorStop(in float offset, in DOMString color);
void <span><a href="#addcolorstopoffset">addColorStop</a></span>(in float offset, in DOMString color);
};

interface <dfn id="canvaspattern">CanvasPattern</dfn> {
// opaque object
};

interface <dfn id="imagedata">ImageData</dfn> {
readonly attribute long int <span title="dom-imagedata-width"><a href="#width">width</a></span>;
readonly attribute long int <span title="dom-imagedata-height"><a href="#height">height</a></span>;
readonly attribute Array <span title="dom-imagedata-data"><a href="#data1">data</a></span>;
};</pre>

<p>The <dfn id="canvas0"
Expand Down Expand Up @@ -16293,7 +16306,57 @@ interface <dfn id="canvaspattern">CanvasPattern</dfn> {
of the target element, not the rendered image (e.g. height/width
attributes don't affect it -->

<h5 id="drawing"><span class="secno">6.1.1.10. </span>Drawing model</h5>
<h5 id="pixel"><span class="secno">6.1.1.10. </span><dfn id="pixel1">Pixel
manipulation</dfn></h5>

<p>The <dfn id="getimagedatasx" title="getImageData"><code>getImageData(sx,
sy, sw, sh)</code></dfn> method must return an <code><a
href="#imagedata">ImageData</a></code> object representing the underlying
pixel data for the area of the canvas denoted by the rectangle which has
one corner at the (<var>sx</var>, <var>sy</var>) coordinate, and that has
width <var>sw</var> and height <var>sh</var>. Pixels outside the canvas
must be returned as transparent black.

<p><code><a href="#imagedata">ImageData</a></code> objects must be
initialised so that their <dfn id="height"
title="dom-imagedata-height"><code>height</code></dfn> attribute is set to
<var>h</var>, the number of rows in the image data, their <dfn id="width"
title="dom-imagedata-width"><code>width</code></dfn> attribute is set to
<var>w</var>, the number of physical device pixels per row in the image
data, and the <dfn id="data1"
title="dom-imagedata-data"><code>data</code></dfn> attribute is
initialised to an array of <var>h</var>&times;<var>w</var>&times;4
integers. The pixels must be represented in this array in left-to-right
order, row by row, starting at the top left, with each pixel's red, green,
blue, and alpha components being given in that order. Each component of
each device pixel represented in this array must be in the range 0..255,
representing the 8 bit value for that component.

<p>The <dfn id="drawimagedataimage"
title="drawImageData"><code>drawImageData(image, dx, dy)</code></dfn>
method must take the given <code><a href="#imagedata">ImageData</a></code>
structure, and draw it at the specified location
<var>dx</var>,<var>dy</var> in the canvas coordinate space, mapping each
pixel represented by the <code><a href="#imagedata">ImageData</a></code>
structure into one device pixel.

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

<pre>context.drawImageData(context.getImageData(x, y, w, h), x, y);</pre>

<p>...for any value of <var>x</var> and <var>y</var>. (In other words, any
rounding performed must be performed consistently for both the <code><a
href="#getimagedatasx">getImageData()</a></code> and <code><a
href="#drawimagedataimage">drawImageData()</a></code> operations.)

<p>The current transformation matrix must not affect the <code><a
href="#getimagedatasx">getImageData()</a></code> and <code><a
href="#drawimagedataimage">drawImageData()</a></code> methods.

<h5 id="drawing"><span class="secno">6.1.1.11. </span>Drawing model</h5>

<p>When a shape or image is painted, user agents must follow these steps,
in the order given (or act as if they do):
Expand Down Expand Up @@ -17127,7 +17190,7 @@ document.getElementById('stock').addEventListener('stock change',

<pre
class="idl">interface <dfn id="connectionreadevent">ConnectionReadEvent</dfn> : <span>Event</span> {
readonly attribute DOMString <span title="dom-connectionReadEvent-data"><a href="#data1">data</a></span>;
readonly attribute DOMString <span title="dom-connectionReadEvent-data"><a href="#data2">data</a></span>;
readonly attribute DOMString <span title="dom-connectionReadEvent-source"><a href="#source0">source</a></span>;
void <span title="dom-connectionReadEvent-initConnectionReadEvent"><a href="#initconnectionreadevent">initConnectionReadEvent</a></span>(in DOMString typeArg,
in boolean canBubbleArg,
Expand All @@ -17141,7 +17204,7 @@ document.getElementById('stock').addEventListener('stock change',
};
</pre>

<p>The <dfn id="data1"
<p>The <dfn id="data2"
title="dom-connectionReadEvent-data"><code>data</code></dfn> attribute
must contain the data that was transmitted from the peer.

Expand Down Expand Up @@ -17370,7 +17433,7 @@ document.getElementById('stock').addEventListener('stock change',
href="#connection0">Connection</a></code> object. The string <var
title="">s</var>, with the first character removed, must be used as the
<code title="dom-connectionReadEvent-data"><a
href="#data1">data</a></code>, and the source IP address of the packet as
href="#data2">data</a></code>, and the source IP address of the packet as
the <code title="dom-connectionReadEvent-source"><a
href="#source0">source</a></code>.

Expand Down Expand Up @@ -17743,7 +17806,7 @@ document.getElementById('stock').addEventListener('stock change',
title="event-connection-read"><a href="#read">read</a></code> event must
be fired on the <code><a href="#connection0">Connection</a></code> object
with that string as the <code title="dom-connectionReadEvent-data"><a
href="#data1">data</a></code>. If that string cannot be decoded as UTF-8
href="#data2">data</a></code>. If that string cannot be decoded as UTF-8
without errors, the packet should be ignored.

<p class="note">This protocol does not yet allow binary data (e.g. an image
Expand Down Expand Up @@ -17821,7 +17884,7 @@ document.getElementById('stock').addEventListener('stock change',

<pre
class="idl">interface <dfn id="crossdocumentmessageevent">CrossDocumentMessageEvent</dfn> : <span>Event</span> {
readonly attribute DOMString <span title="CrossDocumentMessageEvent.data"><a href="#data2">data</a></span>;
readonly attribute DOMString <span title="CrossDocumentMessageEvent.data"><a href="#data3">data</a></span>;
readonly attribute DOMString <span title="CrossDocumentMessageEvent.domain"><a href="#domain2">domain</a></span>;
readonly attribute DOMString <span title="CrossDocumentMessageEvent.uri"><a href="#uri">uri</a></span>;
readonly attribute Document <span title="CrossDocumentMessageEvent.source"><a href="#source1">source</a></span>;
Expand Down Expand Up @@ -17851,7 +17914,7 @@ document.getElementById('stock').addEventListener('stock change',
interface, with the event name <dfn id="message"
title="message-event"><code>message</code></dfn> in the
<code>uuid:7f37e11a-3a5c-4f3d-a82e-83b611439f37</code> namespace, which
bubbles, is cancelable, and has no default action. The <dfn id="data2"
bubbles, is cancelable, and has no default action. The <dfn id="data3"
title="CrossDocumentMessageEvent.data"><code>data</code></dfn> attribute
must be set to the value passed as the argument to the <code><a
href="#postmessage">postMessage()</a></code> method, the <dfn id="domain2"
Expand Down

0 comments on commit d192464

Please sign in to comment.