Манипулирование DOM медленное по сравнению с операциями холста с GPU-ускорением, поэтому я бы держался подальше от SVG и VML.
Что касается структурирования кода холста, то, конечно, не имеет смысла (особенно по соображениям производительности) очищать и перерисовывать весь холст, потому что игрок перемещал или выполнял действие. Исходя из вашего описания здесь, я предполагаю, что ваша игра будет 2D. Эти типы игр очень хорошо подходят для многоуровневой игры, если вы не делаете что-то довольно сложное, например Paper Mario. Вы должны смотреть на проблему с объектно-ориентированной точки зрения и при необходимости инкапсулировать свои процедуры рисования и объекты.
Например, создайте объект игрока, который поддерживает небольшой холст, представляющий персонажа. Вся логика, необходимая для поддержания состояния персонажа, хранится внутри объекта, и любые изменения, вносимые в него, не должны беспокоиться о других компонентах визуального представления игры. Аналогично, сделайте то же самое для фона, пользовательского интерфейса и всего, что вы можете абстрагировать в слой (в пределах разумного). Например, если вы играете в параллакс, у вас может быть слой foreground, background, character и user interface.
В конечном итоге вам нужно будет поддерживать состояние различных компонентов в вашей игре по отдельности. Анимации игроков, перемещение фоновых облаков, раскачивание деревьев и т. Д. Будут управляться соответствующими объектами. Поскольку у вас уже будет такой тип структуры кода, имеет смысл просто поддерживать основные компоненты на отдельных элементах canvas и объединять их вместе по мере необходимости для повышения производительности. Если персонаж перемещается в нижнем левом углу сцены со статическим фоном, вам не нужно повторно рисовать верхний правый угол (или 95% сцены, если на то пошло). Если вы рассматриваете возможности полноэкранного режима, это определенно является проблемой производительности.