Почему искажение при rotate в canvas?

Question

[keslo]

Добрый вечер.
Подскажите, почему искажается текстура планеты при применении rotate в canvas?
Вроде бы должен быть поворот без искажения?
codepen.io/keslo/pen/avEoev

Answer 1

[GreatRash]

habrahabr.ru/post/158495

Comments

[copal]

и к чему Вы эту ссылку дали?

[GreatRash]

copal: К тому, что у вас картинка вращается вокруг начала координат. В статье написано. что с этим делать.

[keslo]

GreatRash: тут не смещение, а искажение получается

[keslo]

GreatRash: я пока сам не понял почему, но выходит не просто поворот в canvas, а ещё и деформация. Если убрать border-radius, то становится более наглядно в моём примере

[GreatRash]

keslo: А, понял в чем дело. Задавайте размер канвасу не в CSS, а при помощи атрибутов.

codepen.io/anon/pen/PPEjBx

Система координат для канваса задаётся атрибутами тега, а не стилями. Т.е. не смотря на то, что вы сказали канвасу в CSS, что его размеры должны быть 300х300 внутри его система координат отличается. Подробности по ссылке:

https://html.spec.whatwg.org/multipage/scripting.h... (см. примечание зелёненькое - Note)

[GreatRash]

keslo: Ещё можно задать размеры канвасу прям скриптом (ctx.width = 300) если атрибуты писать не хочется.