HTML5 Canvas Mask 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 mark the colors of an image with Konva, we can use the
Konva.Filters.Mask filter.

For all available filters go to Filters Documentation.

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

#slider {
position: absolute;
top: 20px;
left: 20px;

<div id="container"></div>
<input id="slider" type="range" min="0" max="300" step="1" value="20" />
function loadImages(sources, callback) {
var images = {};
var loadedImages = 0;
var numImages = 0;
for (var src in sources) {
for (var src in sources) {
images[src] = new Image();
images[src].onload = function() {
if (++loadedImages >= numImages) {
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 vader = new Konva.Image({
image: images.vader,
x: 80,
y: 30,
threshold: 20,
draggable: true

var slider = document.getElementById('slider');
slider.oninput = function() {

var sources = {
vader: '/assets/darth-vader.jpg'

loadImages(sources, buildStage);