スケール後のキャンバスのサイズ変更image - jquery、html5、html5-canvas

私はすでにキャンバスに描画されている画像をスケーリングしようとしています。 この答え キャンバスで画像を描画/回転します。このサンプルは私のためにうまく機能し、キャンバスを正しくサイズ変更します。スケール（ZoomIn / ZoomOut）を使用してimagはうまく動作しますが、キャンバスは正しくサイズ変更されません。 スケーリング後の画像サイズに基づいてキャンバスのサイズを変更したい。 ここにサンプルコードがあります http://jsfiddle.net/6ZsCz/97/

var zoomDelta = 0.1;
var currentScale = 1;
var ctx = canvas.getContext("2d");
var imgWidth;
var imgHeight;
var size = {};
var rotation = 0;
img = new Image();
img.onload = function () {
rotation = 0;
imgWidth = img.width;
imgHeight = img.height;
size = {
width: imgWidth,
height: imgHeight
};
draw();
newSize(imgWidth, imgHeight, rotation);
};

$("#zoomOut").click(function () {
currentScale -= zoomDelta;
draw();
newSize(imgWidth / currentScale, imgHeight / currentScale, rotation);
});

function draw() {
canvas.width = size.width;
canvas.height = size.height;
var cx = canvas.width / 2;
var cy = canvas.height / 2;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.translate(cx, cy);
ctx.scale(currentScale, currentScale);
ctx.rotate(rotation * deg2Rad);
ctx.drawImage(img, (-imgWidth / 2) , (-imgHeight / 2) );
}
function newSize(w, h, a) {
var rads = a * Math.PI / 180;
var c = Math.cos(rads);
var s = Math.sin(rads);
if (s < 0) {
s = -s;
}
if (c < 0) {
c = -c;
}
size.width = (h * s + w * c) ;
size.height = (h * c + w * s);

}

回答：

キャンバスのサイズにcurrentScaleを掛けることで、キャンバスのサイズを変更してから拡大縮小できます。

canvas.width = size.width*currentScale;
canvas.height = size.height*currentScale;