Draggable, scalable image in HTML5 Canvas

I'm working with a little project t开发者_如何学运维hat I'm planning on using HTML5 in. So far I've managed to set up a little demo with some small functionality, but it still lacks all functionality necessary. I hope that someone here might have some time to spare for a beginner.

Anyway, here's my demo: http://persturesson.com/demo/

Right now, as you can see, the image (yup, it's an image and not a drawn object, the image will change for the final version so don't put to much intot that) is draggable. But I would like to be able to resize the image on the fly like this: http://simonsarris.com/project/canvasdemo/demo2.html

Anyone that has an idea how to incorporate the functionality from this demo in mine?

All inputs are appreciated, thanks.

I wrote the demo you were looking at

So the relevant drawImage looks like this:

context . drawImage(image, dx, dy, dw, dh)

That's destination x, y, width and height. That means, regardless of the size of the original image, you can draw it larger or smaller onto the canvas. In my box example you change the width and height of fillRect, instead here you should just be changing the dw and dh values of drawImage.

So on line 32 of your transform.js file, instead of 150,150 for the dw,dh values, there should be the equivalent of a saved (and modified) width and height, just like in my demo.

Everything else (getting the handles to work, etc) should be pretty much the same.

If there are still any questions, let me know!