HTML5 Canvas Mask 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 mask the colors of an image with Konva, we can use the Konva.Filters.Mask filter.

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();
  image.filters([Konva.Filters.Mask]);
  image.threshold(10);
  layer.draw();
};
imageObj.src = '/images/lion.png';

Open Sandbox

React

import { Stage, Layer, Image } from 'react-konva';
import { useState, useEffect } from 'react';

const App = () => {
  const [image, setImage] = useState(null);

  useEffect(() => {
    const imageObj = new Image();
    imageObj.onload = () => {
      setImage(imageObj);
    };
    imageObj.src = '/images/lion.png';
  }, []);

  return (
    <Stage width={window.innerWidth} height={window.innerHeight}>
      <Layer>
        {image && (
          <Image
            x={50}
            y={50}
            image={image}
            draggable
            filters={[Konva.Filters.Mask]}
            threshold={10}
          />
        )}
      </Layer>
    </Stage>
  );
};

export default App;

Open Sandbox

Vue

<template>
  <v-stage :config="stageSize">
    <v-layer>
      <v-image
        v-if="image"
        :config="{
          x: 50,
          y: 50,
          image: image,
          draggable: true,
          filters: [Konva.Filters.Mask],
          threshold: 10,
        }"
      />
    </v-layer>
  </v-stage>
</template>

<script setup>
import { ref, onMounted } from 'vue';

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

const image = ref(null);

onMounted(() => {
  const imageObj = new Image();
  imageObj.onload = () => {
    image.value = imageObj;
  };
  imageObj.src = '/images/lion.png';
});
</script>

Open Sandbox