JSFiddle - React, Tailwind, and code Playground

by Steve Eberhardt

HTML

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="c" width="250" height="250"></canvas>

<button id="rotate">rotate</button>

CSS

body {
  font-family: sans-serif;
  margin: 0;
}

canvas {
  border: 1px solid red;
}

JavaScript

const points = [
  {
    "x": 0,
    "y": 0
  },
  {
    "x": 120,
    "y": 100
  },
  {
    "x": -25,
    "y": 100
  },
  {
    "x": 300,
    "y": -50
  }
]
const poly  = new fabric.Polygon(points);
poly.set({
	originX: "center",
  originY: "center",
	top: 150,
  left: 150,
  fill: "green"
})


var canvas = new fabric.Canvas("c");

var group = new fabric.Group();

window.group = group;
window.poly = poly;

canvas.add(group);
group.addWithUpdate(poly);
canvas.setActiveObject(group);
canvas.renderAll();

function rotate() {
  const shape = group.item(0);
  shape.set({
    angle: shape.angle + 20
  });
  group.addWithUpdate();
  group.setCoords();
  canvas.renderAll();
}

document.getElementById("rotate").addEventListener("click", rotate);