JSFiddle - React, Tailwind, and code Playground

by gingerbeardman

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>CanvasPixelArray and putImageData Performance Test</title>
        <style>
            html, body {
                margin: 0px;
                padding: 0px;
                border:none;
                height: 100%;
                width: 100%;
            }
            canvas {
                display: block;
                position: fixed;
                left: 0px;
                top: 0px;
                right: 0px;
                bottom: 0px;
                border: none;
                width: 100%;
                height: 100%;
                margin: 0px;
                padding: 0px;
                -ms-interpolation-mode: nearest-neighbor; //IE8+
                image-rendering: -moz-crisp-edges; //FF3.6+
                image-rendering: -webkit-optimize-contrast; //WebKit v?+
            }
        </style>
    </head>
    <body>
        <!-- http://www.grantgalitz.org/canvastestcase.html -->
        <canvas width="160" height="144"></canvas>
        <script>
            var canvas;
            var imageHandle;
            document.addEventListener("DOMContentLoaded", function () {
                canvas = document.getElementsByTagName("canvas")[0].getContext("2d");
                canvas.width = 160;
                canvas.height = 144;
                imageHandle = canvas.createImageData(160, 144);
                window.setInterval(canvasCrazy, 16);
            }, false)
            function canvasCrazy() {
                var index = 0;
                var length = imageHandle.data.length;
                while (index < length) {
                    imageHandle.data[index++] = Math.round(Math.random() * 0xFF) ^ imageHandle.data[index];
                }
                canvas.putImageData(imageHandle, 0, 0);
            }
        </script>
    </body>
</html>