Можно ли создать в canvas blur эффект на фото при mousemove?

let s = 44; // size of area to be blurred 
let kernel =[[0,0,1,0,0], 
             [0,1,2,1,0], 
             [1,2,3,2,1], 
             [0,1,2,1,0], 
             [0,0,1,0,0]]; 
 
let ctx = canvas.getContext('2d'); 
let total = kernel.flatMap(i => i).reduce((a, i) => a + Math.abs(i)),  
    ks = (kernel.length-1)/2, // half of kernel size - 1 (pixels around center) 
    s2 = s/2, // half size of area to be blurred 
    sks2 = s+ks*2; // size of area of pixels needed to be processed 
 
img.onload = e => ctx.drawImage(img, 0, 0); 
addEventListener('mousedown', e => draw = true) 
addEventListener('mouseup', e => draw = false) 
addEventListener('mousemove', e => { 
  if (!window.draw) return; 
  var input = ctx.getImageData(e.layerX-s2-ks, e.layerY-s2-ks, sks2, sks2); 
  var output = ctx.createImageData(s, s);  
  for (var x = 0; x < s; x++)  
    for (var y = 0; y < s; y++)  
      handlePixel(input, output, x, y) 
  ctx.putImageData(output, e.layerX - s2, e.layerY - s2)  
}) 
 
function handlePixel(i, o, x, y) { 
    let offset = (y * s + x) * 4; // offset in output data (4=rgba) 
    for (var kx = -ks; kx <= ks; kx++)  
        for (var ky = -ks; ky <= ks; ky++) { 
            let off = ((y+ks) * sks2 + (x+ks) + kx + ky * sks2) * 4; //offset in input 
            for (var n = 0; n < 3; n++)  
                o.data[offset + n] += kernel[kx+ks][ky+ks] * i.data[off+n] / total; 
        } 
    o.data[offset + 3] = 255; // always opaque 
}

<canvas id="canvas" width="500" height="500"></canvas> 
<img id="img" src="https://picsum.photos/500/500" crossOrigin="anonymous"> 
<style>body{margin:0}img {display:none;}</style>