JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas"></canvas>

CSS

#canvas { border: 1px solid #ccc; }

JavaScript

// generate noise, return float [-1..1]
function noise(i, j)
{
 	var n = i + j * 57;
	n = (n<<13) ^ n;
    return ( 1.0 - ( (n * (n * n * 15731 + 789221) + 1376312589) & 0x7fffffff) / 1073741824.0);
}

function drawPixel(data, width, x,y, r,g,b,a)
{
    var i = (x + y * width) * 4;
    
    data.data[i + 0] = r;
    data.data[i + 1] = g;
    data.data[i + 2] = b;
    data.data[i + 3] = a;
}

var canvas = document.getElementById('canvas');
canvas.width = 300;
canvas.height = 300;

var ctx = canvas.getContext('2d');
var data = ctx.createImageData(canvas.width, canvas.height);

for (var i = 0; i < canvas.width; i++)
{
    for (var j = 0; j < canvas.height; j++)
    {
        var value = (noise(i, j) + 1) * 128;
        drawPixel(data, canvas.width, i, j, value,value,value,255);
    }
}

ctx.putImageData(data, 0, 0);