As a prototype for some features we have planned at picnic software I wanted to prototype some very simple interactivity using either canvas or svg.
The prototype is simple resizable moveable circles on a page.
The Web-Drawing Throwdown from smashing magazine gave me a head start but didn’t really address the kind of interactivity I was looking for. Based on the discussion there I elected to use paper.js for canvas and raphael.js for svg (vml in older versions of IE).
Both libraries gave me high level abstractions for working with the shapes and capturing mouse events. Paper.js seemed to be lacking really rich support for high level objects. You can create a circle like this:
new Path.Circle(new Point(x, y), radius);
But once created the circle is just a geometric path. You cannot alter the radius of the circle - you have to work with each of the four segments individually.
circle.segments.point.x = centre.x + radius; circle.segments.point.y = centre.y - radius; circle.segments.point.x = centre.x - radius; circle.segments.point.y = centre.y + radius;
var hitResult = paper.project.hitTest(event.point, hitOptions);