AARRGGHHH 0 Posted April 12, 2018 Report 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! Quote Link to post Share on other sites
Ingolme 1,020 Posted April 12, 2018 Report 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. Quote Link to post Share on other sites
AARRGGHHH 0 Posted April 12, 2018 Author Report Share Posted April 12, 2018 I tried 45 degrees, no luck. I'm certainly open to suggestion! Thank you, Ingolme Quote Link to post Share on other sites
Ingolme 1,020 Posted April 12, 2018 Report 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. Quote Link to post Share on other sites
AARRGGHHH 0 Posted April 12, 2018 Author Report 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. Quote Link to post Share on other sites
AARRGGHHH 0 Posted April 12, 2018 Author Report 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 Quote Link to post Share on other sites
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.