HTML5 Canvas Brightness Image Filter Tutorial
Note: This filter was introduced in Konva 10.0.0 to replace the Brighten
filter. The Brighten
filter is still available for backward compatibility, but it is deprecated and will be removed in the future.
New filter renders closer to CSS filter: brightness(0.5);
To apply filter to an Konva.Image
, we have to cache it first with cache()
function. Then apply filter with filters()
function.
To brighten or darken an image with Konva, we can use the Konva.Filters.Brightness
filter and set the brightness amount with the brightness
property.
The brightness
property can be set to any number from 0 to 2, where:
- 0 creates a completely black image
- 1 is the original image (no change)
- Values greater than 1 brighten the image
- 2 creates a very bright image
Instructions: Slide the control to adjust the brightness
For all available filters go to Filters Documentation.
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.Brightness]);
image.brightness(1.5);
const slider = document.createElement('input');
slider.type = 'range';
slider.min = '0';
slider.max = '2';
slider.step = '0.1';
slider.value = image.brightness();
slider.style.position = 'absolute';
slider.style.top = '20px';
slider.style.left = '20px';
slider.addEventListener('input', (e) => {
const value = parseFloat(e.target.value);
image.brightness(value);
});
document.body.appendChild(slider);
};
imageObj.src = 'https://konvajs.org/assets/darth-vader.jpg';
imageObj.crossOrigin = 'anonymous';
import { Stage, Layer, Image } from 'react-konva';
import { useState, useEffect, useRef } from 'react';
import useImage from 'use-image';
const App = () => {
const [brightness, setBrightness] = useState(1.5);
const [image] = useImage('https://konvajs.org/assets/darth-vader.jpg', 'anonymous');
const imageRef = useRef(null);
useEffect(() => {
if (image && imageRef.current) {
imageRef.current.cache();
}
}, [image]);
return (
<>
<Stage width={window.innerWidth} height={window.innerHeight}>
<Layer>
<Image
ref={imageRef}
x={50}
y={50}
image={image}
draggable
filters={[Konva.Filters.Brightness]}
brightness={brightness}
/>
</Layer>
</Stage>
<input
type="range"
min="0"
max="2"
step="0.1"
value={brightness}
onChange={(e) => setBrightness(parseFloat(e.target.value))}
style={{ position: 'absolute', top: '20px', left: '20px' }}
/>
</>
);
};
export default App;
<template>
<div>
<v-stage :config="stageSize">
<v-layer>
<v-image
ref="imageNode"
:config="{
x: 50,
y: 50,
image: image,
draggable: true,
filters: [Konva.Filters.Brightness],
brightness: brightness,
}"
/>
</v-layer>
</v-stage>
<input
type="range"
min="0"
max="2"
step="0.1"
:value="brightness"
@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 brightness = ref(1.5);
const imageNode = ref(null);
const [image] = useImage('https://konvajs.org/assets/darth-vader.jpg', 'anonymous');
watch(image, async (newImage) => {
if (newImage) {
await nextTick();
imageNode.value.getNode().cache();
}
});
const handleSlider = (e) => {
brightness.value = parseFloat(e.target.value);
};
</script>