drag-drop, resize images and then drawing features in 1 canvas -

i working on application user comes , sees blank area(div or canvas or whatever, lets call mycanvas hereafter). drags images outside(a div) , drops them on mycanvas. can resize them. and, can draw in mycanvas pencils , colors erasing feature. now, per research till now, i've figured out drawing part pure html 5 canvas stuff. so, no problem that. i'm not sure whether can drop images outside div/canvas mycanvas. please tell me how achieve 3 features(drag-drop outside, draw pencil, resize images) in single area.

you can achieve required features using kinetic js.

to drag, drop , resize

http://www.html5canvastutorials.com/labs/html5-canvas-drag-and-drop-resize-and-invert-images/

to paint using different shapes, line:

http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-line-tutorial/

and dropping outside canvas simplest thing, probably:

http://www.w3schools.com/html/html5_draganddrop.asp

just check these , let me know if there problem in integration.