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.fillRect(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 m = 0x7fffffff; // 2^31 - 1
    var x = document.getElementById('seed').value | 0; // seed
    var y = document.getElementById('seed').value | 0; // seed
    for (var i = 0; i < 10000; i++) {

        //(multiplier * current * modul + addend) % modul) / modul
        x = ((a * x * m + c) % m) / m; //next value
        y = ((a * x * m + c) % m) / m; //next value

        drawPixel((x * canvasWidth) | 0, (y * canvasHeight) | 0, 255, 0, 0, 255);
        //console.log(cx, cy, cx%canvasWidth, cy%canvasHeight);
        //if (x==1) { console.log('period'); }
    }
}