Remove space between rectangles html5 canvas

I use a For Loop to create 100 somewhat rectangles inside the HTMLCanvasElement.

But there are white spaces between the rectangles when ZOOMING in or out (with the scrolling functions on a mouse or touchpad). Now, adding a stroke to the rectangles will solve the area, but then the rectangles wont be perfectly aligned anymore.

Does anyone know how to fix this?

---

I've also taken a look at Uint8ClampedArray to create a custom ImageData Object. But I've come to the conclusion that Uint8ClampedArray isn't going to be a solution to this problem.

var canvas = $('#canvas'),
  ctx = canvas.get(0).getContext("2d"),
  win = $(window),
  ww = win.outerWidth(),
  wh = win.outerHeight(),
  scale = 1,
  pixelSize = 10 * scale,
  wx = 0,
  wy = 0,
  sx = 0,
  sy = 0;

var settings = {
  grid: true
}

var mouse = {
  x: 0,
  y: 0,
  rx: 0,
  ry: 0,
  button: 0
};

function zoom(f) {
  return Math.floor(f * scale);
}

function zoomX(x) {
  return Math.floor((x - wx) * scale + sx);
}

function zoomY(y) {
  return Math.floor((y - wy) * scale + sy);
}

function zoomX_INV(x) {
  return Math.floor((x - sx) * (1 / scale) + wx);
}

function zoomY_INV(y) {
  return Math.floor((y - sy) * (1 / scale) + wy);
}

function setBackground(color) {
  ctx.beginPath();
  ctx.rect(0, 0, ww, wh);
  ctx.fillStyle = color;
  ctx.fill();
}

function drawPixel(x1, y1, fill) {
  ctx.beginPath();
  ctx.rect(zoomX(x1 * pixelSize), zoomY(y1 * pixelSize), zoom(pixelSize), zoom(pixelSize));
  ctx.fillStyle = fill;
  ctx.fill();
  //    below wont fix it
  // ctx.strokeStyle = fill;
  // ctx.lineWidth = 2;
  // ctx.stroke();
}

function drawGrid() {
  //    var offsetX = Math.floor(wx / pixelSize) * pixelSize - wx,
  //            offsetY = Math.floor(wy / pixelSize) * pixelSize - wy;

  //    ctx.beginPath();

  //    ctx.moveTo(0, pixelSize);
  //    ctx.lineTo(0, wh);

  // //         for(var x = 0; x < ww; x += pixelSize * scale) {
  // //                 ctx.moveTo(zoomX(x), zoomY(0));
  // //                 ctx.lineTo(zoomX(x), zoomY(wh));
  // //         }

  // //         for(var y = 0; y < wh; y += pixelSize * scale) {
  // //                 ctx.moveTo(zoomX(0), zoomY(y));
  // //         ctx.lineTo(zoomX(ww), zoomY(y));
  // //         }

  //    ctx.strokeStyle = 'black';
  //    ctx.lineWidth = .5;
  //     ctx.stroke();
}

function draw() {
  ctx.clearRect(0, 0, ww, wh);

  setBackground('white');

  for (var x = 0; x < 10; x++) {
    for (var y = 0; y < 10; y++) {
      drawPixel(x, y, 'green');
      drawPixel(x + 12, y + 12, 'skyblue');
    }
  }
  drawPixel(11, 11, 'green');

  // if (settings.grid) {
  //    drawGrid();
  // }
}

function resize() {

  ww = win.outerWidth();
  wh = win.outerHeight();

  canvas.get(0).width = ww;
  canvas.get(0).height = wh;

  draw();
}

function init() {
  resize();
}

canvas.on('mousemove mousedown mouseup mouseout', function(e) {
  if (e.type === "mousedown") {
    mouse.button = 1;
  } else if (e.type === "mouseup" || event.type === "mouseout") {
    mouse.button = 0;
  }

  mouse.bounds = canvas.get(0).getBoundingClientRect();

  mouse.x = e.clientX - mouse.bounds.left;
  mouse.y = e.clientY - mouse.bounds.top;

  var xx = mouse.rx;
  var yy = mouse.ry;

  mouse.rx = zoomX_INV(mouse.x);
  mouse.ry = zoomY_INV(mouse.y);

  if (mouse.button === 1) {
    wx -= mouse.rx - xx;
    wy -= mouse.ry - yy;
    mouse.rx = zoomX_INV(mouse.x);
    mouse.ry = zoomY_INV(mouse.y);
  }

  draw();
});

canvas.on('wheel', function(e) {
  e.preventDefault();

  if (e.originalEvent.wheelDelta / 120 > 0) {
    scale = Math.min(2, scale * 1.1);
  } else {
    scale = Math.max(0.5, scale * (1 / 1.1));
  }

  wx = mouse.rx;
  wy = mouse.ry;
  sx = mouse.x;
  sy = mouse.y;

  mouse.rx = zoomX_INV(mouse.x);
  mouse.ry = zoomY_INV(mouse.y);

  draw();
});

win.on('load resize', function() {
  init();
});

*,
*:after,
*:before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  overflow: hidden;
}

#wrapper #controls {
  position: absolute;
}

#wrapper #canvas {
  image-rendering: -moz-crisp-edges;
  image-rendering: -webkit-crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;
  image-rendering: -o-pixelated;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>

<div id="wrapper">
  <div id="controls"></div>
  <canvas id="canvas"></canvas>
</div>

from Remove space between rectangles html5 canvas