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

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

У меня тут проблема с поворотом изображения в 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. Помогите, пожалуйста :)