JSFiddle - React, Tailwind, and code Playground

HTML

original image:<br>
<img id="sprite" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAeklEQVR42p1TWwrAMAjLbfe5e+1CO8o+W2QEJDgfKwi2NlFjCwTrBpYauisCj8jOA4v2XK/RL7PzogdH+xbBL5II6AlpZStK0CpfqzC1R1l1Ap6gRaZ96uxLHbxgBjCfYPpe4FS4rxeYilmBlaT1F7KzUshJLJxCN74BkZIpHEnkQjsAAAAASUVORK5CYII=">
<br>

resized image painted on canvas:<br>
<canvas id="canvas1" width="100" height="100">
</canvas>

JavaScript

var ctx = document.getElementById('canvas1').getContext('2d');
var img = new Image();
var original = document.createElement("canvas");
var scaled = document.createElement("canvas");
    
img.onload = function() {
    var oc = original.getContext('2d');
    var sc = scaled.getContext('2d');
    oc.canvas.width = oc.canvas.height = 16;
    sc.canvas.width = sc.canvas.height = 32;
    oc.drawImage(this, 0, 0);    
    var od = oc.getImageData(0,0,16,16);
    var sd = sc.getImageData(0,0,32,32);
    for (var x=0; x<32; x++) {
        for (var y=0; y<32; y++) {
            for (var c=0; c<4; c++) {                
                sd.data[(y*32+x)*4+c] = od.data[((y>>1)*16+(x>>1))*4+c];
            }
        }
    }    
    sc.putImageData(sd, 0, 0);
    ctx.drawImage(scaled, 0, 0);    
}

img.src = document.getElementById('sprite').src;