HTML5 + Javascript

few lessons learnt:

1. <script /> is not valid. must use closing tag </script>
2. made a simple mistake and debug like crazy:
   canvas = document.getElementById("test");
context = canvas.getContext("2d");
context.fillStyle("#FF0000"); //SHOULD have been context.fillStyle = "#FF0000";
context.fillRect( 10, 20, 100, 50);
   More canvas reference: http://www.w3schools.com/html5/html5_ref_canvas.asp
3. must use addEventListener for mouse input: canvas.addEventListener("mousedown", mDown, false);
4. cannot get mouse (x,y) relative to canvas top left (0,0) so must manually calculate:
   var mouseX = (e.pageX -canvas.offsetLeft );
var mouseY = (e.pageY -canvas.offsetTop);
5. OOP
   function A() // create a class
{
this.v = 1; // fields or variables
this.name = "haha";
}
A.prototype.constructor = A;
A.prototype.m1 = function(){ // methods
this.v++;
}
A.prototype.m2 = function(){
this.v+=10;
}
// new class

B.prototype = new A();

B.prototype.constructor = B;

function B(){

  A.call(this); // call super class constructor if necessary

  this.x = 2;

}

B.prototype.m2 = function()

{

  A.prototype.m2.call(this); // call super class method if necessary

  // do additional stuff

}

var b = new B(); // create instance. BUT instantiation MUST be after the class declaration. debugged for a long time.