The technique I use now is a loop with an innerloop that draws images on a canvas element, but it looks like a rotated square.

This is a nice example that covers the whole viewport. Plants vs Zombies

I have read something vague about clickthrough maps? What kind of techniques are there that are most efficient with mobile devices and javascript?


I other words, howto create a grid, in HTML5 that looks like the picture above, where you can place elements on. ( in the picture, it is the garden ) If it's not isometric, what is it and can it be created in html5. What I use now, creates a repititive background.

function draw() {

    c.clearRect(0, 0, canvas.width, canvas.height);

    for (var row = 0; row < 10; row++) {
        for (var col = 0; col < 10; col++) {

            var tilePositionX = (row - col) * tile.height;

            // Center the grid horizontally
            tilePositionX += (canvas.width / 2) - (tile.width / 2);

            var tilePositionY = (row + col) * (tile.height / 2);

            if (tileMap[row] != null && tileMap[row][col] != null) {
                tilePositionY -= tileMap[row][col].height - tile.height;
                tilePositionX -= (tileMap[row][col].width / 2) - (tile.width / 2);

                if (!(tileMap[row][col] instanceof BuildingPortion)) {
                    c.drawImage(tileMap[row][col].texture, Math.round(tilePositionX), Math.round(tilePositionY), tileMap[row][col].width, tileMap[row][col].height);
            } else {
                c.drawImage(tile, Math.round(tilePositionX), Math.round(tilePositionY), tile.width, tile.height);


  • \$\begingroup\$ Advice is certainly out there, but that's not an answerable question. What exactly are you trying to accomplish? What is not right about your current method? Also, your image is not isometric, so which part of it are you trying to emulate? \$\endgroup\$ Commented Nov 5, 2013 at 1:06
  • \$\begingroup\$ this explains the differences: gamedev.stackexchange.com/questions/22277/… \$\endgroup\$
    – CodeSmile
    Commented Nov 5, 2013 at 10:10
  • \$\begingroup\$ @Richard Implementing a 2D game-engine is not easy, with the background tiling probably being the easiest part... \$\endgroup\$ Commented Nov 6, 2013 at 20:47

1 Answer 1


I am not sure how this:

but it looks like a rotated square

connects to the picture you are showing us.

If it's not isometric, what is it

It is an axonometric projection. If you would rotate the X,Y,Z axis of your hypothetical or rendered 3D [tiled]-world equally it would be an isometric projection.

HTML5 offers many methods of implementation with different end-goals. You have settled for a resolution-dependent bitmap canvas render. A well performing choice.

Assuming with click-through you are referring to the z-index dependent mouse-event handling, then you have just pinpointed one of the draw backs of HTML5 canvas, from a developer's perspective: You will have to implement all the meta information for your objects and event-handling yourself.

At this point I would recommend using an existing JavaScript tiling / game engine. The goal of making a 2D Tiling engine sounds easy but as you point out efficient implementation with proper input event handling is more difficult than meets the eye.
For instance you would likely require translating inputs from the device's viewpoint to the game-world's view.

Here are recommendations of 2D JavaScript Game Engines:


You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .