Изменить фоновое изображение в холсте HTML5

Question

Мне нужно изменить фоновое изображение на холсте HTML5.

Я хочу использовать 2 разных эскиза в качестве кнопок, и когда я нажимаю на одно из изображений, фон должен быть изменен на это конкретное изображение.

Answer 1

Техника 1

1. На click соответствующих кнопок задайте уникальный класс CSS для вашего <canvas> элемента.
2. Используйте CSS, чтобы применить фоновое изображение к вашему холсту.

Команды рисования и стирание холста не влияют на CSS-фоновое изображение позади вашего контента.

Техника 2

1. Напишите функцию redraw(), которая знает, как стереть холст и восстановить ваш рисунок, включая определение того, какое изображение будет сначала отображаться в качестве фона.
2. На click кнопок установить переменную и повторно вызвать вашу функцию redraw(). Это сотрет ваш холст и использует переменную, чтобы нарисовать правильное изображение.