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

[David Levin]

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.

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/53b63705/attachment-0001.htm>