HTML5 Canvas Grayscale Image Filter Tutorial

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

To invert the colors of an image with Konva, we can use the
Konva.Filters.Grayscale filter.

For all available filters go to Filters Documentation.

Konva Grayscale Image Demoview raw
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.rawgit.com/konvajs/konva/1.6.5/konva.min.js"></script>
<meta charset="utf-8">
<title>Konva Grayscale Image Demo</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #F0F0F0;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
function loadImages(sources, callback) {
var images = {};
var loadedImages = 0;
var numImages = 0;
for(var src in sources) {
numImages++;
}
for(var src in sources) {
images[src] = new Image();
images[src].onload = function() {
if(++loadedImages >= numImages) {
callback(images);
}
};
images[src].src = sources[src];
}
}
function buildStage(images) {
var stage = new Konva.Stage({
container: 'container',
width: 300,
height: 200
});
var layer = new Konva.Layer();
var lion = new Konva.Image({
image: images.lion,
x: 80,
y: 30,
draggable: true
});
lion.cache();
lion.filters([Konva.Filters.Grayscale]);
layer.add(lion);
stage.add(layer);
}
var sources = {
lion: '/assets/lion.png'
};
loadImages(sources, buildStage);
</script>
</body>
</html>