How can a isometric floor be drawn on a canvas?

Question

So so far I have the following code. It draws a row of isometric tiles on a HTML5 canvas. However, I would like to create an entire floor and not just a single row, and despite all my attempts, I've failed.

function createEmptyMapRow(x, r /* The offset in tiles. Setting this to 1 draws one row down. */)
{
    var cx = 0, lx = 0, ly = 0;
    while(cx != x)
    {
        renderImage(lx - (r * 32), ly + (r * 14), 'tile.png');
        lx = lx + 32;
        ly = ly + 14;
        cx++;
    }
}

If you don't want to write code, just give me some logic.

I'd like to be able to create a function that places tiles left to right for every row.

Answer 1

There's a good resource about isometric tiles on this site.

Essentially you need to map points in isometric, to cartesian (which is the normal screen coordinates), and vice-versa (if you want to map user input to your isometric grid)

But building on what you have, somehow this seems to work

var c = cs.getContext("2d")
//size of grid is 2:1
var gridWidth=128
var gridHeight=64

//sprite could be taller
var spriteWidth=gridWidth
var spriteHeight=img.height/img.width*gridWidth

//always resize canvas with javascript. using CSS will make it stretch
cs.width = window.innerWidth    //ie8>= doesn't have innerWidth/Height
cs.height = window.innerHeight  //but they don't have canvas
var ox = cs.width/2-spriteWidth/2
var oy = spriteHeight

function renderImage(x, y) {
   c.drawImage(img, ox + (x - y) * spriteWidth/2, oy + (y + x) * gridHeight/2-(spriteHeight-gridHeight),spriteWidth,spriteHeight)
}

for(var x = 0; x < 10; x++) {
for(var y = 0; y < 10; y++) {
    renderImage(x,y)
}}

Example fiddle