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

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

enter image description here

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:

enter image description here

How can i correct this ?

  • 1
    \$\begingroup\$ 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? \$\endgroup\$ – DMGregory Apr 29 at 11:22
  • \$\begingroup\$ 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. \$\endgroup\$ – vsys Apr 29 at 11:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.