HTML5 Canvas Contrast 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 contrast of an image with Konva, we can use the Konva.Filters.Contrast.

Instructions: Slide the control to change contrast value.

For all available filters go to Filters Documentation.

Konva Contrast 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 Contrast 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">
contrast:
<input id="contrast" type="range" min="-100" max="100" step="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.Contrast]);
layer.add(lion);
stage.add(layer);

var sliders = ['contrast'];
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>