Пиксельное рисование на канвасе [как рисовать линии при быстрых движениях мышки]

Всем привет!
Начинаю знакомиться с канвасом. Не могу разобрать, как должен работать алгоритм Брезенхэма. По идее он должен заполнять пустые клетки, когда быстро рисуешь указателем мыши. Но пропуски остаются. Почему?

https://jsfiddle.net/Andrei20/hk6rfs54/8/

Привет!
Есть предположение, что проблема может быть в следующем. Я думаю, что между событиями “mousedown” есть некоторый временной отрезок. То есть события “mousedown” приходят не после каждого передвижения курсора мыши между двумя соседними пикселями экрана, а просто, ну скажем, каждые n миллисекунд, когда обнаружено передвижение мыши. В результате имело бы смысл отлавливать два соседних события “mousedown” и как-то алгоритмически достраивать на канвасе линию между (x1, y1) и (x2, y2) координатами. Самый простой вариант по прямой между этими точками.

Не срабатывает блок кода отвечающий за заполнения пустот потому что условие

while (x1 != x2 || y1 != y2) {

всегда false.

Ты прав. Фишка вопроса в том что код который должен строить линию уже есть. Но линию не строит.

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

В общем виде (я использую несуществующие API) примерно так

node.on('mousedown', function (event) {
	let prevCoordinates = getCoordinates(event)

	node.on('mousemove', function (event) {
		// координаты текущего события
		const currentCoordinates = getCoordinates(event)

		// тут алгоритм заполнения пространства между координатами
		// из-за особенности работы событий (выстреливают максимум 60 раз в секунду)
		// currentCoordinates и prevCoordinates могут быть на достаточно большом растоянии друг от друга
		// тут по сути применяется алгоритм построения прямой между точками
		buildLine(currentCoordinates, prevCoordinates)

		// запоминаем текущее положение 
		prevCoordinates = currentCoordinates
	})

	// важно что mouseup может произойти за пределами того узла на котором считывается mousemove. Ловим события на корневом узле.
	// mousedown
	document.on('mouseup', function () {
		node.off('mousemove')
	})
})

Круто, я всё понял)
Получилось, благодарю!

1 Симпатия

Хз, я когда изучала канвас просто подключала JQEARY, mousemove и расчерчивала невидимую сетку для рисования используя округление до ближайшего десятка)