mobile html5 image zoom/crop

this is a small project. i need is a mobile page where a image is loaded and you can crop the image to a preset size. example: site loads an image thats 1100x1100 (scaled to mobile phone) in size and there is a square the size of 600x600 where i can zoom in/out/left/right the image NOT the "crop square" like in photoshop. the image moves NOT the crop selection. instagram has a similar feature when you upload images. here is a snapshop from instagram: [login to view URL] - the image within the white box thats NOT shaded gets cropped with the ability to move and zoom/in/out. the output image would always be a perfect square, we can start with 600x600 as dimensions. this should be done in html5 canvas as it support ios/android browsers.