Súčasné prehliadače už majú slušnú podporu nového HTML elementu “canvas”. Ku sto percentám im však stále  čosi chýba. Najväčší problém pri kreslení v canvase som mal s používaním textu. Môj prehliadač text nebol schopný vykresliť. V takom prípade netreba zúfať, existuje totiž niekoľko možností, ako chýbajúcu funkcionalitu nahradiť. Priblížime si ich.

Prekrývajúce HTML

Tento spôsob má od elegantného riešenia veľmi ďaleko, no je to jedna z možností. Princípom je vpísať požadovaný text do DIV elementu a ten následne pomocou CSS umiestniť na požadované miesto. Z-index daného DIVu musí mať samozrejme vyššiu hodnotu ako canvas, aby ho prekryl.

Bitmapové fonty

O čosi elegantnejšie riešenie je použitie bitmapového fontu. Tu využívame prácu s obrázkami vrámci canvasu. Jednotlivé písmená máme jednoducho uložený v obrázku - bitmape. Z tohto obrázku vysekávame jednotlivé písmená a ukladáme za sebou v canvase ako obrázky. Toto riešenie je dobré, pokiaľ nepotrebujeme rôzne štýly, veľkosti (pri zväčšovaní bitmapy vznikajú artefakty) a farby písma (farba by sa teoreticky dala meniť aj za behu, ale nie je to príliš pohodlné). V takom prípade by to znamenalo vytváranie veľkého množstva bitmáp a s tým súvisiace väčšie nároky na prenos danej stránky. Generovanie bitmáp je možné si uľahčiť na stránke Benjamina Joffeho.

Vektorové fonty

Poslednou možnosťou je generovanie fontov pomocou canvas funkcií. Tu si každé písmeno nakreslíme pomocou funkcií path, moveTo, lineTo. Je to zrejme najmenej pohodlné, takže najskôr by sme siahli po nejakom generátore alebo knižnici. Okrem zníženej pohodlnosti je nevýhodou riešenia aj výpočtová a pamäťová náročnosť pokiaľ potrebujete náročné fonty.

Jednoduchý vektorový text

V prípade, že nie ste priveľmi nároční na text v canvas elemente a stačí vám, že sa nejaký text vytlačí, siahnite po implementácii Jima Studta a jeho knižnice pre canvas text. Zatiaľ obsahuje len jeden font, ale môžete si nastaviť jeho veľkosť a na rozdiel od bitmapového riešenia aj farbu. Výhodou je, že zavolaním inicializačnej metódy skript pridá implementácie metód do inštancie contextu, ktoré ďalej používame už len ich zavolaním priamo z neho. Táto možnosť sa mi zdá momentálne najvhodnejšia a použil som ju pri maľovaných krížovkách.

Tagy: canvas, html