JSFiddle - React, Tailwind, and code Playground

by Cibeles Garcia

HTML

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

JavaScript

var QuadraticCurve =function(A,B,C){
	var alphaX=A[0]-2*B[0]+C[0], betaX=2*(B[0]-A[0]), gamaX=A[0],
		alphaY=A[1]-2*B[1]+C[1], betaY=2*(B[1]-A[1]), gamaY=A[1];
	this.getPoint=function(t){
		t=t || 0;
		var t2=t*t, t_2=2*t,
        mx= t_2*alphaX + betaX,
        my= t_2*alphaY + betaY;
		return [t2*alphaX +t*betaX +gamaX,
				t2*alphaY +t*betaY +gamaY,
				t, mx, my];
	};

}

// curva Cuadratica
var ctx=document.getElementsByTagName('canvas')[0].getContext('2d');
ctx.strokeStyle='red';
var p={A:[10,10], B:[100,400], C:[350,200]};
var c=new QuadraticCurve(p.A,p.B,p.C);
for(var i = 0; i<=1; i+=0.2){
	n=c.getPoint(i);
  ctx.beginPath();
	ctx.arc(n[0],n[1],10,0,Math.PI*2);
	ctx.moveTo(n[0],n[1]);
	ctx.lineTo(n[0]+n[3]*0.1,n[1]+n[4]*0.1);
	ctx.moveTo(n[0],n[1]);
	ctx.lineTo(n[0]-n[4]*0.1,n[1]+n[3]*0.1);
  ctx.closePath(); ctx.stroke();
}

// dibujo nativo
ctx.strokeStyle='green';
ctx.lineWidth=2;
ctx.beginPath();
ctx.moveTo(p.A[0],p.A[1]);
ctx.quadraticCurveTo(p.B[0],p.B[1],p.C[0],p.C[1]);
ctx.moveTo(p.A[0],p.A[1]);
ctx.closePath();
ctx.stroke();