HTML5 Canvas Tileset drawing

Question

Something like I am have tileset - http://flashpunk.net/img/tut/swordguy.png

And my drawing code is - http://jsfiddle.net/WnjB6/

But how to do something like - drawTile(x, y, tile, width, height);

Now need to set tileX and tileY on tile, but how to do only one tile need to set and draw tiles from all tileset?

Something like now need tileX = 3, tileY = 1, but I am need - tile = 8 and draw same tile. 'http://flashpunk.net/img/tut/swordguyframes.png

How to do something like?

Thanks for help and sorry for my bad English language.

Answer 1

You know there are 6 tiles in a row, so you can do it like this:

var drawTile = function(x, y, tile, width, height) {
    context.drawImage(image, (tile % 6) * width, Math.floor(tile / 6) * height, width, height, x, y, width, height);
};

So passing in 6 will go to the first tile in the second row, etc.

Here's an example, it cycles through all the tiles:

http://jsfiddle.net/Jrjyq/