Blur HTML5 холст выпуск

Question

Canvas не позволяет мне использовать URL других доменов и отображает междоменную ошибку.

Я должен использовать эту демонстрацию https://tympanus.net/Development/FlowmapDeformation/index3.html, но у меня возникают некоторые проблемы с frontend.

На переднем конце демонстрации показаны размытые изображения SVG на холсте.

Использование демонстрации ниже вершины и фрагмента:

const vertex = `
    attribute vec2 uv;
    attribute vec2 position;
    varying vec2 vUv;
    void main() {
        vUv = uv;
        gl_Position = vec4(position, 0, 1);
    }
`;
const fragment = `
    precision highp float;
    precision highp int;
    uniform sampler2D tWater;
    uniform sampler2D tFlow;
    uniform float uTime;
    varying vec2 vUv;
    uniform vec4 res;

    void main() {
        // R and G values are velocity in the x and y direction
        // B value is the velocity length
        vec3 flow = texture2D(tFlow, vUv).rgb;

        vec2 uv = .5 * gl_FragCoord.xy / res.xy ;

        vec2 myUV = (uv - vec2(0.5))*res.zw + vec2(0.5);
        myUV -= flow.xy * (0.15 * 0.5);
        vec3 tex = texture2D(tWater, myUV).rgb;

        gl_FragColor.rgb = vec3(tex.r, tex.g, tex.b);
        gl_FragColor.a = tex.r;
    }
`;

Код изображения SVG:

let imgSize = [1600, 1200];
const img = new Image();
img.onload = () => (texture.image = img);
img.crossOrigin = "Anonymous";

img.src = "img/Alienation.svg";

const program = new Program(gl, {
    vertex,
    fragment,
    uniforms: {
      uTime: { value: 0 },
      tWater: { value: texture },
      res: {
        value: new ogl.Vec4(window.innerWidth, window.innerHeight)
      },
      img: { value: new ogl.Vec2(imgSize[0], imgSize[1]) },
      tFlow: flowmap.uniform
    }
  });

См. Исходное изображение SVG - https://tympanus.net/Development/FlowmapDeformation/img/Alienation.svg

Проверьте прилагаемый снимок экрана для получения дополнительной информации .