Jak wykonać te kolejne punkty by umieścić image w środku konkretnego kształtu?

Witajcie,
mam napisać kod wg. poniższych punktów. Czy mógłby ktoś troszeczkę rozwinąć każdy punkt o kod? Dalej już sam pokombinuje.

1.Robisz przejrzystego div-a.
2.Do niego przypinasz <canvas>, nadajesz mu wymiary takie jak ma div.
3.Tworzysz znacznik img i do niego ładujesz zdjęcie.
4.Zdjęcie wyświetlasz na canvasie.
5.Rysujesz na canvasie "ścieżkę odcinania".
6.Pobierasz dane z canvasu i w pętli przebiegasz wszystkie piksele w canvasie. W pętli tej sprawdzasz, czy punkt leży wewnątrz ścieżki, czy na zewnątrz (jest na to odpowiednia funkcja). Jeśli punkt leży na zewnątrz ścieżki, to ustawiasz przeźroczystość w kanale alpha.

Robisz przejrzystego div-a.

js create div w Google.

.Do niego przypinasz <canvas>, nadajesz mu wymiary takie jak ma div.

js create canvas w Google, js resize element w Google.

Tworzysz znacznik img i do niego ładujesz zdjęcie.

js create img w Google.

Zdjęcie wyświetlasz na canvasie.

js draw image on canvas w Google.

itd. itd.