Нарисуйте пунктирную рамку/контур вокруг непрозрачной части изображения на холсте

Я рисую изображение на холсте и пытаюсь применить красный пунктирный контур толщиной примерно 2 пикселя, но в итоге получается сплошной красный контур. Исходное изображение представляет собой изображение в формате PNG с верхним и нижним текстом как часть изображения, как показано в следующем примере.

Белый медведь с текстом сверху и снизу.

Я использую следующую функцию для создания красного контура:

import { saveAs } from 'file-saver';
export const genOutline = (
  imgSrc
) => {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  const refImage = new Image();
  refImage.src = imgSrc;
  refImage.style.width = "max-content";
  refImage.style.height = "max-content";
  refImage.onload = () => {
    //define hight and width of the canvas
    canvas.width = refImage.width + 30;
    canvas.height = refImage.height + 30;

    var dArr = [-1, -1, 0, -1, 1, -1, -1, 0, 1, 0, -1, 1, 0, 1, 1, 1], // offset array
      s = 2,  // thickness scale
      i = 0,  // iterator
      x = 5,  // final position
      y = 5;

    // draw images at offsets from the array scaled by s
    for (; i < dArr.length; i += 2) {
      ctx.drawImage(refImage, x + dArr[i] * s, y + dArr[i + 1] * s);
    }

    // fill with color
    ctx.globalCompositeOperation = "source-in";
    ctx.fillStyle = "red";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.

    // draw original image in normal mode
    ctx.globalCompositeOperation = "source-over";
    ctx.drawImage(refImage, x, y);

    canvas.toBlob((blob) => {
      console.info("blob", blob);
      saveAs(blob, "image_outlined.png");
      canvas.remove();
    });
  }
}

Но я хочу добиться чего-то похожего на то, что показано на следующем изображении:

Портрет девушки с текстом сверху и снизу и красным пунктирным контуром.