Проблема, связанная с отображением тепла, множественный ответ

Question

Я пытаюсь выбрать на изображении разные разделы, для каждого раздела Мне нужно получить координаты (у меня есть до тех пор, пока не получена одна координата ответа, и я счастливо!) Дело в том, что, делая несколько кругов, я теряюсь на 3 предметах.

Сначала мне нужен мой плохой реализованный цикл в такт Копание мои коробки я просто не могу найти, почему «я» не меняется по щелчку ...

Вторая кнопка, которая получает свою петлю обратно 0 и стирает круги на холсте

Третьего не более 5 кругов могут быть размещены ...

я попал в точку, где мой вопрос слишком специфичны для исследования я думаю? :(и я только начинаю с javascript здесь ... пожалуйста, помогите мне,

Вот моя скрипка спасибо за вашу помощь, и если это сработает для вас, я оставил ответ на один ответ там прокомментировал = 3

http://plnkr.co/edit/ja9fNtOyd8lzH6BekDpo?p=preview

<div id="Click">Seleccione las áreas de la imagen que más le gustan </div> 
<br><br><br><br><br><br><br> 
<img src="http://i332.photobucket.com/albums/m340/carlospatino21/megaman-5.jpg" alt="" border="0" id="mmc"> 
<style> 
    #myCanvas 
    { 
    position: absolute; 
    left: 0px; 
    top: 30px; 
    background-color: transparent; 
    opacity:0.5; 
    border-style: dotted;; 
    max-width:295px; 
    max-height:337px; 
    width: auto; 
    height: auto; 
    display: block; 


    } 

    #mmc 
    { 
    position: absolute; 
    left: 0px; 
    top: 30px; 
    z-index: 0; 
    display: block; 
    max-width:295px; 
    max-height:337px; 
    width: auto; 
    height: auto; 

    } 
    #Click 
    { 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    z-index: 1; 

    } 

</style> 




    <canvas id="myCanvas" width="295px" height="337px" onclick="evt2()" ></canvas> 


    <script> 
    function writeMessage(canvas, message) { 
      var context = canvas.getContext('2d'); 
      context.clearRect(0, 0, canvas.width, canvas.height); 
      context.font = '15pt Calibri'; 
      context.fillStyle = 'black'; 
      context.fillText(message, 10, 25);} 

function getMousePos(canvas, evt) { 
     var rect = canvas.getBoundingClientRect(); 
     return { 
      x: evt.clientX - rect.left, 
      y: evt.clientY - rect.top 
     }; 
     } 
     var canvas = document.getElementById('myCanvas'); 
     var context = canvas.getContext('2d'); 

     canvas.addEventListener('click', function(evt) { 
     var mousePos = getMousePos(canvas, evt); 
     var message = 'Mouse position: ' + mousePos.x + ',' + mousePos.y; 


    var centerX = event.clientX ; 
    var centerY = event.clientY - 30 ; 

    context.beginPath(); 
    context.arc(centerX, centerY,20,0, 2 * Math.PI); 
    context.fillStyle = 'green'; 
    context.fill(); 
    context.lineWidth = 1; 
    context.strokeStyle = '#003300'; 
    context.stroke(); 

     }, false); 

//function evt2(){ 
//document.getElementById("canvas1_NewVar1").value = event.clientX + ',' + (event.clientY-30);} 

var d = "canvas1_NewVar"; 


for (var i = 1; i < 5; i++) 
    onclick = (function(){return function evt2() { 
document.getElementById(d+i).value = event.clientX + ',' + (event.clientY-30) 
};})(i); 





    </script> 

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
<input id="canvas1_NewVar1" type="text" size="20" class="puntos" onclick="evt2()" > 
<input id="canvas1_NewVar2" type="text" size="20" class="puntos" onclick="evt2()" > 
<input id="canvas1_NewVar3" type="text" size="20" class="puntos" onclick="evt2()" > 
<input id="canvas1_NewVar4" type="text" size="20" class="puntos" onclick="evt2()" > 
<input id="canvas1_NewVar5" type="text" size="20" class="puntos" onclick="evt2()" > 

Answer 1

Ahm хорошо я получил первую часть вниз!

теперь она циклов между 5 коробок, я теперь программа кнопка отмены, который я понятия не имею, как это сделать ... если я это сделаю, то я обновлю

Я просто изменил (а) строки после:

var d = "canvas1_NewVar";

var i = 1; 



function evt2() { 
document.getElementById(d+i).value = event.clientX + ',' + (event.clientY-30) 
; 
i += 1; 

}; 

Я создал кнопку, которая перегружает страницу ... это было бы удивительным, чтобы иметь что-то, чтобы вернуться на один шаг, но мне нужно, чтобы удалить точку на холсте, сотрите значение на поле и вернуться 1 значение по значению «i» ... кажется, похоже на жесткий O_o