Рисунок на холсте с помощью "карандаша"

Question

Я сделал скрипт , который рисует серию линий на холсте, что делает его похожим на эскиз. Есть две проблемы со сценарием. Во-первых, почему значение у вдвое больше, чем должно быть? И во-вторых, почему линия шириной в несколько пикселей исчезает?

Я пробовал это и в Google Chrome, и в Firefox, и получаю одинаковые неверные результаты. Я понимаю, что могу разделить значение y на два, чтобы решить первую проблему, но эта часть моего вопроса - зачем мне это делать. Я не должен был.

Answer 1

Я думаю, у вас есть две проблемы:

1. Вам нужно быть более осторожным при расчете смещения места рисования. У меня есть код ниже, который демонстрирует, как справиться с этим правильно.
2. Вы не устанавливаете ширину и высоту для самого элемента <canvas>, что означает, что он будет масштабировать ваши линии забавными способами в зависимости от того, что вы установили в вашем CSS.

Пример

Я создал простое приложение для совместной работы, используя <canvas> и socket.io, которое позволяет рисовать на экране, как карандашом. Вы можете проверить это здесь:

http://xjamundx.no.de/

Источник также находится на github, если это может помочь:

• https://github.com/xjamundx/CollabPaintJS/ (основной репо)
• https://github.com/xjamundx/CollabPaintJS/blob/master/public/collabpaint.js (код для рисования на холсте)

В частности, я делаю что-то подобное, чтобы выяснить, где рисовать вещи:

x = e.clientX + window.scrollX
y = e.clientY + window.scrollY
x -= $game.offsetLeft
y -= $game.offsetTop

Answer 2

Дайте ширину и высоту вашему холсту; всегда! http://jsfiddle.net/mz6hK/7/

исправлено