如何在div中显示的图像上绘制矩形框？

<div id="imageContainer">
  <canvas id="canvas"></canvas>
</div>

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

var image = new Image();
image.src = "path/to/image.jpg";
image.onload = function() {
  canvas.width = image.width;
  canvas.height = image.height;
  ctx.drawImage(image, 0, 0);
};

function drawRectangle(x, y, width, height) {
  ctx.strokeStyle = "red";
  ctx.lineWidth = 2;
  ctx.beginPath();
  ctx.rect(x, y, width, height);
  ctx.stroke();
}

drawRectangle(100, 100, 200, 150);