Rotate the image in the canvas so that it fits within the canvas area

Question

Canvas

I wish you good health, habrovtsy!

I have a problem with image rotation in canvas. It seems to be easy to solve, but I can't find a solution.

I need to rotate an image inside the canvas so that it always fits neatly into its area. The canvas'a size should not change at the same time - the image itself should decrease. In the code below, the image rotates nicely and sits in the center of the canvas, but I don't know how to make it smaller so that it fits neatly.

The image shows exactly what I need (the canvas area is indicated in red).

var canvas=document.getElementById('iconCanvas');//<canvas id="iconCanvas" width="128" height="128"></canvas>
var context=canvas.getContext("2d");
var imgObj=new Image();
imgObj.src='people.jpg';
var width=128;
var height=128;
var angleToRotate=30;


$(imgObj).load(function() {
    context.clearRect(0, 0, canvas.width, canvas.height);

    var rad = angleToRotate * Math.PI / 180;

    context.translate(0 + width / 2, 0 + height / 2);

    context.rotate(rad);

    //draw the image    
    context.drawImage(imgObj,width / 2 * (-1),height / 2 * (-1),width,height);

    //reset the canvas  
    context.rotate(rad * ( -1 ) );
    context.translate((0 + width / 2) * (-1), (0 + height / 2) * (-1));
});

I solved this easily in PHP, but I need a solution in canvas. Help me please :)

Answer 1

I decided on my own in the end. But the solution is tricky. If anyone can come up with something better I'd be grateful :)

$(document).ready(function(){
var canvas=document.getElementById('iconCanvas');//<canvas id="iconCanvas" width="128" height="128"></canvas>
var context=canvas.getContext("2d");
var imgObj=new Image();
imgObj.src='people.jpg';
var iconWidth=128;
var iconHeight=128;
var width=200;
var height=128;
var angleToRotate=30;


$(imgObj).load(function() {
    context.clearRect(0, 0, canvas.width, canvas.height);

    var rad = angleToRotate * Math.PI / 180;
  var newAngle=angleToRotate;
  
  //in case angle is >90
  if(newAngle>90 && newAngle<=180){
    newAngle=180-newAngle;
  }
  else if(newAngle>180 && newAngle<=270){
    newAngle=270-newAngle;
  }
  else if(newAngle>270){
    newAngle=360-newAngle;
  }

    context.translate(0 + iconWidth / 2, 0 + iconWidth / 2);

    context.rotate(rad);

    //draw the image
  
  var newImageWidth=Math.floor((Math.cos((Math.atan(iconWidth/iconHeight)*180/Math.PI)*Math.PI/180)*height)/Math.sin((parseInt(newAngle)+Math.atan(iconHeight/iconWidth)*180/Math.PI)*Math.PI/180));
  var newImageHeight=Math.floor((Math.cos((Math.atan(iconWidth/iconHeight)*180/Math.PI)*Math.PI/180)*height)/Math.sin((newAngle+Math.atan(iconHeight/iconWidth)*180/Math.PI)*Math.PI/180));
  
    context.drawImage(imgObj,newImageWidth / 2 * (-1),newImageHeight / 2 * (-1),newImageWidth,newImageHeight);

});
});