JSFiddle - React, Tailwind, and code Playground

by santy_naren

HTML

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div>
  <div id="chartContainer" style="height: 360px; width: 100%;"></div>
  <canvas id="userCanvas" style="border:1px solid #ccc" height="360px" width="500px"></canvas>
</div>

CSS

#chartContainer {
  position: absolute;
}

#userCanvas {
  position: absolute;
  z-index: 2;
  opacity: 1;
}

JavaScript

console.log("FAsdfsf");

/* chart.render(); */
var canvas = new fabric.Canvas('userCanvas', { selection: false });

var line, isDown;

canvas.on('mouse:down', function(o){
  isDown = true;
  var pointer = canvas.getPointer(o.e);
  var points = [ pointer.x, pointer.y, pointer.x, pointer.y ];
  line = new fabric.Line(points, {
    strokeWidth: 5,
    fill: 'red',
    stroke: 'red',
    originX: 'center',
    originY: 'center'
  });
  canvas.add(line);
});

canvas.on('mouse:move', function(o){
  if (!isDown) return;
  var pointer = canvas.getPointer(o.e);
  line.set({ x2: pointer.x, y2: pointer.y });
  canvas.renderAll();
});

canvas.on('mouse:up', function(o){
  isDown = false;
});