javascript - Is this a bug in html 5 or am i mad? -


am mad or following bug in html 5?

im coding "game map". simple, here drawing code:

g2d.clearrect(0, 0, width, height);             for(var = minx; < maxx; i++){                 for(var j = miny; j < maxy; j++){                     var drawx = * tilewidth + posx;                     var drawy = j * tileheight + posy;                     g2d.drawimage(images["image0"], drawx, drawy);                     g2d.filltext("x: " + i, drawx + 3, drawy + 10);                     g2d.filltext("y: " + j, drawx + 3, drawy + 20);                     g2d.rect(drawx, drawy, tilewidth, tileheight);                     g2d.stroke();                 }             }             for(var = 0; < bases.length; i++){                 var position = bases[i]["position"].split(":");                 var x = parseint(position[0]);                 var y = parseint(position[1]);                 g2d.drawimage(images["image1"], x * tilewidth + posx, y * tileheight + posy);              } 

its nothing special, grid , bases on positions. here demo, can drag around mouse:

link

now: wanted add grid, boxes, easy debugging. added lines of code in for(for( loop:

g2d.rect(drawx, drawy, tilewidth, tileheight);                     g2d.stroke(); 

juts after filltext() stuff. result shame:

link

its lagging around , seems stuff isnt clearing. whats there? idea how fix this??

thank you!

turn this:

g2d.rect(drawx, drawy, tilewidth, tileheight); g2d.stroke(); 

into:

g2d.strokerect(drawx, drawy, tilewidth, tileheight); 

and won't have problems path (at cost of tad performance). alternatively use beginpath() before start loop.

the reason rect adds path , accumulates. everytime stroke() called in path redrawn. beginpath() clear path while strokerect() direct rasterized method doesn't add path.

example:

g2d.beginpath(); for(var = minx; < maxx; i++){     for(var j = miny; j < maxy; j++){         var drawx = * tilewidth + posx;         var drawy = j * tileheight + posy;         g2d.drawimage(images["image0"], drawx, drawy);         g2d.filltext("x: " + i, drawx + 3, drawy + 10);         g2d.filltext("y: " + j, drawx + 3, drawy + 20);         g2d.rect(drawx, drawy, tilewidth, tileheight);     } } g2d.stroke(); 

Comments

Popular posts from this blog

windows - Single EXE to Install Python Standalone Executable for Easy Distribution -

c# - Access objects in UserControl from MainWindow in WPF -

javascript - How to name a jQuery function to make a browser's back button work? -