javascript - Speeding up call to draw one pixel (thousands of times) in canvas -

i'm creating "bubble generator" background effect run on page. generator works fine, slows down, lot after short while.

demo: http://jsfiddle.net/dud2q/

i set demo run @ 1ms intervals it's easy see slow-down when re-launch fiddle (especially if make result window large).

the issue have thousands of calls code (one each bubble):

ctx.beginpath(); ctx.moveto(x, y); ctx.lineto(x+1, y+1); ctx.stroke(); 

does know of quicker way draw 1 pixel in canvas?

also, if wants take stab @ making bubbles more realistic, wouldn't complain :)

instead of drawing bubbles one-by-one, how drawing @ once? i.e. moving ctx.beginpath() , ctx.stroke() out of loop? looks lot faster on firefox. :)

$.extend(number.prototype, {     times    : function(cb){ for(var i=0; i<this; i++){ cb(i); }},     interval : function(cb){ return setinterval(cb, this); },     timeout  : function(cb){ return settimeout(cb, this); } });  $(function(){     var $canvas = $('<canvas></canvas>'),             ctx = $canvas[0].getcontext('2d'),           $cont = $('#fish-bubbles'),      generators = [],         bubbles = [],         w, h;      $cont.append($canvas);     $(window).bind('resize', onresize);     onresize();      5..times(createbubblegenerator);     1..interval(drawbubbles);      function drawbubbles(){         ctx.clearrect(0, 0, w, h);          var newbubbles = [],             x, y, i, j, m, imgdata, offset;          for(var i=0, l=generators.length; i<l; i++){             for(var j=0, m=0|math.random()*6; j<m; j++){                 newbubbles.push( 0|generators[i] + j );             }             generators[i] = math.max(0, math.min(w, generators[i] + math.random()*10 - 5));         }          bubbles.unshift(newbubbles);          for(i=0; i<bubbles.length; i++){             y = h - i*2;              if(y<0){                 bubbles.splice(i);                 break;             }              ctx.beginpath();              for(j=0, m=bubbles[i].length; j<m; j++){                 x = 0|(bubbles[i][j] += math.random() * 6 - 3);                  ctx.moveto(x, y);                 ctx.lineto(x+1, y+1);             }              ctx.stroke();         }     }      function createbubblegenerator(){         generators.push(0|math.random() * w);     }      function onresize(){         w = $cont.width();         h = $cont.height();          $canvas.attr('width', w).attr('height', h);         ctx.strokestyle = '#aaa';     } }); 

it slow down when there more bubbles however.