Advertisement
Guest User

Canvas getImageData() Performance

a guest
Oct 21st, 2011
708
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 2.85 KB | None | 0 0
  1. <!DOCTYPE HTML>
  2. <html lang="en-US">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6. </head>
  7. <body>
  8.   <a href="javascript:go()">Begin Test</a><br />
  9.   <canvas id="test_canvas" width="800" height="800"></canvas>
  10.   <pre id="out"></pre>
  11.   <script type="text/javascript">
  12.     var out = document.getElementById('out');
  13.     var cvs = document.getElementById('test_canvas');
  14.     var ctx = cvs.getContext('2d');
  15.     ctx.fillStyle = 'red';
  16.     ctx.fillRect(10,10,790,790);
  17.    
  18.     // x, y, width, height, iterations
  19.     var tests = [
  20.       [10,10,1,1,100],
  21.       [10,10,1,1,500],
  22.      
  23.       [10,10,50,50,100],
  24.       [10,10,50,50,500],
  25.      
  26.       [10,10,780,780,10],
  27.       [10,10,780,780,50],
  28.     ];
  29.    
  30.     function bench(x,y,w,h,count) {
  31.       var t = (new Date());
  32.       for (var i=0; i < count; i++) ctx.getImageData(x,y,w,h);
  33.      return (new Date()) - t;
  34.    }
  35.    
  36.    function go() {
  37.      var len = tests.length, output = [];
  38.      for (var i=0; i < len; i++) {
  39.        var time = bench.apply({},tests[i]);
  40.        var mean = (time/tests[i][4]).toFixed(2);
  41.        output.push(tests[i].toString() + ' total: ' + time + 'ms, mean: ' + mean + 'ms');
  42.      }
  43.      var str = navigator.userAgent + "\n" + output.join("\n");
  44.      out.innerHTML = str;
  45.      console.log(str);
  46.    }
  47.    
  48.    /*
  49.    Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/535.1 (KHTML, like Gecko) Chrome/14.0.835.202 Safari/535.1
  50.    10,10,1,1,100 total: 1ms, mean: 0.01ms
  51.    10,10,1,1,500 total: 5ms, mean: 0.01ms
  52.    10,10,50,50,100 total: 5ms, mean: 0.05ms
  53.    10,10,50,50,500 total: 24ms, mean: 0.05ms
  54.    10,10,780,780,10 total: 87ms, mean: 8.70ms
  55.    10,10,780,780,50 total: 487ms, mean: 9.74ms
  56.  
  57.    Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/5.0; SLCC2; ... )
  58.    10,10,1,1,100 total: 14ms, mean: 0.14ms
  59.    10,10,1,1,500 total: 71ms, mean: 0.14ms
  60.    10,10,50,50,100 total: 24ms, mean: 0.24ms
  61.    10,10,50,50,500 total: 116ms, mean: 0.23ms
  62.    10,10,780,780,10 total: 213ms, mean: 21.30ms
  63.    10,10,780,780,50 total: 979ms, mean: 19.58ms
  64.  
  65.    Mozilla/5.0 (Windows NT 6.1; WOW64; rv:7.0.1) Gecko/20100101 Firefox/7.0.1
  66.    10,10,1,1,100 total: 1236ms, mean: 12.36ms
  67.    10,10,1,1,500 total: 6087ms, mean: 12.17ms
  68.    10,10,50,50,100 total: 1219ms, mean: 12.19ms
  69.    10,10,50,50,500 total: 6098ms, mean: 12.20ms
  70.    10,10,780,780,10 total: 154ms, mean: 15.40ms
  71.    10,10,780,780,50 total: 803ms, mean: 16.06ms
  72.  
  73.    http://chart.apis.google.com/chart?chxl=1:|1x1*100|1x1*500|50x50*100|50x50*100|780x780*10|780*780*50
  74.    &chxr=0,0,25&chxt=y,x&chbh=a&chs=440x220&cht=bvg&chco=4D89F9,C6D9FD,FF9900&chds=0,25,0,25,0,25
  75.    &chd=t:0.1,0.1,0.05,0.05,8.7,9.74|0.14,0.14,0.24,0.23,21.3,19.58|12.36,12.17,12.19,12.2,15.4,16.06
  76.    &chdl=C14|IE9|FF7&chdlp=t&chg=0,10&chtt=Canvas+getImageData()+Performance
  77.    */
  78.  </script>
  79. </body>
  80. </html>
  81.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement