Kako bismo rotirali komponente, moramo promijeniti način na koji crtamo komponente. Jedina metoda rotacije dostupna za element platna rotirat će cijeli canvas.

Sve ostalo što nacrtate na platnu također će se rotirati, a ne samo određena komponenta.

Zbog toga je potrebno izvršiti neke promjene u metodi update():

Prvo spremamo trenutni objekt konteksta platna: ctx.save();

Zatim pomičemo cijelo platno u središte određene komponente, koristeći metodu prevođenja:

ctx.translate(x, y);

Zatim izvodimo željenu rotaciju metodom rotate(): ctx.rotate(kut);

Sada smo spremni nacrtati komponentu na platno, ali sada ćemo je nacrtati s središnjim položajem na položaju 0,0 na prevedenom (i rotiranom) platnu:

ctx.fillRect (širina / -2, visina / -2, širina, visina);

Kada završimo, moramo vratiti objekt konteksta natrag u njegov spremljeni položaj, koristeći metodu vraćanja: ctx.restore();

Komponenta je jedina stvar koja se rotira:

Odbijanje od prepreke                                                                                                                                                                                     Pomicanje objekata