Javascript 为什么可以'；我不能在舞台上画元素吗？

小提琴-

这是web设计应用程序的入门模板。（除了绘图问题外，几乎没有其他问题）

元素像这样被吸引到舞台上

// Handles Drawable Elements
$("#canvas").on('mousedown touchstart', function(e) {
  if(drawable) {
    drawing = true;
    mS.x = e.pageX;
    mS.y = e.pageY;
    dBox = $("<" + $('.draw-elements input[type=radio]:checked').val() + " class='box' />")
            .html("Certains textes");
    $(this).append(dBox);
    
    // Do not select text when drawing
    return false;
  }
});
$(document).on('mousemove touchmove', function(e) {
  if(drawing && drawable){
    var mPos = {x:e.pageX, y:e.pageY};
    var css = {};
      css.position   = 'absolute';
      css.left       = (mPos.x > mS.x) ? mS.x : mPos.x;
      css.top        = (mPos.y > mS.y) ? mS.y : mPos.y;
      css.width      = Math.abs(mPos.x - mS.x);
      css.height     = Math.abs(mPos.y - mS.y);
      css.border = '1px dotted rgb(0, 34, 102)';
      dBox.css(css);
    
    // Do not select text when drawing
    return false;
  }
}).on('mouseup touchend', function(e) {
  drawing  = false;
});

---

我不明白出了什么问题。

我不知道如何解决最初的问题。所以我决定做一个变通

这是小提琴：

我决定在每次单击工具时刷新画布。我获取画布的html并将其设置为textarea的值。然后我将textarea的值设置为画布的html

$("#code").val($("#canvas").html());
$("#canvas").html($("#code").val());

这样，任何所谓的初始错误都会被完全删除。然而，上次我这样做时，所有的空格都变成了

，也就是所谓的a（我也看到了这也会在不需要的时候添加不必要的换行符和段落）

我仍然不明白为什么我的draw功能在drag关闭时不起作用

我真的很讨厌这样做（刷新画布），因为其中的元素越多，刷新的次数越多，它使用的ram越多，这使得浏览器的cpu工作起来就越困难

我希望有人能想出更好的解决办法

$("#code").val($("#canvas").html());
$("#canvas").html($("#code").val());