Question

149

How to rotate one image in a canvas?

rated 0 times [ 156] [ 7] / answers: 1 / hits: 35507 / 13 Years ago, wed, september 21, 2011, 12:00:00

I am making an HTML5 canvas game, and I wish to rotate one of the images.

var link = new Image();

link.src='img/link.png';

link.onload=function(){

    ctx.drawImage(link,x,y,20,20); // draws a chain link or dagger

}

I wish to rotate this image. The standard way of rotating image was to set a rotation on the canvas context object. However, that rotates the entire game! I don't want to do that, and only wish to rotate this one sprite. How do I do that?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jillalanisg

Add To Favorites

Follow

Total Points: 484

Total Questions: 98

Total Answers: 89

Location: Vanuatu

Member since Wed, Oct 14, 2020

4 Years ago

answered 13 Years ago leslijessalyng · Accepted Answer

Use .save() and .restore() (more information):

link.onload=function(){

    ctx.save(); // save current state

    ctx.rotate(Math.PI); // rotate

    ctx.drawImage(link,x,y,20,20); // draws a chain link or dagger

    ctx.restore(); // restore original states (no rotation etc)

}