JSFiddle - React, Tailwind, and code Playground

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>
<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 coefficients = [4.0/5, -1.0/5, 4.0/105, -1.0/280];

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

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

function onMouseDown(evt)
{
    clearOut();
    context.clearRect(0, 0, 300, 300);
    path = { x:[], y:[] };
    context.beginPath();    
    var p = getCursorPosition(evt);
    context.moveTo(p.x, p.y);
    addToPath(p);
    canvas.addEventListener('mousemove', mouseMoveHandler, false);
}

function addToPath(p)
{
    path.x.push(p.x);
    path.y.push(p.y);
}

function onMouseUp(evt)
{
    canvas.removeEventListener('mousemove', mouseMoveHandler, false);
    drawText();
}

function onMouseMove(evt)
{
    var p = getCursorPosition(evt);
    addToPath(p)
    context.lineTo(p.x, p.y);
    context.stroke();    
}

function drawText()
{
    var e = document.getElementById('input');    
    var text = e.value || 'Hello World!';
    var N = path.x.length;
    var M = text.length;
    var start = coefficients.length;
    var end = N - coefficients.length - 1;    
    var step = (end - start) / (M - 1);
    if (step < 1)
    {
        out('not enough points on the path');
        return;    // not enough points on the path
    }
    //debugger;
    for(var i = 0; i < text.length; i++)
    {
        var j = parseInt(start + i * step);
        var dx = diff(path.x, j);
        var dy = diff(path.y, j);
        if (isNaN(dx) || isNaN(dy))
       ...