JSFiddle - React, Tailwind, and code Playground

by Drath

HTML

<canvas id="myCanvas" width="1" height="16"> </canvas>

JavaScript

map = new Image();  
map.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHotAACAlQAA/eoAAIDmAAB1MAAA6mAAADqXAAAfPgVOAosAAAATSURBVHjaYkhc9+8/AAAA//8DAAaOAw2o4FcVAAAAAElFTkSuQmCC";  
map.onload = function() {

    canvas = document.getElementById("myCanvas");  
    ctx = canvas.getContext("2d");
    ctx.drawImage(map, 0, 0); 
    var imageData = ctx.getImageData(0, 0, 1, 1);  
    var pixels = imageData.data;

    tile = [];
    for (var x = 0; x < 1; x++) {
        tile[x] = tile[x] || {};
        for (var y = 0; y < 1; y++) {
            var red = pixels[((1 * y) + x) * 4];
            var green = pixels[((1 * y) + x) * 4 + 1];
            var blue = pixels[((1 * y) + x) * 4 + 2];
            document.write(red + '' + green + '' + blue + "<br />");
        }
    }
};