Как работает canvas при рисование отдельных фигур?

Question

[DVirt]

Здравствуйте.

Отрисовываю на canvas упорядоченные фигурки. Каждую отдельно взятую фигурку можно перемещать по полотну (используя DnD).


Вовремя перемещение фигурки перерисовывается полностью весь холст (на сколько я понимаю), что не есть эффективно для производительности.
Если я создам дополнительный элемент canvas и во время анимации буду рисовать в нем отдельно взятую фигуру, а в предыдущем полотне (где весь фигурки), воспользуюсь clearRect на определённую область, где размещалась ранее определенная фигурка до перемещения и по окончанию анимации перерисовать весь основной хослт.

Уточните, пожалуйста, верно ли я мыслю в данном направление или как работает canvas изнутри, если я на холсте изменяю хотя бы один пиксель (он реально перерисует весь холст или только один пиксель)?

Спасибо!

Comments

[Сергей Соколов]

разве у вас тормозит перетаскивание этих фигур?

В вашем браузере в Инструментах Разработчика есть режим, показывающий области экрана, где происходит repaint. При перетаскивании в canvas юраузерной перерисовки у меня в FF вообще не возникает. Проверял тут.

[DVirt]

Сергей Соколов: Нет, не тормазит. Но очень сильно напрягает, то что при изменение одного пикселя перерисовывается ВСЁ (если не использовать clearRect, но он тоже усложнит жизнь при перемещение над каким-либо элементом). Вообще хочется понять, как конкретно рисует canvas

[Сергей Соколов]

DVirt: всё перерисовывается только если вы всё сотрёте

context.fillRect(0, 0, canvas.width, canvas.height);

и потом заново станете рисовать. Сам элемент canvas вряд ли всё перерисовывает при drag.

[DVirt]

Сергей Соколов: Спасибо, это понятно, что я говорю canvas, как рисовать и когда. Другой вопрос - перемещение фигуры, над какой-либо фигурой при использовании clearReact фигура нижнего уровня затирается (понимаю, что её можно восстановить отслеживание координаты, но это лишние операции). Это я к чему, что проще использовать при анимации два канваса, один тупо рисует все блоки, другой отвечает за анимацию ?

[Сергей Соколов]

DVirt: часто делают несколько элементов canvas один над другим – слоёный пирог. В одной canvas одна фигура. При перетаскивании никак не конфликтует с прочими. Как вам такой вариант?

[DVirt]

Сергей Соколов: Вы сейчас озвучили, то вариант, который я описал вопросе))) Но меня пугает конец этого варианта по завершению анимации, когда требуется изменения от рисовать на основном холсте, есть два варианта:
1) использовать clearRect определенной области, но тут сложно вычислять, что изменилось.
2) не париться и перерисовать весь холст, но тут пугает перерисовка ВСЁ

Answer 1

[DVirt]

Большинство ответов я нашел тут