Home/ Questions/Q 86517
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-10T22:15:31+00:00

How do you rotate an image with the canvas html5 element from the bottom

  • 0

How do you rotate an image with the canvas html5 element from the bottom center angle?

<html>     <head>         <title>test</title>         <script type='text/javascript'>             function startup() {                 var canvas = document.getElementById('canvas');                 var ctx = canvas.getContext('2d');                 var img = new Image();                 img.src = 'player.gif';                 img.onload = function() {                     ctx.translate(185, 185);                     ctx.rotate(90 * Math.PI / 180);                     ctx.drawImage(img, 0, 0, 64, 120);                 }             }         </script>     </head>     <body onload='startup();'>         <canvas id='canvas' style='position: absolute; left: 300px; top: 300px;' width='800' height='800'></canvas>     </body> </html>

Unfortunately this seems to rotate it from the top left angle of the image. Any idea?

Edit: in the end the object (space ship) has to rotate like a clock pointer, as if it is turning right/left.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. First you have to translate to the point around which you would like to rotate. In this case the image dimensions are 64 x 120. To rotate around the bottom center you want to translate to 32, 120.

    ctx.translate(32, 120);

    That brings you to the bottom center of the image. Then rotate the canvas:

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

    Which rotate by 90 degrees.

    Then when you draw the image try this:

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

    ? Does that work?

    • 0