JSFiddle - React, Tailwind, and code Playground

by esbullington

HTML

<html> 
  <head> 
    <title>Fabric Demo</title> 
        <script type="text/javascript" src="http://raw.github.com/kangax/fabric.js/master/dist/all.min.js"></script>     
  </head> 
  <body> 

<div id="wrapper">
  <div class="canvas-container" style="width: 600px; height: 500px; position: relative; -webkit-user-select: none; "><canvas id="c" width="600" height="500" class="lower-canvas" style="position: absolute; width: 600px; height: 500px; left: 0px; top: 0px; -webkit-user-select: none; "></canvas><canvas class="upper-canvas" style="position: absolute; width: 600px; height: 500px; left: 0px; top: 0px; -webkit-user-select: none; cursor: default; " width="600" height="500"></canvas></div>
</div>
    </body> 
</html>

JavaScript

var canvas = new fabric.Canvas('c', {
  hoverCursor: 'pointer',
  selection: false
});

canvas.on({
  'object:moving': function(e) {
    e.target.opacity = 0.5;
  },
  'object:modified': function(e) {
    e.target.opacity = 1;
  }
});

for (var i = 0, len = 15; i < len; i++) {
  fabric.Image.fromURL('http://fabricjs.com/assets/ladybug.png', function(img) {
    img.set({
      left: fabric.util.getRandomInt(0, 600),
      top: fabric.util.getRandomInt(0, 500),
      angle: fabric.util.getRandomInt(0, 90)
    });

    img.perPixelTargetFind = true;
    img.targetFindTolerance = 4;
    img.hasControls = img.hasBorders = false;

    img.scale(fabric.util.getRandomInt(50, 100) / 100);

    canvas.add(img);
  });
}