Как всё-таки ПРАВИЛЬНО вставлять картинки в canvas?

Question

[Даниил]

const img = new Image();
img.src = 'path/img.png';

А дальше как всё-таки правильнее сделать canvas.drawImage(img, x, y); ?
Поместив в window.onload ?
Поместив в img.onload ?
Или без ничего?

Рассмотрим такую задачу: отрисовать сначала фон, потом персонажа.
При реализации без onload ничего не отрисовывается, т.к. не успевает загрузиться.
При реализации с img.onload либо персонаж накладывается сверху фона (что мне и нужно) , либо фон накладывается сверху персонажа...
При реализации с засовыванием всего в window.onload и попытке проанимировать получаю ошибку о чрезмерной рекурсии...

На всех видео-гайдах на YouTube по созданию игр на JS никто не использует "onload"... И всё работает. Почему? Потому что у них файлы успевают загрузиться перед отрисовкой из-за времени выполнения кода до самой отрисовки и файл просто успевает загрузиться (в отличии от моего случая, где я на следующей строке хочу сразу отрисовать то, что загрузил)?

Столько непонятностей... Спасибо за ответы!

Answer 1

[twoone]

Изображение представляется файлом хранящимся на сервере и заключающего в себе информацию о пикселях в виде двухмерного массива чисел. Самый простой способ получить эти данные в программе загрузить их с помощью объекта Image, а затем передать его в метод drawImage для отрисовки на канвасе. Если вы не дождетесь полной загрузки данных то рисовать будет попросту нечего. Поэтому Ваша цель заключается в полной загрузке всех изображений и отрисовки их в нужном порядке. Этого проще всего добится с помощью Promise.