Re: [whatwg] Drawing shapes on canvas

On Mon, Jan 13, 2014 at 12:31 PM, Justin Novosad <> wrote:

> Maybe I am missing something, but I think this API could be implemented
> entirely in JS without any new canvas APIs.  Do you have a counter example?
>  Or perhaps you have a use case that would be extraordinarily inefficient
> using current APIs?
> The way I see it, you would need to use an off-screen canvas to as a
> scratch pad for applying the shape ops (i.e. for compositing paths), but
> wouldn't a native implementation have to do the same?

Another use-case for the shape object would be WebGL.
Today, users have to draw shapes and text on a 2d canvas and send over the
bitmap to WebGL as a texture. If we could teach WebGL to take Shape2D
object, it would have access to scalable graphics which would lower memory
use and have better quality.
The engineers at NVidia have a paper [1] that describes how this could work.


> On Wed, Jan 8, 2014 at 7:55 PM, Rik Cabanier <> wrote:
>> All,
>> around a year ago, I wrote a blog post [1] that introduced a new 'Shape'
>> class that described a filled or stroked region or an area of text. Java2D
>> has a similar concept that they call 'Area' [2].
>> We've had some discussions but it doesn't look like there was any sort of
>> conclusion. I'd like to pick it back up now that we have a partial
>> implementation of the Path object and people are starting to look into
>> extending it.
>> I'll reiterate my proposal:
>> 1. remove all the addxxx methods from the Path2D object [3]
>> Path object are just containers for segments. Aggregating segments will
>> generally not give the desired results since the segments will interact
>> (see [1]).
>> AddPath *could* be kept if people see a strong use case.
>> 2. introduce a new class 'Shape2D'
>> Interface:
>> [Constructor,
>>   Constructor(Path2D , CanvasWindingRule = "nonzero"),
>>   Constructor(Path2D , CanvasDrawingStyles, SVGMatrix?), // strokes a path
>>   Constructor(DomString text, CanvasDrawingStyles, SVGMatrix?,
>> unrestricted
>> double, unrestricted double, boolean isStroked = false, optional
>> unrestricted double)]
>> interface Shape2D{
>>     Shape2D transform(matrix); // returns a transformed path
>>     Shape2D add(Shape2D); // returns a path that is the union of the 2
>> paths
>> }
>> This class will represent a painted area. Because it knows the winding and
>> stroking rules, the browser will be able to do expensive math in advance.
>> It can also cache the region on the GPU.
>> constructors:
>> a. default constructor that creates an empty region
>> b. constructor that take a path and a winding rule. This represents a
>> filled region
>> c. constructor that takes a path, canvasDrawingStyles object and a matrix.
>> This represent a stroked region.
>> d. constructor that takes text + canvasDrawingStyles. This represent a
>> region of filled or stroked text.
>> methods:
>> a. transform -> transform the shape by the matrix and returns a new shape
>> b. add -> add the region of the shape to the current shape and return as a
>> new shape
>> 3. Add new methods:
>> fill(Shape2D)/clip(Shape2D)/isPointInShape(Shape2D,...)
>> 4. remove stroke(path), fill(path), clip(path), isPointInPath(path,...)
>> 5. HitRegionOptions takes a Shape2D instead of a path + winding rule
>> What do people think?
>> 1:
>> 2:
>> 3:

Received on Tuesday, 14 January 2014 21:41:59 UTC