JSFiddle - React, Tailwind, and code Playground

by electronoob

HTML

<canvas id="c" width="400px" height="400px"></canvas>
<img id="s" src="https://i.imgur.com/R6875o8.png">

CSS

canvas{
  border:2px solid #000;
}

JavaScript

var img = document.getElementById("s");
var theCanvas = document.getElementById("c");
var ctx = theCanvas.getContext("2d");
var triangle = document.createElement("canvas");
var ctx_triangle = triangle.getContext("2d");
var angle = 0;
var offset = 0;

tri();
setInterval(tri, 64);
function draw() {
    ctx.clearRect(0,0,400,400);
		ctx.save();
    ctx.translate(200,200);
    for(i=0;i<4;i++) {
      ctx.rotate(angle + (0.5 * Math.PI));
      ctx.drawImage(triangle, 0, 0);
    }
		ctx.translate(-200,-200);
    ctx.restore();
		window.requestAnimationFrame(draw);
}
function tri(){
		offset+=0.005;
		ctx_triangle.clearRect(0,0,400,400);
    ctx_triangle.beginPath();
    ctx_triangle.moveTo(0,0);
    var radius = 100;
    var x = 0;
    var y = 0;
    var lx = (radius * Math.cos(angle)) + x;
    var ly = (radius * Math.sin(angle)) + y;
    ctx_triangle.lineTo(lx, ly);
    ctx_triangle.lineTo(0,100);
    ctx_triangle.closePath();
    ctx_triangle.clip();
    
    ctx_triangle.drawImage(img, -50 * Math.sin(offset) -50,  -30 * Math.cos(offset) -30);
}
draw();