midas-canvas/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.handleResize = function(event) {
		canvas.width = container.offsetWidth;
		canvas.height = container.offsetHeight;
		context = canvas.getContext(contextType, contextAttributes);
		context.translate(0.5, 0.5);
	};

	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;
		context.fillStyle = backgroundColor;
		context.fillRect(0 ,0, 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();
	};
}