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:
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:
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
Post a Comment