JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas1" width="400" height="400"></canvas>

CSS

canvas {
    border: 1px solid gray;
}

JavaScript

var can = document.getElementById('canvas1');
var ctx = can.getContext('2d');

var img = new Image();
img.onload = function() {
var s = 5.5;
ctx.scale(s, s); // visible edges in FIREFOX
for (var x = 0.3; x < 200; x+=15) {
    for (var y = 0.3; y < 200; y+=15) {
        //ctx.drawImage(img, 0, 0, 15, 15, x, y, 15, 15);
        // If we merely use 16x16 tiles instead,
        // this will never happen:
        ctx.drawImage(img, 0, 0, 15+1/s, 15+1/s, x, y, 15+1/s, 15+1/s);
    }
}
}
img.src = "http://lua-users.org/images/nav-logo.png";