trascinando e ridimensionando un’immagine su canvas html5

Sto costruendo un editor di immagini su canvas HTML5. Dopo aver caricato un’immagine nella canvas ho bisogno di Dragg e ridimensionarlo sulla canvas. Sono riuscito a caricare un’immagine e renderla trascinabile sulla canvas. Ma ho bisogno di renderlo ridimensionabile anche lungo la canvas. Grazie in anticipo.

var Img = new Image(); Img.src = file; Img.onload = function () { context.drawImage(Img, 50, 0, 200, 200); } mouseMove = function (event){ if (down) { context.clearRect(0,0,800,500); context.translate(0, -50); context.drawImage(Img, (event.clientX - offsetX), (event.clientY - offsetY), 200, 200); context.translate(0, 50); } } mouseUp = function () { down = false; } mouseDown = function () { down = true; } canvas.addEventListener('mousedown', mouseDown, false); canvas.addEventListener('mouseup', mouseUp, false); canvas.addEventListener('mousemove',mouseMove, false); 

Ho provato con la cinetica js ma non è adatto con la canvas.