clearRect坐标与缩放画布上的鼠标位置不匹配

Question

$(document).ready(function(){

  canvas = document.getElementById('canvas');
  ctx = canvas.getContext('2d'),
  img = new Image;

  img.onload = draw;
  img.src = 'http://fariskassim.com/stage/strip/v3/img/before1.jpg';

  function draw() {
      //drawImageProp(ctx, this, 0, 0, canvas.width, canvas.height);
      drawImageProp(ctx, this, 0, 0, canvas.width, canvas.height, 0.1, 0.5);
  }


  ERASE_W=150;
  ERASE_H=70;
  rzr=$("#razor2");
  RAZOR_W=rzr.width();
  RAZOR_H=rzr.height();
  

/**
 * By Ken Fyrstenberg Nilsen
 *
 * drawImageProp(context, image [, x, y, width, height [,offsetX, offsetY]])
 *
 * If image and context are only arguments rectangle will equal canvas
*/
function drawImageProp(ctx, img, x, y, w, h, offsetX, offsetY) {

    if (arguments.length === 2) {
        x = y = 0;
        w = ctx.canvas.width;
        h = ctx.canvas.height;
    }

    /// default offset is center
    offsetX = typeof offsetX === 'number' ? offsetX : 0.5;
    offsetY = typeof offsetY === 'number' ? offsetY : 0.5;

    /// keep bounds [0.0, 1.0]
    if (offsetX < 0) offsetX = 0;
    if (offsetY < 0) offsetY = 0;
    if (offsetX > 1) offsetX = 1;
    if (offsetY > 1) offsetY = 1;

    var iw = img.width,
        ih = img.height,
        r = Math.min(w / iw, h / ih),
        nw = iw * r,   /// new prop. width
        nh = ih * r,   /// new prop. height
        cx, cy, cw, ch, ar = 1;

    /// decide which gap to fill    
    if (nw < w) ar = w / nw;
    if (nh < h) ar = h / nh;
    nw *= ar;
    nh *= ar;

    /// calc source rectangle
    cw = iw / (nw / w);
    ch = ih / (nh / h);

    cx = (iw - cw) * offsetX;
    cy = (ih - ch) * offsetY;

    /// make sure source rectangle is valid
    if (cx < 0) cx = 0;
    if (cy < 0) cy = 0;
    if (cw > iw) cw = iw;
    if (ch > ih) ch = ih;

    /// fill image in dest. rectangle
    ctx.drawImage(img, cx, cy, cw, ch,  x, y, w, h);
}


});





var hand = $('#razor2')[0];
(function() {


    var origin = {
      x: $(window).height(),
      y: $(window).width()
    }

    window.onmousemove = handleMouseMove;
    function handleMouseMove(event) {
        event = event || window.event; // IE-ism
        // event.clientX and event.clientY contain the mouse position
        hand.style.left = event.clientX-92+"px";
        hand.style.top = event.clientY-5+"px";
        var leftSide = false;
        var d = {
          x: origin.x - event.clientX,
          y: origin.y - event.clientY
        };

        var angle = Math.atan2(d.x, d.y) * 90 / Math.PI * -1;
        if (leftSide) {
          //angle = angle * -1;
        }
        hand.style["-webkit-transform"] = "rotate("+parseInt(angle,10)+"deg)";
        hand.style["transform"] = "rotate("+parseInt(angle,10)+"deg)";
    }
})();

function erase(e){
   var cvxw = ctx.canvas.width;
   var parentOffset = $("#razor2").parent().offset(); 
   //or $(this).offset(); if you really just want the current element's offset
   var relX = e.pageX +  0;
   var relY = e.pageY + 0;
  
ctx.clearRect((relX-(RAZOR_W/2)),(relY-(RAZOR_H/2)),ERASE_W,ERASE_H);
}

function draw_razor(e){
  var parentOffset = $("#razor2").parent().offset(); 
   //or $(this).offset(); if you really just want the current element's offset
   var relX = e.pageX - parentOffset.left;
   var relY = e.pageY - parentOffset.top;
  
  rzr.show();

  rzr.css('margin-top','-'+(RAZOR_H/2)+'px');
  rzr.css('margin-left','-'+(RAZOR_W/2)+'px');
  
  
  rzr.css('left',relX+'px');
  rzr.css('top',relY+'px');
};


$(document).mousemove(function(e){
  draw_razor(e);
});

$('#razor2').bind('mousedown', function(e){
    $('#razor2').bind('mousemove', function(e){
        erase(e);
        hand.className = "active";
    });

    $('#razor2').bind('mouseup',function(){
        $('#razor2').unbind('mousemove')
        hand.className = "";
    });
});

$('#razor2').on('dragstart', function(e) {
  e.preventDefault();                                       
});

* {
  padding: 0;
  margin: 0;
}

#game {
  position: relative;
  display: block;
  width: 100vw;
  font-size: 0;
  -webkit-box-shadow: 3px 3px 7px 1px rgba(0, 0, 0, 0.8);
  box-shadow: 3px 3px 7px 1px rgba(0, 0, 0, 0.8);
  margin:0;
  overflow:hidden;
}

body {
  background-color: navajo;
  background-position: center top;
  background-repeat: no-repeat;
  margin:0;
}

.canvas_wrap {
  width: 100%;
  height: 0;
  padding-bottom: 50%;
  position:relative;
  overflow: hidden;
}

canvas {
  /*cursor: none;*/
  position: absolute;
  background: transparent;
  top:0;
  left: 0;
  z-index: 3;
  width:100%;
  height: 100%;
  object-fit: cover;
}

#kitten{
  width: 100%;
  height: 100%;
  object-fit: cover;
  position:absolute;
  top:0;
  left: 0;
  z-index: 2;
}

#razor2 {
  background-image:url(http://fariskassim.com/stage/strip/v3/img/razor.png);
  /*cursor: none;*/
  position: absolute;
  z-index: 98;
  width: 800px;
  height: 476px;
  margin-top: -200px !important;
  margin-left: -200px !important; 
  background-size: cover;
  object-position: -99999px 99999px;
}
#razor2.active {
    background-position: 0 100% !important;
}

#razor {
  height: 0;
  width: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="game">
  <img id="razor" src="img/razor.png">
  <div id="razor2"></div>
  <div class="canvas_wrap">
    <canvas id="canvas" width="1730" height="870">Los ti browser!</canvas>
    <img id="kitten" src="http://fariskassim.com/stage/strip/v3/img/after1.jpg">
  </div>
</div>

正如您所看到的，当您开始在画布上拖动鼠标时，您会看到鼠标位置上没有发生clearRect（剃毛）。它有点偏向左边

我相信这是因为我缩放画布以使其响应。

任何人都知道如何修改我的代码以使clearRect能够处理鼠标的位置？