HTML5 Canvas Blur Image Filter Tutorial

To apply filter to an Konva.Image, we have to cache it first with cache() function. Then apply filter with filters() function.

To blur an image with Konva, we can use the Konva.Filters.Blur filter and set the blur amount with the blurRadius property.

Instructions: Slide the control to adjust the blur radius.

For all available filters go to Filters Documentation.

Vanilla

import Konva from 'konva';

const width = window.innerWidth;
const height = window.innerHeight;

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

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

const imageObj = new Image();
imageObj.onload = () => {
  const image = new Konva.Image({
    x: 50,
    y: 50,
    image: imageObj,
    draggable: true,
  });

  layer.add(image);

  image.cache();
  image.filters([Konva.Filters.Blur]);
  image.blurRadius(10);

  const slider = document.createElement('input');
  slider.type = 'range';
  slider.min = '0';
  slider.max = '40';
  slider.value = image.blurRadius();

  slider.style.position = 'absolute';
  slider.style.top = '20px';
  slider.style.left = '20px';

  slider.addEventListener('input', (e) => {
    const value = parseInt(e.target.value);
    image.blurRadius(value);
    layer.batchDraw();
  });

  document.body.appendChild(slider);
};

imageObj.src = 'https://new.konvajs.org/assets/lion.png';
imageObj.crossOrigin = 'anonymous';

Open Sandbox

React

import { Stage, Layer, Image } from 'react-konva';
import { useState, useEffect, useRef } from 'react';
import useImage from 'use-image';

const App = () => {
  const [blurRadius, setBlurRadius] = useState(10);
  const [image] = useImage('https://new.konvajs.org/assets/lion.png', 'anonymous');
  const imageRef = useRef(null);

  useEffect(() => {
    if (image) {
      imageRef.current.cache();
    }
  }, [image]);

  return (
    <>
      <Stage width={window.innerWidth} height={window.innerHeight}>
        <Layer>
          <Image ref={imageRef} image={image} filters={[Konva.Filters.Blur]} blurRadius={blurRadius} draggable />
        </Layer>
      </Stage>
      <input
        type="range"
        min="0"
        max="40"
        value={blurRadius}
        onChange={(e) => setBlurRadius(parseInt(e.target.value))}
        style={{ position: 'absolute', top: '20px', left: '20px' }}
      />
    </>
  );
};

export default App;

Open Sandbox

Vue

<template>
  <div>
    <v-stage :config="stageSize">
      <v-layer>
        <v-image
          ref="imageNode"
          :config="{
            x: 50,
            y: 50,
            image: image,
            draggable: true,
            filters: [Konva.Filters.Blur],
            blurRadius: blurRadius,
          }"
        />
      </v-layer>
    </v-stage>
    <input
      type="range"
      min="0"
      max="40"
      :value="blurRadius"
      @input="handleSlider"
      style="position: absolute; top: 20px; left: 20px"
    />
  </div>
</template>

<script setup>
import { ref, watch, nextTick } from 'vue';
import { useImage } from 'vue-konva';
import Konva from 'konva';

const stageSize = {
  width: window.innerWidth,
  height: window.innerHeight,
};

const blurRadius = ref(10);
const imageNode = ref(null);
const [image] = useImage('https://new.konvajs.org/assets/lion.png', 'anonymous');

watch(image, async (newImage) => {
  if (newImage) {
    // wait for the next DOM update
    await nextTick();
    // now the image component is fully updated
    imageNode.value.getNode().cache();
  }
});

const handleSlider = (e) => {
  blurRadius.value = parseInt(e.target.value);
};
</script>

Open Sandbox