Element Canvas jest nowym znacznikiem w HTML5. Znacznik ten wprowadził do HTML obsługę renderowania grafiki 2D oraz 3D. Dzięki niemu za pomocą skryptów JavaScript możemy tworzyć zaawansowane aplikacje graficzne oraz np gry bez konieczności instalowania dodatkowych wtyczek takich jak flash lub Silverlight.

Canvas w prosty sposób umożliwia nam rysowanie elementów.

Prześledzmy kilka przykładów przygotowanych przeze mnie:

Jest to prosty edytor graficzny, który rysuje linie tam gdzie zaznaczymy myszką.

Rysowanie na Canvas polega na pobraniu elementu za pomocą jednej z dostępnych funkcji np. getElementById() oraz pobranie jego zawartości(context). Gdy już posiadamy te elementy, możemy rysować dowolne rzeczy za pomocą dostępnych w JavaScript. Dostępne metody możesz znaleźć tutaj.

Dzięki elementowi canvas możemy rysować dosłownie wszystko. Oto przykład ze strony w3c

 

Do bardziej zaawansowanych aplikacji polecam użycie frameworka kineticjs 

Jeżeli zainteresowałeś się tym elementem to na koniec przedstawiam film, który pokazuje krok po kroku jak stworzyć grę przeglądarkową za pomocą elementu canvas