Html5 canvas formula za koordinate

[mslavko]

Napravio sam ovde tzv. html CANVAS i imam koordinate koje prikazujem na canvasu sa elementom PATH.

http://jsbin.com/jugola/2/edit?js,output - DEMO I KOD

Kao sto vidite na sredini CANVAS elementa nalazi se jedna crta i trougao koji imaju stalnu nepromenljivu vrednost tj. moraju uvek da budu na sredini ekrana u tom pravcu.

Kako mogu da iscrtam ostale elemente a to je PATH i grid tako da zadnja koordinata PATH - linije dodje na sredinu ekrana i uklopi se sa ovom crtom i trouglicem ?

Ima li ko ideju?


Ja sam pokusavao da uradim nesto sa CSS-om medjutim ima efekta na ceo canvas a ne na elemente unutar njega.

[mslavko]

Tj. ono sto moram da uradim jeste verovatno da krenem od zadnje tacke i da na osnovu nje izracunavam nove pozicije ostalih. ALi ako zadnja tacka ima koordinate (500,300) kako da izracunam ostale koordinate?

[mslavko]

Probao sam i ovo:

Da bih postavio zadnju tacku PTS niza na sredini, krenuo sam da nadjem koliko je ona daleko od sredine pa da onda sve tacke pomerim za to isto rastojanje, znaci da osnovu zadnje tacke koja ima koordinate (400,400) za isto toliko sam pomerio i ostale pa sam dobio sledeci prikaz:
http://jsbin.com/wuhuro

i to je ok, medjutim kako da rotiram celu putanju tako da na trougao dodje pod pravim uglom? Kako putanja tako i grid...