Can't Get Canvas To Rotate

[AARRGGHHH]

This seems so simple: 
 

				var aC = document.getElementById("arrowCanvas");
				var context = aC.getContext("2d");
				var img = document.getElementById("arrowImage");
				context.drawImage(img, 225, 225);			
				context.rotate(90 * Math.PI / 180); 

But the canvas never rotates. 

Also tried: 

				var aC = document.getElementById("arrowCanvas");
				var context = aC.getContext("2d");
				var img = document.getElementById("arrowImage");
				context.rotate(90 * Math.PI / 180);				
				context.drawImage(img, 225, 225);			
				 

But here, the canvas never even shows up. 

I could use some help with the correct syntax. 

Thank you!  

[Ingolme]

It might be rotating around the top left corner of the canvas, if that's the case then the surface you're drawing on is outside of the boundaries of the image. You probably need to translate the origin before or after rotating. To make sure of this, try rotating just 45 degrees first and see what it looks like.

[AARRGGHHH]

I tried 45 degrees, no luck.  I'm certainly open to suggestion! 

Thank you, Ingolme 

[Ingolme]

Just for reference, the rotate command and other transformations need to be called before drawing the image because it doesn't modify the existing content of the canvas, it just changes the frame of reference for the next objects that are going to be drawn.

I can't see anything obviously wrong in your code, but I don't have all the information either.

Just as a test, rotate the canvas only 45 degrees, then draw the image at position 0, 0 rather than 255, 255.

[AARRGGHHH]

For future reference, since I know others will have this issue, this seems to resolve it: 

					var image = document.getElementById("arrowImage");
					var context = arrowCanvas.getContext('2d');
					context.save();
					context.translate(240, 255); //where to put image
					context.rotate(-180 * Math.PI / 180); //angle 
					// context.drawImage(image, -image.width / 2, -image.height / 2);
					context.drawImage(image, 0, 0);
					//restore the canvas
					context.restore(); 

The w3Schools sample code is a bit lacking, since it only covers drawings, not images.  

Not 100% finished testing yet, but I think it's gonna work. 

[AARRGGHHH]

3 minutes ago, Ingolme said:

"Just for reference, the rotate command and other transformations need to be called before drawing the image because it doesn't modify the existing content of the canvas, it just changes the frame of reference for the next objects that are going to be drawn.... "

lol - GMTA - we posted those replies seconds apart.  

When I would draw my image before rotating, it never showed up.. The .save and .restore seem to be important to resolve that issue. And it seems translate sets the point where drawing begins (the bottom of an arrow or clock hand, for example).   

If this does test okay, maybe we should pin it. There's a lot of other people hitting goggle with the same question. 

Thank you, Ingolme 

Edited April 12, 2018 by AARRGGHHH