<h2>Filling Shapes in Konva</h2>
<div id="example"></div>
body {
  margin: 20px auto;
  font-family: 'Lato';
  font-weight: 300;
  width: 600px;
  text-align: center;
}

#example {
  width: 600px;
  height: 400px;
  box-shadow: 0 0 1px #ddd, 0 2px 2px #aaa;
  border-radius: 5px;
  margin: 20px 0;
}
var canvasWidth = 600;
var canvasHeight = 400;

var stage = new Konva.Stage({
  container: "example",
  width: canvasWidth,
  height: canvasHeight
});

var layerA = new Konva.Layer();

var rectA = new Konva.Rect({
  x: 25,
  y: 25,
  width: 200,
  height: 150,
  fillLinearGradientStartPoint: {
    x: 0,
    y: 0
  },
  fillLinearGradientEndPoint: {
    x: 200,
    y: 150
  },
  fillLinearGradientColorStops: [0, 'blue', 1, 'yellow'],
  stroke: "black"
});

var rectB = new Konva.Rect({
  x: 375,
  y: 25,
  width: 200,
  height: 150,
  fillLinearGradientStartPoint: {
    x: 0,
    y: 50
  },
  fillLinearGradientEndPoint: {
    x: 100,
    y: -50
  },
  fillLinearGradientColorStops: [0, 'green', 0.1, 'yellow', 0.5, 'red', 0.9, 'black'],
  stroke: "black"
});

var rectC = new Konva.Rect({
  x: 25,
  y: 200,
  width: 200,
  height: 150,
  fillRadialGradientStartRadius: 0,
  fillRadialGradientEndRadius: 220,
  fillRadialGradientColorStops: [0, 'green', 0.5, 'yellow', 0.75, 'red', 0.9, 'black'],
  stroke: "black"
});

var rectD = new Konva.Rect({
  x: 375,
  y: 200,
  width: 200,
  height: 150,
  fillRadialGradientStartRadius: 0,
  fillRadialGradientEndRadius: 150,
  fillRadialGradientStartPoint: {
    x: 100,
    y: 75
  },
  fillRadialGradientEndPoint: {
    x: 100,
    y: 75
  },
  fillRadialGradientColorStops: [0, 'blue', 0.5, 'yellow', 0.9, 'green'],
  stroke: "black"
});

layerA.add(rectA, rectB, rectC, rectD);

stage.add(layerA);

External CSS

  1. https://fonts.googleapis.com/css?family=Lato:300

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/konva/1.7.6/konva.min.js