在Html5画布上渲染OpenCV垫的最好方法？

<script async src="https://docs.opencv.org/master/opencv.js" onload="onOpenCvReady();" type="text/javascript"></script>

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

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

function onOpenCvReady() {
  cv.onRuntimeInitialized = function() {
    // OpenCV.js已加载并初始化完成
    // 可以开始使用OpenCV.js的功能
  };
}

// 加载图像
const img = new Image();
img.src = 'image.jpg';
img.onload = function() {
  // 将图像绘制到画布上
  ctx.drawImage(img, 0, 0);

  // 将画布上的图像转换为OpenCV图像
  const src = cv.imread(canvas);

  // 在OpenCV图像上进行处理，例如边缘检测
  const dst = new cv.Mat();
  cv.Canny(src, dst, 50, 150);

  // 将OpenCV图像渲染到画布上
  cv.imshow(canvas, dst);

  // 释放内存
  src.delete();
  dst.delete();
};