HTML5 Canvas Emboss filter Image 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.

Instructions: Slide the controls to change emboss values.

For all available filters go to Filters Documentation.

Konva Emboss Image Demoview raw
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/[email protected]/konva.min.js"></script>
<meta charset="utf-8" />
<title>Konva Emboss 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">
Strength:
<input
id="Strength"
type="range"
min="0"
max="1"
step="0.1"
value="0.5"
/>
WhiteLevel:
<input
id="WhiteLevel"
type="range"
min="0"
max="1"
step="0.1"
value="0.5"
/>
Direction:
<select id="Direction">
<option value="top" selected>top</option>
<option value="top-left">top-left</option>
<option value="top-right">top-right</option>
<option value="left">left</option>
<option value="right">right</option>
<option value="bottom">bottom</option>
<option value="bottom-left">bottom-left</option>
<option value="bottom-right">bottom-right</option>
</select>
Blend:
<input id="Blend" type="checkbox" checked />
</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.Emboss]);
layer.add(lion);
stage.add(layer);

var sliders = ['Strength', 'WhiteLevel', 'Direction'];
sliders.forEach(function(attr) {
var slider = document.getElementById(attr);
function update() {
lion['emboss' + attr](slider.value);
console.log(slider.value);
layer.batchDraw();
}
slider.oninput = update;
update();
});
var slider = document.getElementById('Blend');
function update() {
lion.embossBlend(slider.checked);
console.log(slider.checked);
layer.batchDraw();
}
slider.onchange = update;
update();
});
</script>
</body>
</html>