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:

What do you get if you `console.log(this.posizione_x-4, this.posizione_y-4, this.width+10, this.height+10);` ? (does it match the rect you draw first) — , Jun 01 '13 at 21:02
Oggetto constructor is called two times the first time all parameter is undefined(for prototype i think ) the second time for e instance . — lv92, Jun 01 '13 at 22:15

score 3 · Accepted Answer · answered Jun 13 '13 at 06:59

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.

Html 5 canvas rectangle removing and after draw

1 Answers1