html5 - Canvas consumes a lot of memory -

i having difficulties canvas-implementation open in overlay. canvas element 760px wide , 2640px high (i know, don't ask).

i drawing lines @ every 27.5px high.

ctx.moveto(0, y); ctx.lineto(760, y); ctx.strokestyle = 'rgb(100,100,100)'; ctx.stroke(); 

appearantly browser seems 'choke' on when creating canvas. comes through (1-5secs) , memory raised 20mb.

closing overlay not seem free memory. when reopen overlay (which redraws canvas), memory again increased. , on, , on... chrome process goes 60mb memory 600+ in no time way.

resizing canvas 264px high , drawing lines @ every 2.75px goes way faster , consumes 4mb (which not seem cleared of course).

who has pointers on how avoid this.

---

here more code data array of objects containing entries property array.

[ { entries : [{...},{...},...] }, {...}, ... ]  var $canvas = container.find('canvas')     , canvas = $canvas.get(0)     , maxy = canvas.height     , maxx = canvas.width     , dx = maxx / (data.length + 1)     , ctx = canvas.getcontext('2d');   var x1, y1, y2, mh;  $.each(data, function (i, day) {     if (!day.entries) return;       $.each(day.entries, function (j, entry) {          x1 = (i + 1) * dx;          mh = entry.begindate.tohourminutes();          y1 = (((mh.h * 60) + mh.m) / 1440) * maxy;          mh = entry.enddate.tohourminutes();          y2 = (((mh.h * 60) + mh.m) / 1440) * maxy;           switch (entry.type) {              case calendartypes.openinghour:                  ctx.beginpath();                  ctx.rect(x1, y1, dx - 10, y2 - y1);                  ctx.fillstyle = "rgb(125, 125, 125)";                  ctx.fill();                  ctx.closepath();                  break;              case calendartypes.blocking:                  ctx.clearrect(x1, y1, dx, y2 - y1);                  break;          };       });   });         delete x1, y1, y2, mh;         //draw grid on canvas.         var x = 0            , y = +0.5            , stepyh = maxy / 24            , stepyq = stepyh / 4            , ishour = true;         ctx.linewidth = 1;         while (y < maxy) {            ishour = (((y - 0.5) % stepyh) == 0);            ctx.moveto(ishour ? x : x + dx, y);            ctx.lineto(maxx, y);            ctx.strokestyle = ishour ? 'rgb(175,175,175)' : 'rgb(100,100,100)';            ctx.stroke();            y += stepyq;        }; 

as per comments:

if not clear path, you're extending path, , since .stroke() strokes (entire) path, you'll end drawing more , more add more points using .moveto/.lineto.

it might make more sense use .beginpath() stroke new path , not old path well:

• path cleared memory - less leaks
• old path not drawn again - less performance loss