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>Strength
<input id="strength" type="range" value="40" min="0" max="80" step="1" />
<spam id="strengthValue"></spam>
<br>Opacity
<input id="opacity" type="range" value="0.5" min="0" max="1" step="0.01" />
<spam id="opacityValue"></spam>
<div>Undo</div>

CSS

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

JavaScript

console.clear();

// ToDo undo

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

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

var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
context.globalCompositeOperation = 'destination-out';

var content = self.stage.getContent();
content.addEventListener("touchmove", function () {
    console.log("content touchmove");
}, false);
content.addEventListener("touchend", function () {
    console.log("content touchend");
}, false);


var circle = new Konva.Circle({
    x: 0,
    y: 0,
    radius: 40,
  //  offsetX: -40,
  //  offsetY: -40,
    fill: 'red',
    draggable: true
});
layer.add(circle);

circle.on('dragmove touchmove', function (e) {
    console.log("x:" + e.evt.clientX + " y:" + e.evt.clientY);
    erase(e.evt.clientX, e.evt.clientY, circle.radius(), img.x(), img.y());
});

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: 50,
        y: 50,
        image: canvas //,
        //   image: this, 
        //   draggable: true
    });
   // img.stroke('blue');
   // img.strokeWidth(5);

    layer.add(img);
    circle.moveToTop();
    layer.draw();

    img.on('click tap touchstart', function (e) {
      //  circle.x(e.evt.clientX);
     //   circle.y(e.evt.clientY);
        erase(e.evt.clientX, e.evt.clientY, circle.radius(), img.x(), img.y());
        layer.draw();
    });
};

imageObj.crossOrigin = "anonymous";
imageObj.src = "https://dl.dropboxusercontent.com/u/47067729/darth-vader.jpg";

// strength
$("#strengthValue").html($("#strength").val());
$("#strength").change(function () {
    var radius = $("#strength").val();
    $("#strengthValue").html(radius);
    circle.radius(radius);
    layer.draw();
});

//...