JSFiddle - React, Tailwind, and code Playground

by Joel Nylund

HTML

<div id="container"></div>
<div id="tevents"></div>

CSS

body {
      margin: 0px;
      padding: 0px;
  }

JavaScript

function writeMessage(messageLayer, message) {
       var context = messageLayer.getContext();
       messageLayer.clear();
       context.font = '18pt Calibri';
       context.fillStyle = 'black';
       context.fillText(message, 10, 25);
       var div = document.getElementById('tevents');
       div.innerHTML = div.innerHTML + message + "<BR/>";

   }

   var stage = new Kinetic.Stage({
       container: 'container',
       width: 460,
       height: 320
   });

   var layer = new Kinetic.Layer();
   var messageLayer = new Kinetic.Layer();

   var circle = new Kinetic.Circle({
       x: stage.getWidth() / 2,
       y: stage.getHeight() / 2,
       radius: 40,
       fill: 'red',
       stroke: 'black',
       strokeWidth: 4 //,
       // draggable: true
   });

   circle.setX(230);
   circle.setY(160);

   circle.on('touchmove', function (event) {
       writeMessage(messageLayer, 'touch event length is ' + event.touches.length);
       for (var i = 0; i < event.touches.length; i++) {
           var touch = event.touches[i];
           writeMessage(messageLayer, 'event x: ' + touch.pageX + ', y: ' + touch.pageX);
       }

       var touchPos = stage.getTouchPosition();
       writeMessage(messageLayer, 'stage x: ' + touchPos.x + ', y: ' + touchPos.y);
 
   });

   // add the shape to the layer
   layer.add(circle);

   // add the layer to the stage
   stage.add(layer);
   stage.add(messageLayer);