Want more features on Pastebin? Sign Up, it's FREE!
Guest

pixel plot test

By: a guest on Feb 4th, 2011  |  syntax: JavaScript  |  size: 1.76 KB  |  views: 648  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  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>
clone this paste RAW Paste Data