Konva

by jywglady

HTML

<script src="https://unpkg.com/konva@3.4.1/konva.min.js"></script>
<div id="container"></div>

JavaScript

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

var layer = new Konva.Layer();

var redLine = new Konva.Line({
  points: [15, 120, 140, 73, 250, 110, 300, 70],
  stroke: 'red',
  strokeWidth: 15,
  lineCap: 'round',
  lineJoin: 'round'
});
      
var greenLine = new Konva.Line({
  points: [15, 70, 140, 23, 250, 60, 300, 20],
  stroke: 'green',
  strokeWidth: 2,
  lineJoin: 'round',
  /*
         * line segments with a length of 33px
         * with a gap of 10px
         */
  dash: [33, 10]
});

// add the shapes to the layer
layer.add(greenLine);
layer.add(redLine);

// add the layer to the stage
stage.add(layer);