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

Jeremy Orlow jorlow at chromium.org
Mon Feb 22 14:35:33 PST 2010


On Mon, Feb 22, 2010 at 7:57 PM, Drew Wilson <atwilson at google.com> wrote:

>
>
> On Mon, Feb 22, 2010 at 11:13 AM, David Levin <levin at google.com> 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.
>>
>> 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
>> ).
>>
>
> Do we feel that text APIs are, in general, difficult to implement in a
> multi-thread safe manner? Or would we be limiting this API primarily because
> of the specifics of a single current implementation? Because if it's the
> latter, I would argue against omitting the text APIs, since they seem
> fundamental to many use cases. It seems like there are a range of solutions
> for retrofitting multi-thread support to non-multi-thread-safe operations,
> ranging from the use of global mutexes to changing the code itself to be
> safely re-entrant.
>

It does indeed seem pretty short sighted.

Why can't implementations that aren't able to render text (or whatever) on a
worker thread simply schedule such work on their main thread?  I know it
defeats the parallelism, but it's better than _some_ implementations are
single threaded when doing things like rendering text rather than _all_
implementations (not to mention that it's easier from the web developer's
perspective).
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.whatwg.org/pipermail/whatwg-whatwg.org/attachments/20100222/165a32b9/attachment-0002.htm>


More information about the whatwg mailing list