Skip to main content

HTML5 Canvas draw tileset

I have a tileset something like this:

0, 1, 2, 3, 4, 5,
6, 7, 8, 9, 10, 11,
12, 13, 14, 15, 16,
17, 18, 19, 20

My tileset draw code:

var image = new Image();
image.src = '32x32.png';
var tile = 5;
var tileSize = 32;
var x = 100;
var y = 100;
context.drawImage(image, Math.floor(tile * tileSize), 0, tileSize, tileSize, x, y, tileSize, tileSize);

And this code draws the '5' tile, but how would I draw the 10 tile, or the 15 tile without adding tileX and tileY? I'm need something like if tile is equal to 15, then draw 15 tile.

Thanks!

unuooo
  • 11
  • 1
  • 2