[whatwg] Drawing shapes on canvas

Rik Cabanier cabanier at gmail.com
Tue Jan 14 13:41:32 PST 2014

On Mon, Jan 13, 2014 at 12:31 PM, Justin Novosad <junov at google.com> 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 <cabanier at gmail.com> 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: http://blogs.adobe.com/webplatform/2013/01/31/revised-canvas-paths/
>> 2: http://docs.oracle.com/javase/tutorial/2d/advanced/complexshapes.html
>> 3:
>> http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#path-objects

More information about the whatwg mailing list