Die Rectangle Klasse soll sich mit der Methode draw() selber zeichnen. Hierzu soll die Klasse die Farbe und via Boolean Flag das Rechteck mit Rand oder Filled zeichnen.Das folgende UML Diagramm zeigt dies auf:
Die Methode draw(canvas) wird mit dem Canvas parametrisiert. Intern prüft die Methode das Fill-Flag und zeichnet das Rechteck in der gewünschten Farbe.
Links über dem Rechteck ist die Fläche (Area) anzuzeigen. Solche soll über die Methode getArea() berechnet werden.
Eine Referenz zum Zeichnen mit Canvas finden Sie unter https://www.w3schools.com/tags/ref_canvas.asp
Das folgende Listing zeigt das HTML JavaScript:
let myCanvas = document.getElementById('myCanvas');
let r1 = new Rectangle(20, 20, 100, 200, '#FF0000');
r1.draw(myCanvas);
let r2 = new Rectangle(140, 120, 200, 100, '#FFFF00', true);
r2.draw(myCanvas);