Example: https://jsfiddle.net/jm1y9c0L/1/

Code:

const context = document.getElementById("canvas").getContext("2d");
const scale = document.getElementById("scale");
const translate = document.getElementById("translate");
scale.value = 17.78598548284369;
translate.value = 10.02842190048295;
function draw() {
    context.fillStyle="#f00";
    context.fillRect(0,0,1,1);
    context.fillRect(1,0,1,1);
}
function update() {
    const s = Number(scale.value);
    const t = Number(translate.value);
    context.clearRect(0,0,100,100);
    context.save();
    context.translate(t,t);
    context.scale(s,s);
    draw();
    context.restore();
}
update();

Question: How do I draw tiles on canvas in a scaled context on canvas without blurry gaps?

A few things to note: If I don't change the background to black, things look ok: https://jsfiddle.net/jm1y9c0L/2/

I think if I draw all tiles on a buffer and draw the buffer on the canvas scaled, it would work. But that has many issues, one being it potentially uses a lot of memory if I'm scaling a very large buffer smaller.

Edit: To explain my goal better, I want to draw two rectangles next to each other with its boundaries being a fraction. So if I draw two rectangles, one in green and one in red with a black background. I want to see the boundary being half green, half red, but not black at all.