Анимация на canvas по кривой?

Есть код, который перемещает квадрат из точки А в точку Б по прямой. А как можно сделать, чтобы траектория была немного по дуге? Немного не силен в математике, направьте в нужную сторону плиз

Нужно, чтобы квадрат из низа центра плавно переместился в левый верхний угол, но не по прямой, а по кривой (против часовой стрелки)

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

const squareSize = 50; // Размер квадрата
let x = (canvas.width - squareSize) / 2; // Начальная позиция по X (центр)
let y = canvas.height - squareSize; // Начальная позиция по Y (внизу)
const targetX = 0; // Целевая позиция по X
const targetY = 0; // Целевая позиция по Y
const speed = 2; // Скорость перемещения квадрата


function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height); // Очищаем canvas

    // Вычисляем вектор направления к целевой позиции
    const dx = targetX - x;
    const dy = targetY - y;

    // Рассчитываем длину вектора
    const distance = Math.sqrt(dx * dx + dy * dy);

    // Если квадрат еще не достиг целевой позиции
    if (distance > speed) {
        // Нормализуем вектор и умножаем на скорость
        x += (dx / distance) * speed;
        y += (dy / distance) * speed;
    } else {
        // Если квадрат близок к целевой позиции, устанавливаем его точно в целевую позицию
        x = targetX;
        y = targetY;
    }

    ctx.fillStyle = (x === targetX && y === targetY) ? 'red' : 'blue'; // Меняем цвет при достижении цели
    ctx.fillRect(x, y, squareSize, squareSize); // Рисуем квадрат

    // Продолжаем анимацию до тех пор, пока квадрат не достигнет целевой позиции
    if (x !== targetX || y !== targetY) {
        requestAnimationFrame(animate);
    }
}

animate();