JSFiddle - React, Tailwind, and code Playground

by Smoren Freelight

HTML

<canvas id="canvas" width="1000" height="1000" style="display:block; margin:0 auto; border:1px solid black; margin-top:50px"></canvas>

JavaScript

function drawEllipseBezier(ctx, coords, sizes, vector) {
    var vLen = Math.sqrt(vector[0]*vector[0]+vector[1]*vector[1]); // вычисляем длину вектора
    var e = [vector[0]/vLen, vector[1]/vLen]; // единичный верктор e || vector
    var p = 4/3; // параметр
    
    var a = [e[0]*sizes[0]*p, e[1]*sizes[0]*p]; // находим вектор a, используя параметр
    var b = [e[1]*sizes[1], -e[0]*sizes[1]]; // находм вектор b
    // находим точки A1, B1, A2, B2
    var dotA1 = [coords[0]+a[0], coords[1]+a[1]]; 
    var dotB1 = [coords[0]+b[0], coords[1]+b[1]];
    var dotA2 = [coords[0]-a[0], coords[1]-a[1]];
    var dotB2 = [coords[0]-b[0], coords[1]-b[1]];
    
    // находим вектора c1, c2
    var c1 = [a[0]+b[0], a[1]+b[1]]; 
    var c2 = [a[0]-b[0], a[1]-b[1]];
    // находим точки C1, C2, C3, C4
    var dotC1 = [coords[0]+c1[0], coords[1]+c1[1]];
    var dotC2 = [coords[0]+c2[0], coords[1]+c2[1]];
    var dotC3 = [coords[0]-c1[0], coords[1]-c1[1]];
    var dotC4 = [coords[0]-c2[0], coords[1]-c2[1]];
    
    // рисуем наш эллипс
    ctx.strokeStyle = 'red';
    ctx.beginPath();
    ctx.moveTo(dotB1[0], dotB1[1]); // начальная точка
    ctx.bezierCurveTo(dotC1[0], dotC1[1], dotC2[0], dotC2[1], dotB2[0], dotB2[1]); // рисуем кривую Безье
    ctx.bezierCurveTo(dotC3[0], dotC3[1], dotC4[0], dotC4[1], dotB1[0], dotB1[1]); // и вторую из точки, где закончили рисовать первую
    ctx.stroke();
    ctx.closePath();
    
    // возвращаем вектору a изначальную длину
    /*a = [e[0]*sizes[0], e[1]*sizes[0]];

		// отрисовываем красным большую и малую оси эллипса, чтобы проверить, правильно ли мы отобразили запрошенный эллипс
		ctx.beginPath();
		ctx.moveTo(coords[0]+a[0], coords[1]+a[1]);
		ctx.lineTo(coords[0]-a[0], coords[1]-a[1]);
		ctx.moveTo(coords[0]+b[0], coords[1]+b[1]);
		ctx.lineTo(coords[0]-b[0], coords[1]-b[1]);
		ctx.strokeStyle = 'red';
		ctx.stroke();
		ctx.closePath();*/
    }

function drawEllipseParam(ctx, coords, sizes, angle, segments) {
    ctx.save();
   ...