<script>

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

//// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> START HERE

context.beginPath();

var OBJ = new myObject();

context.closePath();

// GIVE BIRTH TO FIRST OBJECT

context.fillStyle = OBJ.c; // USE THE c VALUE FROM myObject FOR COLOR

context.fillRect(OBJ.x, OBJ.y, OBJ.w, OBJ.h);

// THIS IS CALLED THE CONSTRUCTOR
// IT DEFINES ALL THE VALUES OF EACH PROPERTY
// IN THIS CASE x,y,w,h,c
// AND THEN YOU CAN DO WHATEVER YOU WANT THOSE VALUES

function myObject() { // CONSTRUCTOR

this.x = 100;
this.y = 100;
this.w = 100;
this.h = 100;
this.c = "red";

return( this.x, this.y, this.w, this.h, this.c );

}

//// <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< END HERE

</script>