Кривые Безье рисуют вытянутые эллипсы в холсте HTML5

Question

Этот метод рисования эллипсов выглядит чистым и элегантным: http://www.williammalone.com/briefs/how-to-draw-ellipse-html5-canvas/

Однако при тестировании я обнаружил, что полученные эллипсы были растянуты. Установив ширину и высоту равными, я получил эллипсы, которые были примерно на 20% выше ширины. Вот результат с width = height = 50:

Чтобы убедиться, что проблема была в самом методе, я попытался изменить алгоритм так, чтобы все точки, используемые для кривых Безье, были повернуты на 90 градусов. Результат:

Опять же, в обоих случаях я ожидал круг 50х50. Используя метод arc, описанный в Как нарисовать овал на холсте html5? отлично работает, генерируя идеальные круги 50x50 (которые затем можно растянуть в эллипсы, используя scale).

Что происходит?

Answer 1

При написании вопроса я понял, что неправильно понял, как работают контрольные точки кривой Безье. Если присмотреться к ресурсу , который я использовал, дуги эллипса никогда не касаются границ x - width / 2 и x + width / 2 на рисунке. Так что это не совсем "ширина" вообще.

В будущем я буду придерживаться arc вместо bezierCurveTo.

(Это можно настроить с помощью «каппа»; см. этот ответ . Этот подход предпочтительнее дуги, если вы используете stroke, а не просто fill, поскольку scale приведет к неравномерной толщине линии.)