JSFiddle - React, Tailwind, and code Playground

by siddjain

HTML

<h1>Instructions</h1>
<ol>
    <li>Enter some text and set optional parameters</li>
    <li>Trace a path in the canvas (mouse down to begin path, mouse up to end path)</li>
</ol>
<canvas id="canvas" style="border:1px solid black" width="500" height="300"></canvas>
<br/>
<input id="input" data-bind="value: text" type="text" size="45" placeholder="enter some text"></input>
<br/>
<label>Number of labels:</label>
<input type="range" min="1" max="100" data-bind="value: numberOfLabels" step = "1"></input>
    <span data-bind="text: numberOfLabels"></span>
<br/>
<input type="checkbox" data-bind="checked: outline">Outline 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 text = ko.observable('*');
var numberOfLabels = ko.observable(100);
var outline = ko.observable(false);
var mouseMoveHandler = throttle(onMouseMove, 1000.0/60);
var animateButton = null;
var animate = true;
var motion = null;
var motionAmount = 5;
var period = null;
var u = null;
var v = null;
var animationId = null;
var intervalId = null;
var fps = 0;
var viewModel = {
    text: text,
    numberOfLabels: numberOfLabels,
    outline: outline
};
ko.applyBindings(viewModel);
var canvas1 = document.getElementById('canvas'); // this is what is rendered on screen                    
var canvas2 = document.createElement('canvas'); // in memory canvas for animation
var drawWidth = canvas1.width;
var drawHeight = canvas1.height;
canvas2.width = drawWidth * 2;
canvas2.height = drawHeight * 2;
var context1 = canvas1.getContext('2d');
var T = {x: 0, y: 0 };
button = document.getElementById('animateButton');
canvas1.addEventListener('mousedown', onMouseDown, false);
canvas1.addEventListener('mouseup', onMouseUp, false);                    
button.addEventListener('click', animateHandler, false);
var Top = Left = null;
function applyStyles(context)
{
    context.lineWidth   = 1;
    context.font = '14pt verdana';
    context.strokeStyle = '#bada55';
    // setup these to match your needs
    context.miterLimit = 2;
    context.lineJoin = 'round';
}

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

function animateCanvas(time)
{
    var x = T.x + motion.x;    
    var y = T.y + motion.y;    
    if (Math.abs(x) > drawWidth || Math.abs(y) > drawHeight)
    {
        // shift in opposite direction
        x -= period * motion.x;
        y -= period * motion.y;
    }
    context1.clearRect(0,0,drawWidth,drawHeight);
    context1.drawImage(canvas2, Left + x, Top + y, drawWidth, drawHeight, 0, 0, drawWidth, drawHeight);
    T = {x:x,y:y};
    fps++;
    animationId = requestAnimFrame(animateCanvas);
}

function...