JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas1" width="500" height="70"></canvas>

CSS

div {
    border-top: 1px solid black;
}

JavaScript

var offset = 5;
var size = 30;
var test = 0;
var canvas = document.getElementById('canvas1');
canvas.height = size+2*offset;
var ctx = canvas.getContext('2d');

function testIt(r, g, b, a) {
    ctx.fillStyle = 'rgba('+r+','+g+','+b+','+a+')';
    ctx.fillRect(
        offset+(size+offset)*test,offset,
        size,size
    );
    
    var data = ctx.getImageData(
        parseInt(offset+(size+offset)*test+size/2),
        parseInt((offset+size)/2),
        1,1
    ).data;
    
    var div = document.createElement('DIV');
    div.innerHTML = 'rgba('+r+', '+g+', '+b+', '+a+')<br/>' + '['+data[0]+', '+data[1]+', '+data[2]+', '+data[3]+']';
    document.body.appendChild(div);
    
    ++test;
}

testIt(100,200,150,136/255);
testIt(0,0,181,136/255);
testIt(0,200,150,136/255);
testIt(0,200,150,180/255);