Skip to main content

HTML5 Canvas Emboss filter Image Tutorial

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

Instructions: Slide the controls to change emboss values.

For all available filters go to Filters Documentation.

import Konva from 'konva';

const stage = new Konva.Stage({
  container: 'container',
  width: window.innerWidth,
  height: window.innerHeight,
});

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

const imageObj = new Image();
imageObj.onload = () => {
  const image = new Konva.Image({
    x: 50,
    y: 50,
    image: imageObj,
    draggable: true,
  });

  layer.add(image);

  image.cache();
  image.filters([Konva.Filters.Emboss]);
  image.embossStrength(0.5);
  image.embossWhiteLevel(0.5);
  image.embossDirection('top-left');
  image.embossBlend(0.5);

  // create sliders
  const strengthSlider = document.createElement('input');
  strengthSlider.type = 'range';
  strengthSlider.min = '0';
  strengthSlider.max = '1';
  strengthSlider.step = '0.1';
  strengthSlider.value = image.embossStrength();
  strengthSlider.style.position = 'absolute';
  strengthSlider.style.top = '20px';
  strengthSlider.style.left = '20px';

  const whiteLevelSlider = document.createElement('input');
  whiteLevelSlider.type = 'range';
  whiteLevelSlider.min = '0';
  whiteLevelSlider.max = '1';
  whiteLevelSlider.step = '0.1';
  whiteLevelSlider.value = image.embossWhiteLevel();
  whiteLevelSlider.style.position = 'absolute';
  whiteLevelSlider.style.top = '45px';
  whiteLevelSlider.style.left = '20px';

  const blendSlider = document.createElement('input');
  blendSlider.type = 'range';
  blendSlider.min = '0';
  blendSlider.max = '1';
  blendSlider.step = '0.1';
  blendSlider.value = image.embossBlend();
  blendSlider.style.position = 'absolute';
  blendSlider.style.top = '70px';
  blendSlider.style.left = '20px';

  // add labels
  const strengthLabel = document.createElement('div');
  strengthLabel.textContent = 'Strength';
  strengthLabel.style.position = 'absolute';
  strengthLabel.style.top = '20px';
  strengthLabel.style.left = '200px';

  const whiteLevelLabel = document.createElement('div');
  whiteLevelLabel.textContent = 'White Level';
  whiteLevelLabel.style.position = 'absolute';
  whiteLevelLabel.style.top = '45px';
  whiteLevelLabel.style.left = '200px';

  const blendLabel = document.createElement('div');
  blendLabel.textContent = 'Blend';
  blendLabel.style.position = 'absolute';
  blendLabel.style.top = '70px';
  blendLabel.style.left = '200px';

  // add event listeners
  strengthSlider.addEventListener('input', (e) => {
    image.embossStrength(parseFloat(e.target.value));
  });

  whiteLevelSlider.addEventListener('input', (e) => {
    image.embossWhiteLevel(parseFloat(e.target.value));
  });

  blendSlider.addEventListener('input', (e) => {
    image.embossBlend(parseFloat(e.target.value));
  });

  // add elements to the page
  document.body.appendChild(strengthSlider);
  document.body.appendChild(whiteLevelSlider);
  document.body.appendChild(blendSlider);
  document.body.appendChild(strengthLabel);
  document.body.appendChild(whiteLevelLabel);
  document.body.appendChild(blendLabel);
};
imageObj.src = 'https://konvajs.org/assets/darth-vader.jpg';
imageObj.crossOrigin = 'anonymous';