HTML5 Canvas Tween Blur Filter Tutorial

To tween a filter using Konva, we can simply tween the properties associated with the filter.
In this tutorial, we’ll tween the blurRadius property, which controls the amount of blur applied to the image.

Instructions: mouseover the image to focus it.

Konva Tween Blur Filter Demoview raw

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/[email protected]/konva.min.js"></script>
    <meta charset="utf-8" />
    <title>Konva Tween Filter Demo</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #f0f0f0;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script>
      var width = window.innerWidth;
      var height = window.innerHeight;

      var stage = new Konva.Stage({
        container: 'container',
        width: width,
        height: height,
      });

      var layer = new Konva.Layer();

      var lion = new Konva.Image({
        x: 80,
        y: 30,
        draggable: true,
      });
      layer.add(lion);
      stage.add(layer);

      var image = new Image();
      image.onload = function () {
        lion.image(image);
        lion.cache();
        lion.filters([Konva.Filters.Blur]);
        lion.blurRadius(10);

        // the tween has to be created after the node has been added to the layer
        var tween = new Konva.Tween({
          node: lion,
          duration: 0.6,
          blurRadius: 0,
          easing: Konva.Easings.EaseInOut,
        });

        lion.on('mouseover', function () {
          tween.play();
        });

        lion.on('mouseout', function () {
          tween.reverse();
        });
      };
      image.src = '/assets/lion.png';
    </script>
  </body>
</html>

Enjoying Konva? Please consider to support the project.