画布处于相对位置的油漆桶

Question

var fillColor = function(startX, startY, imgData, penColor, canvas) {
    var cWidth = canvas.width;
    var cHeight = canvas.height;
    var toImageDataPixelPos = function(x, y) { return ((cWidth * y) + x) * 4; };
    var startPixelPos = toImageDataPixelPos(startX, startY);
    var baseColor = { red : imgData.data[startPixelPos], green : imgData.data[startPixelPos+1], blue : imgData.data[startPixelPos+2], alpha : 1 };

    var setImageDataPixelPos = function(pp, imgD) {
        imgD.data[pp] = penColor.red;
        imgD.data[pp+1] = penColor.green;
        imgD.data[pp+2] = penColor.blue;
        imgD.data[pp+3] = 255 * penColor.alpha;
        return imgD;
    };

    var isMatchColor = function(x, y, imgD, cl) {
        var pp = toImageDataPixelPos(x, y);
        if ((imgD.data[pp] === cl.red) &&
            (imgD.data[pp+1] === cl.green) &&
            (imgD.data[pp+2] === cl.blue)) {
            return true;
        } else {
            return false;
        }
    };

    var paintHorizontal = function(leftX, rightX, y, imgD) {
        for (var x = leftX; x <= rightX; x++) {
            var pp = toImageDataPixelPos(x, y);
            imgD = setImageDataPixelPos(pp, imgD);
        }
        return imgD;
    };

    var scanLine = function(leftX, rightX, y, imgD, buffer) {
        while (leftX <= rightX) {
            for (; leftX <= rightX; leftX++) {
                if (isMatchColor(leftX, y, imgD, baseColor)) {
                    break;
                }
            }
            if (rightX < leftX) {
                break;
            }
            for (; leftX <= rightX; leftX++) {
                if (!isMatchColor(leftX, y, imgD, baseColor)) {
                    break;
                }
            }
            buffer.push({ x : leftX - 1, y : y});
        }
    };

    var paint = function(x, y, imgD) {
        if (isMatchColor(x, y, imgD, penColor)) {
            return imgD;
        }
        var buffer = [];
        buffer.push({ x : x, y : y });
        while (buffer.length > 0) {
            var point = buffer.pop();
            var leftX = point.x;
            var rightX = point.x;
            /* skip already painted */
            if (isMatchColor(point.x, point.y, imgD, penColor)) {
                continue;
            }
            /* search left point */
            for (; 0 < leftX; leftX--) {
                if (!isMatchColor(leftX - 1, point.y, imgD, baseColor)) {
                    break;
                }
            }
            /* search right point */
            for (; rightX < cWidth - 1; rightX++) {
                if (!isMatchColor(rightX + 1, point.y, imgD, baseColor)) {
                    break;
                }
            }
            /* paint from leftX to rightX */
            imgD = paintHorizontal(leftX, rightX, point.y, imgD);
            /* search next lines */
            if (point.y + 1 < cHeight) {
                scanLine(leftX, rightX, point.y + 1, imgD, buffer);
            }
            if (point.y - 1 >= 0) {
                scanLine(leftX, rightX, point.y - 1, imgD, buffer);
            }
        }
        return imgD;
    };

    return paint(startX, startY, imgData);
};

  $(function(){

   const borderWidth = 3;

   var canvas = document.getElementById('mycanvas');
   if(!canvas || !canvas.getContext) return false;
   var ctx = canvas.getContext('2d');

   ctx.fillStyle = 'rgba(255, 255, 255, 1.0)';
   ctx.fillRect(0, 0, 550, 500);

   var pos = function(e) {
       return { x : (e.pageX - $('#mycanvas').offset().left - borderWidth),
                y : (e.pageY - $('#mycanvas').offset(). top - borderWidth)};
   };

   var penColor = { red : 255, green : 0, blue : 0, alpha : 1.0};

   $('#mycanvas').on('click', function(e){
     console.log(window.innerWidth);

     var p = pos(e);
     var imageData = ctx.getImageData(0, 0, 550, 1400);
     imageData = fillColor(p.x, p.y, imageData, penColor, canvas);

     ctx.putImageData(imageData, 0, 0);
   });

  });

body,html{
      margin:0;
      padding:0;
    }

#container{
  width:600px;
  margin:0 auto;
}

#mycanvas{
  margin:10px;
  border:3px solid #777;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="container">
    <canvas  width="550px" height="500px" id="mycanvas">
    </canvas>
</div>

功能fillColor用于通过扫描线种子填充算法用红色填充画布。 当画布不根据窗口的宽度移动时，颜料桶代码可以正常工作。 但是，如果画布像上面的代码片段一样位于#container中，并且基于窗口的宽度进行定位，则会发生一些非常奇怪的事情。 根据我的检查，当窗口的宽度大于#container的宽度和奇数时，单击不会填充画布！ 如果开发人员工具是开放的，则其工作方式有所不同。开发人员工具未打开时会发生这种情况。

我不知道这是怎么回事，有人知道吗？