How do I get my canvas image to rotate 90 degrees each time, its only rotating 180 degrees

Question

im trying to get my image rotate 90 dregees when you click on it, but it only rotates 180 dregees, how do i get it to move 90 degrees each time you click on it?

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <title>Flipping photo in a canvas tag</title>
  <style>
    #canvas {cursor: pointer;}

       canvas {
    height: 50vh;    

    }  


    </style>
</head>
<body>  



<label>Image File:</label>
<br/>
<input type="file" id="imageLoader" name="imageLoader" />

<h1>Example of using <code>&lt;canvas&gt;</code></h1>

<p>This example shows how a photo is loaded in a <code>&lt;canvas&gt;</code> tag and then flipped.</p>

<p>Click on the photo to flip (provided, of course, that your browser supports <code>&lt;canvas&gt;</code>)</p>

<canvas id="canvas" style="border:1px red solid;"></canvas>

<a download="new-image.png" id="download">Download</a>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

    <script type="text/javascript">




var imageLoader = document.getElementById('imageLoader');
imageLoader.addEventListener('change', handleImage, false);


var can = document.getElementById('canvas');
var ctx = can.getContext('2d');




var img = new Image();


function handleImage(e) {
  var reader = new FileReader();
  reader.onload = function(event) {

    img.onload = function() {
      can.width = img.width;
      can.height = img.height;
      ctx.drawImage(img, 0, 0, img.width, img.height);
      ctx.save();
    }
    img.src = event.target.result;
  }
  reader.readAsDataURL(e.target.files[0]);
}




can.onclick = function() {
  console.log('here');
  ctx.translate(img.width - 1, img.height - 1);
  ctx.rotate(Math.PI);
  ctx.drawImage(img, 0, 0, img.width, img.height);

  var button = document.getElementById('download');
  button.setAttribute( 'href', can.toDataURL('image/png', 1) );

};    



    </script>


    <p><a href="http://www.phpied.com/photo-canvas-tag-flip/">Blog post is here</a></p>

</body>
</html>

Just guessing here, but maybe `ctx.rotate(Math.PI/2);` would do it? — Cat, Apr 02 '19 at 14:32
What do you mean with "doesn't respond"? The image is not updating? — Mathyn, Apr 02 '19 at 14:42
it doesnt rotate anymore when i change it to ctx.rotate(Math.PI/2) — unknown, Apr 02 '19 at 14:44
Possible duplicate of [HTML5 Canvas Rotate Image](https://stackoverflow.com/questions/17411991/html5-canvas-rotate-image) — Craicerjack, Apr 02 '19 at 15:23

Aaron Digulla · Accepted Answer · 2019-04-02T15:27:27.190

1

Math.PI rotates by 180°. n * Math.PI / 180 rotates by n°. So in your case, you need to call ctx.rotate(Math.PI/2).

And there is a problem with your code: You're moving the center of rotation all the time. So when you rotate the second time, that center is already somewhere away from the origin. You now translate this (moved) point, rotate it and then draw. Most likely, your new image is outside the canvas, now.

So you need to undo the ctx.translate(img.width - 1, img.height - 1); after the rotation with ctx.translate(-(img.width - 1), -(img.height - 1));.

See here for an example: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/rotate#Rotating_a_shape_around_its_center

Example:

// Rotation by 90° around center at 150,75
ctx.translate(150, 75);
ctx.rotate(Math.PI / 2);
ctx.translate(-150, -75);

edited Apr 02 '19 at 15:27

answered Apr 02 '19 at 15:05

Aaron Digulla

321,842
108
597
820

i changed it but it doesnt rotate now //////////////////// can.onclick = function() { console.log('here'); ctx.translate(-(img.width - 1), -(img.height - 1)); ctx.rotate(Math.PI/2); ctx.drawImage(img, 0, 0, img.width, img.height); var button = document.getElementById('download'); button.setAttribute( 'href', can.toDataURL('image/png', 1) ); }; – unknown Apr 02 '19 at 15:17
Where do you undo your translation? – Aaron Digulla Apr 02 '19 at 15:18
i changed ctx.translate(img.width - 1, img.height - 1); with ctx.translate(-(img.width - 1), -(img.height - 1)); https://jsfiddle.net/tud34n5s/ – unknown Apr 02 '19 at 15:23
And I said "undo ... AFTER the rotation." See the example which I linked to – Aaron Digulla Apr 02 '19 at 15:26
ok i put it after but it doesnt rotate anymoe https://jsfiddle.net/yL0odnhf/1/ – unknown Apr 02 '19 at 15:36
It does. But you can't see it because it's outside of the canvas. Try to make the canvas bigger and move the origin to the center of the canvas before calling `save()`. That way you should be able to see something when it goes wrong. – Aaron Digulla Apr 02 '19 at 15:54
When writing software, you need to figure out when you the mental model of the code is wrong. If you can't see it, then that's not the same as "it's not happening." You simply can't see it. If you can't find the flaw in your mental model of the code, then you will look in the wrong place for a fix. – Aaron Digulla Apr 02 '19 at 15:56
ok i see it but it only rotates one time now, it doesnt rotate any more times after i click on it continuously https://jsfiddle.net/yL0odnhf/2/ – unknown Apr 02 '19 at 16:10
That should work. As a workaround, you can pass different angles of rotation to the method. – Aaron Digulla Apr 02 '19 at 16:20

How do I get my canvas image to rotate 90 degrees each time, its only rotating 180 degrees

1 Answers1