Рисование в canvascontext

const arcCount = 4;
 
res.ellipse(centerX, centerY, arcRadius, arcRadius, 0, 0, Math.PI * 2);
 
// Рисуем 4 дуги
for (let i = 0; i < arcCount; i++) 
{
    let offsetX = spacing * (i + 1);
 
    
    const angle = -Math.PI / 2; 
    const startX = centerX + offsetX + arcRadius * Math.cos(angle);
    const startY = centerY + arcRadius * 2 * Math.sin(angle);
 
    // Начало дуги
    res.moveTo(startX, startY);
 
    // дуга
    res.arc(centerX + offsetX - arcRadius, centerY, arcRadius * 2, -Math.PI / 4, Math.PI / 4);
}

res.ellipse(centerX, centerY, arcRadius, arcRadius, 0, 0, Math.PI * 2);

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
 
// Draw the ellipse
ctx.beginPath();
ctx.ellipse(100, 100, 50, 75, Math.PI / 4, 0, 2 * Math.PI);
ctx.stroke();

ctx.beginPath();
ctx.arc(100, 75, 50, 0, Math.PI);
ctx.stroke();

 getPath(): Path2D {
 
      const res = new Path2D();
 
      const centerX = this.getSize().x / 2;
      const centerY = this.getSize().y / 2;
      const radiusX = this.getSize().x / 4; // Радиус дуги (ширина капли)
      const radiusY = this.getSize().x / 4; // Высота дуги
 
      const bottomY = centerY + radiusY * 1.8; // Острая нижняя точка
 
      // Рисуем верхнюю дугу (полукруг)
      res.arc(centerX, centerY, radiusX, Math.PI, 0, false);
 
      // Переход к боковым линиям с изгибами
      res.bezierCurveTo(
          centerX + radiusX * 1.2, centerY + radiusY * 0.7,  // Контрольная точка 1 (плавный изгиб)
          centerX + radiusX * 0.5, bottomY - radiusY * 0.3,  // Контрольная точка 2 (уже ближе к низу)
          centerX, bottomY // Нижняя острая точка
      );
 
      res.bezierCurveTo(
          centerX - radiusX * 0.5, bottomY - radiusY * 0.3,  // Контрольная точка 3 (с другой стороны)
          centerX - radiusX * 1.2, centerY + radiusY * 0.7,  // Контрольная точка 4 (подъем к дуге)
          centerX - radiusX, centerY // Возвращаемся к началу дуги
      );
 
      res.closePath();
 
      return res;