Jump to content
Sign in to follow this  
AARRGGHHH

Can't Get Canvas To Rotate

Recommended Posts

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!  

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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. 

Share this post


Link to post
Share on other sites
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. :P 

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 by AARRGGHHH

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×