Canvas. 2d-контекст. Z-буфер.

[laimas]

ну, если нарисовать непрозрачную хрень поверх чего-то уже нарисованного, то выходит, это что-то рисовали зря.

Это можно определять режимом наложения - globalCompositeOperation.

[laimas]

да крутая штука

ну в общем полезная при наложении - https://developer.mozilla.org/ru/doc...ositeOperation

[Alexandroppolus]

globalCompositeOperation

он тут вообще не причем. Его надо оставить как есть, "source-over". Автору топика интересно, как это всё оптимизировать, и не рисовать те части нижних слоев, которые потом закроются верхними.

[laimas]

он тут вообще не причем. Его надо оставить как есть, "source-over".

И не хочу отрисовывать сначала фон, потом класть на него детали, а на эти детали ещё что-то рисовать последовательно.

Деталь, это может быть 10х10, которая накладывается по указанной координате. А вот как эти детали должны взаимодействовать на холсте, это уже как раз режимом можно определить.

[MallSerg]

Alexandroppolus, но есть подозрение что канвас перерисовывается полностью каждый раз на любое изменение)

Это зависит от режима(контекста) в котором поступают команды на отрисовку но если вкратце то команды сначала накапливаются и только после этого рисуются и то далеко не всегда.
Перекрытые регионы перерисовыватся не будут.

Люди с зарплатой в 50к $ из крупнейщих IT корпораций в течении десятков лет оптимизируют рендер браузера и канваса в том числе (это про браузерными войны). И тут приходит автор топика и реально думает что у него на скриптовом языке в браузере получится лучше. 99% таких оптимизаций приводят к обратному эффекту.

Если автор действительно хочет оптимизировать то ему нужно начать с отладчика и поиска узких мест.

Оптимизация без причины - признак дурачины.

[Alexandroppolus]

Но при globalCompositeOperation обычно в обратном порядке рисуют, т.е. сначало детали, затем фон (source-out) за вычетом деталей

Вот рисование "сначала фон, потом картинка" - https://jsfiddle.net/3gg1j09y/
А вот - как ты предложил - https://jsfiddle.net/ojxtsode/