# Difficulty aligning isometric tiles

I'm trying to render isometric terrain in javascript. Currently, my tiles are being drawn with small gaps between them:

I want the tiles to line up with no pixel gaps in between:

My rendering function is like this:

var screenX = (x * 60 / 2) + (y * 60 / 2);
var screenY = (y * 30 / 2) - (x * 30 / 2);
console.log(screenX, screenY);
context.drawImage(img, screenX, screenY, 60, 30);


Btw, my image is 30x15.

Can you help me with this problem?

EDIT:

var screenX = (x * 56 / 2) + (y * 56 / 2);
var screenY = (y * 28 / 2) - (x * 28 / 2);
console.log(screenX, screenY);
context.drawImage(img, screenX, screenY, 60, 30);


It works, but I want to find a general solution

• What is the problem you're trying to fix? What is it about the image that you'd like to be different? – DMGregory Jun 30 '16 at 10:58
• I want to have like this: link – Josef Kuchař Jun 30 '16 at 11:19
• What if you subtract the border width from the image in your expression, i.e. something like 58 instead of 60 - have you tried it? – wondra Jun 30 '16 at 11:55
• Yea, it is in edit (i think, it is a half pixel problem) – Josef Kuchař Jun 30 '16 at 12:07

## 1 Answer

I have it :)

var blockHeight = 15;
var blockWidth = 30;
var zoom = 2;
for (var x = 0; x < 10; x++) {
for (var y = 0; y < 10; y++) {
var screenX = Math.floor((x * (blockWidth * zoom - zoom * 2) / 2) + (y * (blockWidth * zoom - zoom * 2) / 2));
var screenY = Math.floor((y * (blockHeight * zoom - zoom * 1) / 2) - (x * (blockHeight * zoom - zoom * 1) / 2));
context.drawImage(img, screenX, screenY, blockWidth * zoom, blockHeight * zoom);
}
}