WebGLを描写しているcanvasを、canvasの2D Contextのfilterでぼかす

AR的なツールで遊んでいる際に、ツール側はCanvasにWebGLを用いて描写をしており、この場合canvasのfilterは使えない

• canvasには2d、webgl、webgl2、bitmaprendererなどがある模様
  • https://developer.mozilla.org/ja/docs/Web/API/HTMLCanvasElement/getContext
• 下記の通りCanvasRenderingContext2Dにはfilterが存在するが、
  • https://developer.mozilla.org/ja/docs/Web/API/CanvasRenderingContext2D
• webglには存在しない
  • https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext

WebGLなんて5年以上前にThree.js触ったとき以来で全く覚えておらず、「ぼかし」を入れたいだけなのにWebGLを学び直す気もしないという感じだったので困っていた。
2Dに転写してからぼかせばよい感じらしい

<canvas id="canvas-webgl" style="display:none"></canvas>
<canvas id="canvas-2d"></canvas>

const canvas = document.getElementById('canvas-webgl'); // これはツールで指定しててよしなに変更されている
const canvas2d = document.getElementById("canvas-2d"); // これは上で記載しただけで何もしていない
const ctx = canvas2d.getContext('2d');
// const ctx = canvas.getContext('2d'); // これは取れない
// const ctx = canvas.getContext('webgl'); // これなら取れる場合
ctx.filter = 'blur(5px)'; // 数値はテキトー
ctx.shadowBlur = 5;

draw2DCanvas(); // webglの描写前に実行すると動かない
// canvasはVideoが動いているのでよしなに描写し続ける
function draw2DCanvas(){
    ctx.clearRect(0,0, canvas2d.width, canvas2d.height);
    ctx.drawImage(canvas, 0, 0); // ここで転写
    requestAnimationFrame(draw2DCanvas); // videoなので繰り返し描写
}