Javascript 在周围用画布绘制阴影<；img>；加载期间

HTML:

<div id="presentationViewContainer">
    <img id="presentationView" />
</div>

#presentationViewContainer {
  display : none;
  position: absolute;
  width: 573px;
  height: 516px;
  margin: 10px;
}

#presentationView {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

当图像加载到标记中时，我想在图像周围画一个阴影。 如何使用canvas进行此操作

我尝试了以下代码，但使用它，我需要创建一个新的div元素：

$( "#presentationView" ).load(function(evt) {
      // Handler for .load() called.
      var image = evt.target;
            var w = image.width;
            var h = image.height;

            var canvas = document.getElementById('canvas');
            var g = canvas.getContext('2d');
            g.shadowColor = "#000000";
            g.shadowBlur = 10;
            g.shadowOffsetX = 0;
            g.shadowOffsetY = 0;
            g.drawImage(image, 20, 20);
            g.fillText("Text shadow in canvas", 10, 20)
    });

---

在DOM中是否有id为

canvas

的canvas元素？是的，但是是否可以动态修改

标记？当然可以。修改为什么？