Drawing an isometric tile

[Melomancheto]

I'm learning how to make grids and understand the principe of the tiles. I will leave this video to the future me (this guy explains it perfect).

There is one thing that I can't get right and I don't know where I'm getting it wrong.

 

const drawTile = function (x, y, color = 0xf5FFFF) {
	const tileWidth = 32;
	const tileHeight = 16;

	const rectangle = new Graphics()
	rectangle.lineStyle(1, 0xf5ffff, 1);
	rectangle.position.x = x * tileWidth / 2;
	rectangle.position.y = (y + x) * tileHeight / 2;
	rectangle.moveTo(0, 0)
	rectangle.lineTo(tileWidth / 2, tileHeight / 2);
	rectangle.lineTo(0, tileHeight);
	rectangle.lineTo(-tileWidth / 2, tileHeight / 2);
	rectangle.lineTo(tileWidth / 2, -tileHeight / 2);

	return rectangle;
}

I have this function for drwaing the rectangle. the problem is that I'm getting a half line on the X axis and I don't know why the path is not closing. 

[ivan.popelyshev]

Last line is the cause: rectangle.lineTo(tileWidth / 2, -tileHeight / 2);

[Melomancheto]

Yes, but why is it now closing in. It's not like a specify any width or height of the line. I tried everything, just don't see the reason. It's 100% something small

[Melomancheto]

The problem was that the last point was supose to be the origin e.g X=0, Y=0, since we start from them.

[ivan.popelyshev]

if you dont closePath(), line wont be closed. Same in canvas2d, same in Flash.

[Melomancheto]

5 hours ago, ivan.popelyshev said:

if you dont closePath(), line wont be closed. Same in canvas2d, same in Flash.

Good to know, thanks

 

const drawTile = function (x, y, color = 0xf5FFFF) {
	const tileWidth = 32;
	const tileHeight = 16;

	const rectangle = new Graphics()
	rectangle.lineStyle(1, 0xf5ffff, 1);
	rectangle.position.x = x * tileWidth / 2;
	rectangle.position.y = (y + x) * tileHeight / 2;
	rectangle.moveTo(0, 0)
	rectangle.lineTo(tileWidth / 2, tileHeight / 2);
	rectangle.lineTo(0, tileHeight);
	rectangle.lineTo(-tileWidth / 2, tileHeight / 2);
	rectangle.lineTo(0, 0);
	rectangle.closePath();

	return rectangle;
}

This is the end result if someone needs it