HTML5 Canvas Multiple Filters Tutorial

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

Instructions: Use the checkboxes to toggle different filters and adjust their values with the sliders.

For all available filters go to Filters Documentation.

Vanilla

import Konva from 'konva';

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

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();

  // Create controls container
  const container = document.createElement('div');
  container.style.position = 'absolute';
  container.style.top = '20px';
  container.style.left = '20px';
  document.body.appendChild(container);

  // Filter states
  const filterStates = {
    blur: false,
    brightness: false,
    contrast: false,
  };

  const filterValues = {
    blur: 10,
    brightness: 1.3,
    contrast: 50,
  };

  // Create filter controls
  const createFilterControl = (name, min, max, step, defaultValue) => {
    const div = document.createElement('div');
    div.style.marginBottom = '10px';
    
    const checkbox = document.createElement('input');
    checkbox.type = 'checkbox';
    checkbox.id = name;
    checkbox.checked = filterStates[name];
    
    const label = document.createElement('label');
    label.htmlFor = name;
    label.textContent = ` ${name.charAt(0).toUpperCase() + name.slice(1)}: `;
    
    const slider = document.createElement('input');
    slider.type = 'range';
    slider.min = min;
    slider.max = max;
    slider.step = step;
    slider.value = defaultValue;
    slider.style.width = '200px';
    slider.disabled = !filterStates[name];
    
    div.appendChild(checkbox);
    div.appendChild(label);
    div.appendChild(slider);
    
    checkbox.addEventListener('change', (e) => {
      filterStates[name] = e.target.checked;
      slider.disabled = !e.target.checked;
      updateFilters();
    });
    
    slider.addEventListener('input', (e) => {
      filterValues[name] = parseFloat(e.target.value);
      updateFilters();
    });
    
    return div;
  };

  // Add controls
  container.appendChild(createFilterControl('blur', 0, 40, 1, filterValues.blur));
  container.appendChild(createFilterControl('brightness', 0, 2, 0.1, filterValues.brightness));
  container.appendChild(createFilterControl('contrast', -100, 100, 1, filterValues.contrast));

  function updateFilters() {
    const activeFilters = [];
    
    if (filterStates.blur) {
      activeFilters.push(Konva.Filters.Blur);
      image.blurRadius(filterValues.blur);
    }
    if (filterStates.brightness) {
      activeFilters.push(Konva.Filters.Brightness);
      image.brightness(filterValues.brightness);
    }
    if (filterStates.contrast) {
      activeFilters.push(Konva.Filters.Contrast);
      image.contrast(filterValues.contrast);
    }
    
    image.filters(activeFilters);
  }
};
imageObj.src = 'https://konvajs.org/assets/darth-vader.jpg';
imageObj.crossOrigin = 'anonymous';

React

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

const FilterControl = ({ name, min, max, step, filters, setFilters }) => {
  const capitalizedName = name.charAt(0).toUpperCase() + name.slice(1);
  return (
    <div style={{ marginBottom: '10px' }}>
      <input
        type="checkbox"
        id={name}
        checked={filters[name].active}
        onChange={(e) => {
          setFilters({
            ...filters,
            [name]: { ...filters[name], active: e.target.checked },
          });
        }}
      />
      <label htmlFor={name}> {capitalizedName}: </label>
      <input
        type="range"
        min={min}
        max={max}
        step={step}
        value={filters[name].value}
        disabled={!filters[name].active}
        onChange={(e) => {
          setFilters({
            ...filters,
            [name]: { ...filters[name], value: parseFloat(e.target.value) },
          });
        }}
        style={{ width: '200px' }}
      />
    </div>
  );
};

const App = () => {
  const [position, setPosition] = useState({ x: 50, y: 50 });
  const [filters, setFilters] = useState({
    blur: { active: false, value: 10 },
    brightness: { active: false, value: 1.3 },
    contrast: { active: false, value: 50 },
  });

  const [image] = useImage('https://konvajs.org/assets/darth-vader.jpg', 'anonymous');
  const imageRef = useRef(null);

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



  const activeFilters = [];
  if (filters.blur.active) activeFilters.push(Konva.Filters.Blur);
  if (filters.brightness.active) activeFilters.push(Konva.Filters.Brightness);
  if (filters.contrast.active) activeFilters.push(Konva.Filters.Contrast);

  return (
    <>
      
      <Stage width={window.innerWidth} height={window.innerHeight}>
        <Layer>
          {image && (
            <Image
              ref={imageRef}
              x={position.x}
              y={position.y}
              image={image}
              draggable
              onDragEnd={(e) => {
                setPosition({ x: e.target.x(), y: e.target.y() });
              }}
              filters={activeFilters}
              blurRadius={filters.blur.value}
              brightness={filters.brightness.value}
              contrast={filters.contrast.value}
            />
          )}
        </Layer>
      </Stage>
      <div style={{ position: 'absolute', top: '20px', left: '20px' }}>
        <FilterControl name="blur" min={0} max={40} step={1} filters={filters} setFilters={setFilters} />
        <FilterControl name="brightness" min={0} max={2} step={0.1} filters={filters} setFilters={setFilters} />
        <FilterControl name="contrast" min={-100} max={100} step={1} filters={filters} setFilters={setFilters} />
      </div>
    </>
  );
};

export default App;

Vue

<template>
  <div>
    
    <v-stage :config="stageSize">
      <v-layer>
        <v-image
          v-if="image"
          ref="imageNode"
          :config="{
            x: 50,
            y: 50,
            image: image,
            draggable: true,
            filters: activeFilters,
            blurRadius: filters.blur.value,
            brightness: filters.brightness.value,
            contrast: filters.contrast.value,
          }"
        />
      </v-layer>
    </v-stage>
    <div style="position: absolute; top: 20px; left: 20px">
      <div v-for="(filter, name) in filters" :key="name" style="marginBottom: 10px">
        <input
          type="checkbox"
          :id="name"
          v-model="filter.active"
        />
        <label :for="name"> {{ capitalize(name) }}: </label>
        <input
          type="range"
          :min="filterRanges[name].min"
          :max="filterRanges[name].max"
          :step="filterRanges[name].step"
          v-model.number="filter.value"
          :disabled="!filter.active"
          style="width: 200px"
        />
      </div>
    </div>
  </div>
</template>

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

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

const imageNode = ref(null);
const [image] = useImage('https://konvajs.org/assets/darth-vader.jpg', 'anonymous');

const filters = ref({
  blur: { active: false, value: 10 },
  brightness: { active: false, value: 1.3 },
  contrast: { active: false, value: 50 },
});

const filterRanges = {
  blur: { min: 0, max: 40, step: 1 },
  brightness: { min: 0, max: 2, step: 0.1 },
  contrast: { min: -100, max: 100, step: 1 },
};

const activeFilters = computed(() => {
  const active = [];
  if (filters.value.blur.active) active.push(Konva.Filters.Blur);
  if (filters.value.brightness.active) active.push(Konva.Filters.Brightness);
  if (filters.value.contrast.active) active.push(Konva.Filters.Contrast);
  return active;
});

const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1);

watch(image, async (newImage) => {
  if (newImage) {
    await nextTick();
    imageNode.value.getNode().cache();
  }
});
</script>