Když už umíme na canvasu kreslit základní tvary, dalším krokem je dát jim barvu a vzhled. Právě díky výplním a obrysům začnou tvary působit plastičtěji a dají se snadno odlišit. Canvas nabízí jednoduché metody jako fillRect(), které okamžitě vykreslí vyplněný obdélník, ale také možnost nastavit barvu a průhlednost výplně (fillStyle a globalAlpha) nebo kombinovat výplň s obrysem (strokeStyle, lineWidth). To je důležité pro tvorbu jednoduchých grafických prvků, jako jsou tlačítka, grafy nebo ikony.

Teorie a principy

• Výplň obdélníku:

  • fillRect(x, y, width, height) – vykreslí vyplněný obdélník rovnou (není potřeba beginPath()).

  • Barvu výplně nastavíme pomocí ctx.fillStyle = "red"; (barva, gradient, obrázek).

  • Průhlednost můžeme řídit buď fillStyle (RGBA formát), nebo nastavením ctx.globalAlpha.

• Obrys obdélníku:

  • strokeRect(x, y, width, height) – vykreslí jen ohraničení obdélníku.

  • Barvu nastavíme pomocí ctx.strokeStyle = "blue";.

  • Tloušťku určíme přes ctx.lineWidth = číslo;.

• Kombinace výplně a obrysu:

  • Nejprve vykreslíme fillRect, pak strokeRect.

  • Pořadí je důležité – obrys se může překrývat s výplní.

Praktický příklad kódu

Typické chyby

• Záměna fillStyle a strokeStyle – studenti nastaví barvu výplně, ale volají strokeRect, takže se nic nevyplní.

• Zapomenuté lineWidth – čára obrysu je příliš tenká a téměř neviditelná.

• Neobnovení globalAlpha – všechny další tvary zůstanou průhledné.

• Špatné pořadí – pokud vykreslíme obrys dřív a pak výplň, může být čára překryta.

Shrnutí

• fillRect() vykresluje rovnou vyplněný obdélník.

• fillStyle určuje barvu nebo vzor výplně.

• strokeRect() kreslí obrys, který ovlivňuje strokeStyle a lineWidth.

• Výplň a obrys se dají kombinovat – záleží na pořadí volání.

• globalAlpha umožňuje kreslit poloprůhledné tvary.