Нажмите событие canvas/javascript

Question

Привет всем Я пытался сделать мои прямоугольники интерактивными. После того, как это сработало, я сказал, что когда я нажимаю на прямоугольник, который показывает данные в div. В настоящий момент данные в div canvas являются справочными. Возможно ли со сценарием, что я должен делать то, что я хочу, или я должен начать снова, но сделать его совершенно другим ???

for (var i = 0; i < rects.length; i++) { 
    if (x > rects[i][0] && x < rects[i][0] + rects[i][2] && y > rects[i][1] && y < rects[i][1] + rects[i][3]) 
    { 
     alert('Rectangle ' + i + ' clicked'); 
    } 
} 

Это то, что у меня было. Я не знаю, как изменить оповещение на то, что я хочу.

(За весь HTML страницы)

http://fiddle.jshell.net/f6rLds4g/

Answer 1

Установка innerHTML на DIV будет работать:

for (var i = 0; i < rects.length; i++) { 
    if (x > rects[i][0] && x < rects[i][0] + rects[i][2] && y > rects[i][1] && y < rects[i][1] + rects[i][3]) { 
     var container = document.createElement("span"); 
     span.innerHTML = 'Rectangle ' + i + ' clicked'; 
     document.getElementById("Display").appendChild(span); 
    } 
}