Как исправить баг когда я рисую кистью на резких поворотах?

Question

[zeni1agent]

У меня есть вот такой код

И в последствий вопрос
почему кисить на резких поворотах уносить в сторону
И почему при изменений размера в can.width; и can.height;
Центр кисти уходит куда то в сторону от курсора
Может ли кто помочь решить проблему?

Answer 1

[Антон Швец]

вот вам пример для размышления
https://codepen.io/anon/pen/vwOrKX

почему кисить на резких поворотах уносить в сторону

Потому что lineJoin = "miter" вот так вот работает

И почему при изменений размера в can.width; и can.height;
Центр кисти уходит куда то в сторону от курсора

Размеры канваса это вовсе не размеры хтмл-элемента. Можно в маленький квадратик засунуть огромный канвас, он будет масштабироваться.
Чтобы точно совмещать точку на канвасе и курсор, нужно переносить координаты мышки в систему координат канваса, для этого нужно знать отношение canvas.width/canvas.clientWidth к примеру
Поэтому размеры хтмл-элемента канваса лучше задавать явно и жесткие. Не придется пересчитывать коэффициенты при каждом ресайзе.

Comments

[zeni1agent]

Размеры канваса это вовсе не размеры хтмл-элемента. Можно в маленький квадратик засунуть огромный канвас, он будет масштабироваться.
Чтобы точно совмещать точку на канвасе и курсор, нужно переносить координаты мышки в систему координат канваса.

А разве в can.addEventListener('mousedown', function(e)
Не должны хранится координаты canvas
Тогда как синхронизировать эти координаты?

[Антон Швец]

zeni1agent, нет, это мышиное событие и там координаты мышки
я немного оптимизировал пример, посмотрите еще https://codepen.io/anon/pen/vwOrKX

Про масштабирование сейчас напишу

[Антон Швец]

zeni1agent, https://codepen.io/anon/pen/KLpBKj

Если все ясно, отметьте как решение.

[Антон Швец]

zeni1agent, вот, с пересчитыванием масштабирования координат курсора, даже если растягивать окно
https://codepen.io/anon/pen/WBvKpq?editors=1111

[Антон Швец]

zeni1agent, ты получаешь координаты мышки относительно вьюпорта, а не относительно элемента.
Надо получать координаты элемента на странице с помощью getBoundingClientRect и учитывать смещение

[zeni1agent]

Антон Швец, Я сделал точно так же как и у вас но
Когда я прописываю в css свойство absolyte
Появляется вот такой баг.
https://codepen.io/zeni-agentt/pen/pmjeaw

[Антон Швец]

zeni1agent, вот https://codepen.io/anon/pen/byVqXW?editors=0010