JSFiddle - React, Tailwind, and code Playground

by siddjain

HTML

<h1>Instructions</h1>
<ol>
    <li>Enter some text</li>
    <li>Trace a path in the canvas (mouse down to begin path, mouse up to end path)</li>
</ol>
<canvas id="canvas" width="300" height="300" style="border:1px solid black"></canvas>
<br/>
<input id="input" type="text" size="45" placeholder="enter some text"></input>
<br/>
<button id="animateButton">Begin Animation</button>
<label>FPS:</label>
<span id="fps"></span>
<div id="output"></div>

JavaScript

var path = null;
var context = null;
var text = null;
var canvas = null;
var mouseMoveHandler = throttle(onMouseMove, 1000.0/60);
var animateButton = null;
var animate = true;
var animationStep = Math.PI / 180 * 5.0;
var u = null;
var v = null;
var animationId = null;
var intervalId = null;
var fps = 0;

document.ready=(function()
                {
                    canvas = document.getElementById('canvas');
                    context = canvas.getContext('2d');
                    button = document.getElementById('animateButton');
                    applyStyles();
                    canvas.addEventListener('mousedown', onMouseDown, false);
                    canvas.addEventListener('mouseup', onMouseUp, false);                    
                    button.addEventListener('click', animateHandler, false);
                })();

function applyStyles()
{
      context.lineWidth   = 1;
    context.font = '14pt verdana';
}

function updateFps(time)
{
    document.getElementById('fps').innerHTML = fps;
    fps = 0;
}

function animateCanvas(time)
{
    context.clearRect(0, 0, 300, 300);
    context.translate(150, 150);
    context.rotate(animationStep);
    context.translate(-150, -150);
    drawLine();
    drawText();           
    fps++;
    animationId = requestAnimFrame(animateCanvas);
}

function animateHandler()
{    
    if (animate)
    {
        animate = false;
        button.innerHTML = 'Stop Animation';        
        animationId = requestAnimFrame(animateCanvas);        
        intervalId = setInterval(updateFps, 1000);
    }
    else
    {
        animate = true;
        stopAnimation();
    }
}

function stopAnimation()
{
    if (animationId)
    {        
        window.cancelAnimationFrame(animationId);        
        animationId = null;            
    }    
    if (intervalId)
    {
        clearInterval(intervalId);
        intervalId = 0;
        fps = 0;
    }
    button.innerHTML = 'Begin Animation';
}

function onMouseDown(evt)
{
  ...