rombdn / img-touch-canvas

Add touch gestures (pinch zoom) to images based on Canvas (vanilla HTML5 / JS)
MIT License
148 stars 110 forks source link

Adding image rotation #6

Open olavarrieta opened 10 years ago

olavarrieta commented 10 years ago

Hi, I'm having some issues wile adding rotation to the canvas image. This is the code I'm using but after I rotate the image on a mobile device, it freezes after the rotation happens. What would be the best way to implement that into your script?

On the mobile device I'm presenting two buttons to rotate the image (right or left)

var canvas = document.getElementById('canvas'),
context = canvas.getContext("2d"),
image = "temp.png";

function drawRotated(degrees){
context.clearRect(0, 0, canvas.width, canvas.height);

// save the unrotated context of the canvas so we can restore it later
// the alternative is to untranslate & unrotate after drawing
context.save();

// move to the center of the canvas
context.translate(canvas.width / 2, canvas.height / 2);

// rotate the canvas to the specified degrees
context.rotate(degrees * Math.PI / 180);

// draw the image
// since the context is rotated, the image will be rotated also
context.drawImage(image,-image.width / 2, -image.width / 2);

// we’re done with the rotating so restore the unrotated context
context.restore();
}

thanks for your help in advance! Alvin.