Search code examples
canvashtml5-canvaskonvajskonva

Konva/Canvas Background Blur / Frosted Glass effect

I'm using Konva/Canvas to draw multiple semi-transparent rectangles z-ordered. At the moment, this looks like the right side of the following image.

enter image description here

Now, I want to achieve something which is called "Frosted Glass Effect" / "Background Blur" which you can see on the left. The idea is that overlapping parts of the rectangles below a semi transparent rectangle will be blurred.

How to do this in Konva or with plain Canvas?

Solution

  • It may be very hard to get this effect using 2D canvas API.

    If you have static shapes, you can try to "cut and copy" a part that you want to blur and apply the effect just on it.

    Another possible solution is to use backdrop-filter from CSS and draw rectangle div over canvas and apply this filter on it, it will blur part of canvas content.

    On the demo, you can try to drag red square to see how "cut and paste" is working.

    And blue square is working in combination of div with CSS filters.

    const stage = new Konva.Stage({
  container: 'container',
  width: window.innerWidth,
  height: window.innerHeight
});

const layer = new Konva.Layer();
stage.add(layer);

const rect1 = new Konva.Rect({
  x: 50,
  y: 50,
  width: 100,
  height: 100,
  fill: 'green'
});
layer.add(rect1);

const group = new Konva.Group({
  x: 100,
  y: 100,
  draggable: true,
})
layer.add(group);

const rect2 = new Konva.Rect({
  width: 50,
  height: 50,
  fill: 'green',
  filters: [Konva.Filters.Blur],
  blurRadius: 20,
});
group.add(rect2);
rect2.cache({ width: 70, height: 70 });

const rect3 = new Konva.Rect({
  width: 100,
  height: 100,
  fill: 'red',
  opacity: 0.4
});
group.add(rect3);


const rect4 = new Konva.Rect({
  y: 100,
  fill: 'blue',
  width: 100,
  height: 100,
  opacity: 0.5,
  draggable: true
});
layer.add(rect4);

const blurEl = document.createElement('div');
stage.content.appendChild(blurEl);
Object.assign(blurEl.style, {
  position: 'absolute',
  width: rect4.width()+ 'px',
    height: rect4.height()+ 'px',
  backdropFilter: 'blur(2px)',
  pointerEvents: 'none'
});

function updateBlur() {
   Object.assign(blurEl.style, {
    top: rect4.y() + 'px',
    left: rect4.x() + 'px'
  });
}
updateBlur();

rect4.on('dragmove', () => {
    updateBlur();
})
    <script src="https://unpkg.com/konva@^8/konva.min.js"></script>
<div id="container"></div>