Drawing an ellipse is just an implementation of translation and scaling. The output is quite simple:
The recipe goes like this.
The HTML code:
<!DOCTYPE HTML> <html> <head> </head> <body onload="init()"> <canvas id="myCanvas" width="578" height="200" style="border:3px solid blue"></canvas> <script src="ellipse.js"> </script> </body> </html>
function init() { var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); var centerX = 0; var centerY = 0; var radius = 50; // translate context context.translate(canvas.width / 2, canvas.height / 2); // scale context horizontally context.scale(2, 1); // draw circle which will be stretched into an ellipse context.beginPath(); context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); context.lineWidth = 5; context.strokeStyle...