OOP 01

  
<!doctype html>

    <html>

    <head>

    <meta charset="UTF-8">

  <title>OOP 01</title>
  
 <script>
  
// DEFINE YOUR GLOBAL VARIABLES HERE
  
 var canvas;

    var context;
  
// INITIALIZE THE STARTING FUNCTION
  
 function init() {

    

    canvas = document.getElementById("myCanvas");

    context = canvas.getContext("2d");
    // CALL SUBSEQUENT FUNCTIONS, as many as you need
    drawBkgd(); // COVER TRANSPARENT CANVAS
    create(); // THIS IS WHERE AL HAPPENS
    }
  

    function drawBkgd() { // USE THIS AREA TO MODIFY BKGD

    context.fillStyle = "grey";

    context.fillRect(0,0,canvas.width, canvas.height);

    }
  

    function create() { 

    // >>>>>>>>>>>>>>>>>>>>>>>>>> START HERE
  
// FIRST OBJECT

    var pxa = 10;

    var pya = 10;

    var p1a = " OOP ";

    var p2a = 300;

    var p3a = 200;

    var p4a = "Helvetica";

    var p5a = "30px";

    var p6a = "red";

    var p7a = "normal";

    var p8a = p2a/2;

    var p9a = p3a/2;

    var p10a = "center";

    var p11a = "YAY!";

    var p12a = "black";
    var OOPA = new OOP(pxa,pya,p1a,p2a,p3a,p4a,p5a,p6a,p7a,p8a,p9a,p10a,p11a,p12a);

    makeObject(OOPA);
  
// SECOND OBJECT

    var pxb = 50;

    var pyb = 250;

    var p1b = " OOP ";

    var p2b = 300;

    var p3b = 200;

    var p4b = "Helvetica";

    var p5b = "30px";

    var p6b = "red";

    var p7b = "normal";

    var p8b = p3b/2;

    var p9b = p3b/2;

    var p10b = "center";

    var p11b = "YAY!";

    var p12b = "blue";
    var OOPB = new OOP(pxb,pyb,p1b,p2b,p3b,p4b,p5b,p6b,p7b,p8b,p9b,p10b,p11b,p12b);

    makeObject(OOPB); 
  
// THIRD OBJECT
  
var OOPC = new OOP(200,150,"YIPPEE",350,100,"Courier","50px","yellow","italic",100,50,"center","ARGH","PURPLE");

    makeObject(OOPC); 
  
// REPEAT LOOP 
  
for (var i=0; i<100; i++) {

    

    var pxi = 50 + i*10;

    var pyi = 250 - i+10;

    var p1i = " YAY ";

    var p2i = 300;

    var p3i = 200;

    var p4i = "Arial";

    var p5i = "15px";

    var p6i = "black";

    var p7i = "normal";

    var p8i = p3b/2;

    var p9i = p3b/2;

    var p10i = "center";

    var p11i = "YAY!";

    var p12i = "green";
    var OOPI = new OOP(pxi,pyi,p1i,p2i,p3i,p4i,p5i,p6i,p7i,p8i,p9i,p10i,p11i,p12i);

    makeObject(OOPI);
    }
  
}
  
// OBJECT ///////////////////////////////////////////////////////////////////////
  
function OOP(px,py,p1,p2,p3,p4,p5,p6,p7,p8,p9,p10,p11,p12) {

    //alert(px);

    this.px = px; // RECT x

    this.py = py; // RECT y

    this.name = p1;

    this.width = p2;

    this.height = p3;

    this.font = p4;

    this.fontSize = p5;

    this.fontColor = p6;

    this.style = p7;

    this.x = this.px + (this.width/2);

    this.y = this.py + (this.height/2);

    this.align = p10;

    this.yay = p11;

    this.bkgdColor = p12;
    return(this.px, this.py, this.name, this.width, this.height, this.font, this.fontColor, this.size, this.style, this.x, this.y, this.align, this.yay, this.bkgdColor);
  

    }
  
// CONSTRUCTOR ///////////////////////////////////////////////////////////////////////
  
function makeObject(myObject) {

    

    context.fillStyle = myObject.bkgdColor;

    context.fillRect(myObject.px, myObject.py,myObject.width, myObject.height); 

    context.font = myObject.style + " " + myObject.fontSize + " " + myObject.font; 

    context.fillStyle = myObject.fontColor;

    context.textAlign = myObject.align;

    context.fillText(myObject.name, myObject.x, myObject.y);
  
}

  
  
// >>>>>>>>>>>>>>>>>>>>>>>>>> END HERE

  </script>
  
</head>
  
<body onload="init()">
  
 <canvas id="myCanvas" width="800" height="600"></canvas>
  
</body>

    </html>