How to get coordinates of every circle from this Canvas

Question

I need to create a pattern where 5 circles connected by lines to a middle main circle. So I have created dynamically by rotating in some certain angle. Now I need each and every circle's x and y axis coordinates for capturing the click events on every circle.

Please help me how to find out of coordinates of every circle?

var canvas, ctx;
function createCanvasPainting() {
    
    canvas = document.getElementById('myCanvas');
    if (!canvas || !canvas.getContext) {
        return false;
    }
    canvas.width = 600;
    canvas.height = 600;
    ctx = canvas.getContext('2d');           
    ctx.strokeStyle = '#B8D9FE';
    ctx.fillStyle = '#B8D9FE';
    ctx.translate(300, 250);
    ctx.arc(0, 0, 50, 0, Math.PI * 2); //center circle
    ctx.stroke();
    ctx.fill();
    drawChildCircles(5);
    fillTextMultiLine('Test Data', 0, 0);
    drawTextInsideCircles(5);
  }

  function drawTextInsideCircles(n) {
    let ang_unit = Math.PI * 2 / n;
    ctx.save();
    for (var i = 0; i < n; i++) {
      ctx.rotate(ang_unit);
      //ctx.moveTo(0,0);
      fillTextMultiLine('Test Data', 200, 0);
      ctx.strokeStyle = '#B8D9FE';
      ctx.fillStyle = '#B8D9FE';
    }
    ctx.restore();
  }

  function drawChildCircles(n) {
    let ang_unit = Math.PI * 2 / n;
    ctx.save();
    for (var i = 0; i < n; ++i) {
      ctx.rotate(ang_unit);
      ctx.beginPath();
      ctx.moveTo(0,0);
      ctx.lineTo(100,0);
      
      ctx.arc(200, 0, 40, 0, Math.PI * 2);
      let newW = ctx.fill();
      
      ctx.stroke();
    }
    
    ctx.restore();
  }

  function fillTextMultiLine(text, x, y) {
    ctx.font = 'bold 13pt Calibri';
    ctx.textAlign = 'center';
    ctx.fillStyle = "#FFFFFF";
    // Defining the `textBaseline`… 
    ctx.textBaseline = "middle";
    var lineHeight = ctx.measureText("M").width * 1.2;
    var lines = text.split("\n");
    
    for (var i = 0; i < lines.length; ++i) {
      // console.log(lines);
      if (lines.length > 1) {
        if (i == 0) {
          y -= lineHeight;
        } else {
          y += lineHeight;
        }
      }
      ctx.fillText(lines[i], x, y);
    }
  }

  createCanvasPainting();

<canvas id="myCanvas"></canvas>

score 0 · Answer 1 · answered Feb 27 '20 at 13:40

The problem here is that you are rotating the canvas matrix and your circles are not aware of their absolute positions.

Why don't you use some simple trigonometry to determine the center of your circle and the ending of the connecting lines ?

function lineToAngle(ctx, x1, y1, length, angle) {

    angle *= Math.PI / 180;

    var x2 = x1 + length * Math.cos(angle),
        y2 = y1 + length * Math.sin(angle);

    ctx.moveTo(x1, y1);
    ctx.lineTo(x2, y2);
    ctx.stroke();

    return {x: x2, y: y2};
}

Ref: Finding coordinates after canvas Rotation

After that, given the xy center of your circles, calculating if a coord is inside a circle, you can apply the following formula:

Math.sqrt((x1-x0)*(x1-x0) + (y1-y0)*(y1-y0)) < r

Ref: Detect if user clicks inside a circle

How to get coordinates of every circle from this Canvas

1 Answers1