JSFiddle - React, Tailwind, and code Playground

by yoowordpress

HTML

<script src="https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id='canvas'></canvas>
<button id="rotate">boo</button>

JavaScript

var canvas = new fabric.Canvas('canvas', {
    height: 300,
    width: 300
});

// create a rectangle objecta
var rect = new fabric.Rect({
    left: 125,
    top: 125,
    fill: 'rgb(128,70,128)',
    width: 100,
    height: 100,
    originX: 'center',
    originY: 'center',

    lockMovementX: true,
    lockMovementY: true
});




var button = document.getElementById('rotate');
var canvasCenter = new fabric.Point(150, 150); // center of canvas
var rads = 0.174532925; // 10 degrees in radians
button.onclick = function () {
    canvas.getObjects().forEach(function (obj) {
        var objectOrigin = new fabric.Point(obj.left, obj.top);
        var new_loc = fabric.util.rotatePoint(objectOrigin, canvasCenter, rads);
        obj.top = new_loc.y;
        obj.left = new_loc.x;
        obj.angle += 10; //rotate each object buy the same angle
        canvas.renderAll();
        console.log(new_loc, rads);
    });
}

canvas.add(rect);