--- title: Rysowanie grafiki z elementem canvas slug: Web/API/Canvas_API/Tutorial tags: - Grafika - HTML - HTML5 - Internet - Kanwa - Poradnik - instrukcja translation_of: Web/API/Canvas_API/Tutorial ---
{{CanvasSidebar}}

<canvas> jest elementem HTML, który może być użyty do rysowania grafik używając skryptów (często JavaScript'u). To może zostać użyte do  na przykład rysowania wykresów, tworzenia kompozycji zdjęcia lub prostych (i i nie prostych) animacji. Obrazy na tej strone pokazują przykłady implementacji <canvas>, które będą stworzone w tym poradniku.

Ten poradnik opisuje jak używać elementu <canvas> do rysowania grafik 2D, rozpoczynając od podstaw. Zawarte przykłady powinny dać Ci kilka czystych pomysłów co możesz zrobić z kanwą i zapewnią przykłady kodu, które mogą ci pomóc w budowaniu własnej zawartości.

Wprowadzono ją jako pierwszą w WebKit przez Apple dla OS X Dashboard, <canvas> od tego momentu została wprowadzona do przeglądarek. Dziś wszystkie poważne przeglądarki wspierają kanwę.

Zanim zaczniesz

Używanie elementu <canvas> nie jest trudne, ale potrzebujesz podstawowego zrozumienia HTML i JavaScript. Element <canvas> nie jest wspierany w kilku starszych przeglądarkach, ale ma wsparcie ze strony nowych wersji poważnych przeglądarek. Domyślnym rozmiarem kanwy jest 300 px × 150 px (szerokość × wysokość). Ale własne rozmiary mogą zostać zdefiniowane za pomocą własności HTML height i width. W celu narysowania grafik na kanwie używamy obiektu kontekstu w JavaScript, który tworzy grafiki w locie.

W tym poradniku

Zobacz także

Notka dla współtwórców

Z powodu niefortunnego błędu technicznego, który miał miejsce 17 Czerwca 2013, straciliśmy historię tego poradnika, wliczając w to także atrybucje do wszystkich współtwórców do zawartości tego. Przepraszamy za to i mamy nadzieję, że wybaczycie nam tą niefortunną wpadkę.

{{ Next("Web/API/Canvas_API/Tutorial/Basic_usage") }}