How to click one circle among others in canvas using JavaScript

I want to click each circle separately from an array of circles. Because I want to do different tasks for each circle after being clicked. Though multiple circles are stored inside the array circles[] when I am clicking on the circles the alert is not showing without one circle and it's showing the alert 5 times. I am assuming that is the last circle which has been drawn randomly and only this circle has the click effect! Can someone please help me to figure this out?

const canvas = document.getElementById('flower');
const ctx = canvas.getContext('2d');
var offsetX = canvas.offsetLeft;
var offsetY = canvas.offsetTop;
var circles = [];

function main(){
    if (typeof document !== 'undefined') {
            var r = 20; 
            for (var j=0; j<5; j++){
                var cx = random()*(canvas.width);
                var cy = random()*(canvas.height);
                var r = 25;
                var color = "rgb(" + Math.floor(random() * 256) + "," + Math.floor(random() * 256)
                            + "," + Math.floor(random() * 256) + ")";
                ctx.beginPath();
                ctx.arc(cx, cy, r, 0, 2 * Math.PI);
                ctx.fillStyle = color;
                ctx.fill();
                ctx.closePath();
                var obj = {}; 
                obj['x'] = cx;
                obj['y'] = cy;
                circles.push(obj);
                
            }
            //console.log(circles); 5 circles are stored in circles[]
            circles.forEach(function(entry){
            canvas.addEventListener('click', function(e) {
                    var clickX = e.clientX - offsetX;
                    var clickY = e.clientY - offsetY;
                    var dx = cx - clickX;
                    var dy = cy - clickY;
                    if (dx * dx + dy * dy <= r * r) {
                        alert("you are inside the circle");
                    }
                });
            });
                                
        }
}



    var seed = 1;
    function random() {
        var x = Math.sin(seed++) * 10000;
        return x - Math.floor(x);
    }

main();
html, body, div {
    width:  100%;
    height: 100%;
    margin: 0;
  }
<body>
    <div id="design">
        <canvas id="flower"></canvas>
    </div>
</body>

1 answer

  • answered 2019-10-15 18:34 Naga Sai A

    To achieve expected result, use below option of using isPointInPath method to detect click of canvas shape

    1. Use Path2D constructor to draw circle

      const circle = new Path2D(); circle.arc(cx, cy, r, 0, 2 * Math.PI); ctx.fillStyle = color; ctx.fill(circle);

    2. Use below click event Listener

    canvas.addEventListener("click", function(event) { if (ctx.isPointInPath(circle, event.clientX, event.clientY)) { alert("you are inside the circle"); } });

    Please refer this link for more details on https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/isPointInPath

    Sample working code for reference

    const canvas = document.getElementById("flower");
    const ctx = canvas.getContext("2d");
    var offsetX = canvas.offsetLeft;
    var offsetY = canvas.offsetTop;
    var circles = [];
    
    function main() {
      if (typeof document !== "undefined") {
        var r = 20;
        for (var j = 0; j < 5; j++) {
          var cx = random() * canvas.width;
          var cy = random() * canvas.height;
          var r = 25;
          var color =
            "rgb(" +
            Math.floor(random() * 256) +
            "," +
            Math.floor(random() * 256) +
            "," +
            Math.floor(random() * 256) +
            ")";
          const circle = new Path2D();
          circle.arc(cx, cy, r, 0, 2 * Math.PI);
          ctx.fillStyle = color;
          ctx.fill(circle);
          canvas.addEventListener("click", function(event) {
            if (ctx.isPointInPath(circle, event.clientX, event.clientY)) {
              alert("you are inside the circle");
            }
          });
        }
      }
    }
    
    var seed = 1;
    function random() {
      var x = Math.sin(seed++) * 10000;
      return x - Math.floor(x);
    }
    
    main();
    html, body, div {
        width:  100%;
        height: 100%;
        margin: 0;
      }
    <body>
        <div id="design">
            <canvas id="flower"></canvas>
        </div>
    </body>

    Codepen - https://codepen.io/nagasai/pen/NWWNmdj