CSS Flexbox: вы можете использовать CSS Flexbox для автоматической регулировки ширины и высоты холста в зависимости от размера его контейнера. Установив для свойства display контейнера значение flex и настроив свойства flex элемента холста, вы можете добиться автоматического изменения размера.

JavaScript и событие изменения размера окна. Вы можете использовать JavaScript для обнаружения события изменения размера окна и соответствующей динамической настройки размера холста. Прослушивая событие изменения размера, вы можете обновить атрибуты ширины и высоты холста на основе текущих размеров окна.

Единицы области просмотра CSS. Единицы области просмотра CSS, такие как vw и vh, позволяют устанавливать ширину и высоту элемента относительно размера области просмотра. Вы можете использовать эти единицы измерения, чтобы сделать элемент холста отзывчивым и автоматически регулировать его размеры в зависимости от размера области просмотра.

CSS Grid: макет CSS-сетки обеспечивает мощный способ создания гибких и адаптивных дизайнов. Используя сетку CSS, вы можете создать контейнер сетки и поместить элемент холста в ячейку сетки, позволяя ему расширяться или сжиматься в зависимости от доступного пространства.

Медиа-запросы CSS. Медиа-запросы CSS можно использовать для определения разных стилей для разных размеров области просмотра. Указав разные значения ширины и высоты для элемента холста в определенных точках останова медиа-запроса, вы можете добиться автоматического изменения размера в зависимости от размера устройства или экрана.