Problems with features on ImageStatic source

I am trying to draw a grid on top of an ImageStatic source in OpenLayers but I am getting extra grid squares on the right side of my image. Why do rows 2 & 3 have 5 columns instead of 4?

https://jsfiddle.net/mortac8/qh83vdp0/68/

var extent = [0, 0, 390, 260];
var projection = new ol.proj.Projection({
  code: 'test-image',
  units: 'pixels',
  extent: extent
});

var imageStaticSource = new ol.source.ImageStatic({
  url: "",
  projection: projection,
  imageLoadFunction: imageLoadFunction,
  imageExtent: extent
});

var source = new ol.source.Vector();

let topPx = 260;
let rightPx = 390;
let left = 0;
let size = 128;
let right = left + size;
let counter = 1;
while(topPx > 0) {
  while(left < rightPx) {
    console.log("adding box " + counter++);
    var ring = [[left, topPx], [right, topPx], [right, topPx-size], [left, topPx-size], [left, topPx]];
    var geometry = new ol.geom.Polygon([ring]);
    var feature = new ol.Feature({
      geometry: geometry
    });
    source.addFeature(feature);
    left = left + size;
    right = left + size;
  }
  console.log("NEW ROW");
  topPx = topPx - size;
  left = 0;
}

var vectorLayer = new ol.layer.Vector({
  source: source
});

var map = new ol.Map({
  layers: [
    new ol.layer.Image({
      source: imageStaticSource
    }),
    vectorLayer
  ],
  target: 'map',
  view: new ol.View({
    projection: projection,
    center: ol.extent.getCenter(extent),
    zoom: 0,
    maxZoom: 3,
    minZoom: 0
  })
});

while(topPx > 0) {
  while(left < rightPx) {
    var ring = [[left, topPx], [right, topPx], [right, topPx-size], [left, topPx-size], [left, topPx]];
    var geometry = new ol.geom.Polygon([ring]);
    var feature = new ol.Feature({
      geometry: geometry
    });
    source.addFeature(feature);
    left = left + size;
    right = left + size;
  }
  topPx = topPx - size;
  left = 0;
  right = left + size;  // added line
}