Tipy pro lepší výkon HTML5 canvasu

Vydáno:

Jiří Kupka
  • Není potřeba vykreslovat objekty, které se zobrazují mimo canvas. Objekty jdou vykreslit i za hranice rozměrů canvasu, uživatel je však nevidí. Toto počítání zbytečně zvyšuje počet operací nad canvasem bez viditelných výsledků. Při zjištění, že by se objekt vykreslil mimo canvas, nevykreslovat.
  • Pokud potřebujete vykreslit mnoho objektů vyplněných barevnou gradientou, zkuste si místo té generované kontextem vytvořit statické obrázky např. ve formátu png a ty vkládat do canvasu. Vyplatí se to. Rychlost je úplně někde jinde.
  • Canvas dovoluje vykreslit objekt na souřadnice udané desetinnou čárkou. Pomocí anti-aliasingu se potom snaží vyhladit hrany. Je dobré souřadnice udávat v celých číslech.
  • Operace nad canvasem je dobré provádět hromadně. Pokud například potřebujeme vykreslit sadu linek, navrhneme algoritmus tak, aby se vytvořili nejlépe jedním tahem.
  • Je vhodné si předgenerovat grafické prvky, které se na plátně nemění. Pokud máme scénu, do které se jednou vykreslí sada objektů a po celý běh aplikace scéna zůstane stejná, uložíme si ji do png obrázku nebo sekundárního canvasu. Je zbytečné objekty vykreslovat v každé další iteraci znovu.
  • Pro vyšší výkon je důležité vyhnout se zbytečnému přepínání stavu/vlastností canvasu. Pokud potřebujeme vykreslit sadu objektů několika barev, vyplatí se nejdříve vykreslit všechny objekty jedné barvy, poté všechny objekty další barvy a tak dále.
  • Používejte requestAnimationFrame místo setTimeout a setInterval. Jako parametr přijímá funkci vykreslující objekty do canvasu a chytře řídí vykreslování podle potřeby a dostupných prostředků. Například setInterval neřeší kontext prohlížeče. Provádí se stále, i když okno s aplikací není aktivní a nestará se o to, co se na obrazovce změnilo a co zůstalo stejné.
  • V každé další iteraci vykreslovací smyčky můžete kontrolovat, co se na plátně změnilo. Pokud pouze jeden objekt změnil svou pozici/stav, není potřeba přegenerovat celé plátno, ale pouze tu část, která se změnila.

Další zajímavé tipy a ukázky implementace najdete na: http://www.html5rocks.com/en/tutorials/canvas/performance/