JSFiddle - React, Tailwind, and code Playground

HTML

<body>

<canvas id='canvas' width='320' height='300'></canvas>

   
</body>

CSS

canvas { background:gray }
div { width:100px; height:100px; margin-top:100px; border:1px solid black }

JavaScript

function draw_points( ctx, points ) {

    // Do nothing if no points
    if ( points.length < 1 ) return;
          
       // Draw single point
   if ( points.length <= 2 ) {
        var b = points[0];
        ctx.beginPath();
        ctx.arc( b.x, b.y, ctx.lineWidth / 2, 0, Math.PI * 2, true );
        ctx.closePath();
        ctx.fill();
        return;
   }
    
    // Start curve drawing
    ctx.beginPath();
    ctx.moveTo( points[0].x, points[0].y );
    
    // Curve through body points
    var num_body_points = points.length - 2;
    for ( var i = 1; i < num_body_points; i++ ) {
        var c = (points[i].x + points[i + 1].x) / 2;
        var d = (points[i].y + points[i + 1].y) / 2;
        ctx.quadraticCurveTo( points[i].x, points[i].y, c, d );
    }
    
    // Curve through last two points
    ctx.quadraticCurveTo( points[i].x, points[i].y, points[i + 1].x, points[i + 1].y );
    
    // Stroke curve
    ctx.stroke();
    ctx.closePath();

}


function go() {

    var points = JSON.parse(...