如何创建包含画布的弹出窗口？

<button id="openButton">打开弹出窗口</button>

#popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  height: 300px;
  background-color: #fff;
  border: 1px solid #ccc;
  display: none;
}

// 获取按钮和弹出窗口元素
var openButton = document.getElementById("openButton");
var popup = document.getElementById("popup");

// 点击按钮时显示弹出窗口
openButton.addEventListener("click", function() {
  popup.style.display = "block";
  
  // 创建画布
  var canvas = document.createElement("canvas");
  canvas.width = 300;
  canvas.height = 200;
  
  // 在弹出窗口中添加画布
  popup.appendChild(canvas);
});

// 点击弹出窗口以外的区域时隐藏弹出窗口
window.addEventListener("click", function(event) {
  if (event.target == popup) {
    popup.style.display = "none";
  }
});