JSFiddle - React, Tailwind, and code Playground

HTML

<canvas width=400 height=400></canvas>

CSS

canvas {
    border: 1px solid black;
}

JavaScript

var cvs = document.querySelector("canvas");
var ctx = cvs.getContext("2d");
var w = 400, h=400;
ctx.fillStyle = "none";
ctx.strokeStyle = "black";

function draw(curve) {
    ctx.beginPath();
    ctx.moveTo(curve[0].x, curve[0].y);
    ctx.bezierCurveTo(
         curve[1].x, curve[1].y,
         curve[2].x, curve[2].y,
         curve[3].x, curve[3].y
    );
    ctx.stroke();
}

function halfUnitTurn(v) {
    var tx = w/2, ty = h/2;
    return { x: tx - (v.x-tx), y: ty - (v.y-ty) };
}

var curve1 = [{x:0,y:0}, {x:400,y:0}, {x:200,y:50}, {x:w,y:h}];
var curve2 = curve1.map(function(v) { return halfUnitTurn(v); });

ctx.strokeStyle="red";
draw(curve1);
ctx.strokeStyle="blue";
draw(curve2);