JSFiddle - React, Tailwind, and code Playground

HTML

<canvas width="640" height="480" id="ke"></canvas>

CSS

canvas {
    border: solid red 1px;
}

JavaScript

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);
}

var fn = function() {};
fn.prototype = Oggetto.prototype;
Entita.prototype = new fn();

Entita.prototype.draw = function () {
    this.context.beginPath();
    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();
};


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