function Place() { this.position = {x: 512, y: 512}; this.width = 256; this.height = 256; this.spriteCanvas = null; this.spriteContext = null; this.lineWidth = 4; this.init = function() { this.preRender(); } this.update = function(delta) { } this.preRender = function() { if(this.spriteContext == null) { this.spriteCanvas = document.createElement("canvas"); this.spriteCanvas.width = this.width + (this.lineWidth * 2); this.spriteCanvas.height = this.height + (this.lineWidth * 2); this.spriteContext = this.spriteCanvas.getContext("2d"); this.spriteContext.translate(0.5, 0.5); this.spriteContext.strokeStyle = "limegreen"; this.spriteContext.lineWidth = this.lineWidth; this.spriteContext.beginPath(); this.spriteContext.rect(1, 1, this.width, this.height); this.spriteContext.stroke(); } } this.draw = function(context) { context.save(); context.translate(this.position.x, this.position.y); context.drawImage(this.spriteCanvas, -parseInt(this.lineWidth / 4), -parseInt(this.lineWidth / 4)); context.restore(); } };