I have a full screen canvas I am drawing to, and I've set it up to allow the user to drag and drop objects that are within the canvas.

I also want to enable them to select an object, and then 'resize handlers' show up (the little circles in the corners) to allow them to click/drag and resize them.

I can code this manually by drawing circles in each corner and detect a click, etc.... but was wondering if anyone has any better way to do this? Maybe there's a library out there that already handles this?

Any help is appreciated!

I have a full screen canvas I am drawing to, and I've set it up to allow the user to drag and drop objects that are within the canvas.

I also want to enable them to select an object, and then 'resize handlers' show up (the little circles in the corners) to allow them to click/drag and resize them.

I can code this manually by drawing circles in each corner and detect a click, etc.... but was wondering if anyone has any better way to do this? Maybe there's a library out there that already handles this?

Any help is appreciated!

• javascript
• jquery
• html
• canvas

• 1 Have you seen fabric.js? – kangax Commented Apr 5, 2011 at 22:21
• Kangax - thanks a ton, your library is perfect and is very very impressive. I was thinking of building something similar, but looks like you've already done it. Instead, I filed a bug, and maybe I'll find a way to contribute :) – Steve Commented Apr 8, 2011 at 8:03

1 Answer 1

There isn't any simpler way than doing it yourself or getting a library to do it for you.

I wrote a tutorial here on the use of sizing handles. That should get you started if you plan to make your own.