在页面中移动其位置后无法在画布中绘制

Question

我有一个HTML5 Canvas区域，用户可以在其中绘制数字。当画布盒朝向窗口的最左侧放置时，它工作正常。但是当我在左边添加一些填充以将画布稍微向右移动之后，我无法在画布中绘制。知道为什么会这样吗？

这是我的HTML：

       <div class=container style="overflow-x: hidden;">
    <div class="row" style="padding-top: 20px; padding-left: 60px;">
        <div class="col-md-4">
            <h3 style="font-family: webkit-pictograph;"><b>Draw a number between 0 - 9</b></h3>

      <div>
        <canvas id="can" width="280" height="280" style="top:10%;left:10%;border:2px solid;"></canvas>
      </div>

      <div class="buttons" style="padding-left: 125px;">
        <!--<div style="padding-bottom:5px;"><input type="checkbox" id="preprocessing"><span style="margin-left:5px;">Display Preprocessing</span></div>
        <div style="padding-bottom:5px;"><input type="checkbox" id="scaleStrokeWidth" checked="true"><span style="margin-left:5px;">Scale Stroke Width</span></div> -->
        <div style="float:left;padding-right:10px;"><input type="button" value="Clear" id="clr" class="btn btn-default" size="23" onclick="window.location.reload()"></div>
        <div style="float:left;"><input type="button" value="Recognize" id="recognize" class="btn btn-default" size="23" onclick="recognize()"></div>

      </div>
   </div>

我的Javascript：

 function findxy(res, e) {
      if (res == 'down') {
          if (clearBeforeDraw == true) {
            ctx.clearRect(0,0,canvas.width,canvas.height);
            document.getElementById('nnInput').innerHTML='';
            document.getElementById('nnOut').innerHTML='';
            paths = [];
            clearBeforeDraw = false;
          }

            var rect = canvas.getBoundingClientRect();  // get element's abs. position

          if (e.pageX != undefined && e.pageY != undefined) {
            currX = e.pageX-rect.left;;
            currY = e.pageY-rect.top;
          } else {
            currX = e.clientX + document.body.scrollLeft
                    + document.documentElement.scrollLeft
                    - rect.left;
            currY = e.clientY + document.body.scrollTop
                    + document.documentElement.scrollTop
                    - rect.top;
          }
          //draw a circle
          ctx.beginPath();
          ctx.lineWidth = 1;
          ctx.arc(currX,currY,lineWidth/2,0,2*Math.PI);
          ctx.stroke();
          ctx.closePath();
          ctx.fill();

          paths.push([[currX], [currY]]);
          paintFlag = true;
      }
      if (res == 'up' || res == "out") {
          paintFlag = false;
          //console.log(paths);
      }

      if (res == 'move') {
          if (paintFlag) {
              // draw a line to previous point
              prevX = currX;
              prevY = currY;
              if (e.pageX != undefined && e.pageY != undefined) {
                currX = e.pageX-rect.left;
                currY = e.pageY-rect.top;
              } else {
                currX = e.clientX + document.body.scrollLeft
                        + document.documentElement.scrollLeft
                        - rect.left;
                currY = e.clientY + document.body.scrollTop
                        + document.documentElement.scrollTop
                        - rect.left.top;
              }
              currPath = paths[paths.length-1];
              currPath[0].push(currX);
              currPath[1].push(currY);
              paths[paths.length-1] = currPath;
              draw(ctx, color, lineWidth, prevX, prevY, currX, currY);
          }
      }
  }
  init();