JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.rawgit.com/konvajs/konva/0.13.0/konva.min.js"></script>
<div id="container"></div>

CSS

body {
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #F0F0F0; 
}

JavaScript

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

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



var isPaint = false;
var arrow;

stage.on('contentMousedown', function() {
    isPaint = true;
    var pos = stage.getPointerPosition();
    arrow = new Konva.Arrow({   
      points: [pos.x, pos.y, pos.x, pos.y],         
      pointerLength: 20,
      pointerWidth : 20,
      fill: 'black',
      stroke: 'black',
      strokeWidth: 4
    });
    layer.add(arrow);
});

stage.on('contentMouseup', function() {
  isPaint = false;
});

// and core function - drawing
stage.on('contentMousemove', function() {
    if (!isPaint) {
        return;
    }

    var pos = stage.getPointerPosition();
    var oldPoints = arrow.points();
    arrow.points([oldPoints[0], oldPoints[1], pos.x, pos.y])
    layer.draw();
});