Having trouble with my flood fill program

I created this flood fill program for my drawing app. Currently, I am having trouble with the left side of the fill program. Once it starts to fill in the area, the right side will fill properly, but the left side will skip a row of pixels every time. I'm not sure why it does so. I have used the step-by-step in google chrome, and it seems that every time the left side coordinates are popped and it checks the color value of the pixel, it will return that the pixel is not the same color as the first pixel to be colored. This is the part that I am unsure of as to why my program is doing so.

Here is my original call to the function:

myCanvasCover.addEventListener('mousedown', e => {
  startX = e.offsetX;
  startY = e.offsetY;
  if(selectedToolElem == "fill") {
    isFilling = true;
  }
});
myCanvasCover.addEventListener('mouseup', e => {
  if(isFilling == true) {
    if(prevFlipElem.id == "frontBtn") {
      fill(frontCanvasContext, startX, startY);
    }else {
      fill(backCanvasContext, startX, startY);
    }
  }
});

Here is my code for the fill function:

//===== Fill Bucket Function =====\\
//----- Fill Call Function -----\\
var fill = function(canvas, startPosX, startPosY) {
  var startColor = canvas.getImageData(startPosX, startPosY, 1, 1).data;
  var startR = startColor[0],
    startG = startColor[1],
    startB = startColor[2];
  var currentColor = hexToRgb(selectedColor);
  if(currentColor.r == startR && currentColor.g == startG && currentColor.b == startB) {
    return;
  }
  var x = startPosX, y = startPosY;
  var pixelPos = [x, y];
  while(pixelPos.length) {
    y = pixelPos.pop();
    x = pixelPos.pop();
    var top = false;
    while(top == false) {
      y--;
      if(y < 0 || matchColor(canvas, x, y, startR, startG, startB) == false) {
        top = true;
        pixelPos.push(x, y+1);
      }
    }
    y = pixelPos.pop();
    x = pixelPos.pop();
    var bottom = false,
      right = true,
      left = true;
    if(x-1 < 0) {
      left = false;
    }
    if(x+1 > canvasWidth) {
      right = false;
    }
    while(bottom == false) {
      if(left && matchColor(canvas, x-1, y, startR, startG, startB)) {
        left = false;
        pixelPos.push(x-1, y);
      }else if(left == false && matchColor(canvas, x-1, y, startR, startG, startB) == false) {
        left = true;
      }
      if(right && matchColor(canvas, x+1, y, startR, startG, startB)) {
        right = false;
        pixelPos.push(x+1, y);
      }else if(right == false && matchColor(canvas, x+1, y, startR, startG, startB) == false) {
        right = true;
      }
      drawFill(canvas, x, y);
      y++;
      if(y >= canvasHeight || matchColor(canvas, x, y, startR, startG, startB) == false) {
        drawFill(canvas, x, y);
        bottom = true;
      }
    }
  }
}
//----- Check Color Match Function -----\\
function matchColor(canvas, x, y, startR, startG, startB) {
  var tempPos = canvas.getImageData(x, y, 1, 1).data;
  var tempR = tempPos[0],
    tempG = tempPos[1],
    tempB = tempPos[2];
  if(tempR == startR && tempG == startG && tempB == startB) {
    return true;
  }else {
    return false;
  }
}
//----- Hexadecimal to RGB Function -----\\
function hexToRgb(hex) {
  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result ? {
    r: parseInt(result[1], 16),
    g: parseInt(result[2], 16),
    b: parseInt(result[3], 16)
  } : null;
}
//================================\\

It is almost as if the matchColor function reads the pixel value of the pixel to the right of the first left-sided popped value. I cannot for the life of me figure it out and have been racking my brain at it for the past couple days. If anyone could help it would be a great appreciation!