How to rotate one image in a canvas?

Question

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.         


        

Answer 1

You might want to put a translate(); there because the image is going to rotate around the origin and that is in the top left corner by default so you use the translate(); to change the origin.

link.onload=function(){
    ctx.save();
    ctx.translate(x, y); // change origin
    ctx.rotate(Math.PI);
    ctx.drawImage(link,-10,-10,10,10);
    ctx.restore()
}