How to rotate an image with the canvas HTML5 element from the bottom center angle?

Translate the image dimensions to 32, 120 −

context.translate(32, 120);

Now rotate the canvas −

context.rotate(90 * Math.PI/180);

Now draw the image −

context.drawImage(img, -32, -120, 64, 120);

Smita Kapse

Published on 06-Apr-2018 07:49:28

• Related Questions & Answers
• Rotate the element based on an angle using CSS
• How to center canvas in HTML5?
• How to Rotate image in image view by an angle in Android?
• Rotate HTML5 Canvas around the current origin
• Can the HTML5 Canvas element be created from the Canvas constructor?
• How to center an image in canvas Python Tkinter
• How to rotate an Image in ImageView by an angle on Android?
• Change colour of an image drawn on an HTML5 canvas element.
• How to rotate an image with a given angle using imagerotate() function in PHP?
• How to center an image with CSS?
• How to rotate an image in imageview by an angle on Android using Kotlin?
• Drawing an image from a data URL to a HTML5 canvas
• Center an image with CSS
• How to rotate an image in imageview by an angle on iOS App using Swift?
• HTML5 drawImage() method to draw image onto the canvas