JSFiddle - React, Tailwind, and code Playground

by fahadnabbasi

HTML

<script src="http://fabricjs.com/lib/fabric.js"></script>
<canvas id="c" width="600" height="500" style="border: 1px solid rgb(204, 204, 204); position: absolute; width: 600px; height: 500px; left: 0px; top: 0px; user-select: none;" class="lower-canvas"></canvas>

JavaScript

var canvas = new fabric.Canvas('c');
fabric.Image.fromURL('https://www.gravatar.com/avatar/26c28c68699b5253197a04085ad839a1/?default=&s=64', function(img) {
  img.scale(0.5).set({
    left: 150,
    top: 150,
    angle: -15,
    width:600,
    height:600
  });
  canvas.add(img).setActiveObject(img);
});

var info = document.getElementById('info');

canvas.on({
  'touch:gesture': function() {
    var text = document.createTextNode(' Gesture ');
    info.insertBefore(text, info.firstChild);
  },
  'touch:drag': function() {
    var text = document.createTextNode(' Dragging ');
    info.insertBefore(text, info.firstChild);
  },
  'touch:orientation': function() {
    var text = document.createTextNode(' Orientation ');
    info.insertBefore(text, info.firstChild);
  },
  'touch:shake': function() {
    var text = document.createTextNode(' Shaking ');
    info.insertBefore(text, info.firstChild);
  },
  'touch:longpress': function() {
    var text = document.createTextNode(' Longpress ');
    info.insertBefore(text, info.firstChild);
  }
});