HTML5 canvas Showing lines when drawing

Question

I have a Problem when drawing tile-map and setting the tile width to $(window).width() / 10 and the tile height to $(window).height() / 10

The canvas drawing additional lines between every tile

Here's the code: https://jsfiddle.net/t68sgrf3/

Answer 1

Here is an example with a canvas of 500x503 dimensions. Notice the height is not divisible by 10, so we get incorrect horizontal lines of the background showing through. Whereas the width is divisible by 10, and we see no such vertical lines.

let canvas = document.querySelector('canvas');
let ctx = canvas.getContext("2d");

let width = canvas.width / 10;
let height = canvas.height / 10;
console.log(width, height);

ctx.fillStyle = '#000';
ctx.fillRect(0, 0, canvas.width, canvas.height);

for (let x = 0; x < 10; x++)
  for (let y = 0; y < 10; y++) {
    ctx.fillStyle = (x + y) % 2 ? '#ffe' : '#eef';
    ctx.fillRect(x * width, y * height, width, height);
  }

canvas {
  outline: 1px solid;
}

<canvas width=500 height=503></canvas>