Guest User

pixel plot test

a guest
Feb 4th, 2011
3,904
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4.  
  5. function test() {
  6.     var canvas = document.getElementById('canvas');
  7.     var ctx = canvas.getContext('2d');
  8.     var cw = canvas.width;
  9.     var ch = canvas.height;
  10.     var id = ctx.getImageData(0, 0, 1, 1);
  11.  
  12.     ctx.clearRect(0, 0, cw, ch);
  13.     var t0 = new Date().getTime();
  14.     for (var i = 0; i < 100000; ++i) {
  15.         var x = Math.floor(Math.random() * cw);
  16.         var y = Math.floor(Math.random() * ch);
  17.         var r = Math.floor(Math.random() * 256);
  18.         var g = Math.floor(Math.random() * 256);
  19.         var b = Math.floor(Math.random() * 256);
  20.         // do nothing
  21.     }
  22.     var t1 = new Date().getTime();
  23.     console.log('random number generation: ' + (t1 - t0));
  24.  
  25.     ctx.clearRect(0, 0, cw, ch);
  26.     var t0 = new Date().getTime();
  27.     for (var i = 0; i < 100000; ++i) {
  28.         var x = Math.floor(Math.random() * cw);
  29.         var y = Math.floor(Math.random() * ch);
  30.         var r = Math.floor(Math.random() * 256);
  31.         var g = Math.floor(Math.random() * 256);
  32.         var b = Math.floor(Math.random() * 256);
  33.  
  34.         ctx.fillStyle = 'rgb(' + r + ',' + g + ',' + b + ')';
  35.         ctx.fillRect(x, y, 1, 1);
  36.     }
  37.     var t1 = new Date().getTime();
  38.     console.log('fillRect() method: ' + (t1 - t0));
  39.  
  40.     ctx.clearRect(0, 0, cw, ch);
  41.     id.data[3] = 255;
  42.     var t0 = new Date().getTime();
  43.     for (var i = 0; i < 100000; ++i) {
  44.         var x = Math.floor(Math.random() * cw);
  45.         var y = Math.floor(Math.random() * ch);
  46.         var r = Math.floor(Math.random() * 256);
  47.         var g = Math.floor(Math.random() * 256);
  48.         var b = Math.floor(Math.random() * 256);
  49.  
  50.         id.data[0] = r;
  51.         id.data[1] = g;
  52.         id.data[2] = b;
  53.         ctx.putImageData(id, x, y);
  54.     }
  55.     var t1 = new Date().getTime();
  56.     console.log('putImage() method: ' + (t1 - t0));
  57. }
  58.  
  59. </script>
  60. </head>
  61. <body onload="test()">
  62. <canvas id="canvas" width="640" height="480">
  63. </body>
  64. </html>
RAW Paste Data