GfA
/
novnc


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133
							<html>
    <head><title>Canvas Performance Test</title></head>
    <body>
        Iterations: <input id='iterations' style='width:50' value="100">&nbsp;

        Width: <input id='width' style='width:50' value="640">&nbsp;
        Height: <input id='height' style='width:50' value="480">&nbsp;

        <input id='startButton' type='button' value='Do Performance Test'
            style='width:150px' onclick="begin();">&nbsp;

        <br><br>

        <b>Canvas</b> (should see three squares and two happy faces):<br>
        <canvas id="canvas" width="200" height="100"
                style="border-style: dotted; border-width: 1px;">
            Canvas not supported.
        </canvas>

        <br>
        Results:<br>
        <textarea id="messages" style="font-size: 9;" cols=80 rows=25></textarea>
    </body>

    <!--
    <script type='text/javascript' 
        src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>
    -->
    <script src="include/util.js"></script>
    <script src="include/canvas.js"></script>
    <script src="face.png.js"></script>
    <script>
        var msg_cnt = 0;
        var start_width = 300, start_height = 100;
        var iterations;

        function message(str) {
            console.log(str);
            cell = $('messages');
            cell.innerHTML += msg_cnt + ": " + str + "\n";
            cell.scrollTop = cell.scrollHeight;
        }

        function test_functions () {
            var img, x, y;
            Canvas.fillRect(0, 0, Canvas.c_wx, Canvas.c_wy, [240,240,240]);

            Canvas.blitStringImage("data:image/png;base64," + face64, 150, 40);

            var himg = new Image();
            himg.onload = function () {
                Canvas.ctx.drawImage(himg, 200, 10); };
            himg.src = "face.png";

            /* Test array image data */
            data = [];
            for (y=0; y< 50; y++) {
                for (x=0; x< 50; x++) {
                    data[(y*50 + x)*4 + 0] = 255 - parseInt((255 / 50) * y, 10);
                    data[(y*50 + x)*4 + 1] = parseInt((255 / 50) * y, 10);
                    data[(y*50 + x)*4 + 2] = parseInt((255 / 50) * x, 10);
                    data[(y*50 + x)*4 + 3] = 255;
                }
            }
            Canvas.blitImage(30, 10, 50, 50, data, 0);

            //Canvas.prefer_js = false;
            img = Canvas.getTile(5,5,16,16,[0,128,128]);
            Canvas.putTile(img);

            img = Canvas.getTile(90,15,16,16,[0,0,0]);
            Canvas.setSubTile(img, 0,0,16,16,[128,128,0]);
            Canvas.putTile(img);
        }

        function begin () {
            $('startButton').value = "Running";
            $('startButton').disabled = true;
            setTimeout(start_delayed, 250);
            iterations = $('iterations').value;
        }

        function start_delayed () {

            message("Running test: prefer Javascript");
            Canvas.prefer_js = true;
            var time1 = run_test();
            message("prefer Javascript: " + time1 + "ms total, " +
                    (time1 / iterations) + "ms per frame");

            message("Running test: prefer Canvas ops");
            Canvas.prefer_js = false;
            var time2 = run_test();
            message("prefer Canvas ops: " + time2 + "ms total, " +
                    (time2 / iterations) + "ms per frame");

            Canvas.resize(start_width, start_height, true);
            test_functions();
            $('startButton').disabled = false;
            $('startButton').value = "Start";
        }

        function run_test () {
            var width, height;
            width = $('width').value;
            height = $('height').value;
            Canvas.resize(width, height);
            var color, start_time = (new Date()).getTime(), w, h;
            for (var i=0; i < iterations; i++) {
                color = [128, 128, (255 / iterations) * i, 0];
                for (var x=0; x < width; x = x + 16) {
                    for (var y=0; y < height; y = y + 16) {
                        w = Math.min(16, width - x);
                        h = Math.min(16, height - y);
                        var tile = Canvas.getTile(x, y, w, h, color);
                        Canvas.setSubTile(tile, 0, 0, w, h, color);
                        Canvas.putTile(tile);
                    }
                }
            }
            var end_time = (new Date()).getTime();
            return (end_time - start_time);
        }

        window.onload = function() {
            $('iterations').value = 10;
            Canvas.init('canvas');
            Canvas.resize(start_width, start_height, true);
            message("Canvas initialized");
            test_functions();
        }
    </script>
</html>