Řešení úlohy

Co je zde splněno

  • Na <canvas> je vykreslen obdélník (tělo semaforu) pomocí fillRect().

  • Tři kruhy (světla) jsou kresleny pomocí beginPath(), arc(), fill().

  • Vždy svítí právě jedno světlo; pořadí: červená → žlutá → zelená → znovu.

  • Před rozsvícením další barvy se světla mažou metodou clearRect() a znovu vykreslí.

  • Animace běží automaticky po načtení stránky (interval ~800 ms).

  • Tlačítko Start/Stop přepíná běh animace podle stavu bezi přes explicitní porovnání v if.