Как размыть fillRect на холсте с помощью Javascript

Question

Я хочу сделать что-то подобное на холсте с помощью Javascript.

Я хочу, чтобы размыть квадрат. Я искал его в Интернете, но ничего не нашел. Если мне не нужно использовать внешнюю JS-библиотеку, это будет лучше.

[EDIT] Я не ссылаюсь на Finder Icon, но квадрат, который за ней [/ EDIT]

Answer 1

StackOverflow Кен Фирстенберг является автором очень хороший размытости сценарий здесь:.

https://github.com/epistemex/realtime-blur-js

Вот пример, используя размытость Кена плюс подкрашенную 25% непрозрачный прямоугольник:

var canvas=document.getElementById("canvas"); 
 
var ctx=canvas.getContext("2d"); 
 
var cw=canvas.width; 
 
var ch=canvas.height; 
 

 
var img=new Image(); 
 
img.onload=start; 
 
img.src="https://dl.dropboxusercontent.com/u/139992952/multple/wingedLion.jpg"; 
 
function start(){ 
 

 
    var tempcanvas=document.createElement("canvas"); 
 
    var tctx=tempcanvas.getContext("2d"); 
 

 
    cw=canvas.width=tempcanvas.width=img.width; 
 
    ch=canvas.height=tempcanvas.height=img.height; 
 

 
    var x=50; 
 
    var y=250; 
 
    var w=325; 
 
    var h=75; 
 

 
    tctx.drawImage(img,0,0); 
 

 
    var rtblur; 
 
    rtblur=new RTBlur({source:tempcanvas}); 
 
    rtblur.blur(0.50,tctx); 
 

 
    ctx.drawImage(img,0,0); 
 

 
    ctx.drawImage(tempcanvas, x,y,w,h, x,y,w,h); 
 

 
    ctx.fillStyle='tan'; 
 
    ctx.globalAlpha=0.250; 
 
    ctx.fillRect(x,y,w,h); 
 
    ctx.globalAlpha=1.00; 
 
    ctx.strokeStyle='darkgray'; 
 
    ctx.lineWidth=2; 
 
    ctx.strokeRect(x,y,w,h); 
 

 
    ctx.font='18px verdana'; 
 
    ctx.fillStyle='white'; 
 
    ctx.fillText('A rect with blurred background',x+20,y+30); 
 
    ctx.fillText('and a tan 25% opacity tint',x+20,y+55); 
 

 
}

body{ background-color: ivory; padding:10px; } 
 
canvas{border:1px solid red;}

<script src="https://cdn.rawgit.com/epistemex/realtime-blur-js/master/rtblur.js"></script> 
 
<canvas id="canvas" width=300 height=300></canvas>