how to add clickable area in a canvas

Question

I have a canvas and I drew some images on it, but how do I group the canvas into different groups that I would be able to click and run a function (similar to area tag) (I'm new to programming). With area tag, you can only use it for images, but how do you connect the area tag with the canvas itself.

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="1024" height="479" usemap='Canvas'></canvas>
    <script>
      function loadImages(sources, callback) {
        var images = {};
        var loadedImages = 0;
        var numImages = 0;
        // get num of sources
        for(var src in sources) {
          numImages++;
        }
        for(var src in sources) {
          images[src] = new Image();
          images[src].onload = function() {
            if(++loadedImages >= numImages) {
              callback(images);
            }
          };
          images[src].src = sources[src];
        }
      }
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      var sources = {
        background: 'MANCALA-game_bg_combined3.png',
        pit1marble1: 'MANCALA-game_marble.png', 
        pit1marble2: 'MANCALA-game_marble.png', 
        pit1marble3: 'MANCALA-game_marble.png', 
        pit1marble4: 'MANCALA-game_marble.png',
        pit1marble5: 'MANCALA-game_marble.png',
        pit1marble6: 'MANCALA-game_marble.png',

      };

      loadImages(sources, function(images) {
        context.drawImage(images.background, 0, 0, 1024, 479);
        context.drawImage(images.pit1marble1, 200, 70, 50, 50);
        context.drawImage(images.pit1marble2, 160, 85, 50, 50);
        context.drawImage(images.pit1marble3, 175, 75, 50, 50);
        context.drawImage(images.pit1marble4, 190, 80, 50, 50);
        context.drawImage(images.pit1marble5, 200, 100, 50, 50);
        context.drawImage(images.pit1marble6, 160, 100, 50, 50);



      });

    </script>
<map name="Canvas">

 <area shape="rect" coords="172,50,269,176" href="sun.htm" alt="Sun" id=pit1>
 <area shape="rect" coords="286,50,383,176" href="sun.htm" alt="Sun" id=pit2>
 <area shape="rect" coords="400,50,497,176" href="sun.htm" alt="Sun" id=pit3>
 <area shape="rect" coords="528,50,625,176" href="sun.htm" alt="Sun" id=pit4>
 <area shape="rect" coords="651,50,748,176" href="sun.htm" alt="Sun" id=pit5>
 <area shape="rect" coords="757,50,864,176" href="sun.htm" alt="Sun" id=pit6>

 <area shape="rect" coords="172,58,269,166" href="sun.htm" alt="Sun">
 <area shape="rect" coords="286,58,383,166" href="sun.htm" alt="Sun">
 <area shape="rect" coords="400,58,497,166" href="sun.htm" alt="Sun">
 <area shape="rect" coords="528,58,625,166" href="sun.htm" alt="Sun">
 <area shape="rect" coords="651,58,748,166" href="sun.htm" alt="Sun">
 <area shape="rect" coords="757,58,864,166" href="sun.htm" alt="Sun">
</map>
  </body>
</html>

score 0 · Answer 1 · edited May 23 '17 at 10:32

Check in here:

Javascript check Mouse clicked inside the Circle or Polygon

meouw answer works for sure I've test it and guarantee it works. It seems that there are some other solutions, too that have been upvoted, maybe you can try them, either

pnpoly( 4, [10, 20, 10, 20], [30, 30, 40, 40], 5, 25 )

So this is the case with square you have 4 vertices wich is the first argument. Then I give the x coordinates [10, 20, 10, 20] and the y [30, 30, 40, 40] and check to see if the clicked spot (5px, 25px) is within the square.

So you can modify that for any shape with as many vertices.

how to add clickable area in a canvas

1 Answers1