JSFiddle - React, Tailwind, and code Playground

by soulwire

HTML

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

JavaScript

var frames = 0;
var canvas = document.getElementById( 'canvas' );
var c = canvas.getContext('2d');
var a = 0;

setInterval(function(){

    if ( frames++ < 1000 ) {
    
        a += 0.1;
        
        canvas.width = canvas.height = 500;
        
        c.beginPath();
        c.arc( 250 + Math.cos(a) * 100, 250 + Math.sin(a) * 100, 50, 0, Math.PI * 2 );
        c.fillStyle = '#ff00ff';
        c.fill();
        
        var img = canvas.toDataURL("image/png");
        document.write('<img src="'+img+'"/>');
    }
    
}, 1000/30);