trash-slots/background.js

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

	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.beginPath();
			this.spriteContext.rect(0, 0, this.width, this.height);
			this.spriteContext.fillStyle = "lightgray";
			this.spriteContext.fill();
		}
	}

	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));
			}
		}		
	}
};