Das folgende Script zeigt das neue HTML Canvas auf:
<!DOCTYPE html>
<html>
<head>
<title>Shape Poly Canvas</title>
<script src="Shape.js"></script>
<script src="Rectangle.js"></script>
<script src="Oval.js"></script>
<script>
let shapes = [];
function initShapes() {
// TODO
}
function drawShapes(canvas) {
// TODO
}
</script>
</head>
<body>
<canvas id="myCanvas" width="400" height="400" style="background: #0000ff;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
let myCanvas = document.getElementById('myCanvas');
initShapes();
drawShapes(myCanvas);
</script>
</body>
</html>
Das Resultat der Anzeige soll gleich bleiben:
getArea() {
return 0.0;
}
draw(canvas) { throw 'not supported'; }
Diese Anpassung ist für die Lösung nicht notwendig aber kann die Subklassen entlasten.