JSFiddle - React, Tailwind, and code Playground

by soulwire

HTML

<canvas id="canvas" width="800" height="800"></canvas>

JavaScript

var points = [
    { x:54, y:57 },
    { x:78, y:81 },
    { x:107, y:83 },
    { x:149, y:71 },
    { x:173, y:62 },
    { x:221, y:78 },
    { x:225, y:96 },
    { x:215, y:117 },
    { x:154, y:146 },
    { x:131, y:160 },
    { x:129, y:176 },
    { x:131, y:198 },
    { x:176, y:225 },
    { x:214, y:229 },
    { x:254, y:233 },
    { x:293, y:256 },
    { x:303, y:303 },
    { x:295, y:356 },
    { x:249, y:371 },
    { x:204, y:393 },
    { x:218, y:410 },
    { x:253, y:414 }
];

var canvas = document.getElementById( 'canvas' );
var ctx = canvas.getContext( '2d' );

var CatmullRom = (function() {

    var p0, p1, p2, p3, i6 = 1.0 / 6.0;

    return {

        curveThroughPoints: function( points, ctx ) {

            for ( var i = 3, n = points.length; i < n; i++ ) {

                p0 = points[i - 3];
                p1 = points[i - 2];
                p2 = points[i - 1];
                p3 = points[i];

                ctx.bezierCurveTo(
                    p2.x * i6 + p1.x - p0.x * i6,
                    p2.y * i6 + p1.y - p0.y * i6,
                    p3.x * -i6 + p2.x + p1.x * i6,
                    p3.y * -i6 + p2.y + p1.y * i6,
                    p2.x,
                    p2.y
                );
            }
        }
    };

})();

function curveThroughPoints( points, ctx ) {
        
    //ctx.beginPath();
    //ctx.moveTo( points[0].x, points[0].y );
    
    for ( var i = 1, n = points.length - 2; i < n; i++ ) {

        var a = points[i];
        var b = points[i + 1];
        
        var mx = ( a.x + b.x ) * 0.5;
        var my = ( a.y + b.y ) * 0.5;

        ctx.quadraticCurveTo( a.x, a.y, mx, my );
    }
    
    ctx.quadraticCurveTo( points[i].x, points[i].y, points[i + 1].x, points[i + 1].y );
    
    //ctx.strokeStyle = color || '#000';
    //ctx.stroke();
}

function drawTail( points, radius, ctx ) {
    
    var step = radius / points.length;
    
    var a = [];
    var b = [];
    
    for ( var i = 0, n = points.length - 1;...