tests/canvas.html

   1 <!DOCTYPE html>
   2 <html>
   3     <head>
   4         <title>Canvas Performance Test</title>
   5         <!--
   6         <script type='text/javascript'
   7             src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>
   8         -->
   9         <script src="../include/util.js"></script>
  10         <script src="../include/webutil.js"></script>
  11         <script src="../include/base64.js"></script>
  12         <script src="../include/display.js"></script>
  13         <script src="face.png.js"></script>
  14     </head>
  15     <body>
  16         Iterations: <input id='iterations' style='width:50' value="100">&nbsp;
  17
  18         Width: <input id='width' style='width:50' value="640">&nbsp;
  19         Height: <input id='height' style='width:50' value="480">&nbsp;
  20
  21         <input id='startButton' type='button' value='Do Performance Test'
  22             style='width:150px' onclick="begin();">&nbsp;
  23
  24         <br><br>
  25
  26         <b>Canvas</b> (should see three squares and two happy faces):<br>
  27         <canvas id="canvas" width="200" height="100"
  28                 style="border-style: dotted; border-width: 1px;">
  29             Canvas not supported.
  30         </canvas>
  31
  32         <br>
  33         Results:<br>
  34         <textarea id="messages" style="font-size: 9;" cols=80 rows=25></textarea>
  35     </body>
  36
  37     <script>
  38         var msg_cnt = 0;
  39         var display, start_width = 300, start_height = 100;
  40         var iterations;
  41
  42         function message(str) {
  43             console.log(str);
  44             cell = $D('messages');
  45             cell.innerHTML += msg_cnt + ": " + str + "\n";
  46             cell.scrollTop = cell.scrollHeight;
  47             msg_cnt += 1;
  48         }
  49
  50         function test_functions () {
  51             var img, x, y, w, h, ctx = display.get_context();
  52             w = display.get_width();
  53             h = display.get_height();
  54             display.fillRect(0, 0, w, h, [240,240,240]);
  55
  56             display.blitStringImage("data:image/png;base64," + face64, 150, 10);
  57
  58             var himg = new Image();
  59             himg.onload = function () {
  60                 ctx.drawImage(himg, 200, 40); };
  61             himg.src = "face.png";
  62
  63             /* Test array image data */
  64             data = [];
  65             for (y=0; y< 50; y++) {
  66                 for (x=0; x< 50; x++) {
  67                     data[(y*50 + x)*4 + 0] = 255 - parseInt((255 / 50) * y, 10);
  68                     data[(y*50 + x)*4 + 1] = parseInt((255 / 50) * y, 10);
  69                     data[(y*50 + x)*4 + 2] = parseInt((255 / 50) * x, 10);
  70                     data[(y*50 + x)*4 + 3] = 255;
  71                 }
  72             }
  73             display.blitImage(30, 10, 50, 50, data, 0);
  74
  75             img = display.getTile(5,5,16,16,[0,128,128]);
  76             display.putTile(img);
  77
  78             img = display.getTile(90,15,16,16,[0,0,0]);
  79             display.setSubTile(img, 0,0,16,16,[128,128,0]);
  80             display.putTile(img);
  81         }
  82
  83         function begin () {
  84             $D('startButton').value = "Running";
  85             $D('startButton').disabled = true;
  86             setTimeout(start_delayed, 250);
  87             iterations = $D('iterations').value;
  88         }
  89
  90         function start_delayed () {
  91             var ret;
  92
  93             ret = display.set_prefer_js(true);
  94             if (ret) {
  95                 message("Running test: prefer Javascript ops");
  96                 var time1 = run_test();
  97                 message("prefer Javascript ops: " + time1 + "ms total, " +
  98                         (time1 / iterations) + "ms per frame");
  99             } else {
 100                 message("Could not run: prefer Javascript ops");
 101             }
 102
 103             display.set_prefer_js(false);
 104             message("Running test: prefer Canvas ops");
 105             var time2 = run_test();
 106             message("prefer Canvas ops: " + time2 + "ms total, " +
 107                     (time2 / iterations) + "ms per frame");
 108
 109             if (Util.get_logging() !== 'debug') {
 110                 display.resize(start_width, start_height, true);
 111                 test_functions();
 112             }
 113             $D('startButton').disabled = false;
 114             $D('startButton').value = "Do Performance Test";
 115         }
 116
 117         function run_test () {
 118             var width, height;
 119             width = $D('width').value;
 120             height = $D('height').value;
 121             display.resize(width, height);
 122             var color, start_time = (new Date()).getTime(), w, h;
 123             for (var i=0; i < iterations; i++) {
 124                 color = [128, 128, (255 / iterations) * i, 0];
 125                 for (var x=0; x < width; x = x + 16) {
 126                     for (var y=0; y < height; y = y + 16) {
 127                         w = Math.min(16, width - x);
 128                         h = Math.min(16, height - y);
 129                         var tile = display.getTile(x, y, w, h, color);
 130                         display.setSubTile(tile, 0, 0, w, h, color);
 131                         display.putTile(tile);
 132                     }
 133                 }
 134             }
 135             var end_time = (new Date()).getTime();
 136             return (end_time - start_time);
 137         }
 138
 139         window.onload = function() {
 140             message("in onload");
 141             $D('iterations').value = 10;
 142             display = new Display({'target' : $D('canvas')});
 143             display.resize(start_width, start_height, true);
 144             message("Canvas initialized");
 145             test_functions();
 146         }
 147     </script>
 148 </html>