Grid breaks and other issues as you move away from 0,0

[jmickle66666666]

Grid breaks and other issues as you move away from 0,0

[jmickle66666666]

You don't have to get very far from the origin for the grid lines to not align with anything any more.

The grid drawing code is found here:

jzbuilder/src/canvas.ts

Lines 133 to 165 in 391d405

	drawGrid():void {
	this.ctx.fillStyle = this.CANVAS_BG_COLOR;
	this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
	this.ctx.lineWidth = this.GRIDLINE_WIDTH;
	this.ctx.strokeStyle = this.GRID_COLOR;
	let vo:Vertex = this.viewOffset.clone();
	vo.x = Math.round(vo.x);
	vo.y = Math.round(vo.y);
	let i;
	for (i = 0; i < this.canvas.width; i++) {
	if ( (i + vo.x) % Math.round(this.gridSize/this.zoom) == 0 ) {
	if (i + vo.x == 0) this.ctx.strokeStyle = this.GRID_CENTER_COLOR;
	this.ctx.beginPath();
	this.ctx.moveTo(i, 0);
	this.ctx.lineTo(i, this.canvas.height);
	this.ctx.stroke();
	if (i + vo.x == 0) this.ctx.strokeStyle = this.GRID_COLOR;
	}
	}
	for (i = 0; i < this.canvas.height; i++) {
	if ( (i + vo.y) % Math.round(this.gridSize/this.zoom) == 0 ) {
	if (i + vo.y == 0) this.ctx.strokeStyle = this.GRID_CENTER_COLOR;
	this.ctx.beginPath();
	this.ctx.moveTo(0, i);
	this.ctx.lineTo(this.canvas.width, i);
	this.ctx.stroke();
	if (i + vo.y == 0) this.ctx.strokeStyle = this.GRID_COLOR;
	}
	}
	}

I don't think this approach makes any sense and can probably be very safely rewritten from scratch.

The code is encapsulated, so a completely new drawing function can be written without having to pay much mind outside of the function itself. The only considerations are strokeStyle, fillStyle and lineWidth which can be modified elsewhere so you must set them first to get a consistent output.