[whatwg] Drawing shapes on canvas

[Rik Cabanier]

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.

1:
http://developer.download.nvidia.com/devzone/devcenter/gamegraphics/files/opengl/gpupathrender.pdf


> 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
>>
>
>