Create Image Cropping Page

Require a web page where a user is able to, with the use of a fixed-ratio bounding box, rotate, zoom and pan over an image to select an area to crop. - Should be implemented with an HTML5 canvas. (Alternatives welcome.) Must not stutter, even on low-end devices. - Must support all major browsers on all major mobiles platforms. Chrome, Firefox, Safari, Opera Mini, Internet Explorer Mobile, etc., and Android, iOS, Windows Mobile, etc. - Want clean, maintainable and well-documented code. This will be maintained by an internal team of developers once built. - Must be fully HTML5 compliant. - Must respond to iOS-like gestures. The user will 'pinch' to zoom in/out and 'flick' to pan. - Must have a button that allows the picture to be rotated in 90 degree increments. - Must be responsive and resize itself based on the size of a user's screen. No scrolling. All content is visible on the screen all the time. Here's a description of the workflow: The web server will serve this page with an image specific to the user. At the top of the screen will be a banner with a title and an optional place for branding. Below this banner will be a section for instructions. Below this will be the image manipulation area. At the very bottom there will be a footer that can contain a company name or some links. The user will rotate their picture with the tap of a button, pan around their picture with swipes of their finger, and zoom in/out with two-finger pinching, which adjusts which part of the picture is inside of the bounding box. While they are doing this, Any part of the picture that is not inside of the bounding box is darkened. The user will then press a submit button, which must be able to send instructions to the server about how the image needs to be cropped, or be able to send the cropped picture itself.