JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="test" width="1024" height="400"></canvas>

JavaScript

var canvas = document.getElementById('test');
var ctx = canvas.getContext('2d');

var grd = ctx.createLinearGradient(0, 200, canvas.width, 200);

/*
var start = 0, end = 255;
var i, steps = 10
var val, ratio, gamma = 0.75;
for (i = 0; i <= steps; ++i) {
    ratio = i / steps;
    val = ratio * end + (1 - ratio) * start;
    val = val / 255;
    val = Math.round(255 * Math.pow(val, gamma));
    grd.addColorStop(ratio, 'rgb(' + val + ', ' + val + ', ' + val + ')');
    console.log('colorStop:', ratio,  'rgb(' + val + ', ' + val + ', ' + val + ')');
}
*/

grd.addColorStop(0, 'rgb(0, 0, 0)');
grd.addColorStop(0.5, 'rgb(112, 112, 112)');
grd.addColorStop(1, 'rgb(255, 255, 255)');


ctx.fillStyle = grd;
ctx.fillRect(0, 0, canvas.width, canvas.height);

canvas.addEventListener('click', function() {
    var width = canvas.width;
    var imageData = ctx.getImageData(0, 0, width, 1);
    var pVal;   
    for (var x = 0; x < width; ++x) {
        pVal = imageData.data[x * 4];
        console.log(pVal);
    }
});