[whatwg] Drawing shapes on canvas

[Justin Novosad]

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?


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
>