title: Speeding up call to draw one pixel (thousands of times) in canvas
body: <p>I'm creating a "bubble generator" as a background effect that will run on a page.  The generator works fine, but it slows down, a <strong><em>lot</em></strong> after a short while.</p>
  
  <p>demo: <a href="http://jsfiddle.net/Dud2q/" rel="nofollow">http://jsfiddle.net/Dud2q/</a></p>
  
  <p>I set the demo to run at 1ms intervals so it's easy to see the slow-down when you re-launch the fiddle (especially if you make the result window large).</p>
  
  <p>The issue is that I have thousands of calls to this code (one for each bubble):</p>
  
  <pre><code>ctx.beginPath();
  ctx.moveTo(x, y);
  ctx.lineTo(x+1, y+1);
  ctx.stroke();
  </code></pre>
  
  <p>Does anyone know of a quicker way to draw one pixel in canvas?</p>
  
  <p>Also, if anyone wants to take a stab at making the bubbles more realistic, I wouldn't complain :)</p>