在Javascript中创建下拉菜单-画布上没有显示

<select id="myDropdown">
  <option value="option1">选项1</option>
  <option value="option2">选项2</option>
  <option value="option3">选项3</option>
</select>

var dropdown = document.getElementById("myDropdown");

dropdown.addEventListener("change", function() {
  var selectedOption = dropdown.options[dropdown.selectedIndex].value;
  console.log("选择了：" + selectedOption);
});

<canvas id="myCanvas"></canvas>

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

// 绘制下拉菜单外观
ctx.fillStyle = "lightgray";
ctx.fillRect(0, 0, canvas.width, canvas.height);

ctx.font = "16px Arial";
ctx.fillStyle = "black";
ctx.fillText("选项1", 10, 30);
ctx.fillText("选项2", 10, 50);
ctx.fillText("选项3", 10, 70);