Howto avoid image cutoff with <canvas> rotate?

<html>
    <head>
    	<title>test</title>
    	<script type="text/javascript">
    		function startup() {
    			var canvas = document.getElementById('canvas');
    			var ctx = canvas.getContext('2d');
    			var img = new Image();
    			img.src = 'player.gif';
    			img.onload = function() {
    				ctx.rotate(5 * Math.PI / 180);
    				ctx.drawImage(img, 0, 0, 64, 120);
    			}
    		}
    	</script>
    </head>
    <body onload='startup();'>
    	<canvas id="canvas" style="position: absolute; left: 300px; top: 300px;" width="800" height="800"></canvas>
    </body>
</html>

ctx.translate(85, 85);
ctx.rotate(5 * Math.PI / 180);

ctx.translate(85, 85);
ctx.rotate(5 * Math.PI / 180);  // for 5 degrees like the example from Vincent

ctx.translate(-85, -85);

ctx.save();
ctx.translate(85,85);
ctx.rotate(5 * Math.PI / 180);
ctx.fillRect(10,10,10,10);
ctx.restore();

Square = {
    x:10,
    y:10,
    width:10,
    height:10,
    angle:5
}
ctx.save();
ctx.translate(Square.x,Square.y);
ctx.rotate(Square.angle * Math.PI / 180);
ctx.fillRect(-Square.width/2,-Square.height/2,Square.width,Square.height);
ctx.restore();