JSFiddle - React, Tailwind, and code Playground

by chadhutchins

HTML

<script src="http://www.kineticjs.com/download/kinetic-v2.1.0.js"></script>
<div id="container"></div>

JavaScript

function writeMessage(stage, message){
    var context = stage.getContext();
    stage.clear();
    context.font = "18pt Calibri";
    context.fillStyle = "black";
    context.fillText(message, 10, 25);
}

var stage = new Kinetic.Stage("container", 300, 300);

var triangle = new Kinetic.Region(function(){
    var context = this.getContext();
    context.beginPath();
    context.moveTo(100, 100);
    context.lineTo(200, 100);
    context.lineTo(200, 200);
    context.lineTo(100, 200);
    context.lineTo(100, 120);
    context.lineTo(110, 120);
    context.lineTo(110, 190);
    context.lineTo(190, 190);
    context.lineTo(190, 110);
    context.lineTo(100, 110);
    context.closePath();
    context.stroke();
});

triangle.addEventListener("click", function(){
    writeMessage(stage, "Click on shape.");
});

triangle.addEventListener("mousemove", function(){
    var mousePos = stage.getMousePos();
    var x = mousePos.x - 100;
    var y = mousePos.y - 100;
    writeMessage(stage, "x: " + x + ", y: " + y);
});

stage.add(triangle);