Creazione dell'oggetto rect (rettangolo)

Ripassato il canvas, adesso ripasso come ho creato un oggetto rect, di cui la rappresentazione grafica è soltanto il metodo disegna():

function rect(x,y,w,h,colore){
 this.x=x;
 this.y=y;
 this.w=w;
 this.h=h;
 this.dx=this.x+this.w;
 this.dy=this.y+this.h;
 this.colore=colore
 this.controllo="";
 this.bloccoX=false;
 this.disegna=function(){
  ctx.fillStyle=this.colore;
  ctx.beginPath();
  ctx.rect(this.x,this.y,this.w,this.h);
  ctx.closePath();
  ctx.fill(); 
 }  
}

Fornendo come parametri le coordinate, l'ampiezza e l'altezza e il colore, poi queste vengono usate all'atto del disegnare.
Ci sono altre proprietà che però adesso mi suonano un po' come relitti perché non le ho mai usate, e forse sarebbe il caso di rivederle.
Intanto riscriviamole più chiare, ed eliminiamo quelle che non ci risultano utili (aggiunte in precedenza per certi tentativi poi non riusciti).

function rect(x,y,w,h,colore){
 this.x=x;
 this.y=y;
 this.w=w;
 this.h=h;
 this.destra=this.x+this.w;
 this.basso=this.y+this.h;
 this.colore=colore
 this.disegna=function(){
  ctx.fillStyle=this.colore;
  ctx.beginPath();
  ctx.rect(this.x,this.y,this.w,this.h);
  ctx.closePath();
  ctx.fill(); 
 }  
}

---

Così adesso provo un codice mediante la creazione di oggetti rettangolo...

}
function initContext(nome){
 canvas=$(nome);
 ctx=canvas.getContext("2d");
 var rettangolo=new rect(0,0,200,100,"red");
 var rettangolo2=new rect(100,100,200,300,"blue");
 rettangolo.disegna();
 rettangolo2.disegna();
}

Che funziona: