HTML5 Canvas Set Fill Tutorial

To fill a shape with Konva, we can set the fill property when we instantiate a shape, or we can use the fill() method.
Konva supports colors, patterns, linear gradients, and radial gradients.
Instructions: Mouseover each pentagon to change its fill. You can also drag and drop the shapes.
Konva Fill Demoview raw
<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/[email protected]/konva.min.js"></script>
    <meta charset="utf-8" />
    <title>Konva Fill Demo</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #f0f0f0;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script>
      function loadImages(sources, callback) {
        var images = {};
        var loadedImages = 0;
        var numImages = 0;
        // get num of sources
        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 draw(images) {
        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 colorPentagon = new Konva.RegularPolygon({
          x: 80,
          y: stage.height() / 2,
          sides: 5,
          radius: 70,
          fill: 'red',
          stroke: 'black',
          strokeWidth: 4,
          draggable: true,
        });

        var patternPentagon = new Konva.RegularPolygon({
          x: 220,
          y: stage.height() / 2,
          sides: 5,
          radius: 70,
          fillPatternImage: images.darthVader,
          fillPatternOffset: { x: -220, y: 70 },
          stroke: 'black',
          strokeWidth: 4,
          draggable: true,
        });

        var linearGradPentagon = new Konva.RegularPolygon({
          x: 360,
          y: stage.height() / 2,
          sides: 5,
          radius: 70,
          fillLinearGradientStartPoint: { x: -50, y: -50 },
          fillLinearGradientEndPoint: { x: 50, y: 50 },
          fillLinearGradientColorStops: [0, 'red', 1, 'yellow'],
          stroke: 'black',
          strokeWidth: 4,
          draggable: true,
        });

        var radialGradPentagon = new Konva.RegularPolygon({
          x: 500,
          y: stage.height() / 2,
          sides: 5,
          radius: 70,
          fillRadialGradientStartPoint: { x: 0, y: 0 },
          fillRadialGradientStartRadius: 0,
          fillRadialGradientEndPoint: { x: 0, y: 0 },
          fillRadialGradientEndRadius: 70,
          fillRadialGradientColorStops: [0, 'red', 0.5, 'yellow', 1, 'blue'],
          stroke: 'black',
          strokeWidth: 4,
          draggable: true,
        });

        /*
         * bind listeners
         */
        colorPentagon.on('mouseover touchstart', function () {
          this.fill('blue');
        });

        colorPentagon.on('mouseout touchend', function () {
          this.fill('red');
        });

        patternPentagon.on('mouseover touchstart', function () {
          this.fillPatternImage(images.yoda);
          this.fillPatternOffset({ x: -100, y: 70 });
        });

        patternPentagon.on('mouseout touchend', function () {
          this.fillPatternImage(images.darthVader);
          this.fillPatternOffset({ x: -220, y: 70 });
        });

        linearGradPentagon.on('mouseover touchstart', function () {
          this.fillLinearGradientStartPoint({ x: -50 });
          this.fillLinearGradientEndPoint({ x: 50 });
          this.fillLinearGradientColorStops([0, 'green', 1, 'yellow']);
        });

        linearGradPentagon.on('mouseout touchend', function () {
          // set multiple properties at once with setAttrs
          this.setAttrs({
            fillLinearGradientStartPoint: { x: -50, y: -50 },
            fillLinearGradientEndPoint: { x: 50, y: 50 },
            fillLinearGradientColorStops: [0, 'red', 1, 'yellow'],
          });
        });

        radialGradPentagon.on('mouseover touchstart', function () {
          this.fillRadialGradientColorStops([
            0,
            'red',
            0.5,
            'yellow',
            1,
            'green',
          ]);
        });

        radialGradPentagon.on('mouseout touchend', function () {
          // set multiple properties at once with setAttrs
          this.setAttrs({
            fillRadialGradientStartPoint: 0,
            fillRadialGradientStartRadius: 0,
            fillRadialGradientEndPoint: 0,
            fillRadialGradientEndRadius: 70,
            fillRadialGradientColorStops: [0, 'red', 0.5, 'yellow', 1, 'blue'],
          });
        });

        layer.add(colorPentagon);
        layer.add(patternPentagon);
        layer.add(linearGradPentagon);
        layer.add(radialGradPentagon);
        stage.add(layer);
      }
      var sources = {
        darthVader: '/assets/darth-vader.jpg',
        yoda: '/assets/yoda.jpg',
      };

      loadImages(sources, function (images) {
        draw(images);
      });
    </script>
  </body>
</html>
Enjoying Konva? Please consider to support the project.