4. Ellipses

An Ellipse class is written storing center coordinates (x, y) and radius in x,y (radiusX, radiusY). It also has a draw method to draw the ellipse using the ellipse method.

The draw method requires optional fill color which is "blue" by default. The rotation is fixed at 0 and start angle is 0 and stop angle is 2 pi for a complete ellipse.

// 4. Ellipses

let canvas = document.querySelector("#myCanvas");
let ctx = canvas.getContext("2d");

class Ellipse {
  constructor(x, y, radiusX, radiusY) {
    this.x = x;
    this.y = y;
    this.radiusX = radiusX;
    this.radiusY = radiusY;
  }
  draw(color="blue") {
    ctx.beginPath();
    ctx.ellipse(this.x, this.y, this.radiusX, this.radiusY,
      0, 0, 2 * Math.PI);
    ctx.fillStyle = color;
    ctx.fill();
  }
}

let ellipse1 = new Ellipse(100, 100, 40, 86);
ellipse1.draw("red");

let ellipse2 = new Ellipse(300, 100, 42, 84);
ellipse2.draw();

let ellipse3 = new Ellipse(100, 300, 84, 42);
ellipse3.draw("green");

let ellipse4 = new Ellipse(300, 300, 86, 40);
ellipse4.draw("purple");

Output: