JSFiddle - React, Tailwind, and code Playground

by Hooman Askari

HTML

<script src="https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="c"></canvas>

JavaScript

var canvas = new fabric.Canvas('c');
var WIDTH = window.innerWidth;
var HEIGHT = window.innerHeight;	
canvas.setDimensions({width: WIDTH, height: HEIGHT});

window.requestAnimationFrame(redrawAll);

var angle = 0;
var triangle = createTriangle(300, 300, angle);
canvas.add(triangle);


function redrawAll() 
{
    requestAnimationFrame(redrawAll);
    canvas.renderAll(); 
    
    //angle += 1;
    canvas.remove(triangle);
    triangle = createTriangle(300, 300, angle);
    canvas.add(triangle);    
    
    //triangle.angle += fabric.util.degreesToRadians(10);
}

function createTriangle(x, y, angle)
{
    var width = 350;
    var height = 300;
    var pos = fabric.util.rotatePoint(
        new fabric.Point(x, y),
        new fabric.Point(x + width / 2, y + height / 3 * 2),
        fabric.util.degreesToRadians(angle)
    );
    return new fabric.Triangle(
    {
        width: width,
        height: height,
        selectable: true,
        fill: 'rgba(0,0,0,0)',
        stroke: 'black',
        strokeWidth: 2,
        left: pos.x,
        top: pos.y,
        angle: angle
    });
}