HTML5 Isometric with big objects

I have an example in HTML5 Canvas (<canvas id="canvas" width="640" height="480"></canvas>). Here's the JavaScript code (JSFiddle link):

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

var table = new Image();
table.src = 'http://s1.postimage.org/188qzfays/table.png';

var image1 = new Image();
var image2 = new Image();
image1.src = 'http://s4.postimage.org/1fxt9xtyc/floor_standard.png';
image2.src = 'http://s2.postimage.org/1a4erdun8/floor_standard2.png';

var objImage = new Image();
objImage.src = 'http://s4.postimage.org/1fxzw37xg/tree.png';

var tileArray = [image1, image2];
var objArray = [objImage];

var tileW = 16;
var tileH = 16;

var map = [
    [1, 0, 0, 0, 0],
    [0, 1, 1, 0, 0],
    [0, 0, 1, 1, 0],
    [0, 0, 0, 1, 0],
    [0, 0, 0, 1, 0]
];
var objMap = [
    [0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0]
];


for(var i = 0; i < map.length; i++) {
    for(var j = 0; j < map[i].length; j++) {
        var drawTile = map[i][j];
        var objTile = objMap[i][j];
        var xpos = (i-j) * tileH + 100;
        var ypos = (i+j) * tileH / 开发者_开发百科2 + 100;
        context.drawImage(tileArray[drawTile], xpos, ypos);
        if(objMap) {
            context.drawImage(objArray[objTile], xpos, ypos - 32);
        }
    }
}

This example can render isometric tiles and isometric objects, but I can draw objects only in one tile (e.g. I can't draw objects in 4 tiles). How can I draw isometric objects in more than one tile? Something like this object (in my code, it's stored in a variable named table):

Hum this seems to work just fine for me.

I modified a little bit your code to draw a table instead of a tree, but this: http://jsfiddle.net/9ZH4h/2/ is working for me. I see the following in the output (under chrome and ff):

Is that the ouptut you wanted?

Any image larger than a single isotile will need to have its offset calculated - theres no real formula for this you have to fiddle till it fits... then store that in an array with some id to identify it.

Then when ever the table is drawn you grab the offsets from the array and add it to its final position before drawing it.