JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <canvas width="6" height="10"></canvas>
    <canvas width="6" height="10"></canvas>
</body>

JavaScript

var heatmap = [
    [null, 0, 30, 60, 90, 120],
    [null, 0, 30, 60, 90, 120],
    [null, 0, 30, 60, 90, 120],
    [null, 0, 30, 60, 90, 120],
    [null, 0, 30, 60, 90, 120],
    [null, 0, 30, 60, 90, 120],
    [null, 0, 30, 60, 90, 120],
    [null, 0, 30, 60, 90, 120],
    [null, 0, 30, 60, 90, 120],
    [null, 0, 30, 60, 90, 120]
];


var dx = heatmap[0].length,
    dy = heatmap.length;


var color = function(d) {
    switch (d){
        case null: return { r: 255, g: 255, b: 255 };
        case 0: return { r: 255, g: 0, b: 0 };
        case 30: return { r: 255, g: 100, b: 50 };
        case 60: return { r: 255, g: 255, b: 0 };
        case 90: return { r: 100, g: 255, b: 50 };
        case 120: return { r: 0, g: 255, b: 0 };
    }
}

function drawImage(canvas, reversed) {
    var context = canvas.getContext("2d"),
        image = context.createImageData(dx, dy);
    
    for (var y = 0, p = -1; y < dy; ++y) {
        for (var x = 0; x < dx; ++x) {
            var index = reversed ? dx - x - 1 : x;
            
            var c = color(heatmap[y][index]);
            image.data[++p] = c.r;
            image.data[++p] = c.g;
            image.data[++p] = c.b;
            image.data[++p] = 255;
        }
    }
    
    context.putImageData(image, 0, 0);
}

drawImage(document.getElementsByTagName('canvas')[0]);
drawImage(document.getElementsByTagName('canvas')[1], true);