vasIvas

Я не совсем понял в чем проблема, но если в том, что картинки не успевают загрузится, то Вам нужно подписаться на окончание загрузки. Событие называется 'load'. Потом нужно дождаться пока все картинки загрузятся и после этого продолжать выполнять код дальше. То есть это нормально, если Вы сначала загрузите картинки и только потом запустите приложение.

WebGL увеличивает производительность, это его единственный плюс.
А актуальные минусы - на данный момент нет хорошего api, нет эффектов.
Не все браузеры его поддерживают, а те что поддерживают его, делают
это, как всегда, по разному. У одного 60fps, а у другого 30fps. Нужно обладать
знаниями растрового рендера, а это много времени отберет.

что делают как и почему easeIn, easyOut и многие десятки других видов анимаций.

Есть онлайн сервисы, где можно поиграться с настройками "кодовой" анимации.

Непонятно, как добиваться нужного эффекта.

Это не из темы "я хочу научится завязывать шнурки", этому долго учатся на курсах аниматоров.

С чего начать её создаие?

У Вас в голове должны не мысли, а кадры. Научитесь строить кадры, как сцены в кино,
их же не просто взяли и сняли, а создают макеты, описания. Нарисуйте схему движения, время..

Или вот попал на сайт казино - смотрю как красиво вращаются колесо слот-машины на канвасе.

Если красиво, то это виде, созданное в видеоредакторе.

Универсальный конструктор, это 3Dmax. Удачи!