isometric background that covers the viewport

Question

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.

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

Edit

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);
            }
        }
    }
}
}

thanks

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:

• Impact JS
• Lime JS
• Crafty