JSFiddle - React, Tailwind, and code Playground

by Qwerty_Wasd

HTML

<canvas id="myCanvas"></canvas>

JavaScript

var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
 
    var width = 500,
        height = 300;
 
    canvas.width = width;
    canvas.height = height;
 
    ctx.save();
    ctx.translate(100, -60);
 
    var drawRect = function (x, y, w, h, a) {
        var dx = x + w / 2;
        var dy = y + h / 2;
 
        if (a) {
            a = a * (Math.PI / 180);
            ctx.save();
            ctx.translate(dx, dy);
            ctx.rotate(a);
            ctx.translate(-dx, -dy);
        }
 
        ctx.strokeRect(x, y, w, h)
 
        if (a) {
            ctx.restore();
        }
 
    };
 
    var x = 100,
        y = 100,
        a = 0;
 
    setInterval(function() {
        ctx.clearRect(0, 0, width, height);
        drawRect(x, y, 100, 100, a);
        /////////////////////
        ctx.beginPath();
        ctx.moveTo(150, 150);
        ctx.lineTo(150, 600);
        ctx.stroke();
        /////////////////////
        ctx.save();
        ctx.translate(150, -60);
        ctx.rotate(45*Math.PI/180);
        drawRect(x, y, 100, 100, a);
        ctx.restore();
        a += 1;
    }, 50 );