Canvas rotation + scaling

Question

I need to rotate the image in the canvas and at the same time resize it to make sure that the corners of the canvas do not remain empty. The solution should be something similar to the aviary in the "Crop, Resize, and Rotate" example.

I think the solution is to combine the rotation and resize functions of the canvas, but I cannot find a concrete solution to the problem, and I have not found an exaustive example on the Internet.

Any advice would be helpful

thanks

Answer 1

, , , .

(), , , . : , , , - , .

, , , , .

, x = 100, y = 100, canvasWidth = 300, canvasHeight = 300, absCanvasWidth = (canvasWidth - x) * 2;, x = absCanvasWidth/2 . , , .

,

Answer 2

, . , 90 , , .

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>

Hide result