JSFiddle - React, Tailwind, and code Playground

by kanonji

HTML

<canvas id="canvas"></canvas>

JavaScript

(function(){
    var canvas = document.getElementById('canvas');
    canvas.width = 500;
    canvas.height = 500;
    var ctx = initContext();
    curve([{x:10,y:10},{x:40,y:200},{x:160,y:200},{x:200, y:10}], ctx);
    curve([{x:10,y:310},{x:40,y:500},{x:160,y:500},{x:200, y:310}], ctx);
    drawBezier3B([{x:210,y:310},{x:240,y:500},{x:360,y:500},{x:400, y:310}], ctx);
    ctx.strokeStyle = '#000';
    line([{x:10,y:210},{x:200,y:210}],ctx);
    ctx.strokeStyle = '#f00';
    line([{x:10,y:220.5},{x:200,y:220.5}],ctx);
    line([{x:10,y:230.4},{x:200,y:230.5}],ctx);
    line([{x:10,y:240.3},{x:200,y:240.5}],ctx);
    line([{x:10,y:250.2},{x:200,y:250.5}],ctx);
    line([{x:10,y:260.1},{x:200,y:260.5}],ctx);

    function curve(ps, ctx){
        ctx.beginPath();
        ctx.moveTo(ps[0].x, ps[0].y);
        ctx.bezierCurveTo(ps[1].x, ps[1].y, ps[2].x, ps[2].y, ps[3].x, ps[3].y);
        ctx.stroke();
    }
    function initContext(){
        var c2d = canvas.getContext('2d');
        c2d.restore();
        c2d.save();
        return c2d;
    }
    function drawBezier3B(ps, ctx){
        var nbit = 7; //=128
        var n3bit = nbit * 3;
        var N = 1 << nbit;
        var NB3 = {
            x:ps[0].x << n3bit,
            y:ps[0].y << n3bit
        };
        var dNB3 = {
            x:ps[3].x + (3 * N - 3) * ps[2].x + (3 * N * N - 6 * N + 3) * ps[1].x + (-3 * N * N + 3 * N - 1) * ps[0].x,
            y:ps[3].y + (3 * N - 3) * ps[2].y + (3 * N * N - 6 * N + 3) * ps[1].y + (-3 * N * N + 3 * N - 1) * ps[0].y
        };
        var d2NB3 = {
            x:6 * ps[3].x + (6 * N - 18) * ps[2].x + (18 - 12 * N) * ps[1].x + (6 * N - 6) * ps[0].x,
            y:6 * ps[3].y + (6 * N - 18) * ps[2].y + (18 - 12 * N) * ps[1].y + (6 * N - 6) * ps[0].y
        };
        var d3NB3 = {
            x:6 * ps[3].x - 18 * ps[2].x + 18 * ps[1].x -6 * ps[0].x,
            y:6 * ps[3].y - 18 * ps[2].y + 18 * ps[1].y -6 * ps[0].y
        };
        
        ctx.lineWidth = 1;
       ...