co tu się dzieje?

Witam. Jestem początkujący jeśli chodzi o javascript czy ktoś mógłby mi powiedzieć co się dzieje w pierwszych 10 linijkach kodu?
Uczyłem się podstaw ale jak na to patrzę to głupieje. Ogólnie wiem że pobiera się tutaj zdj żeby później je wykorzystywać w projekcie...
Ale potrzebuję trochę rozbić to na mniejsze części. Robię taki tutorial ale tam nie jest to zbytnio wyjaśnione.

To lecimy linijka po linijce:

1. Tworzymy funkcję loadImage z jednym argumentem url;
2. Zwracamy ```Promise`` - musisz o tym więcej poczytać, ale można to porównać do 'obietnicy, że coś zostanie wykonane w międzyczasie';
3. Wewnątrz obietnicy tworzymy nowy obiekt Image, czyli to samo co document.createElement('img');
4. Podpinamy listener na zdarzenie load, czyli w momencie załadowania obrazka obietnica zwraca ten obrazek;
5. Do utworzonego obrazka przypisujemy atrybut src. Jest to tożsame napisaniu w HTML <img src="test.jpg">. W tym momencie rozpoczyna się ładowanie;
6. Tworzy canvas
7. Wyciąga z ```canvas`` kontekst do rysowania w 2d

Zakładam, że dalej ten obrazek jest rysowany wewnątrz canvasu :)