Решил сам в конце-концов. Но решение сложноватое. Если кто придумает что-нибудь более оптимальное был бы признателен :)
$(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);
});
});
