<html>

    <head><title>Large Move Test (putImageData)</title></head>

    <body>

        <!-- Results display -->
        <h1 id="results">(results pending)</h1>

        <!-- Test canvas -->
        <canvas id="canvas" width="1024" height="768"
            style="border: 1px solid black"></canvas>

        <script type="text/javascript">

            // Get elements
            var results = document.getElementById("results");
            var canvas  = document.getElementById("canvas");

            // Get context
            var ctx = canvas.getContext("2d");

            // Draw arbitrary rectangle (which we will move)
            ctx.beginPath();
            ctx.rect(0, 100, 640,480);
            ctx.closePath();
            ctx.fillStyle = "#ABCDEF";
            ctx.fill();

            // Get start time
            var start = new Date().getTime();

            // Move rectangle using putImageData() copies, one pixel at a time.
            // Source and destination region overlap.
            // Trail is drawn in black.
            for (var i=0; i<256; i++) {

                // Copy rectangle from previous location to new location
                var data = ctx.getImageData(i, 100, 640, 480);
                ctx.putImageData(data, i+1, 100);

                // Draw black trail
                ctx.beginPath();
                ctx.rect(i, 100, 1, 480);
                ctx.closePath();
                ctx.fillStyle = "#000000";
                ctx.fill();

            }

            // Get end time and duration
            var end = new Date().getTime();
            var duration = end - start;

            // Display results
            results.textContent =
                duration + "ms (" + (duration/256) + "ms per frame)";

            /*
             * Results of own test runs:
             *
             * Hardware acceleration OFF: 1329ms (5.19140625ms per frame)
             * Hardware acceleration ON:  1329ms (5.19140625ms per frame)
             */

        </script>

    </body>
</html>