Javascript 为什么我的canvas rect位置在这个下采样实验中不正确？

我正试图建立一个可观察的笔记本，将输入图像向下采样到用户定义的单元数。此处可以看到一个实验示例：

不幸的是，对于较少数量的单元格（见50x50下），最左侧单元格的矩形位置似乎计算不正确。它是一种三角形形状的人工制品（见附件）

我想知道这是否与Javascript浮点舍入错误（乘法和除法）有关，或者我是否有一些不正确的逻辑

我在下面添加了有问题的代码（使用iLife匹配可观察的行为），但要深入研究，您需要访问原始笔记本

const data = (() => {
    ctx.drawImage(img, 0, 0);
    ctx.beginPath();
    const columnWidth = img.naturalWidth / columns;
    const rowWidth = img.naturalHeight / rows;
    const getCellData = (rowIndex) => 
        [...Array(columns)]
        .map((_, columnIndex) => {
            const imgData = ctx.getImageData(
                columnIndex * columnWidth,
                rowIndex * rowWidth,
                columnWidth,
                rowWidth
             );
            // each chunk represents a color
            return lodash.chunk(imgData.data, 4);
        });


    return [...Array(rows)]
    .map((_, rowIndex) => getCellData(rowIndex));
});


const averagedData = (() => {
  const getCellAverage = (pixels) => pixels
    .reduce((
      [sumR, sumG, sumB, sumA],
      [r,g,b,a]
     ) => [
      sumR + r,
      sumG + g,
      sumB + b,
      sumA + a
     ] , [0,0,0,0])
     .map(v => v / pixels.length);


   return data.map(row => row.map(getCellAverage))
})()


(()=>{
  const columnWidth = img.naturalWidth / columns;
  const rowWidth = img.naturalHeight / rows;
  ctx.clearRect(0,0,canvas.width, canvas.height);

  averagedData
    .forEach((row, rowIndex) => row
      .forEach(([r,g,b,a], columnIndex) => {
        ctx.fillStyle = `rgba(${r}, ${g}, ${b}, ${a})`;
        ctx.strokeStyle = 'red';
        ctx.fillRect(
          columnWidth * columnIndex,
          rowWidth * rowIndex,
          columnWidth, columnIndex
        );
        showBorder && ctx.strokeRect(
          columnWidth * columnIndex,
          rowWidth * rowIndex,
          columnWidth, columnIndex
        );    
     }))
})()

---

为什么矩形高度是数组中的索引<代码>ctx.fillRect（columnWidth*columnIndex，rowWidth*rowIndex，columnWidth，columnIndex）@ASDFGerte谢谢你解决了。