Canvas 2D funguje podobně jako kreslení tužkou na papír. Nejprve „zvedneme tužku“ (beginPath()), posuneme ji na určité místo (moveTo(x, y)), nakreslíme čáru do jiného bodu (lineTo(x, y)) a nakonec řekneme „teď to obtáhni“ (stroke()). Díky tomu máme plnou kontrolu nad tím, kdy se kreslení začne, kam se vede, jak silná je čára a jakou má barvu. Tento mechanismus se nazývá cesta (path).

Teorie a principy

• beginPath(): začne novou cestu, stará už se neovlivňuje.

• moveTo(x, y): posune virtuální „pero“ na souřadnice, aniž by se něco vykreslilo.

• lineTo(x, y): přidá úsečku od aktuálního bodu do nového bodu.

• stroke(): obkreslí (vykreslí) aktuální cestu podle nastavení stylu čáry.

• ctx.lineWidth: nastavuje tloušťku čáry (v pixelech).

• ctx.strokeStyle: nastavuje barvu nebo vzor čáry.

• Správné pořadí je beginPath → moveTo → lineTo → stroke. Pokud beginPath() vynecháme, nové čáry se budou „lepit“ k těm starým.

Praktický příklad kódu

Tento kód nakreslí dvě čáry – jednu vodorovnou červenou a jednu šikmou modrou.

Typické chyby

• Zapomenuté beginPath(): nové úsečky se připojí k těm starým a čára bude pokračovat, kam student nechtěl.

• Volání stroke() příliš brzy: pokud zavoláme stroke() hned po moveTo() bez lineTo(), nic se nevykreslí.

• Nesprávné pořadí nastavení stylů: je třeba změnit lineWidth a strokeStyle před stroke().

• Souřadnice mimo plátno: pokud použijí hodnoty větší než width nebo height, čára se nebude zobrazovat.

Shrnutí

• Pro kreslení čar musíme pracovat s cestami (beginPath, moveTo, lineTo).

• Vždy kreslení zakončujeme příkazem stroke().

• lineWidth určuje tloušťku čáry, strokeStyle její barvu.

• Nezapomeňte začít novou cestu (beginPath()), pokud kreslíte další úsečku.