Reflection on the new canvas API

[FranzPoize]

The idea is to develop a new canvas API that would be immediate and functionnal. By immediate it is meant that there would be the least amount of data retention in the canvas library. Prototypo-canvas will handle the raf itself.

The canvas library should provide a drawing API to draw curves, lines, ellipsises, rectangle and text. It should also let us declare which element are to be interacted with and it should provide a way to determine the hotness of an element (ie which element is currently under the mouse). It should also provide the mouse position on the canvas.

Here is an exemple of what a raf iteration would look like:

function rafIteration() {
    setCamera(point, zoom);
    _.each(contours, (contour) => {
        drawContour(contour.controlPoints, undefined, letterFillColor);
    });

    if (drawSkeleton) {
       contours.getSkeleton(contours.getSkeletons(), (skeleton) => {
           drawRectangleFromCenterSize(skeleton.node, skeletonSize, skeletonStrokeColor, undefined, 'skeleton');
           drawLine(skeleton.expandedTo[0], skeleton.expandedTo[1], skeletonRibStrokeColor, undefined);
       });
    }

    const hotItem = getHotInteractiveItem();
    
    switch(hotItem.type) {
        case 'skeleton':
            doSomethingDependingOnState();
            break;
    }
}

Drawing API proposal

drawContour(listOfBezier, strokeColor, fillColor, interactionType)
drawBezierCurve(bezier, strokeColor, fillColor, interactionType)
drawLine(point, point, strokeColor, fillColor, interactionType)
drawRectangleFromCenterSize(point, size, strokeColor, fillColor, interactionType)
drawCircle(point, radius, strokeColor, fillColor, interactionType)
drawText(text, point, textSize, textColor, interactionType)

Drawing API traits

The API should mostly rely on traits (meaning arguments must fullfil a non declarative interface). Here are the differents traits:
listOfBezier = Array<bezier>
bezier= Array[4]<point>
point= {x: number, y: number}
strokeColor = fillColor = textColor = string of format rgba(number, number, number, number)

Interaction API proposal

 doSomethingDependingOnState();

=======WIP=======