HTML5 Canvas Kaleidoscope Image Filter Tutorial

Get last news, demos, posts from Konva

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

To create a kaleidoscope with Konva, we can use the Konva.Filters.Kaleidoscope
filter and set the kaleidoscopePower and kaleidoscopeAngle properties.

Instructions: Slide the control to adjust the kaleidoscope angle.

For all available filters go to Filters Documentation.

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

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

<body>
<div id="container"></div>
<input id="slider" type="range" min="0" max="360" step="5" value="20" />
<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: window.innerWidth,
height: window.innerHeight
});

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.Kaleidoscope]);
lion.kaleidoscopePower(3);
layer.add(lion);
stage.add(layer);
var slider = document.getElementById('slider');
slider.oninput = function() {
lion.kaleidoscopeAngle(slider.value);
layer.batchDraw();
};
}

var sources = {
lion: '/assets/lion.png'
};

loadImages(sources, buildStage);
</script>
</body>
</html>