Javascript 在HTML画布上绘制图像以适合旋转的div图像

我试着让标题尽可能清晰，所以我希望有人能理解它所说的

所以，我试着画一个箭头到画布上，围绕画布的中心点旋转

到目前为止，我正在生成一个div，用户可以在其中指定x、y、宽度和高度。 将div附加到body后，用户现在可以使用光标位置自由旋转元素，这非常有效

当用户单击LMB时，布尔值变为真，我的程序分支到以下代码以绘制箭头：

var image = new Image();
var rectangle = shapeRect.getBoundingClientRect();
var centerX = rectangle.left + rectangle.width / 2;
var centerY = rectangle.top + rectangle.height / 2;

//get rotated dimensions
let w = rectangle.width * Math.abs(Math.cos(angle)) + rectangle.height * Math.abs(Math.sin(angle));
let h = rectangle.height * Math.abs(Math.cos(angle)) + rectangle.width * Math.abs(Math.sin(angle));

ctx.save();

//translate to center of divs center
let translation = { x: centerX - $(this).offset().left, y: centerY - $(this).offset().top };
ctx.translate(translation.x, translation.y);
ctx.rotate(angle);

//Check rotated dimensions
/*console.log(w, h);*/
image.style.width = `${rectangle.width}px`;
image.style.height = `${rectangle.width}px`;

ctx.drawImage(
image,
//draw image from top left corner
0,
0,
//draw image to bottom right corner
image.width,
image.height,
-(w/2),
-(h/2),
w,
h,
);
ctx.restore();

我的代码实现了我刚才描述的功能。 但当我的旋转为非直角时，图像会拉伸并覆盖比div边界更大的区域

我不知道如何调整图像大小，使其只适合div的边界。但我知道毕达哥拉斯定理能有所帮助