在onload期间在<img/>周围用画布绘制阴影

Question

HTML：

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

CSS：

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

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

当图像加载到我的标签中时，我想在图像周围画一个阴影。 我怎么能用画布做到这一点？

我尝试了以下代码，但有了它，我需要创建一个新的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)
    });