Hello all, brand new to the forums. I read the "Read First" post and hopefully I'm not starting off bad. I'm developing a JavaScript/HTML5 game for fun, but wasn't sure if my code implements good practices.

I'll try to condense what I have in order to make this post shorter. Just a little overview to help out hopefully:
  • Create Namespaces. I've only provided one in this post.
  • canvases[] and canvasCache (private vars):

    - One is an array for storing one or more canvases.

    -The other I use to cache the canvas element when I create a new one in order to avoid the garbage collector. I turn it back to null before the createCanvas function is done. Perhaps this is overkill since I won't create new divs or canvases during runtime.

    I've considered eliminating the array and creating a function that gets the canvas or div when needed.

  • timeStamp: For exactly that. I use performance.now since it's a lot more accurate, but I also provide a fallback for browsers that don't support it.
  • Game.run: is called when I want to start the loop. No need to get into details here. Unless it can be optimized
  • Game.createCanvas: I feel more comfortable creating elements via code instead of markup.
  • Game.getBody, getBrowserWidth, getBrowserHeight: I read it's more efficient creating a temporary reference of document.body before creating a new canvas or div. I assume calling getBrowserWidth/Height is better than creating a variable I won't use as much.


Code:
;(function()
{
	//NAMESPACES
	window.Game = {};

	var canvases = [];			// One, or more canvases stored in the array for (hopefully) quick access
	var canvasCache = null;		// I use this to temporary store a new canvas I'm creating, and before the function ends, I make this var null
	
	Game.timestamp = function () {
		return window.performance && window.performance.now ? window.performance.now() : new Date().getTime();
	}

	var now;
	var deltaTime = 0;
	var last = Game.timestamp();
	var step = 1/60;

//---------------------------------------------------------------------------
 	Game.run  = function (options) {
		now = Game.timestamp();
		deltaTime = deltaTime + Math.min(1, (now-last) /1000);
		while(deltaTime > step) {
			deltaTime = deltaTime - step;
		}
		console.log('This is looping!');
		requestAnimationFrame(Game.run);
	}
 //---------------------------------------------------------------------------

	Game.createCanvas = function (id,width,height,x,y,color) {
		canvasCache = document.createElement('canvas');
		canvasCache.style.position 	         = 'absolute';
		canvasCache.id 				 = id;
		canvasCache.style.background        = color;
		canvasCache.width 			 = width;
		canvasCache.height 			 = height;
		canvasCache.style.left 		         = x + 'px';
		canvasCache.style.top                   = y + 'px';
		Game.getBody().appendChild(canvasCache);
		canvases.push(canvasCache);
		canvasCache = null;
	}

//---------------------------------------------------------------------------

	Game.getBody 			= function()  { return document.body;      }
	Game.getBrowserWidth 	        = function()  { return window.innerWidth;  }
	Game.getBrowserHeight 	= function()  { return window.innerHeight; }

}());
Hopefully this was't too long. I'm also trying to find a nice way to store the context of the canvas within the Game namespace. Maybe making a private var and creating a public function to get it?

Thanks!