JSFiddle - React, Tailwind, and code Playground

HTML

<body>
        <div id="source"></div>
		<canvas id="source-canvas"></canvas>
        <div id="off"></div>
		<canvas id="off-canvas"></canvas>
        <div id="low"></div>
		<canvas id="low-canvas"></canvas>
        <div id="medium"></div>
        <canvas id="medium-canvas"></canvas>
        <div id="high"></div>
        <canvas id="high-canvas"></canvas>
	</body>

JavaScript

drawPictureById("source");
copyPictureById("off");
copyPictureById("low");
copyPictureById("medium");
copyPictureById("high");

function copyPictureById(id, source) {
    var canvas = document.getElementById(id + "-canvas");
    var source = document.getElementById("source-canvas")
    document.getElementById(id).innerHTML = id;
    canvas.width = 150;
    canvas.heigh = 150;
    context = canvas.getContext("2d");
    if (id == "off") {
        context.imageSmoothingEnabled = false;
    } else {
        context.imageSmoothingEnabled = true;
 	   context.imageSmoothingQuality = id;
    }
    
	context.drawImage(source, 0, 0, canvas.width, canvas.height);
}
function drawPictureById(id) {
    var source = document.getElementById(id + "-canvas");
	source.width = 4;
	source.height = 4;
	var sourceContext = source.getContext("2d");
    
    	document.getElementById(id).innerHTML = "source";
        var sourceImage = sourceContext.createImageData(source.width, source.height);

		function drawBlackDot(x, y, col) {
 		  var offset = y * 4 * source.width + x * 4;
  	 	  sourceImage.data[offset + 0] = col[0]; // R
   		  sourceImage.data[offset + 1] = col[1] ; // G
   		  sourceImage.data[offset + 2] = col[2] ; // B
   	  	  sourceImage.data[offset + 3] = 225; // Alpha
		}
    
    var cmap = [['r', 'y', 'b', 'g'], ['y', 'b' , 'db', 'r'], ['r', 'g', 'r', 'b'], ['db', 'b', 'y', 'db']];
    var vmap = {
    	'r' : [255, 64, 64],
        'y' : [248, 221, 92],
        'b' : [135, 196, 250],
        'db' : [100, 149, 237],
        'g' : [167, 252, 0]
    }
   for (var x = 0 ; x < source.width; x++) {
		    for (var y = 0; y < source.height; y++) {
			   drawBlackDot(x, y, vmap[cmap[x][y]]);
    	    }
 		  }

  		  sourceContext.putImageData(sourceImage, 0, 0);  
	return source;
}