HTML5 Canvas, hover na obrazku i przełączanie scen

Załączam 2 pliki JS prezentujące mój preferowany styl. ale jestem otwarty na propozycje.

Potrzebuję kod JavaScript, bez zbędnych bibliotek/frameworków,

- efekt fadeOut i fadeIn dla pojedynczego obrazka i całej sceny

- efekt slideOut i slideIn dla pojedynczego obrazka

- hover elementu dla zdefiniowanej ścieżki, na podstawie załączonego obrazka tartak.png, przydała by się obsługa czegoś takiego jak HTML image map, aby można było sobie łatwo definiować takie ścieżki

- hover obrazka z pominięciem koloru transparentnego, przykład w załączniku filmik z tartakiem, dodatkowo potrzebna poświata obrazka jak na filmie

- hover przycisków, (obojętnie czy po ścieżce czy jako png transparent), efektem dla hover jest powiększenie przycisku o 2% i rozjaśnienie o 3%;

4 sceny na których będzie prezentacja, przełączanie się między scenami z efektem przenikania scen, jedna zaczyna znikać a druga się zaczyna pojawiać

- menu podczas przełączania scen odjeżdża do dołu poza ekran, przycisk za przyciskiem nie wszystkie na raz

- w połowie przenikania zaczyna się pojawiać menu kolejnej sceny wjeżdżając z dołu z poza ekranu pojedynczo jeden za drugim, w krótkim odstępie czasu

Każda ze cen ma swoje menu, na kolejnych scenach pomijamy przycisk odwołujący do sceny na której się aktualnie znajdujemy

1) scena jedynie z przyciskami wycentrowanymi na dole sceny w jednej linii [scena 2] [scena 3] [scena 4], tło: bgScena1.jpg

2) hover transparentnego obrazka, trzeba wykorzystać załączony plik tartak.png oraz tło bgScena2i3.jpg odwzorować zachowanie z filmiku

3) hover obrazka po ścieżce, analogicznie jak w scenie 2 trzeba wykorzystać załączony plik tartak.png oraz tło bgScena2.3.jpg odwzorować zachowanie z filmiku

4) scena z efektem FadeOut, FadeIn dla obrazka pokazanego na scenie, tło bgScena4.jpg, na środku obrazek dog.jpg, pod nim 2 przyciski [pokaż] [ukryj] prezentujące efekt