Skip to main content
fixed grammar and clarified
Source Link
bummzack
  • 22.7k
  • 5
  • 64
  • 87

HTML5 Canvas How to draw a tileset using HTML5 canvas?

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 looks like this:

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'5 tile, but how would I draw the 1010 tile, or the 1515 tile without adding tileXadding tileX and tileYtileY? I'mI probably need something like if tile is equal to 15, then draw 15 tile 15.

Thanks!

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!

How to draw a tileset using HTML5 canvas?

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 looks like this:

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 probably need something like if tile is equal to 15, then draw tile 15.

Something like I'mI 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 drawdraws the '5' tile, but something like how towould I draw the 10 tile?, or the 15 tile without adding tileX, and tileY.? I'm need something like if tile equal to 15 - draw 15 tile.

Sorry for my poor english languageif tile is equal to 15, then draw 15 tile.

Thanks!

Something like I'm have tileset:

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 draw '5' tile, but something like how to draw 10 tile? or 15 tile without adding tileX, tileY. I'm need something like if tile equal to 15 - draw 15 tile.

Sorry for my poor english language.

Thanks!

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!

Source Link
unuooo
  • 11
  • 1
  • 2

HTML5 Canvas draw tileset

Something like I'm have tileset:

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 draw '5' tile, but something like how to draw 10 tile? or 15 tile without adding tileX, tileY. I'm need something like if tile equal to 15 - draw 15 tile.

Sorry for my poor english language.

Thanks!