模糊画布，窗口全宽，没有透明边缘？

Question

我正在尝试使用画布和CSS模糊滤镜来实现效果。

本质上，我需要一个100％的窗口高度和宽度的画布，可以擦除以显示坐在下面的元素。我正在使用模糊，因此形状/绘图看起来模糊（这是需要的）。

我的问题是，尽管画布过大，角落周围仍然有一个透明的边缘，显示下面的元素（即具有蓝色背景的物体）。我曾尝试过多次负面保证金/溢价黑客，但似乎无法解决它？

我需要这个画布是屏幕的全部宽度，模糊，而不是裁剪，但也许这只是如何CSS过滤器渲染，只有什么是可见的？

(function() { 
 
     
 
    // make canvas larger than window 
 
    var largeWidth = window.innerWidth * 3; 
 
    var largeHeight = window.innerHeight * 3; 
 
    function createCanvas(parent, width, height) { 
 
     var canvas = {}; 
 
     canvas.node = document.createElement('canvas'); 
 
     canvas.context = canvas.node.getContext('2d'); 
 
     canvas.node.width = largeWidth; 
 
     canvas.node.height = largeHeight; 
 
     parent.appendChild(canvas.node); 
 
     return canvas; 
 
    } 
 

 
    function init(container, width, height, fillColor) { 
 
    var canvas = createCanvas(container, 3000, 3000); 
 
    var ctx = canvas.context; 
 
    ctx.fillCircle = function(x, y, radius, fillColor) { 
 
     this.fillStyle = fillColor; 
 
     this.beginPath(); 
 
     this.moveTo(x, y); 
 
     this.arc(x, y, radius, 0, Math.PI * 2, false); 
 
     this.fill(); 
 
    }; 
 
    ctx.clearTo = function(fillColor) { 
 
     ctx.fillStyle = fillColor; 
 
     ctx.fillRect(0, 0, width, height); 
 
    }; 
 
    ctx.clearTo(fillColor || "#ddd"); 
 
    canvas.node.onmousemove = function(e) { 
 
     var x = e.pageX - this.offsetLeft; 
 
     var y = e.pageY - this.offsetTop; 
 
     var radius = 100; // or whatever 
 
     var fillColor = '#ff0000'; 
 
     ctx.globalCompositeOperation = 'destination-out'; 
 
     ctx.fillCircle(x, y, radius, fillColor); 
 
    }; 
 
    canvas.node.onmousedown = function(e) { 
 
     canvas.isDrawing = true; 
 
    }; 
 
    } 
 

 
    var container = document.getElementById('canvas'); 
 
    init(container, largeWidth, largeHeight, '#fff'); 
 

 
    })();

/* CSS: */ 
 

 
body { 
 
    background: blue; 
 
} 
 

 
#canvas { 
 
    z-index: 1; 
 
    top: 0; 
 
    left: 0; 
 
    position: fixed; 
 
    filter: blur(10px); 
 
    -webkit-filter: blur(10px); 
 
}

<div id = "canvas"></div>

请参阅我fiddle

感谢

Answer 1

解决方案1 ​​ - 又名 “今天准备”

不要模糊了你的画布，但模糊你把里面;例如：

// After filling circle 
context.shadowColor = color; 
context.shadowBlur = 16; 
context.stroke(); 

这里是一个fiddle

解决方案2 - 又名 “明天..也许”

WebKit是工作在这样的功能。但我不确定它会如你打算使用画布一样工作，也许它会将整个画布视为“模糊遮罩”，因此如果画布内的内容被擦除，它将在事件之下模糊。这里是功能：

backdrop-filter: blur(10px); 

下面是一些doc

PS：

1. 我不知道这是必要的帆布包，你没..中庸之道创建一个，编辑其属性直接！
2. 哎唷！如果您将元素大小设置为3倍，但不设置偏移量，则只能在右侧和底部溢出

Answer 2

你应该改变你的CSS如下

(function() { 
 

 
    var largeWidth = (window.innerWidth * 3)+30; 
 
    var largeHeight = (window.innerHeight * 3)+30; 
 

 
    function createCanvas(parent, width, height) { 
 

 
    var canvas = {}; 
 
    canvas.node = document.createElement('canvas'); 
 
    canvas.context = canvas.node.getContext('2d'); 
 
    canvas.node.width = largeWidth; 
 
    canvas.node.height = largeHeight; 
 
    parent.appendChild(canvas.node); 
 
    var overlay = document.getElementById("overlay"); 
 
    overlay.style.width=(largeWidth -30) +"px"; 
 
    overlay.style.height =(largeHeight-30)+"px"; 
 
    return canvas; 
 
    } 
 

 
    function init(container, width, height, fillColor) { 
 
    var canvas = createCanvas(container, 3000, 3000); 
 
    var ctx = canvas.context; 
 
    ctx.fillCircle = function(x, y, radius, fillColor) { 
 
     this.fillStyle = fillColor; 
 
     this.beginPath(); 
 
     this.moveTo(x, y); 
 
     this.arc(x, y, radius, 0, Math.PI * 2, false); 
 
     this.fill(); 
 
    }; 
 
    ctx.clearTo = function(fillColor) { 
 
     ctx.fillStyle = fillColor; 
 
     ctx.fillRect(0, 0, width, height); 
 
    }; 
 
    ctx.clearTo(fillColor || "#ddd"); 
 
    canvas.node.onmousemove = function(e) { 
 
     var x = e.pageX - this.offsetLeft; 
 
     var y = e.pageY - this.offsetTop; 
 
     var radius = 100; // or whatever 
 
     var fillColor = '#ff0000'; 
 
     ctx.globalCompositeOperation = 'destination-out'; 
 
     ctx.fillCircle(x, y, radius, fillColor); 
 
    }; 
 
    canvas.node.onmousedown = function(e) { 
 
     canvas.isDrawing = true; 
 
    }; 
 
    } 
 

 
    var container = document.getElementById('canvas'); 
 
    init(container, largeWidth, largeHeight, '#fff'); 
 

 
})();

body { 
 
    background: blue; 
 
} 
 
#canvas { 
 
    margin: -15px; 
 
    filter: blur(10px); 
 
    -webkit-filter: blur(10px); 
 
    position: relative; 
 
} 
 
#overlay { 
 
    overflow:hidden; 
 
    position: fixed; 
 
    top: 0px; 
 
    left: 0px; 
 
    z-index: 1; 
 
    filter: unset; 
 
    -webkit-filter: unset; 
 
    }

<div id="overlay"> 
 
<div id="canvas"> 
 
</div> 
 
</div>

Answer 3

您可以从画布中删除过滤器并使用gradient brush实现相同。

(function() { 
 
     
 
    // make canvas larger than window 
 
    var largeWidth = window.innerWidth * 3; 
 
    var largeHeight = window.innerHeight * 3; 
 
    function createCanvas(parent, width, height) { 
 
     var canvas = {}; 
 
     canvas.node = document.createElement('canvas'); 
 
     canvas.context = canvas.node.getContext('2d'); 
 
     canvas.node.width = largeWidth; 
 
     canvas.node.height = largeHeight; 
 
     parent.appendChild(canvas.node); 
 
     return canvas; 
 
    } 
 

 
    function init(container, width, height, fillColor) { 
 
    var canvas = createCanvas(container, 3000, 3000); 
 
    var ctx = canvas.context; 
 
    ctx.fillCircle = function(x, y, radius, fillColor) { 
 
     this.fillStyle = fillColor; 
 
     this.beginPath(); 
 
     this.moveTo(x, y); 
 
     this.arc(x, y, radius, 0, Math.PI * 2, false); 
 
     this.fill(); 
 
    }; 
 
    ctx.clearTo = function(fillColor) { 
 
     ctx.fillStyle = fillColor; 
 
     ctx.fillRect(0, 0, width, height); 
 
    }; 
 
    ctx.clearTo(fillColor || "#ddd"); 
 
    canvas.node.onmousemove = function(e) { 
 
     var x = e.pageX - this.offsetLeft; 
 
     var y = e.pageY - this.offsetTop; 
 
     var radius = 100; // or whatever 
 
     var fillColor = '#ff0000'; 
 
     var radgrad = ctx.createRadialGradient(x,y,0,x,y,radius); 
 

 
     radgrad.addColorStop(0, 'rgba(255,0,0,1)'); 
 
     radgrad.addColorStop(0.6, 'rgba(228,0,0,.6)'); 
 
     radgrad.addColorStop(1, 'rgba(228,0,0,0)'); 
 

 
     ctx.globalCompositeOperation = 'destination-out'; 
 
     ctx.fillCircle(x, y, radius, radgrad); 
 
    }; 
 
    canvas.node.onmousedown = function(e) { 
 
     canvas.isDrawing = true; 
 
    }; 
 
    } 
 

 
    var container = document.getElementById('canvas'); 
 
    init(container, largeWidth, largeHeight, '#fff'); 
 

 
    })();

/* CSS: */ 
 

 
body { 
 
    background: blue; 
 
} 
 

 
#canvas { 
 
    z-index: 1; 
 
    top: 0; 
 
    left: 0; 
 
    position: fixed; 
 
    
 
}

<div id = "canvas"></div>