# html5 canvas isometric tile map

i need a help i have an Isometric Staggered tile map in Tiled (mapeditor.org).

100x100 tiles, 94x54px, 9447x2727px. total.

How can i make this in html5 canvas ?

var context = document.querySelector("canvas").getContext("2d");

context.drawImage(img, 0, 0, 96, 54, x, y, 96, 54);

i'm try with this. but can't complete my map.

i need do in for.

for (var row = 0; row < 100; row++) {
for (var col = 0; col < 100; col++){
screenx = (row - col) * (96/2);
screeny = (row + col) * (54/2);
context.drawImage(img, 0, 0, 96, 54, screenx, screeny, 96, 54);
}
}


but the result is:

How can i correct this ?

• In what way is your map not "complete"? What specific error or obstacle are you facing? It looks like there are a number of existing tutorials and guides about drawing a Tiled map in HTML. How have you tried applying their methods, and where specifically did you get stuck? – DMGregory Apr 29 at 11:22
• Dear @DMGregory Thanks! i'm update my question. please re-check. i'm 7 days ago only read tutorials and examples. and can't find reply to my question. – vsys Apr 29 at 11:29