JSFiddle - React, Tailwind, and code Playground

by siddjain

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script>
<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/>
<input type="checkbox" data-bind="checked: showBBox">Show Bounding Box</input>
<br/>
<button id="animateButton">Begin Animation</button>
<label>FPS:</label>
<span id="fps"></span>
<div id="output"></div>

JavaScript

var path = null;
var text = 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 bbox = null;
var animationId = null;
var intervalId = null;
var fps = 0;
var font = '14pt verdana';
var fontHeight = getTextHeight(font).ascent - 4;
var showBBox = ko.observable(false);
var viewModel = {
    showBBox:showBBox
};

ko.applyBindings(viewModel);

var canvas = document.getElementById('canvas');
   var context = canvas.getContext('2d');
      var              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();
    if (showBBox())
    {
        drawBBox();
    }
    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);
       ...