JSFiddle - React, Tailwind, and code Playground

by Trevor Power

HTML

<script src="https://pomax.github.io/bezierjs/lib/bezier.js"></script>
<canvas width="300" height="300"></canvas>
<canvas width="300" height="300"></canvas>

SCSS

html {
    height: 100%;
}
body {
    height: 100%;
    background-color: #EEE;
}
canvas {
    background-color: #FFF;
}

JavaScript

var p1 = {
    x: 0,
    y: 0
};
var p2 = {
    x: 0.5,
    y: 0
};
var p3 = {
    x: 0.5,
    y: 1
};
var p4 = {
    x: 1,
    y: 1
};

var curve = new Bezier([p1, p2, p3, p4]);


var steps = 200;
var padding = 30;
var scale = 300 - padding * 2;

function out(index) {
    return document.getElementsByTagName("canvas")[index].getContext("2d");
}

function transform(n){
    return padding + n * scale; 
}

function drawCurve(ctx, color, w) {
    ctx.beginPath();
    ctx.moveTo(padding, padding);

    for (var t = 0; t <= steps; t++) {
        var p = curve.compute(t / steps);
        ctx.lineTo(transform(p.x), transform(p.y));
    }

    ctx.lineWidth = w;
    ctx.strokeStyle = color;
    ctx.stroke();
}

function drawDerivative(ctx, color, w) {
    ctx.strokeStyle = color;
    ctx.fillStyle = color;

    for (var t = 0; t <= 5; t++) {
        var p = curve.compute(t / 5);
        var s = curve.derivative(t / 5);
        var x = transform(p.x);
        var y = transform(p.y);

        
        var m = s.y / s.x;
        var m2 = m * m;
        
        var p2y = Math.sqrt((m2 * 0.5 * 0.5) / (1 + m2));
        var p2x = m === 0 ? 0.5 : p2y / m;
        
        ctx.beginPath();
        ctx.lineWidth = 0;
        ctx.arc(x, y, 4, 0, 2 * Math.PI);
        ctx.fill();

        ctx.beginPath();
        ctx.lineWidth = w;
        ctx.moveTo(x, y);
        ctx.lineTo(transform(p.x + p2x), transform(p.y + p2y));
        ctx.stroke();
    }

}

function drawParams(ctx, color, w) {
    ctx.strokeStyle = color;
    ctx.fillStyle = color;

    
    ctx.lineWidth = 0;
    ctx.beginPath();
    ctx.arc(transform(p1.x), transform(p1.y), 6, 0, 2 * Math.PI);
    ctx.fill();

    ctx.beginPath();
    ctx.arc(transform(p2.x), transform(p2.y), 6, 0, 2 * Math.PI);
	ctx.fill();
    
    ctx.beginPath();
    ctx.arc(transform(p3.x), transform(p3.y), 6, 0, 2 * Math.PI);
    ctx.fill();

    ctx.beginPath();
    ctx.arc(transform(p4.x), transform(p4.y), 6, 0, 2 * Math.PI);
    ctx.fill();

...