Вы можете использовать css позицию 2 (или больше) холстов друг над другом и позволить каждому работать как слой. Im not sure Точно, как это сделать с помощью css, но я сделал что-то подобное, должен иметь холсты над eachother, один для 2d-контента и один для webgl, и пользователь может легко переключаться между ними
<div height="640" style="position: absolute;">
<canvas width="640" style="position: absolute;visibility: hidden;" height="640" tabindex="1"></canvas>
<canvas width="640" height="640" style="visibility: hidden;position: absolute;"></canvas>
</div>
Я думаю, что код не является пропуском proff и не прав, но он работает. Надеюсь это поможет.
Если я не использую обходное решение, которое вы упомянули. (Я фактически сделал приложение, подобное тому, где я нарисовал 2d тени на экранном холсте и нарисовал его поверх основного холста с прозрачностью, выглядел довольно аккуратно)