Po już dawnej zapowiedzi w końcu postanowiłem się szerzej przyjrzeć nowemu elementowi języka HTML 5 - czyli czym jest canvas?
Ok, na początek zobaczmy jak wygląda ten nowy i tajemniczy element <canvas>:
<canvas id="pierwszy_przyklad"
width=”150″ height=”150″></canvas>
Element Canvas posiada tylko dwa atrybuty; są nimi height i width. W powyższym przykładzie użyliśmy ich, ale w rozmiarach jakie sami chcieliśmy nadać naszej grafice. Są one opcjonalne i mogą być również określane jako własności DOM lub zasady CSS. Kiedy atrybuty wysokości i szerokości nie są określone, to wtedy obiekt <canvas> będzie posiadał wielkości domyślne czyli; 300 pikseli długości i 150 pikseli wysokości.
Elementu <canvas> możemy nadać takie same style jak normalne; obrazy (margines, obramowanie, tło, itd.). Kiedy do elementu <canvas> nie ma przypisanych żadnych stylów, to wtedy canvas będzie całkowicie przezroczysty.
Narysujmy, więc coś…
Wykonajmy nasz pierwszy rysunek za pomocą elementu canvas. Tworzymy pierwszą stronę, która będzie zawierała nasz powyższy kod elementu canvas, lecz samo wstawianie kodu nic nam nie wyświetli, a co dopiero cokolwiek ma narysować. Chcąc rozpocząć rysowanie musimy zastosować metodę DOM getContext. Każdy element canvas posiada metodę DOM zwaną getContext do uzyskania dostępu do funkcji rysujących. Metoda getContext może przyjąć tylko jeden parametr, który to jest trybem rysowania. Aktualnie jest dostępny tylko jeden tryb i jest to tryb 2d. W przyszłości będziemy mogli zobaczyć tryb 3d, lecz teraz pozostajemy przy trybie 2d. Korzystając z kolejnej metody DOM - getElementById, zdefiniujemy pierwszą linię skryptu pozwalającego nam na rozpoczęcie rysowania za pomocą elementu Canvas. Metoda ta pozwoli nam na uzyskanie dostępu do drugiej metody getContext, dzięki której mamy dostęp do trybu rysowania:
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
Starsze wersje przeglądarek?!
Firefox w wersji 1.0 i starsze jego wydania oraz np. Internet Explorer w wersji 6 nie potrafią rozpoznać elementu Canvas. Co teraz? 
Potrzebujemy metody chroniącej przeglądarki, które nie wspierają canvas, przed uruchomieniem naszego skryptu. Można tego łatwo dokonać wykonując test metody getContext. Kawałek górnego kodu wyglądał będzie tak:
var canvas = document.getElementById('canvas');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
// kod rysowania
}
Do kodu należy dodać jeszcze wyrażenie if, aby przeglądarka nie potrafiąca wczytać Canvas, nie próbowała tego zrobić.
Łączenie kodu!
Połączę teraz wszystko, tworząc nam szablon podstawowego dokumentu do innych przykładów:
<head>
<title>Szablon elementu Canvas</title>
<script type="text/javascript">
function draw(){
var canvas = document.getElementById('pierwszy_przyklad');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
}
}
</script>
<style type="text/css">
canvas { border: 2px solid black; }
</style>
</head>
<body onload="draw();">
<canvas id="pierwszy_przyklad" width="150" height="150"></canvas>
</body>
</html>
SZABLON - pobierz!
Wracając do kodu i spoglądając na skrypt zobaczymy, że została wywołana funkcja draw, która zostanie raz wywołana, kiedy zakończy się ładowanie strony (poprzez umieszczenie atrybuty onload w znaczniku body).
Ok, pierwsze koty za płoty :P. Utworzyliśmy szablon, który posłuż nam niedługo jako podkład pod bardziej zaawansowane przykłady. Niebawem kolejne części opisu Canvas, a między czasie odsyłam do korzystania z zasobów Mozilla Developer Center.
Treść wraz przykładami została opracowana na podstawie Przewodnika po canvas, będącego częścią MDC PL.