Javascript HTML画布视频上的SVG过滤器

所以我想在画布上创建小故障效果，从网络摄像头中获取每一帧。代码如下。这里是代码，只有当宽度：200px高度：200px将此值更改为宽度：600px高度：400px（容器大小）时，该代码才起作用，小故障效应停止工作。下面是一些代码，您可以在其中更改canvas.width、canvas.height的值，并自己查看。有人知道这是什么原因吗？如何解决？或者这是对恋物癖的某种限制

const addEffect=（元素、过滤器）=>{
element.style.webkitFilter=`url（#${filter}）`；
element.style.mozFilter=`url（#${filter}）`；
element.style.filter=`url（#${filter}）`；
};
常量runEffect=（）=>{
const turb=document.querySelector（“#位移混乱”）；
const turbVal={val:0.000001}；
常数btTl=新的时间线({
是的，
onUpdate（）{
setAttribute（'baseFrequency'，'0${turbVal.val}`）；
},
});
btTl.to（turbVal，0.2，{val:0.3}）；
btTl.to（turbVal，0.2，{val:0.000001}）；
btTl.restart（）；
};
const URL=window.URL | | | window.webkitURL | | | window.mozURL | | window.msURL；
const video=document.createElement（'video'）；
navigator.mediaDevices.getUserMedia({
视频：没错，
})。然后（（流）=>{
video.src=URL.createObjectURL（流）；
});
const canvas=document.querySelector（“#canvas”）；
const ctx=canvas.getContext（'2d'）；
addEffect（画布，“置换”）；
setInterval（（）=>runEffect（），1000）；
常量循环=（）=>{
ctx.drawImage（视频，0，0，canvas.width，canvas.height）；
请求动画帧（循环）；
};
loop（）
.container{
保证金：0自动；
宽度：600px；
高度：400px；
边缘顶部：100px；
盒影：1px 1px 20px#666；
位置：相对位置；
}
.容器>画布{
位置：绝对位置；
背景色：红色；
混合模式：变暗；
}
svg{
位置：绝对位置；
宽度：0；
身高：0；
}
当画布较大时，似乎存在一些错误，导致画布重绘速度不够快。您可以通过调整CSS属性（如下面示例中的不透明度）强制它重画


const addEffect=（元素、过滤器）=>{
element.style.webkitFilter=`url（#${filter}）`；
element.style.mozFilter=`url（#${filter}）`；
element.style.filter=`url（#${filter}）`；
};
常量runEffect=（）=>{
const turb=document.querySelector（“#位移混乱”）；
const turbVal={val:0.000001}；
常数btTl=新的时间线({
是的，
onUpdate（）{
setAttribute（'baseFrequency'，'0${turbVal.val}`）；
},
});
btTl.to（turbVal，0.2，{val:0.3}）；
btTl.to（turbVal，0.2，{val:0.000001}）；
btTl.restart（）；
};
const URL=window.URL | | | window.webkitURL | | | window.mozURL | | window.msURL；
const video=document.createElement（'video'）；
navigator.mediaDevices.getUserMedia({
视频：没错，
})。然后（（流）=>{
video.src=URL.createObjectURL（流）；
});
const canvas=document.querySelector（“#canvas”）；
const ctx=canvas.getContext（'2d'）；
addEffect（画布，“置换”）；
setInterval（（）=>runEffect（），1000）；
/**
*使用hack强制画布重新绘制
*/
常量刷新画布=函数（）{
let on=真；
return（）=>{
on=！on；
canvas.style.opacity=on？1:0.999；
}
}();
常量循环=（时间戳）=>{
ctx.drawImage（视频，0，0，canvas.width，canvas.height）；
refreshCanvas（）；//呼叫我们的黑客
请求动画帧（循环）；
};
loop（）
.container{
保证金：0自动；
宽度：600px；
高度：400px；
边缘顶部：100px；
盒影：1px 1px 20px#666；
位置：相对位置；
}
.容器>画布{
位置：绝对位置；
背景色：红色；
混合模式：变暗；
}
svg{
位置：绝对位置；
宽度：0；
身高：0；
}

什么会停止工作？我改变了大小，但看起来效果不错。@Sphinx，小故障效果停止工作，当设置canvas.width=600，canvas.height=400时