I’m currently working on a canvas drawing application where I have implemented a function to draw a rectangle with resize pointers on its corners and sides. Now, I’m looking to enhance it by adding rotation pointers on each corner for rotation functionality similar to the resize pointers.

Here’s the code snippet for drawing the rectangle and resize pointers:

const drawRect = () => {
    if (!ctx) return;
    ctx.beginPath();
    const rotatedRect = getRotatedRectCoordinates(rect, rotation);
    ctx.moveTo(rotatedRect[0].x, rotatedRect[0].y);
    for (let i = 1; i < 4; i++) {
      ctx.lineTo(rotatedRect[i].x, rotatedRect[i].y);
    }
    ctx.closePath();
    ctx.strokeStyle = "#7371fc";
    ctx.lineWidth = 2;
    ctx.stroke();
  
    // Draw circles at the corners of the rotated rectangle for resize
    const cornerCircleRadius = 6;
    ctx.fillStyle = "white";
    rotatedRect.forEach((corner) => {
      ctx.beginPath();
      ctx.arc(corner.x, corner.y, cornerCircleRadius, 0, 2 * Math.PI);
      ctx.fill();
    });
  
    // Draw circles in the middle of each side for resize
    const middleCircleRadius = 6;
    const middleCirclePositions = [
      { x: (rotatedRect[0].x + rotatedRect[1].x) / 2, y: (rotatedRect[0].y + rotatedRect[1].y) / 2 }, // Top-middle
      { x: (rotatedRect[2].x + rotatedRect[1].x) / 2, y: (rotatedRect[2].y + rotatedRect[1].y) / 2 }, // Right-middle
      { x: (rotatedRect[2].x + rotatedRect[3].x) / 2, y: (rotatedRect[2].y + rotatedRect[3].y) / 2 }, // Bottom-middle
      { x: (rotatedRect[0].x + rotatedRect[3].x) / 2, y: (rotatedRect[0].y + rotatedRect[3].y) / 2 }, // Left-middle
    ];
    ctx.fillStyle = "white"; // Fill color for the circles
    middleCirclePositions.forEach((middle) => {
      ctx.beginPath();
      ctx.arc(middle.x, middle.y, middleCircleRadius, 0, 2 * Math.PI);
      ctx.fill();
    });
  
    setShowRect(true);
};

Could someone guide me on how to add rotation pointers on each corner for rotation functionality? Any help or suggestions would
be appreciated.

Here, i am using react js canvas.

Thanks!