JSFiddle - React, Tailwind, and code Playground

by Researcher

JavaScript

/**
 * Provides requestAnimationFrame in a cross browser way.
 * @author paulirish  http://paulirish.com/
 */

if ( !window.requestAnimationFrame ) {

  window.requestAnimationFrame = ( function() {

    return window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    function( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element ) {

      window.setTimeout( callback, 1000 / 60 );

    };

  })();
}
  

// example code from mr doob : http://mrdoob.com/lab/javascript/requestanimationframe/

var canvas, context;

init();
//animate(); // variant 1
var time = new Date().getTime() * 0.002;
step(time); // variant 2

function init() {

    canvas = document.createElement( 'canvas' );
    canvas.width = 256;
    canvas.height = 256;

    context = canvas.getContext( '2d' );

    document.body.appendChild( canvas );

}

// variant 2
//*
var fps = 15;
function step() {
    time = time + 0.01;
    setTimeout(function() {
        requestAnimationFrame(step);
        // Drawing code goes here
        draw(time);
    }, 1000 / fps);
}
//*/
// variant 1
/*
function animate() {

    requestAnimationFrame( animate );
    draw();

}
/*/
function draw(time) {

    //var time = new Date().getTime() * 0.002;
    window.console && console.log(time);
    var x = Math.sin( time ) * 96 + 128;
    var y = Math.cos( time * 0.9 ) * 96 + 128;

    context.fillStyle = 'rgb(245,245,245)';
    context.fillRect( 0, 0, 255, 255 );

    context.fillStyle = 'rgb(255,0,0)';
    context.beginPath();
    context.arc( x, y, 5, 0, Math.PI * 2, true );
    context.closePath();
    context.fill();

}