如何在点击按钮时在容器上绘制线条

#container {
  width: 500px;
  height: 300px;
  position: relative;
}

var button = document.getElementById("button");
button.addEventListener("click", drawLine);

function drawLine() {
  var container = document.getElementById("container");
  var canvas = document.createElement("canvas");
  canvas.width = container.offsetWidth;
  canvas.height = container.offsetHeight;
  container.appendChild(canvas);
}

function drawLine() {
  var container = document.getElementById("container");
  var canvas = document.createElement("canvas");
  canvas.width = container.offsetWidth;
  canvas.height = container.offsetHeight;
  container.appendChild(canvas);

  var context = canvas.getContext("2d");
  context.beginPath();
  context.moveTo(0, 0);
  context.lineTo(canvas.width, canvas.height);
  context.stroke();
}

function drawLine() {
  var container = document.getElementById("container");
  var canvas = document.createElement("canvas");
  canvas.width = container.offsetWidth;
  canvas.height = container.offsetHeight;
  container.appendChild(canvas);

  var context = canvas.getContext("2d");
  context.beginPath();
  context.moveTo(0, 0);
  context.lineTo(canvas.width, canvas.height);
  context.strokeStyle = "red";
  context.lineWidth = 2;
  context.stroke();
}