JS canvas white lines when scaling

Question

Using JavaScript I am displaying an array on an html 5 canvas. The program uses c.fillRect() for each value in the array. Everything looks normal until I scale it using c.scale(). After being scaled white lines are visible between the squares. I do know their white because that is the color of the background (When the background changes their color changes too).

Since the squares are 5 units apart I tried setting their width to 5.5 instead of 5; this only remove the white lines when zoom in far enough, but when zooming out the white lines were still there.

This is my code (unnecessary parts removed):

function loop()
{
    c.resetTransform();

    c.fillStyle = "white";
    c.fillRect(0, 0, c.canvas.width, c.canvas.height);

    c.scale(scale, scale);
    c.translate(xViewportOffset, yViewportOffset);

    ...

    for(var x = 0; x < array.length; x++)
    {
        for(var y = 0; y < array[x].length; y++)
        {
            ...

            c.fillStyle = 'rgb(' + r + ',' + g + ',' + b + ')';
            c.fillRect(0 + x * 5, 200 + y * 5, 5, 5);
        }
    }

    ...
}

No scaling:

Zoomed in:

Zoomed out:

(the pattern changes depending on the amount of zoom)

Thanks for any help and if any other information is needed please let me know.

Update:

I am using Google Chrome

Version 71.0.3578.98 (Official Build) (64-bit)

Answer 1

This is probably because you are using non-integer values to set the context's scale and/or translate.

Doing so, your rects are not on pixel boundaries anymore but on floating values.

Let's make a simple example:

Two pixels, one at coords (x,y) (11,10) the other at coords (12,10).
At default scale, both pixels should be neighbors.
Now, if we apply a scale of 1.3, the real pixel-coords of the first square will be at (14.3,13) and the ones of the second one at (15.6,13).
None of these coords can hold a single pixel, so browsers will apply antialiasing, which consist in smoothing your color with the background color to give the impression of smaller pixels. This is what makes your grids.

const ctx = small.getContext('2d');

ctx.scale(1.3, 1.3);

ctx.fillRect(2,10,10,10);

ctx.fillRect(12,10,10,10);


const mag = magnifier.getContext('2d');
mag.scale(10,10);
mag.imageSmoothingEnabled = false;
mag.drawImage(small, 0,-10);

/* it is actually transparent, not just more white */
body:hover{background:yellow}

<canvas id="small" width="50" height="50"></canvas><br>
<canvas id="magnifier" width="300" height="300"></canvas>

To avoid this, several solutions, all dependent on what you are doing exactly.

In your case, it seems you'd win a lot by working on an ImageData which would allow you to replace all these fillRect calls to simpler and faster pixel manipulation.
By using a small ImageData, the size of your matrix, you can replace each rect to a single pixel. Then you just need to put this matrix on your canvas and redraw the canvas over itself at the correct scale after disabling the imageSmootingEnabled flag, which allows us to disable antialiasing for drawImage and CanvasPatterns only.

// the original matrix will be 20x20 squares
const width = 20;
const height = 20;
const ctx = canvas.getContext('2d');
// create an ImageData the size of our matrix
const img = ctx.createImageData(width, height);
// wrap it inside an Uint32Array so that we can work on it faster
const pixels = new Uint32Array(img.data.buffer);
// we could have worked directly with the Uint8 version
// but our loop would have needed to iterate 4 pixels every time

// just to draw a radial-gradient
const rad = width / 2;
// iterate over every pixels
for(let x=0; x<width; x++) {
  for(let y=0; y<height; y++) {
    // make a radial-gradient
    const dist = Math.min(Math.hypot(rad - x, rad - y), rad);
    const color = 0xFF * ((rad - dist) / rad) + 0xFF000000;
    pixels[(y * width) + x] = color;
  }
}
// here we are still at 50x50 pixels
ctx.putImageData(img, 0, 0);
// in case we had transparency, this composite mode will ensure 
// that only what we draw after is kept on the canvas
ctx.globalCompositeOperation = "copy";
// remove anti-aliasing for drawImage
ctx.imageSmoothingEnabled = false;
// make it bigger
ctx.scale(30,30);
// draw the canvas over itself
ctx.drawImage(canvas, 0,0);

// In case we draw again, reset all to defaults
ctx.setTransform(1,0,0,1,0,0);
ctx.globalCompositeOperation = "source-over";

body:hover{background:yellow}

<canvas id="canvas" width="600" height="600"></canvas>