[whatwg] Drawing shapes on canvas

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

Received on Thursday, 9 January 2014 00:55:44 UTC