Removing html 5 rectangle and after drawing

Question

I tried to draw a rectangle, erase it and redraw another rectangle in the canvas.
The result of these three operations is the presence of two rectangles.

Html 5 javascript api: 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 calls it:

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

Result:

Answer 1

Since you are using the current working path to draw your rectangle, you need to reset the current working path with beginPath . Otherwise, you simply add new subpaths to the current work path, so both rectangles are drawn using stroke in Entitia.draw .

You can always just go with strokeRect to avoid the confusion of filling / stroking the current work path, but if you plan to add custom shapes in the future, it is best to add 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 script .