HTML5 Javascript Game Engine

Hello Everybody... I have been working on something that everyone could need.
It's a Javascript Library that I called FGGE (FabioGiopla Game Engine).

Why am I posting it here?
Well... I am new for this forum, but the error I found in my Lib has been solved here, so you can consider it as a reward for your help.

What is it actually?
It's an HTML5 Javascript Game Engine, it's so simple that in 137 lines of code I written a simple old school ping-pong game fully commented!

My Library's Code (To place in "FGGE.JS")
/* FGGE - FabioGiopla Game Engine
* Coded by Fabio Iotti
*/

function FGGE()
{
var clickMouse = false;

var root = this;

this.mouseX = 0;
this.mouseY = 0;

this.Canvas;
this.Context2D;

this.FPS = 15;

this.totalExternals = 0;
this.loadedExternals = 0;

var startingGame = false;

var gameCycleIntervalID;
var gameCycleFunction;

var readyFunction;

this.Layer = new Array();

function getCursorPosition(e)
{
// SNIPPET: http://tinyurl.com/3r6kcqf
var x;
var y;
if (e.pageX || e.pageY)
{
x = e.pageX;
y = e.pageY;
}
else
{
x = e.clientX + document.body.scrollLeft +
document.documentElement.scrollLeft;
y = e.clientY + document.body.scrollTop +
document.documentElement.scrollTop;
}

x -= root.Canvas.offsetLeft;
y -= root.Canvas.offsetTop;

return [x,y];
}

function upDateMouse(e)
{
root.mouseX = getCursorPosition(e)[0];
root.mouseY = getCursorPosition(e)[1];
}

function upDateMouseDown(e)
{
clickMouse = true;
}

function upDateMouseUp(e)
{
clickMouse = false;
}

this.makeEnvironment = function(tag)
{
this.Canvas = document.createElement("canvas");
tag.appendChild(this.Canvas);

this.Context2D = this.Canvas.getContext('2d');
};

this.setBackgroundColor = function(color)
{
this.Canvas.style.backgroundColor = color;
};

this.addLayer = function(layer)
{
this.Layer.push(layer);
};

this.loadImage = function(image)
{
root.totalExternals++;
image.onload = function()
{
root.loadedExternals++;

if(root.loadedExternals >= root.totalExternals)
{
if(readyFunction != undefined)
readyFunction();

if(startingGame == true)
root.forceStartGame();
}
};
};

this.callWhenReady = function(rdfun)
{
readyFunction = rdfun;
};

this.startGame = function()
{
startingGame = true;

if(root.loadedExternals >= root.totalExternals)
{
if(readyFunction != undefined)
readyFunction();

root.forceStartGame();
}
};

this.forceStartGame = function()
{
startingGame = false;

if(gameCycleIntervalID == undefined)
gameCycleIntervalID = setInterval(root.updateGame, 1000/root.FPS);

root.Canvas.addEventListener("mousemove", upDateMouse, false);
root.Canvas.addEventListener("mouseup", upDateMouseUp, false);
root.Canvas.addEventListener("mousedown", upDateMouseDown, false);
};

this.updateGame = function()
{
root.clearScreen();

if(gameCycleFunction)
{
try
{
gameCycleFunction();
}
catch(error)
{
clearInterval(gameCycleIntervalID);
gameCycleIntervalID = undefined;

alert(error);
}
}

try
{
for(var layerNum = 0; layerNum < root.Layer.length; layerNum++)
{
for(var modelNum = 0; modelNum < root.Layer[layerNum].Model.length; modelNum++)
{
root.Context2D.drawImage(
root.Layer[layerNum].Model[modelNum].getImage(),
root.Layer[layerNum].Model[modelNum].x - root.Layer[layerNum].Model[modelNum].centerX,
root.Layer[layerNum].Model[modelNum].y - root.Layer[layerNum].Model[modelNum].centerY
);
}
}
}
catch(error)
{
alert("Layer: "+layerNum+"\nModel: "+modelNum+"\n\n"+error);
}
};

this.setGameCycleFunction = function(gcFunction)
{
gameCycleFunction = gcFunction;
}

this.clearScreen = function()
{
root.Context2D.clearRect(0, 0, root.Canvas.width, root.Canvas.height);
}
}

function Layer()
{
this.Model = new Array();

this.addModel = function(model)
{
this.Model.push(model);
};
}

function Model()
{
var root = this;

this.x = 0;
this.y = 0;

this.xScale;
this.yScale;

this.centerX = 0;
this.centerY = 0;

this.alpha;

this.rot;

var image;

var width;
var height;

this.detectPointCollision = function(pointX, pointY)
{
if(pointX > root.x - root.centerX && pointX < root.x - root.centerX + width)
{
if(pointY > root.y - root.centerY && pointY < root.y - root.centerY + height)
{
return true;
}
}

return false;
};

this.getImage = function()
{
return image;
};

this.getWidth = function()
{
return width;
};

this.getHeight = function()
{
return height;
};

this.applyImage = function(imageo)
{
image = imageo;
width = imageo.width;
height = imageo.height;
};
}


An example HTML Code (make it "ping-pong.html"):
<html>
<head>
<title>FGGE - Test Zone</title>
<script type="text/javascript" src="FGGE.JS"></script>
</head>
<body>
<div id="fgge_sandbox"></div>
<script type="text/javascript">
// Generate a new game...
var myGame = new FGGE;

// ...and give it an environment where to show.
myGame.makeEnvironment(document.getElementById("fgge_sandbox"));

// I like black, so set a black background.
myGame.setBackgroundColor("#000000");

// Set the size of the window.
myGame.Canvas.width = 800;
myGame.Canvas.height = 600;

// Make a new layer containing bouncers and one for the ball.
var bouncersLayer = new Layer;
var ballLayer = new Layer;

// Make 2 bouncers, one for player and one for computer, and a ball.
var bouncer1 = new Model;
var bouncer2 = new Model;
var ball = new Model;

// In this engine everything is an image, so make some...
var bouncerImage = new Image();
bouncerImage.src = "bouncer.png";

var ballImage = new Image();
ballImage.src = "ball.png";

// ...and tell the engine to load it (game won't start until all images are loaded)...
myGame.loadImage(bouncerImage);
myGame.loadImage(ballImage);

// ...then apply it to the bouncers.
bouncer1.applyImage(bouncerImage);
bouncer2.applyImage(bouncerImage);
ball.applyImage(ballImage);

// Add the bouncers to their layer, ball to it's one...
bouncersLayer.addModel(bouncer1);
bouncersLayer.addModel(bouncer2);
ballLayer.addModel(ball);

// ...and layers to the game.
myGame.addLayer(bouncersLayer);
myGame.addLayer(ballLayer);

// If we don't wait for images to be loaded, getWidth() and getHeight() may work bad.
myGame.callWhenReady(function()
{
// To help coding, set the center of objects to the center of the image (by default center is top-left corner)...
// ...setting center will move x and y position.
ball.centerX = ball.getWidth()/2;
ball.centerY = ball.getHeight()/2;

bouncer1.centerY = bouncer1.getHeight()/2;

bouncer2.centerY = bouncer2.getHeight()/2;
bouncer2.centerX = bouncer2.getWidth();
});

// Set models places.
bouncer1.x = 10;
bouncer1.y = 10;

bouncer2.x = myGame.Canvas.width - 10;
bouncer2.y = 10;

ball.x = myGame.Canvas.width/2;
ball.y = myGame.Canvas.height/2;

// We set a funtion for the engine
var ballSpeedX = 10;
var ballSpeedY = 0;

myGame.setGameCycleFunction(function()
{
bouncer2.y -= (bouncer2.y-ball.y)/3;

bouncer1.y = myGame.mouseY;

// WARNING: Collision detectors work only in a single frame, so, if the ball is too fast, it may pass through bouncer!
// For this reason, never use FGGE Native collision detector for rapidly moving small objects.

if(bouncer1.detectPointCollision(ball.x - ball.getWidth()/2, ball.y))
{
var difference = bouncer1.y - ball.y;

ballSpeedY = -difference/2;

if(difference < 0)
difference *= -1;

ballSpeedX = 15-difference/6;
}
else if(bouncer2.detectPointCollision(ball.x + ball.getWidth()/2, ball.y))
{
var difference = bouncer2.y - ball.y;

ballSpeedY = -difference/2;

if(difference < 0)
difference *= -1;

ballSpeedX = -15+difference/6;
}

if(ball.y < 0 || ball.y > myGame.Canvas.height)
ballSpeedY *= -1;

ball.x += ballSpeedX;
ball.y += ballSpeedY;

if(ball.x < 0 || ball.x > myGame.Canvas.width)
{
if(ball.x < 0)
ballSpeedX = 10;
else
ballSpeedX = -10;

ballSpeedY = 0;

ball.x = myGame.Canvas.width/2;
ball.y = myGame.Canvas.height/2;
}
});

// And tell engine to start the game (when ready).
myGame.startGame();
</script>
</body>
</html>

Just add two images "bouncer.png" 15x50 and "ball.png" 16x16 fully white to have a ready to play game!

I am waiting for comments and suggestions... Thanks for reading!