2018js13k/background.js

function Background(camera) {
	this.position = {x: 0, y: 0};
	this.width = 768;
	this.height = 768;
	this.spriteCanvas = null;
	this.spriteContext = null;
	this.canvasWidth = 768;
	this.canvasHeight = 768;

	this.init = function() {
		this.preRender();
	}

	this.update = function(canvas) {
		this.canvasWidth = canvas.width;
		this.canvasHeight = canvas.height;	

		var truePos = {x: 0, y: 0};
		truePos.x = camera.position.x + this.position.x;
		truePos.y = camera.position.y + this.position.y;

		if(truePos.x < -this.width) {
			this.position.x += this.width;
		}

		if(truePos.x > 0) {
			this.position.x -= this.width;
		}

		if(truePos.y < -this.height) {
			this.position.y += this.height;
		}

		if(truePos.y > 0) {
			this.position.y -= this.height;
		}
	}

	this.preRender = function() {
		if(this.spriteContext == null) {
			this.spriteCanvas = document.createElement("canvas");
			this.spriteCanvas.width = this.width + 1;
			this.spriteCanvas.height = this.height + 1;
			this.spriteContext = this.spriteCanvas.getContext("2d");
			this.spriteContext.translate(0.5, 0.5);

			this.spriteContext.strokeStyle = "gold";
			
			/*var columns = parseInt(Math.sqrt(this.width));
			var rows = parseInt(Math.sqrt(this.height));*/

			var columns = parseInt(this.width / 128);
			var rows = parseInt(this.height / 128);

			for(var i = 0; i < columns; i++) {
				this.spriteContext.beginPath();
				this.spriteContext.moveTo(i * (this.width / columns), 1);
				this.spriteContext.lineTo(i * (this.width / columns), this.height);
				this.spriteContext.stroke();
			}

			for(var i = 0; i < rows; i++) {
				this.spriteContext.beginPath();	
				this.spriteContext.moveTo(1, i * (this.height / rows));
				this.spriteContext.lineTo(this.width, i * (this.height / rows));
				this.spriteContext.stroke();
			}
		}
	}

	this.draw = function(context) {
		for(var x = 0; x < this.canvasWidth / this.width + 1; x++) {
			for(var y = 0; y < this.canvasHeight / this.height + 1; y++) {
				context.drawImage(this.spriteCanvas, this.position.x + (x * this.width), this.position.y + (y * this.height));
			}
		}
	}
};