JSFiddle - React, Tailwind, and code Playground

by m1erickson

HTML

<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.1.0.min.js"></script>
<h4>Click to "erase" top 2 layers & reveal bottom image</h4>
<div id="container"></div>

CSS

body {
    padding:20px;
}
#container {
    border:solid 1px #ccc;
    margin-top: 10px;
    width:350px;
    height:219px;
}

JavaScript

var stage = new Kinetic.Stage({
    container: 'container',
    width: 350,
    height: 219
});
var bottomlayer = new Kinetic.Layer();
stage.add(bottomlayer);
var middlelayer = new Kinetic.Layer();
stage.add(middlelayer);
var toplayer = new Kinetic.Layer();
stage.add(toplayer);

var sw = stage.width();
var sh = stage.height();
var cutouts = [];
var PI2 = Math.PI * 2;

var img = new Image();
img.onload = start;
img.src = "https://dl.dropboxusercontent.com/u/139992952/stack1/landscape1.jpg";

function start() {
    var kImage = new Kinetic.Image({
        image: img,
    });
    bottomlayer.add(kImage);
    bottomlayer.draw();
    middlelayer.draw();
    toplayer.draw();
};

var midRed = new Kinetic.Rect({
    x: sw / 4,
    y: 0,
    width: stage.width() / 2,
    height: stage.height(),
    fill: "red",
    opacity: 0.50
});
middlelayer.add(midRed);

var middleEraser = new Kinetic.Shape({
    x: 0,
    y: 0,
    fill: "blue",
    drawFunc: function (context) {
        var ctx = middlelayer.getContext()._context;
        ctx.save();
        ctx.globalCompositeOperation = "destination-out";
        ctx.beginPath();
        for (var i = 0; i < cutouts.length; i++) {
            var cut = cutouts[i];
            ctx.arc(cut.x, cut.y, 15, 0, PI2);
            ctx.closePath();
        }
        ctx.fill();
        ctx.restore();
    }
});
middlelayer.add(middleEraser);



var topBlue = new Kinetic.Rect({
    x: stage.width() / 2,
    y: 0,
    width: stage.width() / 2,
    height: stage.height(),
    fill: "blue",
    opacity: 0.50
});
toplayer.add(topBlue);
toplayer.draw();

var topEraser = new Kinetic.Shape({
    x: 0,
    y: 0,
    fill: "blue",
    drawFunc: function (context) {
        var ctx = toplayer.getContext()._context;
        ctx.save();
        ctx.globalCompositeOperation = "destination-out";
        ctx.beginPath();
        for (var i = 0; i < cutouts.length; i++) {
            var cut = cutouts[i];
            ctx.arc(cut.x, cut.y, 15, 0, PI2);
       ...