如何以正确的方式旋转画布

Question

我有一个想要裁剪的图像。

因此，我用较暗的背景创建了canvas as overlay然后在鼠标移动时我在画布上绘制了一个rect，在那个矩形中我清除了黑暗的背景。看起来如下：

因此，将裁剪没有背景的区域。

我的代码如下：

var canvas = document.getElementById('canvas');
var img = document.getElementById('photo');
var ctx = canvas.getContext('2d');
var rect = {};
var drag = false;
var update = true; // when true updates canvas
var original_source = img.src;
img.src = original_source;
var deg = 0;
var image_rotate_angle = 90;

document.getElementById('right').addEventListener("click", rotateRight, false);
document.getElementById('left').addEventListener("click", rotateLeft, false);

function rotateRight(){
	deg = deg + image_rotate_angle;
	img.style.transform = "rotate(" + deg + "deg)";
  canvas.style.transform = "rotate(" + deg + "deg)";
}

function rotateLeft(){
	deg = deg - image_rotate_angle;
	img.style.transform = "rotate(" + deg + "deg)";
  canvas.style.transform = "rotate(" + deg + "deg)";
}

function init() {
    img.addEventListener('load', function(){
        canvas.width = img.width;
        canvas.height = img.height;
        canvas.addEventListener('mousedown', mouseDown, false);
        canvas.addEventListener('mouseup', mouseUp, false);
        canvas.addEventListener('mousemove', mouseMove, false);
    });
    
    // start the rendering loop
    requestAnimationFrame(updateCanvas);
}

// main render loop only updates if update is true
function updateCanvas(){
  if(update){
      drawCanvas();
      update = false;
  }

  requestAnimationFrame(updateCanvas);
}

// draws a rectangle with rotation 
function drawRect(){
		ctx.clearRect(rect.startX, rect.startY, rect.w, rect.h);
}

// clears canvas sets filters and draws rectangles
function drawCanvas(){    
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = 'rgba(32, 32, 32, 0.7)';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    drawRect()
}

// create new rect add to array 
function mouseDown(e) {
    rect = {
      startX : e.offsetX,
      startY : e.offsetY,
      w : 1,
      h : 1
    };
    drag = true;
}

function mouseUp() { drag = false; update = true; }

function mouseMove(e) {
    if (drag) {
        rect.w = (e.pageX - this.offsetLeft) - rect.startX;
        rect.h = (e.pageY - this.offsetTop) - rect.startY;
        update = true;
    }
}

init();

canvas{
  position: absolute;
  left: 0; 
  right: 0; 
  top: 0; 
  bottom: 0; 
  display:inline-block;
  background:rgba(0,0,0,0.3);
}

<div style="margin-bottom: 15px;">
  <button id="left">Rotate Reft</button>
  <button id="right">Rotate Right</button>
</div>
<div style="position: relative; overflow: hidden;display:inline-block;">
    <img id="photo" src="http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg"/>
    <canvas id="canvas"></canvas>
</div>

我还有两个用于旋转图像的按钮。我有问题。解决方案可能很明显，但我没有看到。

如果我绘制一个矩形然后旋转图像，我也旋转图像和画布，然后旋转后矩形停留在同一个地方。这就是我想要的，并且工作正常。
问题是如果我先旋转图像，然后尝试绘制一个矩形。然后矩形不是应该绘制的，它朝相反的方向。

Here is the fiddle.

知道怎么解决吗？