Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adding image rotation #6

Open
olavarrieta opened this issue Feb 28, 2014 · 0 comments
Open

Adding image rotation #6

olavarrieta opened this issue Feb 28, 2014 · 0 comments

Comments

@olavarrieta
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant