AARRGGHHH Posted April 12, 2018 Share Posted April 12, 2018 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! Link to comment Share on other sites More sharing options...
Ingolme Posted April 12, 2018 Share Posted April 12, 2018 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. Link to comment Share on other sites More sharing options...
AARRGGHHH Posted April 12, 2018 Author Share Posted April 12, 2018 I tried 45 degrees, no luck. I'm certainly open to suggestion! Thank you, Ingolme Link to comment Share on other sites More sharing options...
Ingolme Posted April 12, 2018 Share Posted April 12, 2018 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. Link to comment Share on other sites More sharing options...
AARRGGHHH Posted April 12, 2018 Author Share Posted April 12, 2018 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. Link to comment Share on other sites More sharing options...
AARRGGHHH Posted April 12, 2018 Author Share Posted April 12, 2018 (edited) 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 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now