How to apply canvas filters with React and Konva?
To apply filters to a Konva node, you need to:
- Cache the node using
node.cache()
- Apply filters using the
filters
prop - Re-cache the node when its properties change
import React from 'react'; import Konva from 'konva'; import { Stage, Layer, Rect, Image } from 'react-konva'; import useImage from 'use-image'; // Example of functional component with image filter const FilterImage = () => { const [image] = useImage('https://konvajs.org/assets/lion.png', 'anonymous'); const imageRef = React.useRef(); // when image is loaded we need to cache the shape React.useEffect(() => { if (image) { // you many need to reapply cache on some props changes like shadow, stroke, etc. imageRef.current.cache(); } }, [image]); return ( <Image ref={imageRef} x={10} y={10} image={image} filters={[Konva.Filters.Blur]} blurRadius={10} /> ); }; // Example of class component with noise filter // Try to click on rect to see color updates const FilterRect = () => { const [color, setColor] = React.useState('green'); const rectRef = React.useRef(); React.useEffect(() => { if (rectRef.current) { rectRef.current.cache(); } }, []); const handleClick = () => { setColor(Konva.Util.getRandomColor()); // recache shape when we updated it rectRef.current.cache(); }; return ( <Rect filters={[Konva.Filters.Noise]} noise={1} x={200} y={10} width={50} height={50} fill={color} shadowBlur={10} ref={rectRef} onClick={handleClick} /> ); }; const App = () => { return ( <Stage width={window.innerWidth} height={window.innerHeight}> <Layer> <FilterImage /> <FilterRect /> </Layer> </Stage> ); }; export default App;