title: Optimizing setting of pixels in HTML5 canvas
body: <p>The HTML5 Canvas has no method for explicitly setting a single pixel.</p>
  
  <p>The solution I know so far is :</p>
  
  <ul>
  <li><p>use <code>getImageData</code> and <code>putImageData</code> but the efficiency is too low for animation
  due to the low performance of <code>putImageData</code></p></li>
  <li><p>use heavy object like <code>rect</code> or <code>putImageData</code> to draw single pixel  but the performance seems far worse when there is a lot of pixel to draw.</p></li>
  </ul>
  
  <p>I have seen that the <code>drawImage</code> function is really faster than the <code>putImageData</code>
  and indeed if we replace <code>putImageData</code> by <code>drawImage(new Image(w,h))</code>, it is really fast. 
  However i do not know any solution to put an image on argument of <code>drawImage</code> which can be set pixel by pixel fastly. </p>
  
  <p>Her is an example of slow code</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;canvas id="graph1" width="1900" height="1000"&gt;&lt;/canvas&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>    var canvas=document.getElementById("graph1"),
          ctx=canvas.getContext("2d"),
          imageData,
          data,
          w=canvas.width,
          loop=0,
          t=Date.now();
  
      window.requestAnimFrame = (function(callback) {
          return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
          function(callback) {
            window.setTimeout(callback, 1000 / 60);
          };
        })();
  
  
      function animate() {
          imageData=ctx.createImageData(w, canvas.height);
          data=imageData.data;
          for(i=0;i&lt;30000;i++) { // Loop fast enough
              x=Math.round(w*Math.random());
              y=Math.round(canvas.height*Math.random());   
              data[((w * y) + x) * 4]=255;
              data[((w * y) + x) * 4+1]=0;
              data[((w * y) + x) * 4+2]=0;
              data[((w * y) + x) * 4+3]=255;
          }
          ctx.putImageData(imageData, 0, 0); //Slow
          //ctx.drawImage(new Image(canvas.width, canvas.height),0,0);// Would be about 4x faster even if ImageData would be also blank
  
          requestAnimFrame(function() {
                  loop++;
                  if(loop&lt;100)
                      animate();
                  else
                      alert('finish:'+(Date.now()-t));
              });
      }
      animate();
  </code></pre>
  
  <p>If someone have a clue to improve performance. </p>