initial commit

4 files changed, 919 insertions, 0 deletions

diff --git a/files/pl/web/api/canvas_api/tutorial/basic_usage/index.html b/files/pl/web/api/canvas_api/tutorial/basic_usage/index.html
new file mode 100644
index 0000000000..ca8bc15570
--- /dev/null
+++ b/files/pl/web/api/canvas_api/tutorial/basic_usage/index.html
@@ -0,0 +1,169 @@
+---
+title: Podstawowe użycie elementu canvas
+slug: Web/API/Canvas_API/Tutorial/Basic_usage
+tags:
+  - Canvas
+  - Grafika
+  - HTML
+  - Płótno
+  - Sredniozaawansowany
+  - Tutorial
+translation_of: Web/API/Canvas_API/Tutorial/Basic_usage
+---
+<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial", "Web/API/Canvas_API/Tutorial/Drawing_shapes")}}</div>
+
+<div class="summary">
+<p>Zacznijmy od przyjrzenia się znacznikowi {{HTMLElement("canvas")}} należącego do zbioru elementów {{Glossary("HTML")}}. W tym rozdziale nauczysz się jak ustanowić dwuwymiarowy kontekst płótna, oraz narysujesz swój pierwszy rysunek.</p>
+</div>
+
+<h2 id="Element_&lt;canvas>">Element <code>&lt;canvas&gt;</code></h2>
+
+<pre class="brush: html">&lt;canvas id="tutorial" width="150" height="150"&gt;&lt;/canvas&gt;
+</pre>
+
+<div class="note">
+<p><strong>Uwaga:</strong> W tym tutorialu będziemy używać słowa <u>canvas</u> zamiennie ze słowem <u>płótno</u>.</p>
+</div>
+
+<p>Na pierwszy rzut oka {{HTMLElement("canvas")}} wygląda jak element {{HTMLElement("img")}}, z tą różnicą, że nie posiada on atrybutów <code>src</code> oraz <code>alt</code>. W swojej specyfice element <code>&lt;canvas&gt;</code> posiada jedynie dwa atrybuty, {{htmlattrxref("width", "canvas")}} oraz {{htmlattrxref("height", "canvas")}}. Nie są one wymagane oraz mogą być ustanowione za pomocą <a href="/en-US/docs/Web/API/HTMLCanvasElement">właściwości</a> {{Glossary("DOM")}}. Jeśli wartości atrybutów <code>width</code> oraz <code>height</code> nie zostaną określone, zostaną użyte domyślne: szerokość - <strong>300 pikseli</strong>, wysokość - <strong>150 pikseli</strong>. Za pomocą {{Glossary("CSS")}} możemy narzucić rozmiar płótna, ale podczas renderowania dokumentu, rysunek zostanie dopasowany do domyślnej wielkości: jeśli wartości określone za pomocą CSS nie będą proporcjonalne z wartościami domyślnymi, rysunek zostanie zniekształcony.</p>
+
+<div class="note">
+<p><strong>Uwaga:</strong> Jeśli rysunek wydaje się zniekształcony, spróbuj określić atrybuty <code>width</code> oraz <code>height</code> bezpośrednio wewnątrz znacznika <code>&lt;canvas&gt;</code>, a nie za pomocą CSS.</p>
+</div>
+
+<p><a href="/en-US/docs/Web/HTML/Global_attributes/id"><code>id</code></a> jest <a href="/en-US/docs/Web/HTML/Global_attributes">globalnym atrybutem HTML</a> i można go stosować z każdym elementem HTML (tak samo jak np. <code><a href="/en-US/docs/Web/HTML/Global_attributes/class">class</a></code>). Warto go używać, aby w ten sposób mieć dostęp do elementu z poziomy skryptu.</p>
+
+<p>Element <code>&lt;canvas&gt;</code> można stylizować za pomocą CSS tak, jak każdy obraz ({{cssxref("margin")}}, {{cssxref("border")}}, {{cssxref("background")}}…). Z tym, że żadna z reguł CSS nie wpłynie na zawartość płótna. Zobaczymy to w <a href="/pl/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">późniejszym rozdziale</a> tego tutorialu. Jeśli nie określimy inaczej, tło płótna będzie w pełni przezroczyste.</p>
+
+<div id="section_2">
+<h3 id="Treść_zastępcza">Treść zastępcza</h3>
+
+<p>Inaczej niż w przypadku {{HTMLElement("img")}}, w elemencie <code>&lt;canvas&gt;</code> tak samo jak w {{HTMLElement("video")}}, {{HTMLElement("audio")}}, czy {{HTMLElement("picture")}} łatwo jest określić to, co będzie wyświetlane w starszych przeglądarkach albo tych, które jeszcze nie obsługują tego elementu, jak np. Internet Explorer poprzedzający wersję 9 oraz przeglądarki tekstowe.</p>
+
+<p>Aby zapewnić treść zastępczą wystarczy zagnieździć ją wewnątrz elementu <code>&lt;canvas&gt; ... &lt;/canvas&gt;</code>. Przeglądarki nieobsługujące tego elementu, zignorują rysunek i zamiast tego wyświetlą to, co zagnieździliśmy wewnątrz tegoż elementu. Natomiast przeglądarki obsługujące element <code>&lt;canvas&gt;</code> wygenerują jego zawartość ignorując przy tym wszystko, co znajduje się wewnątrz tego elementu.</p>
+
+<div class="note">
+<p><strong>Uwaga:</strong> Gdy mówimy o tym, co znajduje się <strong>w znaczniku</strong> <code>&lt;canvas&gt;</code>, mamy na myśli jego atrybuty czyli to, co znajduje się pomiędzy znakami <code>&lt;</code> oraz <code>&gt;</code> (np. <code>&lt;canvas class="nazwa-klasy"&gt;</code>. Natomiast gdy mówimy o tym, co znajduje się <strong>wewnątrz elementu</strong> <code>&lt;canvas&gt;</code>, mamy na myśli wszystko, co znajduje się pomiędzy znacznikiem otwierającym <code>&lt;canvas&gt;</code>, a znacznikiem zamykającym <code>&lt;/canvas&gt;</code> (np. <code>&lt;canvas&gt;&lt;img src="/canvas.jpg"&gt;&lt;/canvas&gt;</code>). W tym drugim przypadku mówimy o <em>zagnieżdżaniu   </em>jednego elementu w drugim.</p>
+</div>
+
+<p>Treść zastępczą może stanowić opis, tego co znajduje się na płótnie lub statyczny obraz wygenerowanej zawartości. Oto przykład:</p>
+
+<pre class="brush: html">&lt;canvas id="stockGraph" width="150" height="150"&gt;
+  current stock price: $3.15 + 0.15
+&lt;/canvas&gt;
+
+&lt;canvas id="clock" width="150" height="150"&gt;
+  &lt;img src="images/clock.png" width="150" height="150" alt=""/&gt;
+&lt;/canvas&gt;
+</pre>
+
+<p>Umieszczanie tekstu w stylu: <em>Twoja przeglądarka nie obsługuje elementu canvas</em>, nie pomoże czytelnikowi w zrozumieniu treści. Zapewnienie treści zastępczej uczyni <a href="/pl/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility">element canvas bardziej dostępnym</a>.</p>
+
+<h3 id="Wymagany_znacznik_końca_&lt;canvas>">Wymagany znacznik końca <code>&lt;/canvas&gt;</code></h3>
+
+<p>Z uwagi na sposób w jaki tworzymy treść zastępczą, znacznikowi <code>&lt;canvas&gt;</code> <strong>musi towarzyszyć</strong> znacznik zamykający <code>&lt;/canvas&gt;</code>.  Gdybyśmy go nie wprowadzili, przeglądarka zinterpretowałaby wszystko, co znajduje się po znaczniku otwierającym <code>&lt;canvas&gt;</code> jako treść zastępczą.</p>
+
+<p>Jeśli nie decydujemy się, aby zapewnić treść zastępczą, w dalszym ciągu <strong>musimy</strong> użyć znaczników początkowego i końcowego <code>&lt;canvas id="foo" ...&gt;&lt;/canvas&gt;</code>, z tą różnicą, że nie będziemy umieszczać niczego wewnątrz tego elementu. Jest to prawidłowy zapis dla przeglądarki, która obsługuje element <code>canvas</code>. Przeglądarki, które go nie obsługują, niczego w tym miejscu nie wyświetlą.</p>
+
+<h2 id="Kontekst_renderingu">Kontekst renderingu</h2>
+
+<p>Element {{HTMLElement("canvas")}} tworzy powierzchnię rysunkową o stałym rozmiarze zapewniając jeden lub więcej kontekstów renderingu, które są używane do tworzenia i manipulowania wyświetlaną zawartością. W tym tutorialu skupimy się na kontekście dwuwymiarowym (2D). Inne konteksty mogą wykorzystywać odmienne sposoby renderowania, np <a href="/pl/docs/Web/WebGL">WebGL</a> wykorzystuje kontekst trójwymiarowy (3D) bazujący na <a href="https://pl.wikipedia.org/wiki/OpenGL_ES">OpenGL ES</a>.</p>
+
+<p>Początkowo płótno jest puste, pozbawione tła. Aby coś na nim wyświetlić, skrypt musi posiadać dostęp do kontekstu renderowania a następnie musi coś w nim narysować. Element {{HTMLElement("canvas")}} posiada metodę {{domxref("HTMLCanvasElement.getContext", "getContext()")}} niezbędną, aby uzyskać dostęp do nowego kontekstu renderowania oraz jego funcji rysujących. Metoda <code>getContext()</code> wymaga podania jednego argumentu, który określa typ kontekstu. Dla rysunków dwuwymiarowych, o których mowa w tym tutorialu, argument metody {{domxref("CanvasRenderingContext2D")}} wymaga podania wartości tekstowej "2d".</p>
+
+<pre class="brush: js">var canvas = document.getElementById('tutorial');
+var ctx = canvas.getContext('2d');
+</pre>
+
+<p>W pierwszej lini program uzyskuje dostęp do węzła DOM reprezentującego element {{HTMLElement("canvas")}} za pomocą metody {{domxref("document.getElementById()")}}. Posiadając dostęp do węzła DOM, możemy następnie uzyskać dostęp do kontekstu renderowania rysunku za pomocą metody <code>getContext()</code>.</p>
+
+<div id="section_5">
+<h2 id="Test_zgodności">Test zgodności</h2>
+
+<p>Treść zastępcza jest wyświetlana w przeglądarce, która nie obsługuje elementu {{HTMLElement("canvas")}}. Również z poziomu skryptu możemy sprawdzić czy przeglądarka wspiera znacznik <code>canvas</code>. W tym celu posługujemy się metodą <code>getContext()</code>. Oto przykład:</p>
+
+<pre class="brush: js">var canvas = document.getElementById('tutorial');
+
+if (canvas.getContext) {
+  var ctx = canvas.getContext('2d');
+  // drawing code here
+} else {
+  // canvas-unsupported code here
+}
+</pre>
+
+<p>Przeglądarka, która nie wspiera znacznika <code>canvas</code>, nie rozpoznaje również metody <code>getContext()</code>. W takim wypadku wyrażenie <code>canvas.getContext</code> zwróci logiczną wartość <code>false</code>.</p>
+</div>
+</div>
+
+<h2 id="Szkielet_szablonu"> Szkielet szablonu</h2>
+
+<p>Poniżej znajduje się szablon dokumentu HTML, którego będziemy używać jako podstawy w kolejnych przykładach ilustrujących <code>canvas</code>.</p>
+
+<div class="note">
+<p><strong>Uwaga:</strong> podczas produkcji stron internetowych warto umieszczać skrypty oraz arkusze stylów w osobnych plikach dla lepszej organizacji kodu. W tym tutorialu przykładowe skrypty będziemy jednak osadzać wewnątrz kodu HTML, tak aby cały przykład był zwięzły oraz w pełni funcjonalny.</p>
+</div>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"/&gt;
+    &lt;title&gt;Canvas tutorial&lt;/title&gt;
+    &lt;script type="text/javascript"&gt;
+      function draw() {
+        var canvas = document.getElementById('tutorial');
+        if (canvas.getContext) {
+          var ctx = canvas.getContext('2d');
+        }
+      }
+    &lt;/script&gt;
+    &lt;style type="text/css"&gt;
+      canvas { border: 1px solid black; }
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body onload="draw();"&gt;
+    &lt;canvas id="tutorial" width="150" height="150"&gt;&lt;/canvas&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>Skrypt zawiera funckcję <code>draw()</code>, która jest wykonywana po załadowaniu strony; uczyniliśmy to za pomocą obserwatora zdarzenia {{event("load")}} dokumentu HTML. Funkcja taka może być również wywołana za pomocą metody {{domxref("WindowTimers.setTimeout", "window.setTimeout()")}}, {{domxref("WindowTimers.setInterval", "window.setInterval()")}} lub jeszcze innej, która obsługuje zdarzenia, po tym jak strona zostanie załadowana.</p>
+
+<p>Oto jak szablon wygląda w akcji. Jak widać, początkowo jest on pusty.</p>
+
+<p>{{EmbedLiveSample("A_skeleton_template", 160, 160)}}</p>
+
+<h2 id="Prosty_przykład">Prosty przykład</h2>
+
+<p>Na razie spójrzmy na poniższy przykład, zawierający rysunek dwóch przecinających się kwadratów, z których jeden jest przezroczysty. Szczegóły działania poszczególnych elementów kodu poznamy w dalszej części tego tutorialu.</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+ &lt;head&gt;
+  &lt;meta charset="utf-8"/&gt;
+  &lt;script type="application/javascript"&gt;
+    function draw() {
+      var canvas = document.getElementById('canvas');
+      if (canvas.getContext) {
+        var ctx = canvas.getContext('2d');
+
+        ctx.fillStyle = 'rgb(200, 0, 0)';
+        ctx.fillRect(10, 10, 50, 50);
+
+        ctx.fillStyle = 'rgba(0, 0, 200, 0.5)';
+        ctx.fillRect(30, 30, 50, 50);
+      }
+    }
+  &lt;/script&gt;
+ &lt;/head&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>Przykład wygląda następująco:</p>
+
+<p>{{EmbedLiveSample("A_simple_example", 160, 160, "https://mdn.mozillademos.org/files/228/canvas_ex1.png")}}</p>
+
+<p>{{PreviousNext("Web/API/Canvas_API/Tutorial", "Web/API/Canvas_API/Tutorial/Drawing_shapes")}}</p>
diff --git a/files/pl/web/api/canvas_api/tutorial/index.html b/files/pl/web/api/canvas_api/tutorial/index.html
new file mode 100644
index 0000000000..a8b41b4ca9
--- /dev/null
+++ b/files/pl/web/api/canvas_api/tutorial/index.html
@@ -0,0 +1,60 @@
+---
+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
+---
+<div>{{CanvasSidebar}}</div>
+
+<div><a href="/en-US/docs/HTML/Canvas" title="HTML/Canvas"><img alt="" src="https://mdn.mozillademos.org/files/257/Canvas_tut_examples.jpg" style="float: right; height: 450px; width: 200px;"></a></div>
+
+<div class="summary">
+<p><a href="/en-US/docs/Web/HTML/Element/canvas" title="HTML/Canvas"><strong><code>&lt;canvas&gt;</code></strong></a> jest elementem <a href="/en-US/docs/Web/HTML" title="HTML">HTML</a>, który może być użyty do rysowania grafik używając skryptów (często <a href="https://developer.mozilla.org/pl/docs/Glossary/JavaScript" title="JavaScript">JavaScript</a>'u). To może zostać użyte do  na przykład rysowania wykresów, tworzenia kompozycji zdjęcia lub prostych (i <a href="/en-US/docs/Web/API/Canvas_API/A_basic_ray-caster">i nie prostych</a>) animacji. Obrazy na tej strone pokazują przykłady implementacji <strong><code><a href="/en-US/docs/Web/HTML/Element/canvas" title="HTML/Canvas">&lt;canvas&gt;</a></code></strong>, które będą stworzone w tym poradniku.</p>
+</div>
+
+<p><span class="seoSummary">Ten poradnik opisuje jak używać elementu <code>&lt;canvas&gt;</code> 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.</span></p>
+
+<p>Wprowadzono ją jako pierwszą w WebKit przez Apple dla OS X Dashboard, <code>&lt;canvas&gt;</code> od tego momentu została wprowadzona do przeglądarek. Dziś wszystkie poważne przeglądarki wspierają kanwę.</p>
+
+<h2 id="Before_you_start" name="Before_you_start">Zanim zaczniesz</h2>
+
+<p>Używanie elementu <code>&lt;canvas&gt;</code> nie jest trudne, ale potrzebujesz podstawowego zrozumienia <a href="/en-US/docs/Web/HTML" title="HTML">HTML</a> i <a href="/en-US/docs/Web/JavaScript" title="JavaScript">JavaScript</a>. Element <code>&lt;canvas&gt;</code> 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 <code>height</code> i <code>width</code>. W celu narysowania grafik na kanwie używamy obiektu kontekstu w JavaScript, który tworzy grafiki w locie.</p>
+
+<h2 id="In_this_tutorial" name="In_this_tutorial">W tym poradniku</h2>
+
+<ul>
+ <li><a href="/pl/docs/Web/API/Canvas_API/Tutorial/Basic_usage">Podstawowe użycie</a></li>
+ <li><a href="/pl/docs/Web/API/Canvas_API/Tutorial/rysowanie_ksztaltow" title="Canvas_tutorial/Drawing_shapes">Rysowanie figur</a></li>
+ <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors" title="Canvas_tutorial/Applying_styles_and_colors">Dodawanie styli i kolorów</a></li>
+ <li><a href="/pl/docs/Rysowanie_tekstu_przy_użyciu_canvas">Rysowanie tekstu</a></li>
+ <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images" title="Canvas_tutorial/Using_images">Używanie obrazków</a></li>
+ <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Transformations" title="Canvas_tutorial/Transformations">Przekształcenia</a></li>
+ <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing" title="Canvas_tutorial/Compositing">Compositing and clipping</a></li>
+ <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations">Podstwowe animacje</a></li>
+ <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Advanced_animations">Zaawansowane animacje</a></li>
+ <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas">Manipulacja pikselami</a></li>
+ <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility">Hitowe regiony i dostępność</a></li>
+ <li><a href="/pl/docs/Web/API/Canvas_API/Tutorial/Optymalizacja_canvas">Optymizacja kanwy</a></li>
+ <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Finale">Koniec</a></li>
+</ul>
+
+<h2 id="See_also" name="See_also">Zobacz także</h2>
+
+<ul>
+ <li><a href="/pl/docs/Web/HTML/Canvas" title="HTML/Canvas">Strona tematów kanwy</a></li>
+ <li><a class="external" href="http://visitmix.com/labs/ai2canvas/" title="http://visitmix.com/labs/ai2canvas/">Wtyczka Canvas do Adobe Illustrator'a</a></li>
+ <li><a class="external" href="http://www.html5canvastutorials.com/" title="http://www.html5canvastutorials.com/">HTML5CanvasTutorials</a></li>
+</ul>
+
+<h2 id="Notka_dla_współtwórców">Notka dla współtwórców</h2>
+
+<p>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ę.</p>
+
+<div>{{ Next("Web/API/Canvas_API/Tutorial/Basic_usage") }}</div>
diff --git a/files/pl/web/api/canvas_api/tutorial/optymalizacja_canvas/index.html b/files/pl/web/api/canvas_api/tutorial/optymalizacja_canvas/index.html
new file mode 100644
index 0000000000..68efe0225f
--- /dev/null
+++ b/files/pl/web/api/canvas_api/tutorial/optymalizacja_canvas/index.html
@@ -0,0 +1,119 @@
+---
+title: Optymalizacja elementu canvas
+slug: Web/API/Canvas_API/Tutorial/Optymalizacja_canvas
+tags:
+  - Canvas
+  - Grafika
+  - HTML
+  - HTML5
+  - Poradnik
+  - Tutorial
+  - zaawansowany
+translation_of: Web/API/Canvas_API/Tutorial/Optimizing_canvas
+---
+<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility", "Web/API/Canvas_API/Tutorial/Finale")}}</div>
+
+<div class="summary">
+<p>{{HTMLElement("canvas")}}  to jeden z najczęściej używanych standardów do renderowania grafiki 2D w przeglądarce. Zazwyczaj stosuje się go do tworzenia gier i skomplikowanych wizualizacji, które nierzadko starają się wycinąć z <span class="st">„</span>płótna" maksimum jego możliwości. Niestety, równie często prowadzi to do spadków wydajności. <span class="seoSummary">W tym artykule przygotowaliśmy dla was kilka wskazówek jak zoptymalizować element canvas, aby poprawić działanie waszych stron i aplikacji.</span></p>
+</div>
+
+<h2 id="Wskazówki_dot._wydajności">Wskazówki dot. wydajności</h2>
+
+<p>Poniżej znajdziecie kilka rozwiązań, które poprawią wydajność elementu canvas:</p>
+
+<h3 id="Pre-renderuj_proste_lub_powtażające_się_obiekty_na_dodatkowym_canvasie_poza_ekranem">Pre-renderuj proste lub powtażające się obiekty na dodatkowym canvasie poza ekranem</h3>
+
+<p>Jeśli w każdej klatce rysujesz wiele podobnych obiektów, stwórz niewyświetlany, roboczy canvas, narysuj na nim swój element raz (lub za każdym razem gdy ulega zmianom), a następnie wykorzystaj render w głównym canvasie.</p>
+
+<pre class="brush: js">obiekt.canvasRoboczy = document.createElement('canvas');
+obiekt.canvasRoboczy.width = obiekt.width;
+obiekt.canvasRoboczy.height = obiekt.height;
+obiekt.canvasRoboczy = obiekt.canvasRoboczy.getContext('2d');
+
+obiekt.render(obiekt.offscreenContext);
+</pre>
+
+<h3 id="Staraj_się_używać_liczb_całkowitch_do_koordynatów">Staraj się używać liczb całkowitch do koordynatów</h3>
+
+<p>Renderowanie między pikselami zachodzi, gdy rysujesz obiekt używając niepełnych wartości.</p>
+
+<pre class="brush: js">ctx.drawImage(myImage, 0.3, 0.5);
+</pre>
+
+<p>Ta praktyka zmusza przeglądarkę do wykonania dodatkowych obliczeń, by wytworzyć efekt anty-aliasingu. Żeby temu zapobiec, zaokrąglij koordynaty, na przykład przy użyciu {{jsxref("Math.floor()")}}.</p>
+
+<h3 id="Nie_skaluj_obrazów_za_pomocą_drawImage">Nie skaluj obrazów za pomocą <code>drawImage</code></h3>
+
+<p>Posłuż się canvasem poza ekranem, renderując swój obrazek w kilku różnych rozmiarach podczas ładowania, zamiast renderować go w każdej klatce.</p>
+
+<h3 id="Używaj_wielu_warstw_w_skomplikowanych_scenach">Używaj wielu warstw w skomplikowanych scenach</h3>
+
+<p>Tak jak niektóre elementy nieustannie są w ruchu, inne (jak np. UI) nigdy nie zmieniają położenia. Dobrym sposobem na optymalizację w tej sytuacji jest zastosowanie warstw przy użyciu kilku canvasów roboczych.</p>
+
+<p>Przykładowo, możesz stworzyć warstwę dla interfejsu rysowaną nad innymi, która aktualizuje się tylko w momentach, gdy jest używana. Oprócz tego, możesz przenaczyć jedną warstwę na pierwszy plan, gdzie umieścisz wszystkie elementy, które odnawiane są często oraz jedną warstwę na tło, na której obiekty aktualizowane są bardzo rzadko.</p>
+
+<pre class="brush: html">&lt;div id="scena"&gt;
+  &lt;canvas id="warstwaUi" width="480" height="320"&gt;&lt;/canvas&gt;
+  &lt;canvas id="warstwaGry" width="480" height="320"&gt;&lt;/canvas&gt;
+  &lt;canvas id="warstwaTla" width="480" height="320"&gt;&lt;/canvas&gt;
+&lt;/div&gt;
+
+&lt;style&gt;
+  #scena {
+    width: 480px;
+    height: 320px;
+    position: relative;
+    border: 2px solid black
+  }
+  canvas { position: absolute; }
+  #warstwaUI { z-index: 3 }
+  #warstwaGry { z-index: 2 }
+  #warstwaTla { z-index: 1 }
+&lt;/style&gt;
+</pre>
+
+<h3 id="Użyj_CSS_dla_dużych_obrazów_w_tle">Użyj CSS dla dużych obrazów w tle</h3>
+
+<p>Jeśli twoja gra, jak większość, posiada statyczne tło, stwórz element {{HTMLElement("div")}} z własnością CSS {{cssxref("background")}} , który umieścisz pod canvasem. Dzięki temu unikniesz rysowania dużego obrazu w każdej klatce z osobna.</p>
+
+<h3 id="Skaluj_canvas_za_pomocą_CSS">Skaluj canvas za pomocą CSS</h3>
+
+<p><a href="/en-US/docs/Web/Guide/CSS/Using_CSS_transforms">Transformacje CSS</a> są szybsze dzięki wykorzystaniu karty graficznej. Powiększanie canvasu działa szybciej niż jego pomniejszanie. Dla Firefox OS ustaw 480 x 320 px.</p>
+
+<pre class="brush: js">var scaleX = window.innerWidth / canvas.width;
+var scaleY = window.innerHeight / canvas.height;
+
+var scaleToFit = Math.min(scaleX, scaleY);
+var scaleToCover = Math.max(scaleX, scaleY);
+
+stage.style.transformOrigin = '0 0'; //scale from top left
+stage.style.transform = 'scale(' + scaleToFit + ')';
+</pre>
+
+<h3 id="Wyłącz_przezroczystość">Wyłącz przezroczystość</h3>
+
+<p>Jeśli twoja gra korzysta z canvasu i nie ma potrzeby, by był on przezroczysty, ustaw wartość <code>alpha</code> na <code>false</code> podczas tworzenia kontekstu: <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext" title="The HTMLCanvasElement.getContext() method returns a drawing context on the canvas, or null if the context identifier is not supported."><code>HTMLCanvasElement.getContext()</code></a>. To powinno poprawić wydajność.</p>
+
+<pre class="brush: js">var ctx = canvas.getContext('2d', { alpha: false });</pre>
+
+<h3 id="Pozostałe_wskazówki">Pozostałe wskazówki</h3>
+
+<ul>
+ <li>Ujednolić wywołania canvasu (przykładowo, narysuj linię łamaną zamiast kilku osobnych linii).</li>
+ <li>Unikaj niepotrzebnych zmian stanu canvasu.</li>
+ <li>Renderuj tylko fragmenty, które uległy zmianie, zamiast całej, nowej klatki.</li>
+ <li>Unikaj {{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur")}} kiedy to możliwe.</li>
+ <li>Unikaj wyświetlania tekstu, kiedy to możliwe.</li>
+ <li>Wykorzystuj różne sposoby na wyczyszczenie canvasu: ({{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}, {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}} lub zmiana rozmiaru canvasu).</li>
+ <li>Do tworzenie animacji skorzystaj z  {{domxref("window.requestAnimationFrame()")}} zamiast {{domxref("window.setInterval()")}} .</li>
+ <li>Ostrożnie używaj dużych bibliotek do obliczania fizyki.</li>
+</ul>
+
+<h2 id="Zobacz_również">Zobacz również:</h2>
+
+<ul>
+ <li><a href="http://www.html5rocks.com/en/tutorials/canvas/performance/#toc-ref">Poprawa wydajności Canvas HTML5 – HTML5 </a></li>
+ <li><a href="https://hacks.mozilla.org/2013/05/optimizing-your-javascript-game-for-firefox-os/">Optymalizacja skryptów JavaScript na Firefox OS – Mozilla Hacks</a></li>
+</ul>
+
+<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility", "Web/API/Canvas_API/Tutorial/Finale")}}</p>
diff --git a/files/pl/web/api/canvas_api/tutorial/rysowanie_ksztaltow/index.html b/files/pl/web/api/canvas_api/tutorial/rysowanie_ksztaltow/index.html
new file mode 100644
index 0000000000..08c589844b
--- /dev/null
+++ b/files/pl/web/api/canvas_api/tutorial/rysowanie_ksztaltow/index.html
@@ -0,0 +1,571 @@
+---
+title: Rysowanie kształtów w canvas
+slug: Web/API/Canvas_API/Tutorial/rysowanie_ksztaltow
+translation_of: Web/API/Canvas_API/Tutorial/Drawing_shapes
+---
+<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_usage", "Web/API/Canvas_API/Tutorial/Applying_styles_and_colors")}}</div>
+
+<div class="summary">
+<p>Ok, <a href="/pl/docs/Web/API/Canvas_API/Tutorial/Basic_usage">stworzyliśmy nasze środowisko canvas</a> i teraz możemy poznać tajniki tworzenia grafiki za pomocą canvas. W tym rozdziale nauczysz się rysować prostokąty, trójkąty, linie, łuki oraz krzywe - czyli podstawowe kształty.</p>
+</div>
+
+<h2 id="Siatka">Siatka</h2>
+
+<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/224/Canvas_default_grid.png" style="float: right; height: 220px; width: 220px;">Nim zaczniemy rysować, poznajmy najpierw siatkę czyli <strong>układ współrzędnych</strong> canvas. Szablon dokumentu z poprzedniego rozdziału zawiera element canvas o rozmiarach 150 na 150 (pikseli). Ilustracja po prawej ukazuje standardową siatkę naszego płótna. Domyślnie jedna jednostka odległości na siatce odpowiada wielkości jednego piksela na płótnie. Wartości siatki liczone są od lewego górnego rogu układu współrzędnych (x,y). W dalszej części dowiesz się, jak zamienić pozycję, tak by początek układu współrzędnych znajdował się gdzie indziej, jak go obrócić a nawet przeskalować. Na razie jednak użyjemy ustawień domyślnych. </p>
+
+<h2 id="Rysowanie_prostokątów">Rysowanie prostokątów</h2>
+
+<p>W przeciwieństwie do {{Glossary("SVG")}}, {{HTMLElement("canvas")}} na razie wspiera jedynie tworzenie prostokątów. Pozostałe figury geometryczne musimy stworzyć za pomocą ścieżek. Na szczęście mamy do dyspozycji zestaw funkcji za pomocą których jesteśmy w stanie stworzyć figury o dowolnej złożoności.</p>
+
+<p>Najpierw przyjrzyjmy się prostokątowi. Istnieją trzy funkcje rysujące prostokąt:</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.fillRect", "fillRect(x, y, width, height)")}}</dt>
+ <dd>Rysuje pole prostokąta.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.strokeRect", "strokeRect(x, y, width, height)")}}</dt>
+ <dd>Rysuje obwód prostokąta.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.clearRect", "clearRect(x, y, width, height)")}}</dt>
+ <dd>Wymazuje prostokątny obszar, w wyniku czego staje się on całkiem przezroczysty. Działą to jak gumka w formie prostokąta.</dd>
+</dl>
+
+<p>Każda z tych funkcji posiada jednakowe parametry. <code>x</code> i <code>y</code> to współrzędne na siatce - wyznaczają one pozycje lewego górnego rogu prostokąta. A <code>width</code> oraz <code>height</code> określają jego rozmiar.</p>
+
+<p>Poniżej znajduje się funkcja<code>draw()</code> z poprzedniej strony, tutaj wzbogacona o trzy metody tworzenia prostokątów.</p>
+
+<h3 id="Rectangular_shape_example">Rectangular shape example</h3>
+
+<div class="hidden">
+<pre class="brush: html">&lt;html&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<pre class="brush: js">function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    ctx.fillRect(25,25,100,100);
+    ctx.clearRect(45,45,60,60);
+    ctx.strokeRect(50,50,50,50);
+  }
+}</pre>
+
+<p>Oto wynik działania tego skryptu:</p>
+
+<p>{{EmbedLiveSample("Rectangular_shape_example", 160, 160, "https://mdn.mozillademos.org/files/245/Canvas_rect.png")}}</p>
+
+<p>Funkcja <code>fillRect()</code> rysuje czarny kwadrat o boku 100 pikseli. Funkcja <code>clearRect()</code> wymazuje kwadratowy obszar o boku 60 pikseli pośrodku czarnego prostokąta, a następnie wywołanie funkcji <code>strokeRect()</code> tworzy obrys kratdatu o boku 50 pikseli również w centrum poprzedniej figury.</p>
+
+<p>W kolejnych rozdziałąch poznasz dwie inne *metody dla <code>clearReact()</code>, oraz zobaczysz jak zmienić kolor oraz styl obrysu renderowanych kształtów.</p>
+
+<p>W przeciwieńśtwie do funkcji tworzących ścieżki o czym przekonasz się później, wszystkie trzy funkcje tworzące prostokąt rysują kształ natychmiast po ich wywołaniu.</p>
+
+<h2 id="Rysowanie_ścieżek">Rysowanie ścieżek</h2>
+
+<p>Drugim zarazem ostatnim podstawowym kształetem jest <em>cieżka</em>. Ścieżka złożona jest z punktów połączonych liniami prostymi lub krzywymi, o różnej grubości i o różnym kolorze. Ścieżka, a nawet jej fragment może być zamknięta. Aby utworzyć kształt za pomocą ścieżki wykonaj następujące kroki:</p>
+
+<ol>
+ <li>utwórz ścieżkę,</li>
+ <li>użyj <a href="/pl/docs/Web/API/CanvasRenderingContext2D#Paths">komend rysujących</a> aby rysować ścieżkę,</li>
+ <li>zamknij ścieżkę.</li>
+ <li>Po utworzeniu ścieżki możesz ją obrysować lub wypełnić, i dopiero wtedy ukaże się ona w canvasie.</li>
+</ol>
+
+<p>Oto funkcje potrzebne do wykonania tego zadania:</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}}</dt>
+ <dd>Tworzy nową ścieżkę. Po jej utworzeniu, wszelkie kolejne funkcce rysujące będą się do niej odwoływały oraz kontynuowały jej rysunek.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D#Paths">Path methods</a></dt>
+ <dd>Metoda do ustalania innych ścieżek dla obiektów.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.closePath", "closePath()")}}</dt>
+ <dd>Zamyka ścieżkę aby przyszłe polecenia rysowania, były kierowane ponownie do kontekstu(ctx).</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.stroke", "stroke()")}}</dt>
+ <dd>Rysuje kształ poprzez odrysowanie konturu.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.fill", "fill()")}}</dt>
+ <dd>Rysuje kształ poprzez wypełnienie ścieżek wyznaczonego obszaru kontekstowego.</dd>
+</dl>
+
+<p>The first step to create a path is to call the <code>beginPath()</code>. Internally, paths are stored as a list of sub-paths (lines, arcs, etc) which together form a shape. Every time this method is called, the list is reset and we can start drawing new shapes.</p>
+
+<div class="note"><strong>Note:</strong> When the current path is empty, such as immediately after calling <code>beginPath()</code>, or on a newly created canvas, the first path construction command is always treated as a <code>moveTo()</code>, regardless of what it actually is. For that reason, you will almost always want to specifically set your starting position after resetting a path.</div>
+
+<p>The second step is calling the methods that actually specify the paths to be drawn. We'll see these shortly.</p>
+
+<p>The third, and an optional step, is to call <code>closePath()</code>. This method tries to close the shape by drawing a straight line from the current point to the start. If the shape has already been closed or there's only one point in the list, this function does nothing.</p>
+
+<div class="note"><strong>Note:</strong> When you call <code>fill()</code>, any open shapes are closed automatically, so you don't have to call <code>closePath()</code>. This is <strong>not</strong> the case when you call <code>stroke()</code>.</div>
+
+<h3 id="Drawing_a_triangle">Drawing a triangle</h3>
+
+<p>For example, the code for drawing a triangle would look something like this:</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;html&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="100" height="100"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<pre class="brush: js">function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext){
+    var ctx = canvas.getContext('2d');
+
+    ctx.beginPath();
+    ctx.moveTo(75,50);
+    ctx.lineTo(100,75);
+    ctx.lineTo(100,25);
+    ctx.fill();
+  }
+}
+</pre>
+
+<p>The result looks like this:</p>
+
+<p>{{EmbedLiveSample("Drawing_a_triangle", 110, 110, "https://mdn.mozillademos.org/files/9847/triangle.png")}}</p>
+
+<h3 id="Moving_the_pen">Moving the pen</h3>
+
+<p>One very useful function, which doesn't actually draw anything but becomes part of the path list described above, is the <code>moveTo()</code> function. You can probably best think of this as lifting a pen or pencil from one spot on a piece of paper and placing it on the next.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.moveTo", "moveTo(x, y)")}}</dt>
+ <dd>Moves the pen to the coordinates specified by <code>x</code> and <code>y</code>.</dd>
+</dl>
+
+<p>When the canvas is initialized or <code>beginPath()</code> is called, you typically will want to use the <code>moveTo()</code> function to place the starting point somewhere else. We could also use <code>moveTo()</code> to draw unconnected paths. Take a look at the smiley face below.</p>
+
+<p>To try this for yourself, you can use the code snippet below. Just paste it into the <code>draw()</code> function we saw earlier.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;html&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<pre class="brush: js;highlight:[8,10,12]">function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext){
+     var ctx = canvas.getContext('2d');
+
+    ctx.beginPath();
+    ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle
+    ctx.moveTo(110,75);
+    ctx.arc(75,75,35,0,Math.PI,false);  // Mouth (clockwise)
+    ctx.moveTo(65,65);
+    ctx.arc(60,65,5,0,Math.PI*2,true);  // Left eye
+    ctx.moveTo(95,65);
+    ctx.arc(90,65,5,0,Math.PI*2,true);  // Right eye
+    ctx.stroke();
+  }
+}
+</pre>
+
+<p>The result looks like this:</p>
+
+<p>{{EmbedLiveSample("Moving_the_pen", 160, 160, "https://mdn.mozillademos.org/files/252/Canvas_smiley.png")}}</p>
+
+<p>If you'd like to see the connecting lines, you can remove the lines that call <code>moveTo()</code>.</p>
+
+<div class="note">
+<p><strong>Note:</strong> To learn more about the <code>arc()</code> function, see the {{anch("Arcs")}} below.</p>
+</div>
+
+<h3 id="Lines">Lines</h3>
+
+<p>For drawing straight lines, use the <code>lineTo()</code> method.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.lineTo", "lineTo(x, y)")}}</dt>
+ <dd>Draws a line from the current drawing position to the position specified by <code>x</code> and <code>y</code>.</dd>
+</dl>
+
+<p>This method takes two arguments, <code>x</code> and <code>y</code>, which are the coordinates of the line's end point. The starting point is dependent on previously drawn paths, where the end point of the previous path is the starting point for the following, etc. The starting point can also be changed by using the <code>moveTo()</code> method.</p>
+
+<p>The example below draws two triangles, one filled and one outlined.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;html&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<pre class="brush: js;highlight[9,10,16,17]">function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext){
+    var ctx = canvas.getContext('2d');
+
+    // Filled triangle
+    ctx.beginPath();
+    ctx.moveTo(25,25);
+    ctx.lineTo(105,25);
+    ctx.lineTo(25,105);
+    ctx.fill();
+
+    // Stroked triangle
+    ctx.beginPath();
+    ctx.moveTo(125,125);
+    ctx.lineTo(125,45);
+    ctx.lineTo(45,125);
+    ctx.closePath();
+    ctx.stroke();
+  }
+}
+</pre>
+
+<p>This starts by calling <code>beginPath()</code> to start a new shape path. We then use the <code>moveTo()</code> method to move the starting point to the desired position. Below this, two lines are drawn which make up two sides of the triangle.</p>
+
+<p>{{EmbedLiveSample("Lines", 160, 160, "https://mdn.mozillademos.org/files/238/Canvas_lineTo.png")}}</p>
+
+<p>You'll notice the difference between the filled and stroked triangle. This is, as mentioned above, because shapes are automatically closed when a path is filled, but not when they are stroked. If we left out the <code>closePath()</code> for the stroked triangle, only two lines would have been drawn, not a complete triangle.</p>
+
+<h3 id="Arcs">Arcs</h3>
+
+<p>To draw arcs or circles, we use the <code>arc()</code> or <code>arcTo()</code> methods.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.arc", "arc(x, y, radius, startAngle, endAngle, anticlockwise)")}}</dt>
+ <dd>Draws an arc which is centered at <em>(x, y)</em> position with radius<em> r</em> starting at <em>startAngle</em> and ending at <em>endAngle</em> going in the given direction indicated by <em>anticlockwise</em> (defaulting to clockwise).</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.arcTo", "arcTo(x1, y1, x2, y2, radius)")}}</dt>
+ <dd>Draws an arc with the given control points and radius, connected to the previous point by a straight line.</dd>
+</dl>
+
+<p>Let's have a more detailed look at the <code>arc</code> method, which takes six parameters: <code>x</code> and <code>y</code> are the coordinates of the center of the circle on which the arc should be drawn. <code>radius</code> is self-explanatory. The <code>startAngle</code> and <code>endAngle</code> parameters define the start and end points of the arc in radians, along the curve of the circle. These are measured from the x axis. The <code>anticlockwise</code> parameter is a Boolean value which, when <code>true</code>, draws the arc anticlockwise; otherwise, the arc is drawn clockwise.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Angles in the <code>arc</code> function are measured in radians, not degrees. To convert degrees to radians you can use the following JavaScript expression: <code>radians = (Math.PI/180)*degrees</code>.</p>
+</div>
+
+<p>The following example is a little more complex than the ones we've seen above. It draws 12 different arcs all with different angles and fills.</p>
+
+<p>The two <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for"><code>for</code> loops</a> are for looping through the rows and columns of arcs. For each arc, we start a new path by calling <code>beginPath()</code>. In the code, each of the parameters for the arc is in a variable for clarity, but you wouldn't necessarily do that in real life.</p>
+
+<p>The <code>x</code> and <code>y</code> coordinates should be clear enough. <code>radius</code> and <code>startAngle</code> are fixed. The <code>endAngle</code> starts at 180 degrees (half a circle) in the first column and is increased by steps of 90 degrees, culminating in a complete circle in the last column.</p>
+
+<p>The statement for the <code>clockwise</code> parameter results in the first and third row being drawn as clockwise arcs and the second and fourth row as counterclockwise arcs. Finally, the <code>if</code> statement makes the top half stroked arcs and the bottom half filled arcs.</p>
+
+<div class="note">
+<p><strong>Note:</strong> This example requires a slightly larger canvas than the others on this page: 150 x 200 pixels.</p>
+</div>
+
+<div class="hidden">
+<pre class="brush: html">&lt;html&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="150" height="200"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<pre class="brush: js;highlight[16]">function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext){
+    var ctx = canvas.getContext('2d');
+
+    for(var i=0;i&lt;4;i++){
+      for(var j=0;j&lt;3;j++){
+        ctx.beginPath();
+        var x = 25+j*50; // x coordinate
+        var y = 25+i*50; // y coordinate
+        var radius = 20; // Arc radius
+        var startAngle = 0; // Starting point on circle
+        var endAngle = Math.PI+(Math.PI*j)/2; // End point on circle
+        var anticlockwise = i%2==0 ? false : true; // clockwise or anticlockwise
+
+        ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
+
+        if (i&gt;1){
+          ctx.fill();
+        } else {
+          ctx.stroke();
+        }
+      }
+    }
+  }
+}
+</pre>
+
+<p>{{EmbedLiveSample("Arcs", 160, 210, "https://mdn.mozillademos.org/files/204/Canvas_arc.png")}}</p>
+
+<h3 id="Bezier_and_quadratic_curves">Bezier and quadratic curves</h3>
+
+<p>The next type of paths available are <a class="external" href="http://en.wikipedia.org/wiki/B%C3%A9zier_curve" rel="external" title="http://en.wikipedia.org/wiki/B%C3%A9zier_curve">Bézier curves</a>, available in both cubic and quadratic varieties. These are generally used to draw complex organic shapes.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.quadraticCurveTo", "quadraticCurveTo(cp1x, cp1y, x, y)")}}</dt>
+ <dd>Draws a quadratic Bézier curve from the current pen position to the end point specified by <code>x</code> and <code>y</code>, using the control point specified by <code>cp1x</code> and <code>cp1y</code>.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.bezierCurveTo", "bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)")}}</dt>
+ <dd>Draws a cubic Bézier curve from the current pen position to the end point specified by <code>x</code> and <code>y</code>, using the control points specified by (<code>cp1x</code>, <code>cp1y</code>) and (cp2x, cp2y).</dd>
+</dl>
+
+<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/223/Canvas_curves.png" style="float: right; height: 190px; width: 190px;">The difference between these can best be described using the image on the right. A quadratic Bézier curve has a start and an end point (blue dots) and just one <strong>control point</strong> (indicated by the red dot) while a cubic Bézier curve uses two control points.</p>
+
+<p>The <code>x</code> and <code>y</code> parameters in both of these methods are the coordinates of the end point. <code>cp1x</code> and <code>cp1y</code> are the coordinates of the first control point, and <code>cp2x</code> and <code>cp2y</code> are the coordinates of the second control point.</p>
+
+<p>Using quadratic and cubic Bézier curves can be quite challenging, because unlike vector drawing software like Adobe Illustrator, we don't have direct visual feedback as to what we're doing. This makes it pretty hard to draw complex shapes. In the following example, we'll be drawing some simple organic shapes, but if you have the time and, most of all, the patience, much more complex shapes can be created.</p>
+
+<p>There's nothing very difficult in these examples. In both cases we see a succession of curves being drawn which finally result in a complete shape.</p>
+
+<h4 id="Quadratic_Bezier_curves">Quadratic Bezier curves</h4>
+
+<p>This example uses multiple quadratic Bézier curves to render a speech balloon.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;html&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<pre class="brush: js;highlight[9,10,11,12,13,14]">function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    // Quadratric curves example
+    ctx.beginPath();
+    ctx.moveTo(75,25);
+    ctx.quadraticCurveTo(25,25,25,62.5);
+    ctx.quadraticCurveTo(25,100,50,100);
+    ctx.quadraticCurveTo(50,120,30,125);
+    ctx.quadraticCurveTo(60,120,65,100);
+    ctx.quadraticCurveTo(125,100,125,62.5);
+    ctx.quadraticCurveTo(125,25,75,25);
+    ctx.stroke();
+  }
+}
+</pre>
+
+<p>{{EmbedLiveSample("Quadratic_Bezier_curves", 160, 160, "https://mdn.mozillademos.org/files/243/Canvas_quadratic.png")}}</p>
+
+<h4 id="Cubic_Bezier_curves">Cubic Bezier curves</h4>
+
+<p>This example draws a heart using cubic Bézier curves.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;html&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<pre class="brush: js;highlight[9,10,11,12,13,14]">function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext){
+    var ctx = canvas.getContext('2d');
+
+    // Quadratric curves example
+    ctx.beginPath();
+    ctx.moveTo(75,40);
+    ctx.bezierCurveTo(75,37,70,25,50,25);
+    ctx.bezierCurveTo(20,25,20,62.5,20,62.5);
+    ctx.bezierCurveTo(20,80,40,102,75,120);
+    ctx.bezierCurveTo(110,102,130,80,130,62.5);
+    ctx.bezierCurveTo(130,62.5,130,25,100,25);
+    ctx.bezierCurveTo(85,25,75,37,75,40);
+    ctx.fill();
+  }
+}
+</pre>
+
+<p>{{EmbedLiveSample("Cubic_Bezier_curves", 160, 160, "https://mdn.mozillademos.org/files/207/Canvas_bezier.png")}}</p>
+
+<h3 id="Rectangles">Rectangles</h3>
+
+<p>In addition to the three methods we saw in {{anch("Drawing rectangles")}}, which draw rectangular shapes directly to the canvas, there's also the <code>rect()</code> method, which adds a rectangular path to a currently open path.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.bezierCurveTo", "rect(x, y, width, height)")}}</dt>
+ <dd>Draws a rectangle whose top-left corner is specified by (<code>x</code>, <code>y</code>) with the specified <code>width</code> and <code>height</code>.</dd>
+</dl>
+
+<p>When this method is executed, the <code>moveTo()</code> method is automatically called with the parameters (0,0). In other words, the current pen position is automatically reset to the default coordinates.</p>
+
+<h3 id="Making_combinations">Making combinations</h3>
+
+<p>So far, each example on this page has used only one type of path function per shape. However, there's no limitation to the number or types of paths you can use to create a shape. So in this final example, let's combine all of the path functions to make a set of very famous game characters.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;html&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<pre class="brush: js">function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext){
+    var ctx = canvas.getContext('2d');
+
+    roundedRect(ctx,12,12,150,150,15);
+    roundedRect(ctx,19,19,150,150,9);
+    roundedRect(ctx,53,53,49,33,10);
+    roundedRect(ctx,53,119,49,16,6);
+    roundedRect(ctx,135,53,49,33,10);
+    roundedRect(ctx,135,119,25,49,10);
+
+    ctx.beginPath();
+    ctx.arc(37,37,13,Math.PI/7,-Math.PI/7,false);
+    ctx.lineTo(31,37);
+    ctx.fill();
+
+    for(var i=0;i&lt;8;i++){
+      ctx.fillRect(51+i*16,35,4,4);
+    }
+
+    for(i=0;i&lt;6;i++){
+      ctx.fillRect(115,51+i*16,4,4);
+    }
+
+    for(i=0;i&lt;8;i++){
+      ctx.fillRect(51+i*16,99,4,4);
+    }
+
+    ctx.beginPath();
+    ctx.moveTo(83,116);
+    ctx.lineTo(83,102);
+    ctx.bezierCurveTo(83,94,89,88,97,88);
+    ctx.bezierCurveTo(105,88,111,94,111,102);
+    ctx.lineTo(111,116);
+    ctx.lineTo(106.333,111.333);
+    ctx.lineTo(101.666,116);
+    ctx.lineTo(97,111.333);
+    ctx.lineTo(92.333,116);
+    ctx.lineTo(87.666,111.333);
+    ctx.lineTo(83,116);
+    ctx.fill();
+
+    ctx.fillStyle = "white";
+    ctx.beginPath();
+    ctx.moveTo(91,96);
+    ctx.bezierCurveTo(88,96,87,99,87,101);
+    ctx.bezierCurveTo(87,103,88,106,91,106);
+    ctx.bezierCurveTo(94,106,95,103,95,101);
+    ctx.bezierCurveTo(95,99,94,96,91,96);
+    ctx.moveTo(103,96);
+    ctx.bezierCurveTo(100,96,99,99,99,101);
+    ctx.bezierCurveTo(99,103,100,106,103,106);
+    ctx.bezierCurveTo(106,106,107,103,107,101);
+    ctx.bezierCurveTo(107,99,106,96,103,96);
+    ctx.fill();
+
+    ctx.fillStyle = "black";
+    ctx.beginPath();
+    ctx.arc(101,102,2,0,Math.PI*2,true);
+    ctx.fill();
+
+    ctx.beginPath();
+    ctx.arc(89,102,2,0,Math.PI*2,true);
+    ctx.fill();
+  }
+}
+
+// A utility function to draw a rectangle with rounded corners.
+
+function roundedRect(ctx,x,y,width,height,radius){
+  ctx.beginPath();
+  ctx.moveTo(x,y+radius);
+  ctx.lineTo(x,y+height-radius);
+  ctx.arcTo(x,y+height,x+radius,y+height,radius);
+  ctx.lineTo(x+width-radius,y+height);
+  ctx.arcTo(x+width,y+height,x+width,y+height-radius,radius);
+  ctx.lineTo(x+width,y+radius);
+  ctx.arcTo(x+width,y,x+width-radius,y,radius);
+  ctx.lineTo(x+radius,y);
+  ctx.arcTo(x,y,x,y+radius,radius);
+  ctx.stroke();
+}
+</pre>
+
+<p>The resulting image looks like this:</p>
+
+<p>{{EmbedLiveSample("Making_combinations", 160, 160, "https://mdn.mozillademos.org/files/9849/combinations.png")}}</p>
+
+<p>We won't go over this in detail, since it's actually surprisingly simple. The most important things to note are the use of the <code>fillStyle</code> property on the drawing context, and the use of a utility function (in this case <code>roundedRect()</code>). Using utility functions for bits of drawing you do often can be very helpful and reduce the amount of code you need, as well as its complexity.</p>
+
+<p>We'll take another look at <code>fillStyle</code>, in more detail, later in this tutorial. Here, all we're doing is using it to change the fill color for paths from the default color of black to white, and then back again.</p>
+
+<h2 id="Path2D_objects">Path2D objects</h2>
+
+<p>As we have seen in the last example, there can be a series of paths and drawing commands to draw objects onto your canvas. To simplify the code and to improve performance, the {{domxref("Path2D")}} object, available in recent versions of browsers, lets you cache or record these drawing commands. You are able to play back your paths quickly.<br>
+ Lets see how we can construct a <code>Path2D</code> object:</p>
+
+<dl>
+ <dt>{{domxref("Path2D.Path2D", "Path2D()")}}</dt>
+ <dd>The <code><strong>Path2D()</strong></code> constructor returns a newly instantiated <code>Path2D</code> object, optionally with another path as an argument (creates a copy), or optionally with a string consisting of <a href="/en-US/docs/Web/SVG/Tutorial/Paths">SVG path</a> data.</dd>
+</dl>
+
+<pre class="brush: js">new Path2D();     // empty path object
+new Path2D(path); // copy from another Path2D object
+new Path2D(d);    // path from SVG path data</pre>
+
+<p>All <a href="/en-US/docs/Web/API/CanvasRenderingContext2D#Paths">path methods</a> like <code>moveTo</code>, <code>rect</code>, <code>arc</code> or <code>quadraticCurveTo</code>, etc., which we got to know above, are available on <code>Path2D</code> objects.</p>
+
+<p>The <code>Path2D</code> API also adds a way to combine paths using the <code>addPath</code> method. This can be useful when you want to build objects from several components, for example.</p>
+
+<dl>
+ <dt>{{domxref("Path2D.addPath", "Path2D.addPath(path [, transform])")}}</dt>
+ <dd>Adds a path to the current path with an optional transformation matrix.</dd>
+</dl>
+
+<h3 id="Path2D_example">Path2D example</h3>
+
+<p>In this example, we are creating a rectangle and a circle. Both are stored as a <code>Path2D</code> object, so that they are available for later usage. With the new <code>Path2D</code> API, several methods got updated to optionally accept a <code>Path2D</code> object to use instead of the current path. Here, <code>stroke</code> and <code>fill</code> are used with a path argument to draw both objects onto the canvas, for example.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;html&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="130" height="100"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<pre class="brush: js;highlight[6,9]">function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext){
+    var ctx = canvas.getContext('2d');
+
+    var rectangle = new Path2D();
+    rectangle.rect(10, 10, 50, 50);
+
+    var circle = new Path2D();
+    circle.moveTo(125, 35);
+    circle.arc(100, 35, 25, 0, 2 * Math.PI);
+
+    ctx.stroke(rectangle);
+    ctx.fill(circle);
+  }
+}
+</pre>
+
+<p>{{EmbedLiveSample("Path2D_example", 130, 110, "https://mdn.mozillademos.org/files/9851/path2d.png")}}</p>
+
+<h3 id="Using_SVG_paths">Using SVG paths</h3>
+
+<p>Another powerful feature of the new canvas <code>Path2D</code> API is using <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths">SVG path data</a> to initialize paths on your canvas. This might allow you to pass around path data and re-use them in both, SVG and canvas.</p>
+
+<p>The path will move to point (<code>M10 10</code>) and then move horizontally 80 points to the right (<code>h 80</code>), then 80 points down (<code>v 80</code>), then 80 points to the left (<code>h -80</code>), and then back to the start (<code>z</code>). You can see this example on the <a href="/en-US/docs/Web/API/Path2D.Path2D#Using_SVG_paths"><code>Path2D</code> constructor</a> page.</p>
+
+<pre class="brush: js;">var p = new Path2D("M10 10 h 80 v 80 h -80 Z");</pre>
+
+<div>{{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_usage", "Web/API/Canvas_API/Tutorial/Applying_styles_and_colors")}}</div>