HTML5 Canvas Custom Filter Tutorial

Get last news, demos, posts from Konva

How apply custom filter for Konva nodes?

This demo demonstrate how to use custom filters with Konva framework.

Filter is a function that have canvas ImageData as input and it should mutate it.

function Filter(imageData) {
// do something with image data
imageData.data[0] = 0;
}

For all available filters go to Filters Documentation.

Also take a look into Image Border Demo for custom filter example.

In this demo we will remove all transparency from the image..

Konva Custom Filter Image Demoview raw
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/[email protected]/konva.min.js"></script>
<meta charset="utf-8" />
<title>Konva Custom Filter Demo</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f0f0f0;
}
</style>
</head>

<body>
<div id="container"></div>
<script>
var stage = new Konva.Stage({
container: 'container',
width: window.innerWidth,
height: window.innerHeight
});

var layer = new Konva.Layer();
stage.add(layer);

// lets define a custom filter:
var OpacityFilter = function(imageData) {
// make all pixels opaque 100%
var nPixels = imageData.data.length;
for (var i = 3; i < nPixels; i += 4) {
imageData.data[i] = 255;
}
};

Konva.Image.fromURL('/assets/lion.png', function(image) {
layer.add(image);
image.setAttrs({
x: 80,
y: 30,
borderSize: 5,
borderColor: 'red'
});

image.filters([OpacityFilter]);
image.cache();

layer.draw();
});
</script>
</body>
</html>