HTML5 Canvas Hue, Saturation and Luminance filter Image Tutorial

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

To change hue, saturation and luminance components of an image with Konva, we can use the `Konva.Filters.HSL.

Instructions: Slide the controls to change hsl values.

For all available filters go to Filters Documentation.

Konva Hue, Saturation and Luminance Image Demoview raw
<!DOCTYPE html>
<html>

<head>
<script src="https://cdn.rawgit.com/konvajs/konva/2.2.1/konva.min.js"></script>
<meta charset="utf-8">
<title>Konva HSL Image Demo</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #F0F0F0;
}

#controls {
position: absolute;
top: 20px;
left: 20px;
}
</style>
</head>

<body>
<div id="container"></div>
<div id="controls">
hue:
<input id="hue" type="range" min="0" max="259" step="1" value="150"> saturation:
<input id="saturation" type="range" min="-2" max="10" step="0.5" value="0"> luminance:
<input id="luminance" type="range" min="-2" max="2" step="0.1" value="0">
</div>
<script>
Konva.Image.fromURL('../../../assets/lion.png', function (lion) {
var stage = new Konva.Stage({
container: 'container',
width: window.innerWidth,
height: window.innerHeight
});

var layer = new Konva.Layer();

lion.position({
x: 50,
y: 50
});
lion.cache();
lion.filters([Konva.Filters.HSL]);
layer.add(lion);
stage.add(layer);

var sliders = ['hue', 'saturation', 'luminance'];
sliders.forEach(function (attr) {
var slider = document.getElementById(attr);
function update() {
lion[attr](parseFloat(slider.value));
layer.batchDraw();
}
slider.oninput = update;
update();
});
});
</script>

</body>

</html>