JSFiddle - React, Tailwind, and code Playground

by m1erickson

HTML

<h4>Calculate and draw points on a complex path<br>spaced at a uniform distance.</h4>
<canvas id="canvas" width=800 height=400></canvas>

CSS

body{ background-color: ivory; }
canvas{border:1px solid red;}

JavaScript

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

var PI2 = Math.PI * 2;

var curves = [];
curves.push([{
    x: 50,
    y: 150
}, {
    x: 175,
    y: 50
}, {
    x: 275,
    y: 300
}, {
    x: 350,
    y: 225
}]);
curves.push([{
    x: 350,
    y: 225
}, {
    x: 450,
    y: 200
}]);
curves.push([{
    x: 450,
    y: 200
}, {
    x: 450,
    y: 50
}, {
    x: 550,
    y: 225
}]);

var TSize = 1000;

var points = curvePoints(curves, TSize);

var lengthPoints = curveByLength(points, 6);

drawPlots(lengthPoints, ctx);

ctx.strokeStyle = "red";
draw(curves);


function draw(curves) {
    for (var i = 0; i < curves.length; i++) {
        var p = curves[i];
        ctx.beginPath();
        ctx.moveTo(p[0].x, p[0].y);
        if (p[3]) {
            ctx.bezierCurveTo(p[1].x, p[1].y, p[2].x, p[2].y, p[3].x, p[3].y);
        } else if (p[2]) {
            ctx.quadraticCurveTo(p[1].x, p[1].y, p[2].x, p[2].y);
        } else {
            ctx.lineTo(p[1].x, p[1].y);
        }
        ctx.stroke();
    }
}

function curveLengthPoints(curves, sampleSize) {
    var points = curvePoints(curves, sampleSize);
    return (pts = curveByLength(points, 6));
}

function curvePoints(curves, sampleSize) {
    var points = [];
    for (var i = 0; i < curves.length; i++) {
        var p = curves[i];
        if (p[3]) {
            var pts = BPoints(p[0], p[1], p[2], p[3], sampleSize);
        } else if (p[2]) {
            var pts = QPoints(p[0], p[1], p[2], sampleSize);
        } else {
            var pts = LPoints(p[0], p[1], sampleSize);
        }
        points = points.concat(pts);
    }
    return (points);
}


function drawPlots(points, ctx) {
    for (var i = 0; i < points.length; i++) {
        var p = points[i];
        ctx.beginPath();
        ctx.arc(p.x, p.y, 3, 0, PI2);
        ctx.closePath();
        ctx.fill();
    }
}

function curveByX(points) {
    var nextX = parseInt(++points[0].x);
    var xPoints = [];
    xPoints.push({
       ...