Zeichenobjekte

Zeichenfläche

<!DOCTYPE html><html><head> <title>Leinwand</title></head><body><canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;background: #e00;"></canvas></body></html>

Kreis zeichnen

Mit JavaScript wird durch die Methode getElementById() in einer Variablen das HTML-Element Zeichenfläche (canvas) als JavaScript-Objekt mit 2-dimensionalen Zeichenmethoden für Zeichenobjekte (getContext("2d"))abgespeichert (W3Schools)
Das Zeichenobjekt Kreis wird in der Canvas mit JavaScript durch die Methode arc() für einen Kreisbogen gezeichnet.(W3Schhols)

<!DOCTYPE html><html><head> <title>Ball</title></head><body><canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;background: #eee;"></canvas><script>var canvas = document.getElementById("myCanvas");var ctx = canvas.getContext("2d");var ballRadius = 10;var x = canvas.width/2;var y = canvas.height/2;ctx.beginPath();ctx.arc(x, y, ballRadius,0, Math.PI*2,false);ctx.closePath();ctx.strokeStyle = 'black';ctx.stroke();ctx.fillStyle = "#0095DD";ctx.fill();</script></body></html>