Canvas Rotation+Scaling

Question

I need to rotate an image in a canvas and simultaneously resize it to make sure that the corners of the canvas does not remain empty. The solution should be something similar to what do aviary in the "Crop, Resize & Rotate" example.

I think the solution is to combine the functions of rotation and resize of canvas, but I can not find any concrete solution to the problem and I didn't find any exaustive example on the web.

Any advice would be helpful

Thanks

score 2 · Accepted Answer · edited May 23 '17 at 11:50

2

I have not had a look at the example you have given but I gave a detailed answer on the problem of fitting a rotated image onto a canvas so that there is no blank spaces.

There is some math involved (go figure) but it is just basic trigonometry and I provided an explanation of how its all done. There are two solutions, one that finds the min scale that will fit the canvas for any rotation and the other the will find the min scale to fit the canvas for a particular rotation.

It is assumed that the image is centered, if not there is an easy way to adapt the code provided by supplying an abstract canvas size so that the rotated image is centered on that abstract canvas.

So if your center of image is at x = 100, y = 100 and the canvas is canvasWidth = 300, canvasHeight = 300 then just use an abstract size of absCanvasWidth = (canvasWidth - x) * 2; and then the image at x = absCanvasWidth/2 do the same for height. That will fit the rotated, translated image to fill the canvas.

The answer with the code can be found for the question After rotate, draw Image at correct position

edited May 23 '17 at 11:50

Community

1
1

answered Feb 08 '16 at 19:32

Blindman67

51,134
11
73
136

It's seem a really nice solution, i'm gonna try it.The angle is in radiant? It work also if I pass a negative angle? (i think yes, if i have right understood the script but ask for confirmation) because my rotation must be an adjust of the image, so i give the usesr a range of -45° to 45° from original pic. – Andrea_86 Feb 09 '16 at 09:24
The functions will accept any angle in radians, the line `a1 = ((angle % (Math.PI *2))+ Math.PI*2) % (Math.PI * 2);` will move the angle into the range (0 - PI*2) which is (0-360), where `Math.PI * (7/4)` is the same as -45 deg. You will need to convert to radian at some point before doing the math in the function. To convert `radian = deg * (Math.PI / 180)` or `radian = deg * 0.01745329` which is more than enough precision for the canvas. – Blindman67 Feb 09 '16 at 10:12
Nice. Sorry if i don't accept the answer but for the moment i stopped work in that project, when i put it inside my code and it work(i haven't doubt for that) i'll accept the answer. Just for fairness – Andrea_86 Feb 10 '16 at 11:49

score 0 · Answer 2 · answered Feb 08 '16 at 19:09

Here's some code that might help you. This shows how to rotate an image 90 degrees clockwise, then scale it to fit in the original canvas space.

window.onload = function() {
  var img = document.getElementById("myImage");
  var rotatedCanvas = document.getElementById("myRotatedCanvas");
  var width = rotatedCanvas.offsetWidth;
  var height = rotatedCanvas.offsetHeight;

  // draw the original image 
  var ctx = document.getElementById("myCanvas").getContext("2d");
  ctx.drawImage(img, 0, 0);

  // draw the rotated image
  ctx = rotatedCanvas.getContext("2d");
  ctx.rotate(90 * Math.PI / 180);
  // the last two parameters scale the image
  ctx.drawImage(img, 0, -width, height, width);
};

img {
  display: none;
}
canvas {
  border: 1px black solid;
}

<img src="http://imgur.com/UeMOrix.gif" id="myImage"/>
<canvas id="myCanvas" width="400" height="150"></canvas>
<br>
<canvas id="myRotatedCanvas" width="400" height="150"></canvas>

Canvas Rotation+Scaling

2 Answers2