Untitled

<!DOCTYPE HTML>
<html>
  <body>
    <canvas id="myCanvas" width="1000" height="700" style="background-color:black"></canvas>
    <script>
          var arrayMaps=[];
          var cadena ="";
              var circle;
              function getMousePos(canvas, evt) {
                return {
                  x: evt.clientX,
                  y: evt.clientY
                };
              }
              var canvas = document.getElementById('myCanvas');
              var context = canvas.getContext('2d');
              var img = new Image();
              img.src = "img.jpg";

                canvas.addEventListener('mousedown', function(evt) {
                var mousePos = getMousePos(canvas, evt);
                var message = 'posicion del mouse: x: ' + mousePos.x + ', y: ' + mousePos.y;
                arrayMaps.push(mousePos.x);
                arrayMaps.push(',');
                arrayMaps.push(mousePos.y);
                arrayMaps.push(',');
                cadena+= mousePos.x;
                cadena+= ',';
                cadena+= mousePos.y;
                cadena+= ',';

                console.log(message);
                console.log(cadena);

                circle.beginPath();
                circle.arc(mousePos.x-7,mousePos.y-7,5,0,Math.PI*2,true);
                circle.fill();
              }, false);

              (function(){
                 circle = canvas.getContext('2d');
                 circle.fillStyle ="black";
              })();
              img.onload = function(){
              context.drawImage(img, 100, 50);
            }
    </script>
  </body>
</html>