JSFiddle - React, Tailwind, and code Playground

by confile

HTML

<div id="container"></div>
<script src="https://dl.dropboxusercontent.com/u/47067729/konva.min.js"></script>

CSS

#container {
    border: 1px solid green;
    background-color: lime;
}

JavaScript

console.clear();

var history = new Array();

var imageObj = new Image();
var img = null;

stage = new Konva.Stage({
    container: 'container',
    width: 600,
    height: 400
});
layer = new Konva.Layer();
stage.add(layer);

var rect = new Konva.Rect({
      x: 30,
      y: 30,
      width: 438,
      height: 300,
      fill: 'yellow'
    });
layer.add(rect);

var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');



var circle = new Konva.Circle({
    x: 0,
    y: 0,
    radius: 40,
    opacity: 0.7,
    fill: '#ff5e0a',
    stroke: '#d95009',
    strokeWidth: 1,
    draggable: true
});
layer.add(circle);


circle.on('dragmove touchmove', function (e) {

    // (roughly) equally spaced circles from last touched point
    if (circle.prev_pos) {
        console.log("prev");
        var step = 3 // one circle every 3 pixels
        var dx = e.evt.clientX - circle.prev_pos.x;
        var dy = e.evt.clientY - circle.prev_pos.y;
        var dist = Math.max (Math.abs(dx), Math.abs(dy)); // you would need a bit more maths to have a perfect result, but this might be a sufficient aproximation
        var d;
        for (d = 0 ; d < dist ; d+= step)
        {
            var x = prev.x + dx / d;
            var y = prev.y + dy / d;
            erase(x, y, circle.radius(), img.x(), img.y());
        } 
    }
    
    // last point
    erase(e.evt.clientX, e.evt.clientY, circle.radius(), img.x(), img.y());
    
    // store prev position
    circle.prev_pos = {};
    circle.prev_pos.x = e.evt.clientX;
    circle.prev_pos.y = e.evt.clienty;
});

circle.on('dragend touchend', function (e) {
    console.log("End");
    circle.prev_pos = {};
});

imageObj.onload = function () {
    canvas.width = imageObj.width;
    canvas.height = imageObj.height;
    context.drawImage(imageObj, 0, 0, imageObj.width, imageObj.height);
    
    img = new Konva.Image({
        x: 30,
        y: 30,
        image: canvas
    });

    layer.add(img);
    
   ...