Html 5 canvas rectangle removing and after draw

Question

I tried to draw a rectangle ,erase it and redraw another rectangle in a canvas.
The result of this three operation is that there are two rectangle .

Html 5 api javascript : http://pastebin.com/Qgf38C7m

function Oggetto(idname,nome,posizione_x,posizione_y,width,height,doption){
        this.nome                       =       nome            ;      
        this.posizione_x        =       posizione_x     ;
        this.posizione_y        =       posizione_y     ;
        this.width                      =       width           ;
        this.height                     =       height          ;
        this.doption            =       doption         ;
        this.idname                     =       idname          ;
        console.log(this.idname);
        this.context            =       document.getElementById(idname).getContext("2d");      
}
Oggetto.prototype.draw = function () {
};
Oggetto.prototype.clear = function () {
};



function Entita(idname,nome,posizione_x,posizione_y,width,height,doption){
        Oggetto.call(this,idname,nome,posizione_x,posizione_y,width,height,doption);
}
Entita.prototype.draw = function (){
        this.context.rect(this.posizione_x,this.posizione_y,this.width,this.height);
        this.context.stroke();
};
Entita.prototype.clear = function () {
        // this.context.clearRect(this.posizione_x, this.posizione_y, this.width, this.height);
     //Richiamo il metodo per la creazione di un rettangolo con background
     this.context.clearRect(this.posizione_x-4, this.posizione_y-4, this.width+10, this.height+10);

};
Entita.prototype.enlarge = function (w,h) {
         this.clear();
         this.width             =       w;
         this.height    =       h;
         this.draw();
};
Entita.prototype =  new  Oggetto();

javascript code that call it :

 e =new Entita("ke","pio",10,10,100,100,"prova");   
 e.draw();
 e.enlarge(400,200);

Result:

Answer 1

Since you're using the current working path to draw your rectangle, you need to reset the current working path with beginPath. Otherwise, you're just adding new subpaths to the current working path, which is why both rectangles are drawn on using stroke in Entitia.draw.

You could always just go with strokeRect to avoid any confusion with the filling/stroking the current working path, but if you plan to add arbitrary shapes in the future, your best bet is to simply add the line this.context.beginPath() as the first statement for Entitia.draw.

Entita.prototype.draw = function () {
    this.context.beginPath();
    //Other statements for defining
    //current working path and stroking/filling
    //it
};

Working Fiddle.