how i get a coordinate of each rectangle?

enter image description here

  public fillTextCircle(context, count: number, x, y, radius, startRotation, color: string, isNumber: boolean): void {
    const numRadsPerLetter = 2 * Math.PI / text;
    context.save();
    context.translate(x, y);
    for (let i = 0; i < count; i++) {
      context.save();
      context.rotate(i * numRadsPerLetter);
      context.font = '25px Comic Sans MS';
      context.fillStyle = color;
      context.fillRect(0, -radius, 10, 20);
      context.restore();
    }
    context.restore();
  }

i am using angular and canvas. i want to detect click when we click these slots.

  this.canvas.fillTextCircle(ctx, 60, this.midX, this.midY, this.centerRadius + 40, 0, slotColor, false);

//midX, midY contains middle point of our canvas, ctx - 2D context Object. i am new to canvas.i have read a few solution, that confused me. can you please suggest a solution for this?.

i have tried this,

  public drawNumbers(ctx, x1, y1, length, count) {
      let angle = 0;
      for (let i = 0; i <= count; i++ ) {
        angle += 2 * Math.PI / (count );
      const x2 = x1 + length * Math.cos(angle),
        y2 = y1 + length * Math.sin(angle);
       ctx.beginPath();
       ctx.fillRect(x2, y2, 10, 20);
       ctx.stroke();

    }
  }

    this.canvas.drawNumbers(ctx, this.midX, this.midY, 160, 60);

output:

enter image description here

enter image description here

it is starting at 0th angle.

i want to start rotation at top ie. 270 or -90 degree.Onclick of rectangle i have to do some operation.