JSFiddle - React, Tailwind, and code Playground

HTML

<button onclick="test()">test</button>
<input type="text" id="seed" value="1" />
<canvas id="canvas" width="400" height="300"></canvas>

CSS

#canvas {
    border:1px solid #ccc;
    background-color:#000;
}

JavaScript

var canvas, canvasWidth, canvasHeight, ctx, canvasData;

function drawPixel (x, y, r, g, b, a) {
    var index = (x + y * canvasWidth) * 4;
    canvasData.data[index + 0] = r;
    canvasData.data[index + 1] = g;
    canvasData.data[index + 2] = b;
    canvasData.data[index + 3] = a;
    //http://stackoverflow.com/questions/7812514/drawing-a-dot-on-html5-canvas
}

function test() {
    canvas = document.getElementById("canvas");
    canvasWidth = canvas.width;
    canvasHeight = canvas.height;
    ctx = canvas.getContext("2d");
    ctx.clearRect(0,0,canvasWidth, canvasHeight);
    canvasData = ctx.getImageData(0, 0, canvasWidth, canvasHeight);
    test_random();
    ctx.putImageData(canvasData, 0, 0);
}

// http://en.wikipedia.org/wiki/Linear_congruential_generator

function test_random(x){
    var a = 1103515245;
    var c = 12345;
    var m = 0x80000000; // 2^31
    var o = 0x3fffffff; // pattern for outputted bits 30..0
    var x = document.getElementById('seed').value|0; // seed
    //x = 0;
    for (var i=0; i<1000; i++) {
        
        x = ((a*x + c) %m ); //next value
        //console.log(x);
        var cx = ((x & o)/o*canvasWidth)|0;
        
        x = ((a*x + c) %m );
        //console.log(x);
        var cy = ((x & o)/o*canvasHeight)|0;
        
        drawPixel(cx, cy, 255, 0, 0, 255);
        //console.log(cx, cy);
        //if (x==1) { console.log('period'); }
    }
}