Testing HTML5 Canvas Game

Trying to learn the basic structure of using the HTML5 canvas tag and JS to create games/animations. Primarily trying to recreate a simplified version (non-scrolling) of Mario Brothers, with interactive boundaries such as coinboxes, hit testing with enemies and magnetism? with enemies.

by Crusader12

HTML

<script src="http://www.ajgraphicsonline.com/Mario/environment.js"></script>
<script src="http://www.ajgraphicsonline.com/Mario/objects.js"></script>
<script src="http://www.ajgraphicsonline.com/Mario/mario.js"></script>
<script src="http://www.ajgraphicsonline.com/Mario/actions.js"></script>
<!doctype html><html>
<head>
<meta charset="utf-8">
</head><body>

<div id="content">
<canvas id="canvas" width="1200" height="800"></canvas></div>
<script type="text/javascript" src="http://www.ajgraphicsonline.com/Mario/environment.js"></script>
<script type="text/javascript" src="http://www.ajgraphicsonline.com/Mario/objects.js"></script>
<script type="text/javascript" src="http://www.ajgraphicsonline.com/Mario/mario.js"></script>
<script type="text/javascript" src="http://www.ajgraphicsonline.com/Mario/actions.js"></script>
<script>window.onload=function(){
var canvas=document.getElementById('canvas'),
    context=canvas.getContext('2d');
    /* SETUP ENVIRONMENTAL VARIABLES */
    MarioJump=false,MarioLeft=false,MarioRight=false,
    GroundLevel=676,JumpLevel=605,StepSections=[],
       mario=new CreateMario(context,50,GroundLevel,50,68),
    CoinBox=new CreateCoinbox(context,560,JumpLevel-140,55,50);
  
    EnvironmentSetup(context); /* SETUP ENVIRONMENT */


    // ANIMATION LOOP
    (function drawFrame(){window.mozRequestAnimationFrame(drawFrame,canvas);
    context.clearRect(0, 0, canvas.width, canvas.height);

    CoinBox.draw(context);
    mario.draw(context);
    }());
};</script>
</body></html>

CSS

body {background-color:#000;}
#content {width:1200px;margin:0 auto;padding-top:100px;}
canvas {background:url('http://www.ajgraphicsonline.com/Mario/images/background.png');}