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: