multiplayer-canvas/client/system.js

function System() {
	var container = null;
	var canvas = null;
	var contextType = '2d';
	var contextAttributes = {};
	var context = null;

	var system = null;
	var game = null;
	var backgroundColor = "#D3D3D3";
	var framerate = 60;

	var lastTime = 0;

	this.create = function(elementName, gameObject, defaultBackgroundColor) {
		system = this;
		game = gameObject;
		backgroundColor = defaultBackgroundColor || backgroundColor;
		
		container = document.getElementById(elementName);
		canvas = document.createElement("canvas");
		container.appendChild(canvas);

		window.addEventListener('resize', system.handleResize);
		canvas.addEventListener('mousemove', system.handleMouseMove);
		canvas.addEventListener('mousedown', system.handleMouseClick);
		canvas.addEventListener('contextmenu', system.handleContextMenu);
		canvas.addEventListener('touchstart', system.handleMouseClick);
		
		system.handleResize(null);
		game.init(system, canvas);

		window.requestAnimationFrame(system.handleRequestAnimationFrame);
	};

	this.getCanvasSize = function() {
		return {width: canvas.width + 0, height: canvas.height + 0};
	}

	this.preRender = function() {
		if(this.backgroundContext == null) {
			this.backgroundCanvas = document.createElement("canvas");
			this.backgroundCanvas.width = canvas.width;
			this.backgroundCanvas.height = canvas.height;
			this.backgroundContext = this.backgroundCanvas.getContext("2d");

			this.backgroundContext.fillStyle = backgroundColor;
			this.backgroundContext.fillRect(0, 0, this.backgroundCanvas.width, this.backgroundCanvas.height);
		}
	}

	this.handleResize = function(event) {
		canvas.width = container.offsetWidth;
		canvas.height = container.offsetHeight;
		context = canvas.getContext(contextType, contextAttributes);
		context.translate(0.5, 0.5);
		//system.backgroundContext = null;
		//system.preRender();
	};

	this.handleRequestAnimationFrame = function(event) {
		var currentTime = new Date().getTime();
		var delta = (currentTime - lastTime) / (1000 / framerate);
		if(delta > 100) {
			delta = 1;
		}
		game.updateDelta(canvas, delta);
		lastTime = currentTime;
		//system.preRender();
		//context.drawImage(system.backgroundCanvas, 0, 0, system.backgroundCanvas.width, system.backgroundCanvas.height);
		context.fillStyle = backgroundColor;
		context.fillRect(0, 0, canvas.width, canvas.height);
		//console.log("clearing background to: ", backgroundColor, canvas.width, canvas.height);
		game.draw(context);
		window.requestAnimationFrame(system.handleRequestAnimationFrame);
	};

	this.handleMouseMove = function(event) {
		game.mouseMove(canvas, event.offsetX, event.offsetY);
	};

	this.handleMouseClick = function(event) {
		game.mouseClick(canvas, event.button, event.offsetX, event.offsetY);
	};

	this.handleContextMenu = function(event) {
		game.contextMenu(canvas, event);
		event.preventDefault();
	};

	this.handleServerMessage = function(data) {
		game.receiveMessage(data);
	}
}