trash-slots/item.js

function Item(game) {
	this.id = 0;
	this.position = {x: 0, y: 0};
	this.width = 32;
	this.height = 32;
	this.color = "green";
	this.name = "Food";
	this.spriteCanvas = null;
	this.spriteContext = null;
	this.sprite = "food1";

	this.init = function(itemData) {
		for(var key in itemData){
			if(!this.hasOwnProperty(key)) { continue; }
			this[key] = itemData[key];
		}
	}

	this.update = function(delta) {
		
	}

	this.preRender = function(context, angle) {
		context.fillStyle = this.color;
		context.strokeStyle = this.color;
		context.lineWidth = 4;

		context.save();

		context.translate(0.5, 0.5);
		
		context.drawImage(system.assets.getSprite(this.sprite), 0, 0, 16, 16, 0, 0, 32, 32);

		/*context.beginPath();
		context.moveTo(0, 0);
		context.arc(0, 0, this.width / 4, 0, 2 * Math.PI);
		context.fill();
		context.stroke();*/

		context.restore();
	}

	this.draw = function(context) {

		if(this.spriteContext == null) {
			this.spriteCanvas = document.createElement("canvas");
			this.spriteCanvas.width = this.width;
			this.spriteCanvas.height = this.height;
			this.spriteContext = this.spriteCanvas.getContext("2d");

			this.preRender(this.spriteContext);
		}

		context.save();
		context.translate(this.position.x - (this.width / 2), this.position.y - (this.height / 2));
		
		context.drawImage(this.spriteCanvas, 0, 0);

		//bounds
		/*context.strokeStyle = "#FF7733";
		context.beginPath();
		context.moveTo(0, 0);
		context.lineTo(this.width, 0);
		context.lineTo(this.width, this.height);
		context.lineTo(0, this.height);
		context.lineTo(0, 0);
		context.stroke();*/

		context.restore();

		if(game.displayItemNames) {
			context.save();
			context.translate(this.position.x, this.position.y);

			context.font = "16px sans-serif";
			context.textAlign = "center";
			context.textBaseline = "middle";
			context.fillStyle = "#DDDDDD";
			context.strokeStyle = "#182208";
			context.lineWidth = 2;
			var textMetrics = context.measureText(this.name);
			var textWidth = textMetrics.width;
			context.strokeText(this.name, 0, -(this.height));
			context.fillText(this.name, 0, -(this.height));

			context.restore();
		}
	}

};