Повернуть изображение в канвасе так чтобы оно помещалось в область канваса

Question

[pratamishus]

Здравия желаю, хабровцы!

У меня тут проблема с поворотом изображения в canvas'е. Вроде легко должно решаться, но я никак не могу найти решение.

Мне надо повернуть изображение внутри canvas'а, так чтобы оно всегда четко вставало в его область. Размер canvas'a не должен меняться при этом — уменьшаться должно само изображение. В коде указанном ниже изображение прекрасно поворачивается и встает в центр canvas'a, однако я не знаю как его уменьшить так чтобы оно четко вставлялось.

В изображении показано что именно мне надо (красным указана область canvas'a).

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));
});

Я легко это решил в PHP, но мне нужно решение в canvas'e. Помогите, пожалуйста :)

Answer 1

[pratamishus]

Решил сам в конце-концов. Но решение сложноватое. Если кто придумает что-нибудь более оптимальное был бы признателен :)

$(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);

});
});