JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html lang=de>
    <head>
        <meta charset=utf-8>
        <title>8BitDefault</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++;
                        }
                    }   
                }

                ctx.putImageData(canvasData, 0, 0);
            });
        </script>
    </body>
</html>