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