Javascript 在画布顶部显示可单击的div

Im动态创建一个div，该div应该显示在画布顶部用户单击的位置。正在创建div，但未显示。我也希望它可以像按钮一样点击。有什么建议吗

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);

}

---

下面是有关如何执行此操作的快速演示：

您可以围绕canvas元素创建一个包装器-

canvas包装器

，并将div添加到包装器中。div将是画布的兄弟，但不是孩子。正如这里所讨论的：

---

对于生产使用，您可能希望优化代码：可能避免硬编码宽度/高度，并重用canvas元素，而不是在每次单击时查询DOM。

div是否有高度和宽度？还是背景色？这些东西有助于看到它。@miles是的，它确实很好笑。我的错，我想，我无意中删除了它，而没有注意到我在发布这个抱歉。看起来你正在设置左和右两次。将第二个改为高度和宽度。非常感谢，我可以根据我的想法取得一些进展。当然，我只是为了测试而硬编码。

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);