RAX7

const saveImage = () => {
  const image = document.querySelector("img");
  const canvas = document.createElement("canvas");
  const ctx = canvas.getContext("2d");

  canvas.width = 300;
  canvas.height = 200;
  
  ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
  ctx.lineWidth = 5;
  ctx.strokeStyle = "red";
  ctx.strokeRect(0, 0, canvas.width, canvas.height);
  document.body.appendChild(canvas);
};

saveImage();

либо

const saveImage = () => {
  const image = document.querySelector("img");
  const canvas = document.createElement("canvas");
  const ctx = canvas.getContext("2d");

  canvas.width = 300;
  canvas.height = 200;

  ctx.translate(canvas.width / 2, canvas.height / 2);

  ctx.drawImage(
    image,
    -canvas.width / 2,
    -canvas.height / 2,
    canvas.width,
    canvas.height
  );

  ctx.lineWidth = 5;
  ctx.strokeStyle = "red";
  ctx.strokeRect(
    -canvas.width / 2,
    -canvas.height / 2,
    canvas.width,
    canvas.height
  );

  document.body.appendChild(canvas);
};

saveImage();

https://jsfiddle.net/9xqm23yb/

Такие штуки проще на svg делать

Скорее всего этот эффект сделан на основе шума Перлина
Можно сделать примерно так:

Библиотека RainyDay.js достаточно старая, поэтому придется делать вот таким костыльным способом.

Можно сделать простой эффект на css

Можно более сложный на WebGl

Используй easing функции
https://easings.net/ru
https://gist.github.com/gre/1650294

см строки 47 и 83
не используй map там, где нужен forEach

https://developer.mozilla.org/ru/docs/Web/API/Canv...
https://developer.mozilla.org/en-US/docs/Web/API/C...

Дождись когда page.render отрисует pdfку на холсте, после этого уже можно будет использовать canvas.toDataURL.

const renderTask = page.render(renderContext).promise;

renderTask.then(() => {
  var img = new Image();
  img.src = canvas.toDataURL();
  img.onload = () => document.body.appendChild(img);
});

// Output Avatar 1
  ctx.save(); // <- сохраняем контекст
  ctx.beginPath();
  ctx.arc(125, 125, 100, 0, Math.PI * 2, true);
  ctx.closePath();
  ctx.clip();

  const avatar1 = await loadImage(member.user.displayAvatarURL({ format: 'jpg' }));
  ctx.drawImage(avatar1, 25, 25, 200, 200);
  ctx.restore(); // <- восстанавливаем контекст

тоже самое повторить со 2-ой картинкой

Думаю придется переписать на webGL. Проще всего с использованием PIXIJS, для него есть готовый фильтр motion blur https://pixijs.io/pixi-filters/tools/demo/

Рисуй логотип внутри паттерна и для анимации задавай трансформацию для паттерна.

https://developer.mozilla.org/en-US/docs/Web/API/C...