JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html lang=de>
    <head>
        <meta charset=utf-8>
        <title>8BitShuffle</title>
    </head>
    <body>
        <canvas id="canvas" width="4096" height="4096"></canvas>
        <script>
            document.addEventListener("DOMContentLoaded", function(event) { 
                var canvas = document.getElementById("canvas");
                var canvasWidth = canvas.width;
                var canvasHeight = canvas.height;
                var ctx = canvas.getContext("2d");
                var canvasData = ctx.getImageData(0, 0, canvasWidth, canvasHeight);

                var r = 0, g = 0, b = 0;
                for (let h = 0; h < canvasHeight; h++) {
                    for (let w = 0; w < canvasWidth; w++) {
                        var index = (w + h * canvasWidth) * 4;

                        canvasData.data[index + 0] = r;
                        canvasData.data[index + 1] = g;
                        canvasData.data[index + 2] = b;
                        canvasData.data[index + 3] = 255;

                        r++;
                        if (r > 255) {
                            r = 0;
                            b++;
                        }
                        if (b > 255) {
                            b = 0;
                            g++;
                        }
                    }   
                }

                // shuffle
                var maxIdx = canvasWidth * canvasHeight * 4;
                for (let i = 0; i < maxIdx * 10; i++) {
                    var idxA = Math.trunc(Math.random() * maxIdx);
                    var idxB = Math.trunc(Math.random() * maxIdx);

                    var tmp = canvasData.data[idxA];
                    canvasData.data[idxA] = canvasData.data[idxB];
                    canvasData.data[idxB] = tmp;
                }

                ctx.putImageData(canvasData, 0, 0);
            });

        </script>
    </body>
</html>