[whatwg] Offscreen canvas (or canvas for web workers).

[Maciej Stachowiak]

On Feb 22, 2010, at 11:13 AM, David Levin wrote:

> I've talked with some other folks on WebKit (Maciej and Oliver)  
> about having a canvas that is available to workers. They suggested  
> some nice modifications to make it an offscreen canvas, which may be  
> used in the Document or in a Worker.

Comments:

1) Like others, I would recommend not omitting the text APIs. I can  
see why they are a bit trickier to implement than the others, but I  
don't see a fundamental barrier.

2) I would propose adding createPattern and drawImage overloads that  
take an OffscreenCanvas. The other overloads would in practice not be  
usefully callable in the worker case since you couldn't get an image,  
canvas or video element.

3) This would leave the only difference between the two interfaces as  
the drawFocusRing method. This would not be usefully callable in a  
worker, since there would be no way to get an Element. But it doesn't  
seem worth it to add an interface just for one method's worth of  
difference.

Regards,
Maciej

>
> Proposal:
> Introduce an OffscreenCanvas which may be created from a Document or  
> a Worker context.
>
> interface OffscreenCanvas {
>                  attribute unsigned long width;
>                  attribute unsigned long height;
>         DOMString toDataURL (in optional DOMString type, in any...  
> args);
>         object getContext(in DOMString contextId);
> };
>
>
> When it is created in the Worker context, OffscreenCanvas.getContext 
> ("2d") returns a CanvasWorkerContext2D. In the Document context, it  
> returns a CanvasRenderingContext2D.
>
> The base class for both CanvasWorkerContext2D and  
> CanvasRenderingContext2D is CanvasContext2D. CanvasContext2D is just  
> like a CanvasRenderingContext2D except for omitting the font methods  
> and any method which uses HTML elements. It does have some  
> replacement methods for createPattern/drawImage which take an  
> OffscreenCanvas. The canvas object attribute is either a  
> HTMLCanvasElement or an OffscreenCanvas depending on what the canvas  
> context came from.
>
> interface CanvasContext2D {
>         readonly attribute object canvas;
>
>         void save();
>         void restore();
>
>         void scale(in float sx, in float sy);
>         void rotate(in float angle);
>         void translate(in float tx, in float ty);
>         void transform(in float m11, in float m12, in float m21, in  
> float m22, in float dx, in float dy);
>         void setTransform(in float m11, in float m12, in float m21,  
> in float m22, in float dx, in float dy);
>
>                  attribute float globalAlpha;
>                  attribute [ConvertNullToNullString] DOMString  
> globalCompositeOperation;
>
>         CanvasGradient createLinearGradient(in float x0, in float  
> y0, in float x1, in float y1)
>             raises (DOMException);
>         CanvasGradient createRadialGradient(in float x0, in float  
> y0, in float r0, in float x1, in float y1, in float r1)
>             raises (DOMException);
>         CanvasPattern createPattern(in OffscreenCanvas image, in  
> DOMString repetition);
>
>                  attribute float lineWidth;
>                  attribute [ConvertNullToNullString] DOMString  
> lineCap;
>                  attribute [ConvertNullToNullString] DOMString  
> lineJoin;
>                  attribute float miterLimit;
>
>                  attribute float shadowOffsetX;
>                  attribute float shadowOffsetY;
>                  attribute float shadowBlur;
>                  attribute [ConvertNullToNullString] DOMString  
> shadowColor;
>
>         void clearRect(in float x, in float y, in float width, in  
> float height);
>         void fillRect(in float x, in float y, in float width, in  
> float height);
>         void strokeRect(in float x, in float y, in float w, in float  
> h);
>
>         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 width, in float  
> height);
>         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 drawImage(in OffscreenCanvas image, in float dx, in  
> float dy, in optional float dw, in optional float dh);
>         void drawImage(in OffscreenCanvas 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
>         ImageData createImageData(in float sw, in float sh)
>             raises (DOMException);
>         ImageData getImageData(in float sx, in float sy, in float  
> sw, in float sh)
>             raises(DOMException);
>         void putImageData(in ImageData imagedata, in float dx, in  
> float dy, in optional float dirtyX, in optional float dirtyY, in  
> optional float dirtyWidth, in optional float dirtyHeight]);
> };
>
> interface CanvasWorkerContext2D : CanvasContext2D {
> };
>
> interface CanvasRenderingContext2D : CanvasContext2D {
>          CanvasPattern createPattern(in HTMLImageElement image, in  
> DOMString repetition);
>          CanvasPattern createPattern(in HTMLCanvasElement image, in  
> DOMString repetition);
>          CanvasPattern createPattern(in HTMLVideoElement image, in  
> DOMString repetition);
>
>          // focus management
>          boolean drawFocusRing(in Element element, in float xCaret,  
> in float yCaret, in optional boolean canDrawCustom);
>
>         // text
>                  attribute DOMString font;
>                  attribute DOMString textAlign;
>                  attribute DOMString textBaseline;
>         void fillText(in DOMString text, in float x, in float y, in  
> optional float maxWidth);
>         void strokeText(in DOMString text, in float x, in float y,  
> in optional float maxWidth);
>         TextMetrics measureText(in DOMString text);
>
>         // drawing images
>         void drawImage(in HTMLImageElement image, in float dx, in  
> float dy, in optional 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 HTMLVideoElement image, in float dx, in  
> float dy, in optional float dw, in optional float dh);
>         void drawImage(in HTMLVideoElement 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, in optional 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);
>
> };
>
> Questions and comments are welcome.
>
> Note that something similar did come up in December and this  
> proposal avoids doing any text related items in the offscreen canvas  
> which was a concern brought up by Robert O'Callahan at the time  (http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2009-December/024478.html 
> ).
>
> Dave
>

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.whatwg.org/pipermail/whatwg-whatwg.org/attachments/20100222/b7bd9e1d/attachment-0002.htm>