如何让多个形状出现在同一屏幕上？

<canvas id="myCanvas" width="800" height="600"></canvas>

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

// 绘制矩形
ctx.fillStyle = "red";
ctx.fillRect(50, 50, 100, 100);

// 绘制圆形
ctx.fillStyle = "blue";
ctx.beginPath();
ctx.arc(200, 200, 50, 0, 2 * Math.PI);
ctx.fill();

canvas.addEventListener("click", function(event) {
  const rect = canvas.getBoundingClientRect();
  const x = event.clientX - rect.left;
  const y = event.clientY - rect.top;
  
  // 绘制新的形状
  ctx.fillStyle = "green";
  ctx.fillRect(x, y, 50, 50);
});