Отобразить интерактивный div поверх холста

Question

Im динамически создает div, который должен отображаться поверх холста в позиции, на которую пользователь нажал. Создается div, но не отображается. Id также нравится, чтобы его можно было щелкнуть как кнопка. Любой совет, что делать?

function q(event) { 
    event = event || window.event; 

    var canvas = document.getElementById('canvas'), 
    x = event.pageX - canvas.offsetLeft, 
    y = event.pageY - canvas.offsetTop; 

    var div = document.createElement('div'); 
    div.style.position = "absolute"; 
    div.style.left = x+'px'; 
    div.style.top = y+'px';   
    div.style.left = "50px"; 
    div.style.top = "50px"; 
    div.style.backgroundColor = "black"; 
    document.getElementsByTagName('canvas')[0].appendChild(div); 

} 

Answer 1

Вот демо-ролик о том, как вы можете сделать это: https://jsfiddle.net/od8zjeLp/2/

function q(event) { 
    event = event || window.event; 

    var canvas = document.getElementById('canvas-wrapper'), 
    x = event.pageX - canvas.offsetLeft, 
    y = event.pageY - canvas.offsetTop; 

    var div = document.createElement('div'); 
    div.style.position = "absolute"; 
    div.style.background = 'red'; 
    div.style.width = '10px'; 
    div.style.height = '10px'; 
    div.style.left = x + 'px'; 
    div.style.top = y + 'px'; 

    canvas.appendChild(div); 
} 

var canvas = document.getElementById('canvas-wrapper'); 
canvas.addEventListener('click', q); 

Вы можете создать оболочку вокруг элемента холста - canvas-wrapper и добавьте дивы к обертке. Дивы будут братьями и сестрами на холст, но не дети. Как обсуждалось здесь: Is it possible to force the html canvas tag to display children?

Для использования в целях производства вы можете оптимизировать код: возможно, избегайте ширины/высоты жесткого кодирования и повторно используйте элемент canvas вместо запроса DOM на каждый щелчок.