blank birth chart

by Abhishek Kumar

HTML

<div id="chart-box"></div>

JavaScript

class Maths {
  static valuePercentage(partialValue, totalValue) {
    return (100 * partialValue) / totalValue;
  }
  static numberPercentage(num, per) {
    return (num / 100) * per;
  }
}

class Horoscope {
  constructor(container, width, height) {
    this.width = width;
    this.height = height;
    this.initialize(container);
  }
  initialize(holder) {
    let container = document.getElementById(holder);
    // create a canvas element
    let canvas = document.createElement("canvas");
    // get the canvas context
    this.ctx = canvas.getContext("2d");
    // set the canvas width and height
    canvas.width = this.width;
    canvas.height = this.height;
    // append the canvas to the document body
    container.appendChild(canvas);
  }
  create() {
    // divide the rectangle into 12 equal parts
    const x = 1; // starting x coordinate
    const y = 1; // starting y coordinate
    const w = this.width - 2; // width of each part
    const h = this.height - 2; // height of each part

    this.ctx.strokeStyle = "maroon";
    this.ctx.lineWidth = 2;

    this.ctx.fillStyle = "lightyellow";
    this.ctx.fillRect(x, y, w, h);

    this.ctx.beginPath();
    this.ctx.rect(x, y, w, h);
    this.ctx.stroke();

    this.ctx.lineWidth = 1;

    this.ctx.beginPath();
    this.ctx.moveTo(x, y);
    this.ctx.lineTo(w, h);
    this.ctx.stroke();

    this.ctx.beginPath();
    this.ctx.moveTo(x + w / 2, y);
    this.ctx.lineTo(w, h / 2);
    this.ctx.stroke();

    this.ctx.beginPath();
    this.ctx.moveTo(x, y + h / 2);
    this.ctx.lineTo(x + w / 2, h);
    this.ctx.stroke();

    this.ctx.beginPath();
    this.ctx.moveTo(x + w, y);
    this.ctx.lineTo(x, h);
    this.ctx.stroke();

    this.ctx.beginPath();
    this.ctx.moveTo(x + w / 2, y);
    this.ctx.lineTo(x, h / 2);
    this.ctx.stroke();

    this.ctx.beginPath();
    this.ctx.moveTo(x + w / 2, h);
    this.ctx.lineTo(w, y + h / 2);
    this.ctx.stroke();
  }
  setHouseNumber() {
    const x = 1; // starting x...