JSFiddle - React, Tailwind, and code Playground

by Ulrich Bangert

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jcanvas/21.0.0/min/jcanvas.min.js"></script>
<canvas></canvas>

CSS

canvas {
  border: 1px solid blue
}

JavaScript

var cv = $('canvas');
var radius = 50;
cv.drawPolygon({
  layer: true,
  x: 200, y: 0, radius: radius,
  fromCenter: false,
  strokeStyle: 'black',
  strokeWidth: 1,
  sides: 3,
  draggable: 'true',
  dragstop: function(layer) {
    console.log("poly", layer.x, layer.y);
  }
});
var width = 100, height = 100,
    x = 0, y = 0;
cv.addLayer({
  name: 'triangle',
  type: 'line',
  draggable: true,
  fillStyle: 'red',
  x1: x + width / 2, y1: y,
  x2: x, y2: y + height,
  x3: x + width, y3: y + height,
  dragstop: function (layer) {
    console.log("line", layer.x, layer.y);
  }
});