unslug pt-br: move

14 files changed, 3514 insertions, 0 deletions

diff --git a/files/pt-br/web/api/canvas_api/a_basic_ray-caster/index.html b/files/pt-br/web/api/canvas_api/a_basic_ray-caster/index.html
new file mode 100644
index 0000000000..ca188eb6f9
--- /dev/null
+++ b/files/pt-br/web/api/canvas_api/a_basic_ray-caster/index.html
@@ -0,0 +1,76 @@
+---
+title: A basic ray-caster
+slug: Web/HTML/Canvas/A_basic_ray-caster
+translation_of: Web/API/Canvas_API/A_basic_ray-caster
+---
+<div>{{CanvasSidebar}}</div>
+
+<div class="summary">
+<p>Esse artigo disponibiliza um exemplo interessante do mundo real do uso do elemento {{HTMLElement("canvas")}} para fazer renderização via software de um ambiente em 3D utilizando <em>ray-casting</em>.</p>
+</div>
+
+<p>{{EmbedGHLiveSample("canvas-raycaster/index.html", 900, 300)}}</p>
+
+<p><strong><a href="http://mdn.github.io/canvas-raycaster/">Abrir em uma nova janela</a></strong></p>
+
+<h2 id="Why.3F" name="Why.3F">Porquê?</h2>
+
+<p>Depois de perceber, para meu deleite, que o elemento &lt;canvas&gt; que eu estava <a href="http://www.whatwg.org/specs/web-apps/current-work/#dynamic">lendo sobre</a> ele não estava apenas próximo de ser suportado pelo Firefox, mas que <strong>já</strong> estava com suporte na versão atual do Safari, eu tinha que tentar que fazer um pequeno teste.</p>
+
+<p>A <a href="/pt-BR/docs/Web/API/Canvas_API">visão geral do canvas</a> e o <a href="/pt-BR/docs/Canvas_tutorial">tutorial</a> que eu encontrei no MDN são incríveis, mas ninguém havia escrito sobre animação, então eu pensei que poderia portar um exemplo de raycaster básico que eu havia trabalhado um tempo atrás, e ver e ver que tipo de performance nós podemos esperar te um pixel buffer controlado por JavaScript.</p>
+
+<p> </p>
+
+<h2 id="How.3F" name="How.3F">Como?</h2>
+
+<p>A ideia básica é usar o {{domxref("window.setInterval","setInterval()")}} com um delay arbitrário que corresponda a uma taxa de atualização desejada. Depois de cada intervalo uma função de atualização irá redesenhar o canvas mostrando a view atual. Eu sei que poderia ter iniciado com um exemplo mais simples, mas estou certo que o tutorial do canvas vai fazê-lo, e eu queria verificar se poderia fazer isso.</p>
+
+<p>Sendo assim, a cada atualização, o raycaster verifica se você pressionou qualquer tecla por último, para conservar os cálculos não fazendo casting caso você esteja ocioso. Se você tiver pressionado, então o canvas é limpo, o solo e o céu são desenhados, a posição da câmera e/ou a orientação são atualizados, e os raios são feitos. <span id="result_box" lang="pt"><span title="As the rays intersect walls, then they render a vertical sliver of canvas in the color of the wall they've hit, blended with a darker version of the color according to the distance to the wall.">Como os raios se cruzam paredes, então eles tornam uma tira de tela vertical na cor da parede que eles atingiram, misturado com uma versão mais escura da cor de acordo com a distância para a parede. </span><span title="The height of the sliver is also modulated by the distance from the camera to the wall, and is drawn centered over the horizon line.
+
+">A altura da fita também é modulada pela distância da câmera para a parede, e é desenhada centrada sobre a linha do horizonte.</span><br>
+ <br>
+ <span title="The code I ended up with is a regurgitated amalgam of the raycaster chapters from an old André LaMotheTricks of the Game Programming Gurus book (ISBN: 0672305070), and a java raycaster I found online, filtered through my compulsion to rename everything so it makes sense">O código que eu acabei com é um amálgama regurgitado dos capítulos de raycaster de um velho André LaMothe<em>Tricks</em> do <em>livro de Gurus de Programação de Jogos</em> <sub>(ISBN: 0672305070)</sub>, e um<a href="http://www.shinelife.co.uk/java-maze/"> jaspe raycaster</a> que encontrei online, filtrado através da minha compulsão de renomear tudo para que faça sentido </span><span title="to me, and all the tinkering that had to be done to make things work well.
+">Para mim, e todos os ajustes que tinham que ser feitos para fazer as coisas funcionarem bem.</span></span></p>
+
+<p> </p>
+
+<h1 id="Resultados"><strong>Resultados</strong></h1>
+
+<p> </p>
+
+<p><br>
+ <span title="The canvas in Safari 2.0.1 performed surprisingly well.">A tela no Safari 2.0.1 apresentou surpreendentemente bem. </span><span title="With the blockiness factor cranked up to render slivers 8 pixels wide, I can run a 320 x 240 window at 24 fps on my Apple mini.">Com o fator de bloqueio criado para produzir slivers 8 pixels de largura, eu posso executar uma janela de 320 x 240 em 24 fps no meu Apple mini. </span><span title="Firefox 1.5 Beta 1 is even faster;">Firefox 1.5 Beta 1 é ainda mais rápido; </span><span title="I can run 320 x 240 at 24 fps with 4 pixel slivers.">Eu posso executar 320 x 240 em 24 fps com 4 pixel slivers. </span><span title="Not exactly a new member of the ID software family, but pretty decent considering it's a fully interpreted environment, and I didn't have to worry about memory allocation or video modes or coding inner routines in assembler or anything.">Não exatamente um novo membro da família de software de ID, mas bastante decente considerando que é um ambiente totalmente interpretado, e eu não tenho que se preocupar com a alocação de memória ou modos de vídeo ou rotinas internas de codificação em assembler ou qualquer coisa. </span><span title="The code does attempt to be very efficient, using array look-ups of pre-computed values, but I'm no optimization guru, so things could probably be written faster.
+
+">O código tenta ser muito eficiente, usando pesquisas de matrizes de valores pré-calculados, mas não sou um guru de otimização, então as coisas provavelmente poderiam ser escritas mais rapidamente.</span><br>
+ <br>
+ <span title="Also, it leaves a lot to be desired in terms of trying to be any sort of game engine—there are no wall textures, no sprites, no doors, not even any teleporters to get to another level.">Além disso, deixa muito a desejar em termos de tentar ser qualquer tipo de motor de jogo - não há texturas de parede, não sprites, sem portas, nem mesmo teleportadores para chegar a outro nível. </span><span title="But I'm pretty confident all those things could be added given enough time.">Mas estou bastante confiante de que todas essas coisas poderiam ser adicionadas com tempo suficiente. </span><span title="The canvas API supports pixel copying of images, so textures seem feasible.">A API de tela aceita a cópia de pixels de imagens, portanto, as texturas parecem possíveis. </span><span title="I'll leave that for another article, probably from another person.">Vou deixar isso para outro artigo, provavelmente de outra pessoa. </span><span title="=)
+">=)</span></p>
+
+<p> </p>
+
+<h2 id="O_ray-caster"><strong>O ray-caster</strong></h2>
+
+<p> </p>
+
+<p><br>
+ <span title="The nice people here have manually copied my files up so you can take a look, and for your hacking enjoyment I've posted the individual file contents as code listings (see below).
+
+">As pessoas agradáveis ​​aqui têm copiado manualmente meus arquivos para que você possa dar uma olhada, e para o seu prazer de hacking eu postei o conteúdo do arquivo individual como listagem de código (veja abaixo).</span><br>
+ <br>
+ <span title="So there you are, fire up Safari 1.3+ or Firefox 1.5+ or some other browser that supports the &lt;canvas> element and enjoy!">Então você está lá, o fogo até Safari 1.3 ou Firefox 1.5 ou outro navegador que suporta o elemento &lt;canvas&gt; e divirta-se!</span><br>
+ <br>
+ <small><a href="https://github.com/mdn/canvas-raycaster/blob/master/input.js">input.js</a> | <a href="https://github.com/mdn/canvas-raycaster/blob/master/Level.js">Level.js</a> | <a href="https://github.com/mdn/canvas-raycaster/blob/master/Player.js">Player.js</a> | <a href="https://github.com/mdn/canvas-raycaster/blob/master/index.html">RayCaster.html</a> | <a href="https://github.com/mdn/canvas-raycaster/blob/master/RayCaster.js">RayCaster.js</a> | <a href="https://github.com/mdn/canvas-raycaster/blob/master/trace.css">trace.css</a> | <a href="https://github.com/mdn/canvas-raycaster/blob/master/trace.js">trace.js</a> </small></p>
+
+<p> </p>
+
+<p> </p>
+
+<p> </p>
+
+<p> </p>
+
+<h2 id="See_also" name="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas tutorial</a></li>
+</ul>
diff --git a/files/pt-br/web/api/canvas_api/index.html b/files/pt-br/web/api/canvas_api/index.html
new file mode 100644
index 0000000000..821909e726
--- /dev/null
+++ b/files/pt-br/web/api/canvas_api/index.html
@@ -0,0 +1,134 @@
+---
+title: Canvas
+slug: Web/HTML/Canvas
+tags:
+  - API
+  - Canvas
+  - Referência(2)
+translation_of: Web/API/Canvas_API
+---
+<p>{{CanvasSidebar}}</p>
+
+<p class="summary">A <strong>Canvas API</strong> provê maneiras de desenhar gráficos via <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript">JavaScript</a> e via elemento <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML">HTML</a> {{HtmlElement("canvas")}}. Entre outras coisas, ele pode ser utilizado para animação, gráficos de jogos, visualização de dados, manipulação de fotos e processamento de vídeo em tempo real.</p>
+
+<p class="summary">A Canvas API foca amplamente em gráficos 2D. A <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/WebGL">WebGL API</a>, que também usa o elemento <code>&lt;canvas&gt;</code>, desenha gráficos 2D e 3D acelerados por hardware.</p>
+
+<h2 id="Exemplo_básico">Exemplo básico</h2>
+
+<p>Este exemplo simples desenha um retângulo verde para um canvas.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<p>O método {{domxref("Document.getElementById()")}} pega uma referência para o elemento HTML <code>&lt;canvas&gt;</code>. Em seguida, o método {{domxref("HTMLCanvasElement.getContext()")}} pega o contexto daquele elemento - a coisa sobre a qual o desenho será renderizado.</p>
+
+<p>O desenho atual é feito usando a interface {{domxref("CanvasRenderingContext2D")}}. A propriedade {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}} faz o retângulo verde. O método {{domxref("CanvasRenderingContext2D.fillRect()", "fillRect()")}} coloca seu canto superior direito em (10, 10) e dá a ele o tamanho de 150 unidades de largura e 100 de altura.</p>
+
+<pre class="brush: js">const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+ctx.fillStyle = 'green';
+ctx.fillRect(10, 10, 150, 100);
+</pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>{{ EmbedLiveSample('Exemplo_básico', 700, 180) }}</p>
+
+<h2 id="Referência">Referência</h2>
+
+<ul>
+ <li>{{domxref("HTMLCanvasElement")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasGradient")}}</li>
+ <li>{{domxref("CanvasImageSource")}}</li>
+ <li>{{domxref("CanvasPattern")}}</li>
+ <li>{{domxref("ImageBitmap")}}</li>
+ <li>{{domxref("ImageData")}}</li>
+ <li>{{domxref("RenderingContext")}}</li>
+ <li>{{domxref("TextMetrics")}}</li>
+ <li>{{domxref("OffscreenCanvas")}} {{experimental_inline}}</li>
+ <li>{{domxref("Path2D")}} {{experimental_inline}}</li>
+ <li>{{domxref("ImageBitmapRenderingContext")}} {{experimental_inline}}</li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>Nota:</strong> As interfaces relacionadas ao <code>WebGLRenderingContext</code> são referenciadas sob <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/WebGL" title="/en-US/docs/Web/WebGL">WebGL</a>.</p>
+</div>
+
+<p>{{domxref("CanvasCaptureMediaStream")}} é uma interface relacionada.</p>
+
+<h2 id="Guias_e_Tutoriais">Guias e Tutoriais</h2>
+
+<dl>
+ <dt></dt>
+ <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial">Tutorial Canvas</a></dt>
+ <dd>Um tutorial compreensivo abordando o uso básico da API de Canvas e suas funcionalidades avançadas.</dd>
+ <dt><a href="http://joshondesign.com/p/books/canvasdeepdive/title.html">Mergulhando no Canvas HTML5</a></dt>
+ <dd>Uma introdução prática e extensa à API Canvas e WebGL.</dd>
+ <dt><a href="http://bucephalus.org/text/CanvasHandbook/CanvasHandbook.html">Guia Canvas</a></dt>
+ <dd>Uma referência acessível para a API Canvas.</dd>
+ <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Canvas_API/A_basic_ray-caster">Demonstração: Um <em>ray-caster</em> básico</a> </dt>
+ <dd>Uma demonstração de animação <em>ray-tracing</em> usando canvas.</dd>
+ <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Manipulating_video_using_canvas">Manipulando vídeos usando canvas</a></dt>
+ <dd>Combinando {{HTMLElement("video")}} e {{HTMLElement("canvas")}} para manipular dados de vídeo em tempo real.</dd>
+</dl>
+
+<h2 id="Bibliotecas">Bibliotecas</h2>
+
+<p>A API Canvas é extremamente poderosa, mas nem sempre é simples de usar. As bibliotecas listadas abaixo podem fazer a criação de projetos baseados em canvas mais rápida e fácil.</p>
+
+<ul>
+ <li><a href="http://www.createjs.com/easeljs">EaselJS</a> é uma biblioteca de código aberto que facilita criações de jogos, arte generativa e outras experiências altamente gráficas.</li>
+ <li><a href="http://fabricjs.com/">Fabric.js</a> é uma biblioteca código aberto em canvas com suporte à SVG.</li>
+ <li><a href="https://www.patrick-wied.at/static/heatmapjs/">heatmap.js</a> é uma biblioteca de código aberto para criar mapas de calor (heatmaps) baseados em canvas.</li>
+ <li><a href="http://thejit.org/">JavaScript InfoVis Toolkit</a> cria visualizações de dados interativas.</li>
+ <li><a href="https://konvajs.github.io/">Konva.js</a> é uma biblioteca de canvas 2D para aplicações <em>desktop</em> e móveis.</li>
+ <li><a href="https://p5js.org/">p5.js </a>tem um conjunto completo de funcionalidades de desenho canvas para artistas, <em>designers</em>, educadores e iniciantes.</li>
+ <li><a href="http://paperjs.org/">Paper.js</a> é um framework de código-aberto para scripting de vetores gŕaficos que funciona sobre o Canvas HTML5.</li>
+ <li><a href="https://phaser.io/">Phaser</a> é um framework de código-aberto rápido, grátis e divertido para jogos de navegador desenvolvidos com Canvas e WebGL.</li>
+ <li><a href="http://processingjs.org/">Processing.js</a>  é um conversor da linguagem de visualização Processing.</li>
+ <li><a href="https://ptsjs.org/">Pts.js</a> é uma biblioteca para codificação criativa e visualização em canvas e SVG.</li>
+ <li><a href="https://github.com/jeremyckahn/rekapi">Rekapi</a> é uma API de animação <em>key-framing</em> para Canvas.</li>
+ <li><a href="http://scrawl.rikweb.org.uk/">Scrawl-canvas</a> é uma biblioteca JavaScript de código aberto para criação e manipulação de elementos canvas 2D.</li>
+ <li>O framework <a href="http://zimjs.com/">ZIM</a> provê conveniências, componentes e controles para programar criatividade no canvas - inclui acessibilidade e centenas de tutoriais cheios de cores.</li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>Nota:</strong> Veja a <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/WebGL" title="/en-US/docs/Web/WebGL">WebGL API</a> para bibliotecas 2D e 3D que usam WebGL.</p>
+</div>
+
+<h2 id="Especificações">Especificações</h2>
+
+<div class="section">
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificações</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentário</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#2dcontext', 'the 2D rendering context')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Compatibilidade_de_navegador">Compatibilidade de navegador</h2>
+
+<p>Aplicações Mozilla ganharam suporte para <code>&lt;canvas&gt;</code> a partir do Gecko 1.8 (<a href="https://wiki.developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/1.5">Firefox 1.5</a>). O elemento foi originalmente introduzido pela Apple para o Dashboard OS X e Safari. O Internet Explorer suporta <code>&lt;canvas&gt;</code> quando inclui-se um script do projeto Explorer Canvas, da google. Google Chrome e Opera 9 também suportam <code>&lt;canvas&gt;</code>.</p>
+
+<h2 id="Ver_também">Ver também</h2>
+
+<ul>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/WebGL">WebGL</a></li>
+</ul>
diff --git a/files/pt-br/web/api/canvas_api/tutorial/advanced_animations/index.html b/files/pt-br/web/api/canvas_api/tutorial/advanced_animations/index.html
new file mode 100644
index 0000000000..23f072420e
--- /dev/null
+++ b/files/pt-br/web/api/canvas_api/tutorial/advanced_animations/index.html
@@ -0,0 +1,386 @@
+---
+title: Advanced animations
+slug: Web/Guide/HTML/Canvas_tutorial/Advanced_animations
+tags:
+  - Animation
+  - Animations
+  - Canvas
+  - animated
+  - efeitos em animações
+translation_of: Web/API/Canvas_API/Tutorial/Advanced_animations
+---
+<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_animations", "Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas")}}</div>
+
+<div class="summary">
+<p>No último capítulo nós fizemos algumas <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations">animações básicas </a> e fomos conhecer caminhos para conseguir com que as coisas se movessem. Nesta parte prestaremos mais atenção nos movimentos e vamos adicionar algumas físicas para fazer nossas animações mais avançadas.</p>
+</div>
+
+<h2 id="Desenhe_uma_bola">Desenhe uma bola</h2>
+
+<p>Nós estamos indo usar uma bola para nossa animação estudada. Então vamos pintar aquela bola desenhada no canvas. O seguinte código configurará.</p>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="600" height="300"&gt;&lt;/canvas&gt;
+</pre>
+
+<p> Como usual, nós precisamos de um contexto de desenho primeiro. Para desenhar a bola, nós criaremos um objeto bola ao qual contém propriedades e um método draw() para pintar no canvas.</p>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+var ball = {
+  x: 100,
+  y: 100,
+  radius: 25,
+  color: 'blue',
+  draw: function() {
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
+    ctx.closePath();
+    ctx.fillStyle = this.color;
+    ctx.fill();
+  }
+};
+
+ball.draw();</pre>
+
+<p>Nada de especial aqui, a bola é atualmente um simples círculos e desenha com ajuda de </p>
+
+<p>{{domxref("CanvasRenderingContext2D.arc()", "arc()")}} method.</p>
+
+<h2 id="Adicionando_velocidade">Adicionando velocidade</h2>
+
+<p>Agora que você tem a bola, Nós estamos prontos para adicionar uma animação como nós temos aprendido no <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations">último capítulo</a> deste tutorial. Denovo, {{domxref("window.requestAnimationFrame()")}} ajuda-nos a controlar a animação. a bola pega o movimento adicionando um vetor de velocidade para a posição. Para cada frame, N[ós também {{domxref("CanvasRenderingContext2D.clearRect", "clear", "", 1)}}o canvas para remover velhor círculos da prioridade dos frames.</p>
+
+<pre class="brush: js; highlight:[8,9,24,25]">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var raf;
+
+var ball = {
+  x: 100,
+  y: 100,
+  vx: 5,
+  vy: 2,
+  radius: 25,
+  color: 'blue',
+  draw: function() {
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
+    ctx.closePath();
+    ctx.fillStyle = this.color;
+    ctx.fill();
+  }
+};
+
+function draw() {
+  ctx.clearRect(0,0, canvas.width, canvas.height);
+  ball.draw();
+  ball.x += ball.vx;
+  ball.y += ball.vy;
+  raf = window.requestAnimationFrame(draw);
+}
+
+canvas.addEventListener('mouseover', function(e) {
+  raf = window.requestAnimationFrame(draw);
+});
+
+canvas.addEventListener('mouseout', function(e) {
+  window.cancelAnimationFrame(raf);
+});
+
+ball.draw();
+</pre>
+
+<h2 id="Limites">Limites</h2>
+
+<p>Sem um teste de limite de colisão nossa bola correria para fora do canvas rapidamente. Nós precisamos checar se a posição x e y da bola está fora das dimensões do canvas e invertida a direção do vetor de velocidade. Para fazer isto, Nós adicionamos a seguinte checagem para o método draw():</p>
+
+<pre class="brush: js">if (ball.y + ball.vy &gt; canvas.height || ball.y + ball.vy &lt; 0) {
+  ball.vy = -ball.vy;
+}
+if (ball.x + ball.vx &gt; canvas.width || ball.x + ball.vx &lt; 0) {
+  ball.vx = -ball.vx;
+}</pre>
+
+<h3 id="Primeira_demonstração">Primeira demonstração</h3>
+
+<p>Deixe-me ver como isto fica em ação até agora. Mova seu mouse dentro do canvas para iniciar a animação.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" style="border: 1px solid" width="600" height="300"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var raf;
+
+var ball = {
+  x: 100,
+  y: 100,
+  vx: 5,
+  vy: 2,
+  radius: 25,
+  color: 'blue',
+  draw: function() {
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
+    ctx.closePath();
+    ctx.fillStyle = this.color;
+    ctx.fill();
+  }
+};
+
+function draw() {
+  ctx.clearRect(0,0, canvas.width, canvas.height);
+  ball.draw();
+  ball.x += ball.vx;
+  ball.y += ball.vy;
+
+  if (ball.y + ball.vy &gt; canvas.height ||
+      ball.y + ball.vy &lt; 0) {
+    ball.vy = -ball.vy;
+  }
+  if (ball.x + ball.vx &gt; canvas.width ||
+      ball.x + ball.vx &lt; 0) {
+    ball.vx = -ball.vx;
+  }
+
+  raf = window.requestAnimationFrame(draw);
+}
+
+canvas.addEventListener('mouseover', function(e) {
+  raf = window.requestAnimationFrame(draw);
+});
+
+canvas.addEventListener('mouseout', function(e) {
+  window.cancelAnimationFrame(raf);
+});
+
+ball.draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("First_demo", "610", "310")}}</p>
+
+<h2 id="Aceleração">Aceleração</h2>
+
+<p>Para fazer o movimento tão real, você para jogar com a velocidade como isto, por exemplo:</p>
+
+<pre class="brush: js">ball.vy *= .99;
+ball.vy += .25;</pre>
+
+<p>Esta diminuição da velocidade vertical para cada frame. Assim que a bola somente saltar no chão no final.</p>
+
+<div class="hidden">
+<h6 id="Second_demo">Second demo</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" style="border: 1px solid" width="600" height="300"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var raf;
+
+var ball = {
+  x: 100,
+  y: 100,
+  vx: 5,
+  vy: 2,
+  radius: 25,
+  color: 'blue',
+  draw: function() {
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
+    ctx.closePath();
+    ctx.fillStyle = this.color;
+    ctx.fill();
+  }
+};
+
+function draw() {
+  ctx.clearRect(0,0, canvas.width, canvas.height);
+  ball.draw();
+  ball.x += ball.vx;
+  ball.y += ball.vy;
+  ball.vy *= .99;
+  ball.vy += .25;
+
+  if (ball.y + ball.vy &gt; canvas.height ||
+      ball.y + ball.vy &lt; 0) {
+    ball.vy = -ball.vy;
+  }
+  if (ball.x + ball.vx &gt; canvas.width ||
+      ball.x + ball.vx &lt; 0) {
+    ball.vx = -ball.vx;
+  }
+
+  raf = window.requestAnimationFrame(draw);
+}
+
+canvas.addEventListener('mouseover', function(e) {
+  raf = window.requestAnimationFrame(draw);
+});
+
+canvas.addEventListener('mouseout', function(e) {
+  window.cancelAnimationFrame(raf);
+});
+
+ball.draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("Second_demo", "610", "310")}}</p>
+
+<h2 id="Efeito_de_arrastar">Efeito de arrastar</h2>
+
+<p>Até agora nós temos feito uso do {{domxref("CanvasRenderingContext2D.clearRect", "clearRect")}} méthodo quando limpar as prioridades do frame.Se você substituir este método com um semi-transparente {{domxref("CanvasRenderingContext2D.fillRect", "fillRect")}}, você pode fácilmente criar um efeito de arrastar.</p>
+
+<pre class="brush: js">ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
+ctx.fillRect(0, 0, canvas.width, canvas.height);</pre>
+
+<div class="hidden">
+<h6 id="Third_demo">Third demo</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" style="border: 1px solid" width="600" height="300"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var raf;
+
+var ball = {
+  x: 100,
+  y: 100,
+  vx: 5,
+  vy: 2,
+  radius: 25,
+  color: 'blue',
+  draw: function() {
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
+    ctx.closePath();
+    ctx.fillStyle = this.color;
+    ctx.fill();
+  }
+};
+
+function draw() {
+  ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
+  ctx.fillRect(0, 0, canvas.width, canvas.height);
+  ball.draw();
+  ball.x += ball.vx;
+  ball.y += ball.vy;
+  ball.vy *= .99;
+  ball.vy += .25;
+
+  if (ball.y + ball.vy &gt; canvas.height ||
+      ball.y + ball.vy &lt; 0) {
+    ball.vy = -ball.vy;
+  }
+  if (ball.x + ball.vx &gt; canvas.width ||
+      ball.x + ball.vx &lt; 0) {
+    ball.vx = -ball.vx;
+  }
+
+  raf = window.requestAnimationFrame(draw);
+}
+
+canvas.addEventListener('mouseover', function(e) {
+  raf = window.requestAnimationFrame(draw);
+});
+
+canvas.addEventListener('mouseout', function(e) {
+  window.cancelAnimationFrame(raf);
+});
+
+ball.draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("Third_demo", "610", "310")}}</p>
+
+<h2 id="Adicione_um_controle_de_mouse">Adicione um controle de mouse</h2>
+
+<p> </p>
+
+<p>Para conseguir alguns controles sobre a bola, nós podemos fazer isto seguindo nosso mouse usando o evento <a href="/en-US/docs/Web/Reference/Events/mousemove">mouseover</a>, por exemplo. O <a href="/en-US/docs/Web/Events/click">clique </a>por exemplo. O evento <code><a href="/en-US/docs/Web/Events/click">clique </a>que</code> libera a bola e deixa seu limite de novo.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" style="border: 1px solid" width="600" height="300"&gt;&lt;/canvas&gt;</pre>
+</div>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var raf;
+var running = false;
+
+var ball = {
+  x: 100,
+  y: 100,
+  vx: 5,
+  vy: 1,
+  radius: 25,
+  color: 'blue',
+  draw: function() {
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
+    ctx.closePath();
+    ctx.fillStyle = this.color;
+    ctx.fill();
+  }
+};
+
+function clear() {
+  ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
+  ctx.fillRect(0,0,canvas.width,canvas.height);
+}
+
+function draw() {
+  clear();
+  ball.draw();
+  ball.x += ball.vx;
+  ball.y += ball.vy;
+
+  if (ball.y + ball.vy &gt; canvas.height || ball.y + ball.vy &lt; 0) {
+    ball.vy = -ball.vy;
+  }
+  if (ball.x + ball.vx &gt; canvas.width || ball.x + ball.vx &lt; 0) {
+    ball.vx = -ball.vx;
+  }
+
+  raf = window.requestAnimationFrame(draw);
+}
+
+canvas.addEventListener('mousemove', function(e) {
+  if (!running) {
+    clear();
+    ball.x = e.clientX;
+    ball.y = e.clientY;
+    ball.draw();
+  }
+});
+
+canvas.addEventListener('click', function(e) {
+  if (!running) {
+    raf = window.requestAnimationFrame(draw);
+    running = true;
+  }
+});
+
+canvas.addEventListener('mouseout', function(e) {
+  window.cancelAnimationFrame(raf);
+  running = false;
+});
+
+ball.draw();
+</pre>
+
+<p>Mova a bola usando seu mouse e libere - o com um clique.</p>
+
+<p>{{EmbedLiveSample("Adding_mouse_control", "610", "310")}}</p>
+
+<h2 id="Sair">Sair</h2>
+
+<p>Este curto capítulo somente explica algumas técnicas para criar as mais avançadas animações. Há muito mais! Como adicionar um paddle, alguns bricks, e tornar este demo dentro de um jogo <a href="http://en.wikipedia.org/wiki/Breakout_%28video_game%29">Breakout</a>? Cheque a nossa área de Desenvolvimento de jogos para mais artigos de jogos.</p>
+
+<h2 id="Veja_também">Veja também:</h2>
+
+<ul>
+ <li>{{domxref("window.requestAnimationFrame()")}}</li>
+ <li><a href="/en-US/docs/Games/Techniques/Efficient_animation_for_web_games">Efficient animation for web games</a></li>
+</ul>
+
+<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_animations", "Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas")}}</p>
diff --git a/files/pt-br/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html b/files/pt-br/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html
new file mode 100644
index 0000000000..f711570b9f
--- /dev/null
+++ b/files/pt-br/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html
@@ -0,0 +1,725 @@
+---
+title: Aplicando estilos e cores
+slug: Web/Guide/HTML/Canvas_tutorial/Applying_styles_and_colors
+translation_of: Web/API/Canvas_API/Tutorial/Applying_styles_and_colors
+---
+<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_shapes", "Web/API/Canvas_API/Tutorial/Drawing_text")}}</div>
+
+<div class="summary">
+<p><span id="result_box" lang="pt"><span>No capítulo sobre</span></span> <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes" title="Web/Guide/HTML/Canvas_tutorial/Drawing_shapes">desenhando formas com canvas</a>, <span id="result_box" lang="pt"><span>usamos apenas os estilos padrões de preenchimento e linha.</span> <span>Aqui vamos explorar as opções do canvas que temos à nossa disposição para tornar nossos desenhos um pouco mais atraentes.</span> <span>Você aprenderá a adicionar cores diferentes, estilos de linhas, gradientes, padrões e sombras aos seus desenhos.</span></span></p>
+</div>
+
+<h2 id="Colors" name="Colors">Cores</h2>
+
+<p><span id="result_box" lang="pt"><span>Até agora só vimos métodos do contexto de desenho.</span> <span>Se quisermos aplicar cores a uma forma, existem duas propriedades importantes que podemos utilizar:</span></span> <code>fillStyle</code> e <code>strokeStyle</code>.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle = color")}}</dt>
+ <dd><span class="short_text" id="result_box" lang="pt"><span>Define o estilo usado ao preencher (fill) formas</span></span>.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle = color")}}</dt>
+ <dd><span class="short_text" id="result_box" lang="pt"><span>Define o estilo para os contornos (strokes) das formas.</span></span></dd>
+</dl>
+
+<p><code>color</code> é uma string que representa um CSS {{cssxref("&lt;color&gt;")}}, um objeto gradiente, ou um objeto padrão. <span id="result_box" lang="pt"><span>Examinaremos sobre objetos de gradiente e padrão mais tarde.</span> <span>Por padrão, a cor do contorno (stroke color) e a cor de preenchimento (fill color) estão definidos como preto</span></span> (valor de cor no CSS é <code>#000000</code>).</p>
+
+<div class="note">
+<p><strong>Nota:</strong> Quando você definir as propriedades <code>strokeStyle</code> e/ou <code>fillStyle</code> , o novo valor será o padrão para todas as formas desenhadas a partir de então.  Para toda forma que você quiser uma cor diferente, você vai precisar alterar o valor da propriedade <code>fillStyle</code> ou <code>strokeStyle</code>.</p>
+</div>
+
+<p>As strings validas que você pode inserir devem, de acordo com a especificação ser valores CSS {{cssxref("&lt;color&gt;")}}. Cada um dos exemplos a seguir, descrevem a mesma cor.</p>
+
+<pre class="brush: js notranslate">// these all set the fillStyle to 'orange'
+
+ctx.fillStyle = 'orange';
+ctx.fillStyle = '#FFA500';
+ctx.fillStyle = 'rgb(255, 165, 0)';
+ctx.fillStyle = 'rgba(255, 165, 0, 1)';
+</pre>
+
+<h3 id="A_fillStyle_example" name="A_fillStyle_example">Um <code>fillStyle</code> exemplo</h3>
+
+<p>Neste exemplo, nós vamos mais uma vez utilizar dois <code>for</code> loops para desenhar uma grade de retângulos, cada um com uma cor diferente. A imagem do resultado, deve parecer como a captura de tela. Não existe nada de muito espetacular acontecendo aqui. Nós usamos as duas variéveis <code>i</code> and <code>j</code> para gerar uma única cor em RGB para cada quadrado, e apenas modificando os valores vermelho e verde. O canal azul possui um valor fixo. Modificando os canais, você pode gerar todos os tipos de paletas. Aumentando os passos, você pode alcançar algo que se parece com a paleta de cores dos usuários de Photoshop.</p>
+
+<pre class="brush: js;highlight[5,6] notranslate">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  for (var i = 0; i &lt; 6; i++) {
+    for (var j = 0; j &lt; 6; j++) {
+      ctx.fillStyle = 'rgb(' + Math.floor(255 - 42.5 * i) + ',' +
+                       Math.floor(255 - 42.5 * j) + ',0)';
+      ctx.fillRect(j * 25, i * 25, 25, 25);
+    }
+  }
+}</pre>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js notranslate">draw();</pre>
+</div>
+
+<p>O resultado se parece com isto:</p>
+
+<p>{{EmbedLiveSample("A_fillStyle_example", 160, 160, "https://mdn.mozillademos.org/files/5417/Canvas_fillstyle.png")}}</p>
+
+<h3 id="A_strokeStyle_example" name="A_strokeStyle_example">Um <code>strokeStyle</code> exemplo</h3>
+
+<p>Este exemplo é similar com o anterior, porém utiliza a propriedade <code>strokeStyle</code> para alterar a cor de contorno das formas. Nós usamos o método <code>arc()</code>  para desenhar círculos ao invés de quadrados.</p>
+
+<pre class="brush: js;highlight[5,6] notranslate">  function draw() {
+    var ctx = document.getElementById('canvas').getContext('2d');
+    for (var i = 0; i &lt; 6; i++) {
+      for (var j = 0; j &lt; 6; j++) {
+        ctx.strokeStyle = 'rgb(0,' + Math.floor(255 - 42.5 * i) + ',' +
+                         Math.floor(255 - 42.5 * j) + ')';
+        ctx.beginPath();
+        ctx.arc(12.5 + j * 25, 12.5 + i * 25, 10, 0, Math.PI * 2, true);
+        ctx.stroke();
+      }
+    }
+  }
+</pre>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js notranslate">draw();</pre>
+</div>
+
+<p>O resultado se parece com isto:</p>
+
+<p>{{EmbedLiveSample("A_strokeStyle_example", "180", "180", "https://mdn.mozillademos.org/files/253/Canvas_strokestyle.png")}}</p>
+
+<h5 id="Transparency" name="Transparency">Transparência<br>
+ Além de desenhar formas opacas na tela, também podemos desenhar formas semi-transparentes (ou translúcidas). Isso é feito definindo a propriedade globalAlpha ou atribuindo uma cor semitransparente ao estilo de stroke e / ou fill style.</h5>
+
+<dl>
+ <dt>
+ <h5 id="domxrefCanvasRenderingContext2D.globalAlpha_globalAlpha_transparencyValue">{{domxref("CanvasRenderingContext2D.globalAlpha", "globalAlpha = transparencyValue")}}</h5>
+ </dt>
+ <dd>
+ <p>Aplica o valor de transparência especificado a todas as formas futuras desenhadas na tela. O valor deve estar entre 0,0 (totalmente transparente) e 1,0 (totalmente opaco). Este valor é 1.0 (totalmente opaco) por padrão.<br>
+  A propriedade globalAlpha pode ser útil se você quiser desenhar muitas formas na tela com transparência semelhante, mas, caso contrário, geralmente é mais útil definir a transparência em formas individuais ao definir suas cores.</p>
+
+ <p>Como as propriedades strokeStyle e fillStyle aceitam os valores de cor CSS rgba, podemos usar a notação a seguir para atribuir uma cor transparente a eles.</p>
+ </dd>
+</dl>
+
+<pre class="brush: js notranslate">// Assigning transparent colors to stroke and fill style
+
+ctx.strokeStyle = 'rgba(255, 0, 0, 0.5)';
+ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';
+</pre>
+
+<p>A função rgba () é semelhante à função rgb (), mas possui um parâmetro extra. O último parâmetro define o valor da transparência dessa cor específica. O intervalo válido é novamente entre 0,0 (totalmente transparente) e 1,0 (totalmente opaco).</p>
+
+<h3 id="A_globalAlpha_example" name="A_globalAlpha_example">Um exemplo globalAlpha</h3>
+
+<p>Neste exemplo, desenharemos um plano de fundo de quatro quadrados coloridos diferentes. Além disso, desenharemos um conjunto de círculos semi-transparentes. A propriedade globalAlpha é configurada em 0.2, que será usada para todas as formas a partir desse ponto. Cada passo no loop for desenha um conjunto de círculos com um raio crescente. O resultado final é um gradiente radial. Ao sobrepor cada vez mais círculos um sobre o outro, reduzimos efetivamente a transparência dos círculos que já foram desenhados. Ao aumentar a contagem de etapas e, com efeito, desenhar mais círculos, o plano de fundo desapareceria completamente do centro da imagem.</p>
+
+<pre class="brush: js;highlight[15] notranslate">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  // draw background
+  ctx.fillStyle = '#FD0';
+  ctx.fillRect(0, 0, 75, 75);
+  ctx.fillStyle = '#6C0';
+  ctx.fillRect(75, 0, 75, 75);
+  ctx.fillStyle = '#09F';
+  ctx.fillRect(0, 75, 75, 75);
+  ctx.fillStyle = '#F30';
+  ctx.fillRect(75, 75, 75, 75);
+  ctx.fillStyle = '#FFF';
+
+  // set transparency value
+  ctx.globalAlpha = 0.2;
+
+  // Draw semi transparent circles
+  for (i = 0; i &lt; 7; i++) {
+    ctx.beginPath();
+    ctx.arc(75, 75, 10 + 10 * i, 0, Math.PI * 2, true);
+    ctx.fill();
+  }
+}</pre>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js notranslate">draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("A_globalAlpha_example", "180", "180", "https://mdn.mozillademos.org/files/232/Canvas_globalalpha.png")}}</p>
+
+<h3 id="An_example_using_rgba" name="An_example_using_rgba()">Um exemplo usando o <code>rgba()</code></h3>
+
+<p>Neste segundo exemplo, fazemos algo semelhante ao anterior, mas em vez de desenhar círculos uns sobre os outros, desenhei pequenos retângulos com crescente opacidade. O uso de rgba () oferece um pouco mais de controle e flexibilidade, pois podemos definir o estilo de preenchimento e traçado/stroke individualmente.</p>
+
+<pre class="brush: js;highlight[16] notranslate">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // Draw background
+  ctx.fillStyle = 'rgb(255, 221, 0)';
+  ctx.fillRect(0, 0, 150, 37.5);
+  ctx.fillStyle = 'rgb(102, 204, 0)';
+  ctx.fillRect(0, 37.5, 150, 37.5);
+  ctx.fillStyle = 'rgb(0, 153, 255)';
+  ctx.fillRect(0, 75, 150, 37.5);
+  ctx.fillStyle = 'rgb(255, 51, 0)';
+  ctx.fillRect(0, 112.5, 150, 37.5);
+
+  // Draw semi transparent rectangles
+  for (var i = 0; i &lt; 10; i++) {
+    ctx.fillStyle = 'rgba(255, 255, 255, ' + (i + 1) / 10 + ')';
+    for (var j = 0; j &lt; 4; j++) {
+      ctx.fillRect(5 + i * 14, 5 + j * 37.5, 14, 27.5);
+    }
+  }
+}</pre>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js notranslate">draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("An_example_using_rgba()", "180", "180", "https://mdn.mozillademos.org/files/246/Canvas_rgba.png")}}</p>
+
+<h2 id="Line_styles" name="Line_styles">Line styles</h2>
+
+<p>Existem várias propriedades que permitem estilizar linhas.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.lineWidth", "lineWidth = value")}}</dt>
+ <dd>Define a largura das linhas desenhadas no futuro.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.lineCap", "lineCap = type")}}</dt>
+ <dd>Define a aparência dos fins das linhas.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.lineJoin", "lineJoin = type")}}</dt>
+ <dd>Define a aparência dos "cantos" onde as linhas se encontram.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit = value")}}</dt>
+ <dd>Estabelece um limite na mitra quando duas linhas se juntam em um ângulo agudo, para permitir controlar a espessura da junção.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.getLineDash", "getLineDash()")}}</dt>
+ <dd>Retorna a matriz de padrão de traço de linha atual que contém um número par de números não negativos</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.setLineDash", "setLineDash(segments)")}}</dt>
+ <dd><span style="">Define o padrão de traço da linha atual.</span></dd>
+ <dd><strong style="">{{domxref("CanvasRenderingContext2D.lineDashOffset", "lineDashOffset = value")}}</strong></dd>
+ <dd>Especifica onde iniciar uma matriz de traços em uma linha.</dd>
+</dl>
+
+<p>Você entenderá melhor o que eles fazem observando os exemplos abaixo.</p>
+
+<h3 id="A_lineWidth_example" name="A_lineWidth_example"><span style="">Um exemplo lineWidth</span></h3>
+
+<p>A largura da linha é a espessura do traçado centralizado no caminho especificado. Em outras palavras, a área desenhada se estende até a metade da largura da linha em ambos os lados do caminho.</p>
+
+<p>  Como as coordenadas da tela não fazem referência direta aos pixels, deve-se tomar cuidado especial para obter linhas horizontais e verticais nítidas.</p>
+
+<p>No exemplo abaixo, 10 linhas retas são desenhadas com larguras de linhas crescentes. A linha na extrema esquerda tem 1,0 unidades de largura. No entanto, as linhas de espessura à esquerda e todas as outras linhas com número inteiro ímpar não aparecem nítidas, devido ao posicionamento do caminho.</p>
+
+<pre class="brush: js;highlight[4] notranslate">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  for (var i = 0; i &lt; 10; i++) {
+    ctx.lineWidth = 1 + i;
+    ctx.beginPath();
+    ctx.moveTo(5 + i * 14, 5);
+    ctx.lineTo(5 + i * 14, 140);
+    ctx.stroke();
+  }
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js notranslate">draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("A_lineWidth_example", "180", "180", "https://mdn.mozillademos.org/files/239/Canvas_linewidth.png")}}</p>
+
+<p>A obtenção de linhas nítidas requer a compreensão de como os caminhos são traçados. Nas imagens abaixo, a grade representa a grade de coordenadas da tela. Os quadrados entre as linhas de grade são pixels reais na tela. Na primeira imagem da grade abaixo, um retângulo de (2,1) a (5,5) é preenchido. A área inteira entre eles (vermelho claro) cai nos limites dos pixels, portanto, o retângulo preenchido resultante terá bordas nítidas.<br>
+ <img alt="" class="internal" src="https://mdn.mozillademos.org/files/201/Canvas-grid.png"></p>
+
+<p>Se você considerar um caminho de (3,1) a (3,5) com uma espessura de linha de 1,0, você terminará com a situação na segunda imagem. A área real a ser preenchida (azul escuro) se estende apenas até a metade dos pixels dos dois lados do caminho. Uma aproximação disso deve ser renderizada, o que significa que esses pixels são sombreados apenas parcialmente e resultam em toda a área (azul claro e azul escuro) sendo preenchida com uma cor apenas metade da escuridão da cor real do traço. É o que acontece com a linha de largura 1.0 no código de exemplo anterior.</p>
+
+<p>Para corrigir isso, você precisa ser muito preciso na criação do seu caminho. Sabendo que uma linha de largura 1,0 estenderá meia unidade para ambos os lados do caminho, criar o caminho de (3,5,1) a (3,5,5) resulta na situação da terceira imagem - a largura da linha 1,0 termina completamente e preenchendo com precisão uma única linha vertical de pixel.<br>
+  </p>
+
+<div class="note">
+<p><strong>Nota: Esteja ciente de que, no nosso exemplo de linha vertical, a posição Y ainda faz referência a uma posição de linha de grade inteira - se não tivesse, veríamos pixels com meia cobertura nos pontos de extremidade (mas observe também que esse comportamento depende do estilo lineCap atual cujo valor padrão é butt; você pode calcular traçados consistentes com coordenadas de meio pixel para linhas de largura ímpar, configurando o estilo lineCap como quadrado, para que a borda externa do traçado ao redor do ponto de extremidade seja estendida automaticamente para cobrir o pixel inteiro exatamente).</strong></p>
+
+<p>Observe também que apenas os pontos de extremidade inicial e final de um caminho são afetados: se um caminho for fechado com closePath (), não haverá ponto inicial e final; em vez disso, todos os pontos de extremidade no caminho são conectados ao segmento anterior e ao próximo anexado usando a configuração atual do estilo lineJoin, cujo valor padrão é mitra, com o efeito de estender automaticamente as bordas externas dos segmentos conectados ao seu ponto de interseção. que o traçado renderizado cobrirá exatamente os pixels completos centralizados em cada ponto final se esses segmentos conectados forem horizontais e / ou verticais). Veja as próximas duas seções para demonstrações desses estilos de linha adicionais.</p>
+</div>
+
+<p>Para linhas de largura uniforme, cada metade acaba sendo uma quantidade inteira de pixels, portanto, você deseja um caminho entre pixels (ou seja, (3,1) a (3,5)), em vez de no meio dos pixels .</p>
+
+<p>Embora seja um pouco doloroso ao trabalhar inicialmente com gráficos 2D escalonáveis, prestar atenção à grade de pixels e à posição dos caminhos garante que seus desenhos pareçam corretos, independentemente da escala ou de qualquer outra transformação envolvida. Uma linha vertical de 1,0 largura desenhada na posição correta se tornará uma linha nítida de 2 pixels quando aumentada em 2 e aparecerá na posição correta.</p>
+
+<h3 id="A_lineCap_example" name="A_lineCap_example">Exemplo lineCap.</h3>
+
+<p>A propriedade lineCap determina como os pontos finais de cada linha são desenhados. Existem três valores possíveis para essa propriedade e são: bunda, redondo e quadrado. Por padrão, essa propriedade está configurada para butt.<img alt="" src="https://mdn.mozillademos.org/files/236/Canvas_linecap.png" style="float: right; height: 190px; width: 190px;"></p>
+
+<dl>
+ <dt><code>butt</code></dt>
+ <dd>As extremidades das linhas são quadradas nos pontos finais.</dd>
+ <dt><code>round</code></dt>
+ <dd>As extremidades das linhas são arredondadas.<br>
+ arredondadas.</dd>
+ <dt><code>square</code></dt>
+ <dd>As extremidades das linhas são ajustadas ao quadrado, adicionando uma caixa com a mesma largura e metade da altura da espessura da linha.</dd>
+</dl>
+
+<p>Neste exemplo, desenharemos três linhas, cada uma com um valor diferente para a propriedade lineCap. Também adicionei dois guias para ver as diferenças exatas entre os três. Cada uma dessas linhas começa e termina exatamente nesses guias.</p>
+
+<p>A linha à esquerda usa a opção de topo padrão. Você notará que está desenhado completamente alinhado com as guias. O segundo está definido para usar a opção redonda. Isso adiciona um semicírculo ao final que tem um raio com metade da largura da linha. A linha à direita usa a opção quadrada. Isso adiciona uma caixa com largura igual e metade da altura da espessura da linha.</p>
+
+<pre class="brush: js;highlight[18] notranslate">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  var lineCap = ['butt', 'round', 'square'];
+
+  // Draw guides
+  ctx.strokeStyle = '#09f';
+  ctx.beginPath();
+  ctx.moveTo(10, 10);
+  ctx.lineTo(140, 10);
+  ctx.moveTo(10, 140);
+  ctx.lineTo(140, 140);
+  ctx.stroke();
+
+  // Draw lines
+  ctx.strokeStyle = 'black';
+  for (var i = 0; i &lt; lineCap.length; i++) {
+    ctx.lineWidth = 15;
+    ctx.lineCap = lineCap[i];
+    ctx.beginPath();
+    ctx.moveTo(25 + i * 50, 10);
+    ctx.lineTo(25 + i * 50, 140);
+    ctx.stroke();
+  }
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js notranslate">draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("A_lineCap_example", "180", "180", "https://mdn.mozillademos.org/files/236/Canvas_linecap.png")}}</p>
+
+<h3 id="A_lineJoin_example" name="A_lineJoin_example">Um exemplo de lineJoin</h3>
+
+<p>A propriedade lineJoin determina como dois segmentos de conexão (de linhas, arcos ou curvas) com comprimentos diferentes de zero em uma forma são unidos (segmentos degenerados com comprimentos zero, cujos pontos finais e pontos de controle especificados são exatamente na mesma posição, são ignorados) .</p>
+
+<p>Existem três valores possíveis para essa propriedade: round, chanfro e mitra. Por padrão, essa propriedade está configurada para mitra. Observe que a configuração lineJoin não terá efeito se os dois segmentos conectados tiverem a mesma direção, porque nenhuma área de junção será adicionada neste caso.<img alt="" src="https://mdn.mozillademos.org/files/237/Canvas_linejoin.png" style="float: right; height: 190px; width: 190px;"></p>
+
+<dl>
+ <dt><code>round</code></dt>
+ <dd>Arredonda os cantos de uma forma preenchendo um setor adicional de disco centralizado no ponto final comum dos segmentos conectados. O raio desses cantos arredondados é igual à metade da largura da linha.</dd>
+ <dt><code>bevel</code></dt>
+ <dd>Preenche uma área triangular adicional entre o ponto final comum dos segmentos conectados e os cantos retangulares externos separados de cada segmento.</dd>
+ <dt><code>miter</code></dt>
+ <dd>Os segmentos conectados são unidos estendendo suas bordas externas para se conectarem em um único ponto, com o efeito de preencher uma área adicional em forma de losango. Essa configuração é efetuada pela propriedade miterLimit, explicada abaixo.</dd>
+</dl>
+
+<p>O exemplo abaixo desenha três caminhos diferentes, demonstrando cada uma dessas três configurações de propriedade lineJoin; a saída é mostrada acima.</p>
+
+<pre class="brush: js;highlight[6] notranslate">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  var lineJoin = ['round', 'bevel', 'miter'];
+  ctx.lineWidth = 10;
+  for (var i = 0; i &lt; lineJoin.length; i++) {
+    ctx.lineJoin = lineJoin[i];
+    ctx.beginPath();
+    ctx.moveTo(-5, 5 + i * 40);
+    ctx.lineTo(35, 45 + i * 40);
+    ctx.lineTo(75, 5 + i * 40);
+    ctx.lineTo(115, 45 + i * 40);
+    ctx.lineTo(155, 5 + i * 40);
+    ctx.stroke();
+  }
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js notranslate">draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("A_lineJoin_example", "180", "180", "https://mdn.mozillademos.org/files/237/Canvas_linejoin.png")}}</p>
+
+<h3 id="A_demo_of_the_miterLimit_property" name="A_demo_of_the_miterLimit_property">Uma demonstração da propriedade miterLimit</h3>
+
+<p>Como você viu no exemplo anterior, ao unir duas linhas com a opção de esquadria, as bordas externas das duas linhas de junção são estendidas até o ponto em que elas se encontram. Para linhas com ângulos amplos entre si, esse ponto não está longe do ponto de conexão interno. No entanto, à medida que os ângulos entre cada linha diminuem, a distância (comprimento da mitra) entre esses pontos aumenta exponencialmente.</p>
+
+<p>A propriedade miterLimit determina a que distância o ponto de conexão externo pode ser colocado do ponto de conexão interno. Se duas linhas excederem esse valor, uma junção de chanfro será desenhada. Observe que o comprimento máximo da esquadria é o produto da largura da linha medida no sistema de coordenadas atual, pelo valor dessa propriedade miterLimit (cujo valor padrão é 10.0 no HTML {{HTMLElement ("canvas")}}}), portanto, o O miterLimit pode ser definido independentemente da escala de exibição atual ou de quaisquer transformações afins de caminhos: apenas influencia a forma efetivamente renderizada das arestas da linha.</p>
+
+<p>Mais exatamente, o limite da mitra é a proporção máxima permitida do comprimento da extensão (na tela HTML, é medida entre o canto externo das arestas unidas da linha e o ponto de extremidade comum dos segmentos de conexão especificados no caminho) pela metade do espessura da linha. Pode ser definido de maneira equivalente como a proporção máxima permitida da distância entre os pontos interno e externo da junção das arestas e a largura total da linha. Em seguida, é igual ao coecante da metade do ângulo interno mínimo dos segmentos de conexão abaixo dos quais nenhuma junção de esquadria será renderizada, mas apenas uma junção de chanfro:</p>
+
+<ul>
+ <li><code>miterLimit</code> = <strong>max</strong> <code>miterLength</code> / <code>lineWidth</code> = 1 / <strong>sin</strong> ( <strong>min</strong> <em>θ</em> / 2 )</li>
+ <li>O limite padrão de esquadria de 10.0 removerá todos os mitros para ângulos agudos abaixo de 11 graus.</li>
+ <li>Um limite de esquadria igual a √2 ≈ 1.4142136 (arredondado para cima) retira os mitros para todos os ângulos agudos, mantendo as juntas de esquadria apenas para ângulos obtusos ou retos.</li>
+ <li>Um limite de mitra igual a 1,0 é válido, mas desativará todos os atenuadores.</li>
+ <li>Valores abaixo de 1,0 são inválidos para o limite de mitra.</li>
+</ul>
+
+<p>Aqui está uma pequena demonstração na qual você pode definir o mitreLimit dinamicamente e ver como isso afeta as formas na tela. As linhas azuis mostram onde estão os pontos inicial e final de cada uma das linhas no padrão em zigue-zague.</p>
+
+<p>Se você especificar um valor de miterLimite abaixo de 4.2 nesta demonstração, nenhum dos cantos visíveis poderá ser uma extensão de mitra, mas apenas com um pequeno canal próximo às linhas azuis; com um limite máximo acima de 10, a maioria dos cantos nesta demonstração deve ser levada a uma meia-esquadria das linhas azuis e a altura está diminuindo entre os cantos da esquerda para a direita porque eles estão conectados com ângulos crescentes; com valores intermediários, os cantos do lado esquerdo ou apenas um canto próximo às linhas azuis e os cantos do lado direito com uma extensão de esquadria (também com uma altura decrescente).</p>
+
+<pre class="brush: js;highlight[18] notranslate">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // Clear canvas
+  ctx.clearRect(0, 0, 150, 150);
+
+  // Draw guides
+  ctx.strokeStyle = '#09f';
+  ctx.lineWidth   = 2;
+  ctx.strokeRect(-5, 50, 160, 50);
+
+  // Set line styles
+  ctx.strokeStyle = '#000';
+  ctx.lineWidth = 10;
+
+  // check input
+  if (document.getElementById('miterLimit').value.match(/\d+(\.\d+)?/)) {
+    ctx.miterLimit = parseFloat(document.getElementById('miterLimit').value);
+  } else {
+    alert('Value must be a positive number');
+  }
+
+  // Draw lines
+  ctx.beginPath();
+  ctx.moveTo(0, 100);
+  for (i = 0; i &lt; 24 ; i++){
+    var dy = i % 2 == 0 ? 25 : -25 ;
+    ctx.lineTo(Math.pow(i, 1.5) * 2, 75 + dy);
+  }
+  ctx.stroke();
+  return false;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;table&gt;
+  &lt;tr&gt;
+    &lt;td&gt;&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;&lt;/td&gt;
+    &lt;td&gt;Change the &lt;code&gt;miterLimit&lt;/code&gt; by entering a new value below and clicking the redraw button.&lt;br&gt;&lt;br&gt;
+      &lt;form onsubmit="return draw();"&gt;
+        &lt;label&gt;Miter limit&lt;/label&gt;
+        &lt;input type="text" size="3" id="miterLimit"/&gt;
+        &lt;input type="submit" value="Redraw"/&gt;
+      &lt;/form&gt;
+    &lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<pre class="brush: js notranslate">document.getElementById('miterLimit').value = document.getElementById('canvas').getContext('2d').miterLimit;
+draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("A_demo_of_the_miterLimit_property", "400", "180", "https://mdn.mozillademos.org/files/240/Canvas_miterlimit.png")}}</p>
+
+<h3 id="Usando_linhas_tracejadas">Usando linhas tracejadas</h3>
+
+<p><code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">O método </span></font>setLineDash</code> e a propriedade <code>lineDashOffset</code> especificam o padrão de traço para as linhas. O método <code>setLineDash</code> aceita uma lista de números que especificam distâncias para desenhar alternadamente entre uma linha e uma lacuna. Já a propriedade <code>lineDashOffset</code> define a distância até onde se deve iniciar a linha.</p>
+
+<p>Neste exemplo, criaremos um efeito de formigas caminhando. É uma técnica de animação frequentemente usada em computação gráfica, pois ajuda o usuário a fazer uma distinção entre a borda e o plano de fundo animando a borda. Mais tarde neste tutorial, você aprenderá como fazer <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations">animações básicas</a>.</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;canvas id="canvas" width="110" height="110"&gt;&lt;/canvas&gt;</pre>
+</div>
+
+<pre class="brush: js;highlight[6] notranslate">var ctx = document.getElementById('canvas').getContext('2d');
+var offset = 0;
+
+function draw() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  ctx.setLineDash([4, 2]);
+  ctx.lineDashOffset = -offset;
+  ctx.strokeRect(10, 10, 100, 100);
+}
+
+function march() {
+  offset++;
+  if (offset &gt; 16) {
+    offset = 0;
+  }
+  draw();
+  setTimeout(march, 20);
+}
+
+march();</pre>
+
+<p>{{EmbedLiveSample("Using_line_dashes", "120", "120", "https://mdn.mozillademos.org/files/9853/marching-ants.png")}}</p>
+
+<h2 id="Gradients" name="Gradients">Gradients</h2>
+
+<p>Just like any normal drawing program, we can fill and stroke shapes using linear and radial gradients. We create a {{domxref("CanvasGradient")}} object by using one of the following methods. We can then assign this object to the <code>fillStyle</code> or <code>strokeStyle</code> properties.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.createLinearGradient", "createLinearGradient(x1, y1, x2, y2)")}}</dt>
+ <dd>Creates a linear gradient object with a starting point of (<code>x1</code>, <code>y1</code>) and an end point of (<code>x2</code>, <code>y2</code>).</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.createRadialGradient", "createRadialGradient(x1, y1, r1, x2, y2, r2)")}}</dt>
+ <dd>Creates a radial gradient. The parameters represent two circles, one with its center at (<code>x1</code>, <code>y1</code>) and a radius of <code>r1</code>, and the other with its center at (<code>x2</code>, <code>y2</code>) with a radius of <code>r2</code>.</dd>
+</dl>
+
+<p>For example:</p>
+
+<pre class="brush: js notranslate">var lineargradient = ctx.createLinearGradient(0, 0, 150, 150);
+var radialgradient = ctx.createRadialGradient(75, 75, 0, 75, 75, 100);
+</pre>
+
+<p>Once we've created a <code>CanvasGradient</code> object we can assign colors to it by using the <code>addColorStop()</code> method.</p>
+
+<dl>
+ <dt>{{domxref("CanvasGradient.addColorStop", "gradient.addColorStop(position, color)")}}</dt>
+ <dd>Creates a new color stop on the <code>gradient</code> object. The <code>position</code> is a number between 0.0 and 1.0 and defines the relative position of the color in the gradient, and the <code>color</code> argument must be a string representing a CSS {{cssxref("&lt;color&gt;")}}, indicating the color the gradient should reach at that offset into the transition.</dd>
+</dl>
+
+<p>You can add as many color stops to a gradient as you need. Below is a very simple linear gradient from white to black.</p>
+
+<pre class="brush: js notranslate">var lineargradient = ctx.createLinearGradient(0, 0, 150, 150);
+lineargradient.addColorStop(0, 'white');
+lineargradient.addColorStop(1, 'black');
+</pre>
+
+<h3 id="A_createLinearGradient_example" name="A_createLinearGradient_example">A <code>createLinearGradient</code> example</h3>
+
+<p>In this example, we'll create two different gradients. As you can see here, both the <code>strokeStyle</code> and <code>fillStyle</code> properties can accept a <code>canvasGradient</code> object as valid input.</p>
+
+<pre class="brush: js;highlight[5,11] notranslate">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // Create gradients
+  var lingrad = ctx.createLinearGradient(0, 0, 0, 150);
+  lingrad.addColorStop(0, '#00ABEB');
+  lingrad.addColorStop(0.5, '#fff');
+  lingrad.addColorStop(0.5, '#26C000');
+  lingrad.addColorStop(1, '#fff');
+
+  var lingrad2 = ctx.createLinearGradient(0, 50, 0, 95);
+  lingrad2.addColorStop(0.5, '#000');
+  lingrad2.addColorStop(1, 'rgba(0, 0, 0, 0)');
+
+  // assign gradients to fill and stroke styles
+  ctx.fillStyle = lingrad;
+  ctx.strokeStyle = lingrad2;
+
+  // draw shapes
+  ctx.fillRect(10, 10, 130, 130);
+  ctx.strokeRect(50, 50, 50, 50);
+
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js notranslate">draw();</pre>
+</div>
+
+<p>The first is a background gradient. As you can see, we assigned two colors at the same position. You do this to make very sharp color transitions—in this case from white to green. Normally, it doesn't matter in what order you define the color stops, but in this special case, it does significantly. If you keep the assignments in the order you want them to appear, this won't be a problem.</p>
+
+<p>In the second gradient, we didn't assign the starting color (at position 0.0) since it wasn't strictly necessary, because it will automatically assume the color of the next color stop. Therefore, assigning the black color at position 0.5 automatically makes the gradient, from the start to this stop, black.</p>
+
+<p>{{EmbedLiveSample("A_createLinearGradient_example", "180", "180", "https://mdn.mozillademos.org/files/235/Canvas_lineargradient.png")}}</p>
+
+<h3 id="A_createRadialGradient_example" name="A_createRadialGradient_example">A <code>createRadialGradient</code> example</h3>
+
+<p>In this example, we'll define four different radial gradients. Because we have control over the start and closing points of the gradient, we can achieve more complex effects than we would normally have in the "classic" radial gradients we see in, for instance, Photoshop (that is, a gradient with a single center point where the gradient expands outward in a circular shape).</p>
+
+<pre class="brush: js;highlight[5,10,15,20] notranslate">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // Create gradients
+  var radgrad = ctx.createRadialGradient(45, 45, 10, 52, 50, 30);
+  radgrad.addColorStop(0, '#A7D30C');
+  radgrad.addColorStop(0.9, '#019F62');
+  radgrad.addColorStop(1, 'rgba(1, 159, 98, 0)');
+
+  var radgrad2 = ctx.createRadialGradient(105, 105, 20, 112, 120, 50);
+  radgrad2.addColorStop(0, '#FF5F98');
+  radgrad2.addColorStop(0.75, '#FF0188');
+  radgrad2.addColorStop(1, 'rgba(255, 1, 136, 0)');
+
+  var radgrad3 = ctx.createRadialGradient(95, 15, 15, 102, 20, 40);
+  radgrad3.addColorStop(0, '#00C9FF');
+  radgrad3.addColorStop(0.8, '#00B5E2');
+  radgrad3.addColorStop(1, 'rgba(0, 201, 255, 0)');
+
+  var radgrad4 = ctx.createRadialGradient(0, 150, 50, 0, 140, 90);
+  radgrad4.addColorStop(0, '#F4F201');
+  radgrad4.addColorStop(0.8, '#E4C700');
+  radgrad4.addColorStop(1, 'rgba(228, 199, 0, 0)');
+
+  // draw shapes
+  ctx.fillStyle = radgrad4;
+  ctx.fillRect(0, 0, 150, 150);
+  ctx.fillStyle = radgrad3;
+  ctx.fillRect(0, 0, 150, 150);
+  ctx.fillStyle = radgrad2;
+  ctx.fillRect(0, 0, 150, 150);
+  ctx.fillStyle = radgrad;
+  ctx.fillRect(0, 0, 150, 150);
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js notranslate">draw();</pre>
+</div>
+
+<p>In this case, we've offset the starting point slightly from the end point to achieve a spherical 3D effect. It's best to try to avoid letting the inside and outside circles overlap because this results in strange effects which are hard to predict.</p>
+
+<p>The last color stop in each of the four gradients uses a fully transparent color. If you want to have a nice transition from this to the previous color stop, both colors should be equal. This isn't very obvious from the code because it uses two different CSS color methods as a demonstration, but in the first gradient <code>#019F62 = rgba(1,159,98,1)</code>.</p>
+
+<p>{{EmbedLiveSample("A_createRadialGradient_example", "180", "180", "https://mdn.mozillademos.org/files/244/Canvas_radialgradient.png")}}</p>
+
+<h2 id="Patterns" name="Patterns">Patterns</h2>
+
+<p>In one of the examples on the previous page, we used a series of loops to create a pattern of images. There is, however, a much simpler method: the <code>createPattern()</code> method.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.createPattern", "createPattern(image, type)")}}</dt>
+ <dd>Creates and returns a new canvas pattern object. <code>image</code> is a {{domxref("CanvasImageSource")}} (that is, an {{domxref("HTMLImageElement")}}, another canvas, a {{HTMLElement("video")}} element, or the like. <code>type</code> is a string indicating how to use the image.</dd>
+</dl>
+
+<p>The type specifies how to use the image in order to create the pattern, and must be one of the following string values:</p>
+
+<dl>
+ <dt><code>repeat</code></dt>
+ <dd>Tiles the image in both vertical and horizontal directions.</dd>
+ <dt><code>repeat-x</code></dt>
+ <dd>Tiles the image horizontally but not vertically.</dd>
+ <dt><code>repeat-y</code></dt>
+ <dd>Tiles the image vertically but not horizontally.</dd>
+ <dt><code>no-repeat</code></dt>
+ <dd>Doesn't tile the image. It's used only once.</dd>
+</dl>
+
+<p>We use this method to create a {{domxref("CanvasPattern")}} object which is very similar to the gradient methods we've seen above. Once we've created a pattern, we can assign it to the <code>fillStyle</code> or <code>strokeStyle</code> properties. For example:</p>
+
+<pre class="brush: js notranslate">var img = new Image();
+img.src = 'someimage.png';
+var ptrn = ctx.createPattern(img, 'repeat');
+</pre>
+
+<div class="note">
+<p><strong>Note:</strong> Like with the <code>drawImage()</code> method, you must make sure the image you use is loaded before calling this method or the pattern may be drawn incorrectly.</p>
+</div>
+
+<h3 id="A_createPattern_example" name="A_createPattern_example">A <code>createPattern</code> example</h3>
+
+<p>In this last example, we'll create a pattern to assign to the <code>fillStyle</code> property. The only thing worth noting is the use of the image's <code>onload</code> handler. This is to make sure the image is loaded before it is assigned to the pattern.</p>
+
+<pre class="brush: js;highlight[10] notranslate">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // create new image object to use as pattern
+  var img = new Image();
+  img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png';
+  img.onload = function() {
+
+    // create pattern
+    var ptrn = ctx.createPattern(img, 'repeat');
+    ctx.fillStyle = ptrn;
+    ctx.fillRect(0, 0, 150, 150);
+
+  }
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js notranslate">draw();</pre>
+
+<p>The result looks like this:</p>
+</div>
+
+<p>{{EmbedLiveSample("A_createPattern_example", "180", "180", "https://mdn.mozillademos.org/files/222/Canvas_createpattern.png")}}</p>
+
+<h2 id="Shadows">Shadows</h2>
+
+<p>Using shadows involves just four properties:</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX = float")}}</dt>
+ <dd>Indicates the horizontal distance the shadow should extend from the object. This value isn't affected by the transformation matrix. The default is 0.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY = float")}}</dt>
+ <dd>Indicates the vertical distance the shadow should extend from the object. This value isn't affected by the transformation matrix. The default is 0.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur = float")}}</dt>
+ <dd>Indicates the size of the blurring effect; this value doesn't correspond to a number of pixels and is not affected by the current transformation matrix. The default value is 0.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.shadowColor", "shadowColor = color")}}</dt>
+ <dd>A standard CSS color value indicating the color of the shadow effect; by default, it is fully-transparent black.</dd>
+</dl>
+
+<p>The properties <code>shadowOffsetX</code> and <code>shadowOffsetY</code> indicate how far the shadow should extend from the object in the X and Y directions; these values aren't affected by the current transformation matrix. Use negative values to cause the shadow to extend up or to the left, and positive values to cause the shadow to extend down or to the right. These are both 0 by default.</p>
+
+<p>The <code>shadowBlur</code> property indicates the size of the blurring effect; this value doesn't correspond to a number of pixels and is not affected by the current transformation matrix. The default value is 0.</p>
+
+<p>The <code>shadowColor</code> property is a standard CSS color value indicating the color of the shadow effect; by default, it is fully-transparent black.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Shadows are only drawn for <code>source-over</code> <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing" title="Web/Guide/HTML/Canvas_tutorial/Compositing">compositing operations</a>.</p>
+</div>
+
+<h3 id="A_shadowed_text_example">A shadowed text example</h3>
+
+<p>This example draws a text string with a shadowing effect.</p>
+
+<pre class="brush: js;highlight[4,5,6,7] notranslate">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  ctx.shadowOffsetX = 2;
+  ctx.shadowOffsetY = 2;
+  ctx.shadowBlur = 2;
+  ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';
+
+  ctx.font = '20px Times New Roman';
+  ctx.fillStyle = 'Black';
+  ctx.fillText('Sample String', 5, 30);
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;canvas id="canvas" width="150" height="80"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js notranslate">draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("A_shadowed_text_example", "180", "100", "https://mdn.mozillademos.org/files/2505/shadowed-string.png")}}</p>
+
+<p>We will look at the <code>font</code> property and <code>fillText</code> method in the next chapter about <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text">drawing text</a>.</p>
+
+<h2 id="Canvas_fill_rules">Canvas fill rules</h2>
+
+<p>When using <code>fill</code> (or {{domxref("CanvasRenderingContext2D.clip", "clip")}} and {{domxref("CanvasRenderingContext2D.isPointInPath", "isPointinPath")}}) you can optionally provide a fill rule algorithm by which to determine if a point is inside or outside a path and thus if it gets filled or not. This is useful when a path intersects itself or is nested.<br>
+ <br>
+ Two values are possible:</p>
+
+<ul>
+ <li><code><strong>"nonzero</strong></code>": The <a class="external external-icon" href="http://en.wikipedia.org/wiki/Nonzero-rule">non-zero winding rule</a>, which is the default rule.</li>
+ <li><code><strong>"evenodd"</strong></code>: The <a class="external external-icon" href="http://en.wikipedia.org/wiki/Even%E2%80%93odd_rule">even-odd winding rule</a>.</li>
+</ul>
+
+<p>In this example we are using the <code>evenodd</code> rule.</p>
+
+<pre class="brush: js;highlight[6] notranslate">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  ctx.beginPath();
+  ctx.arc(50, 50, 30, 0, Math.PI * 2, true);
+  ctx.arc(50, 50, 15, 0, Math.PI * 2, true);
+  ctx.fill('evenodd');
+}</pre>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;canvas id="canvas" width="100" height="100"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js notranslate">draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("Canvas_fill_rules", "110", "110", "https://mdn.mozillademos.org/files/9855/fill-rule.png")}}</p>
+
+<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_shapes", "Web/API/Canvas_API/Tutorial/Drawing_text")}}</p>
diff --git a/files/pt-br/web/api/canvas_api/tutorial/basic_animations/index.html b/files/pt-br/web/api/canvas_api/tutorial/basic_animations/index.html
new file mode 100644
index 0000000000..125e0874a7
--- /dev/null
+++ b/files/pt-br/web/api/canvas_api/tutorial/basic_animations/index.html
@@ -0,0 +1,331 @@
+---
+title: Basic animations
+slug: Web/Guide/HTML/Canvas_tutorial/Basic_animations
+translation_of: Web/API/Canvas_API/Tutorial/Basic_animations
+---
+<p>Já que estamos usando JavaScript para controlar {{HTMLElement("canvas")}} elementos, também é muito fácil criar animações interativas. Fazer animações mais complexas pode levar um tempo extra; esperamos introduzir um novo artigo para auxiliar sobre isso em breve.</p>
+
+<p>Provavelmente a maior limitação é que uma vez que uma forma é desenhada, ela permanece assim. Se precisarmos mover, temos que redesenhar-lá e tudo que foi desenhado antes. Demora muito tempo pra redesenhar frames complexos e a desempenho depende altamente da velocidade do computador em que está rodando.</p>
+
+<h2 id="Basic_animation_steps" name="Basic_animation_steps">Passos para animação básica</h2>
+
+<p>Estes são os passos que você precisa para desenhar um frame:</p>
+
+<ol>
+ <li><strong>Limpe o canvas</strong><br>
+  A menos que a forma que você vai desenhar preencha o canvas completo(por exemplo, uma imagem de fundo), você precisa limpar todas as formas que foram desenhadas anteriormente. O caminho mais fácil para fazer isso é usando o método clearRect().</li>
+ <li><strong>Salve o estado da tela</strong><br>
+  Se você estiver mudando alguma configuração(como estilos, transformações, etc.) que afete o estado do canvas e você quer garantir que o estado original seja usado sempre que um quadro é desenhado, você precisa salvar esse estado original.</li>
+ <li><strong>Desenhe formas animadas</strong><br>
+  A etapa em que você faz a renderização real do quadro.</li>
+ <li><strong>Restaure o estado do canvas</strong><br>
+  Se você salvou o estado, restaure-o antes de desenhar um novo quadro.</li>
+</ol>
+
+<h2 id="Controlling_an_animation" name="Controlling_an_animation">Controlando uma animação</h2>
+
+<p>Formas são desenhos na tela usando os canvas métodos diretamente ou chamando personalizadas. Em circunstancias normais, nós somente vemos esses resultados aparecerem na tela quando o script termina de ser executado. Por exemplo, não é possível fazer uma animação dentro de um loop for.</p>
+
+<p>Isso significa que precisamos de um jeito para executar nossas funções de desenho durante um período de tempo. Existem dois jeitos para controlar uma animação como essa.</p>
+
+<h3 id="Atualizações_agendadas">Atualizações agendadas</h3>
+
+<p>Primeiramente há as funções {{domxref("window.setInterval()")}} e {{domxref("window.setTimeout()")}}, que podem ser usadas para chamar uma função específica durante um certo período definido de tempo.</p>
+
+<div class="note">
+<p>Nota: O método {{domxref("window.requestAnimationFrame()")}} agora é a maneira recomendada de programar animações. Vamos atualizar esse tutorial para abortar isso em breve.</p>
+</div>
+
+<dl>
+ <dt><code>setInterval(<em>função</em>,<em>atraso</em>)</code></dt>
+ <dd>Inicia repetidamente executando a função específica pela função a cada milissegundo de atraso.</dd>
+ <dt><code>setTimeout(<em>função</em>,<em>atraso</em>)</code></dt>
+ <dd>Executa a função especificada pela função em milissegundos de atraso.</dd>
+</dl>
+
+<p>Se você não quer nenhuma interação do usuário, é melhor usar a função setInterval() que executa repeditamente o código fornecido.</p>
+
+<h3 id="Atualizar_na_interação_do_usuário">Atualizar na interação do usuário</h3>
+
+<p>O segundo método que nós podemos usar para controlar uma animação é a entrada do usuário. Se nós quiséssimos criar um jogo, nós poderiamos usar os eventos do teclado ou mouse para controlar a animação. Ao definir {{domxref("EventListener")}}s, nós pegamos qualquer interação do usuário e executamos nossas funções da animação. </p>
+
+<p>Se você quer a interação do usuário, você pode usar uma versão menor ou a versão principal do nosso framework pra animação:</p>
+
+<pre>var myAnimation = new MiniDaemon(null, animateShape, 500, Infinity);</pre>
+
+<p>ou</p>
+
+<pre>var myAnimation = new Daemon(null, animateShape, 500, Infinity);</pre>
+
+<p>Nos exemplos abaixo, no entanto, usamos o método {{domxref("window.setInterval()")}} para controlar a animação. Na parte inferior dessa página há alguns links de exemplos que usam {{domxref("window.setTimeout()")}}.</p>
+
+<h4 id="Um_sistema_solar_animado">Um sistema solar animado</h4>
+
+<p>Esse exemplo anima um pequeno modelo do nosso sistema solar.</p>
+
+<pre class="brush: js">var sun = new Image();
+var moon = new Image();
+var earth = new Image();
+function init(){
+  sun.src = 'https://mdn.mozillademos.org/files/1456/Canvas_sun.png';
+  moon.src = 'https://mdn.mozillademos.org/files/1443/Canvas_moon.png';
+  earth.src = 'https://mdn.mozillademos.org/files/1429/Canvas_earth.png';
+  setInterval(draw,100);
+}
+
+function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  ctx.globalCompositeOperation = 'destination-over';
+  ctx.clearRect(0,0,300,300); // clear canvas
+
+  ctx.fillStyle = 'rgba(0,0,0,0.4)';
+  ctx.strokeStyle = 'rgba(0,153,255,0.4)';
+  ctx.save();
+  ctx.translate(150,150);
+
+  // Earth
+  var time = new Date();
+  ctx.rotate( ((2*Math.PI)/60)*time.getSeconds() + ((2*Math.PI)/60000)*time.getMilliseconds() );
+  ctx.translate(105,0);
+  ctx.fillRect(0,-12,50,24); // Shadow
+  ctx.drawImage(earth,-12,-12);
+
+  // Moon
+  ctx.save();
+  ctx.rotate( ((2*Math.PI)/6)*time.getSeconds() + ((2*Math.PI)/6000)*time.getMilliseconds() );
+  ctx.translate(0,28.5);
+  ctx.drawImage(moon,-3.5,-3.5);
+  ctx.restore();
+
+  ctx.restore();
+
+  ctx.beginPath();
+  ctx.arc(150,150,105,0,Math.PI*2,false); // Earth orbit
+  ctx.stroke();
+
+  ctx.drawImage(sun,0,0,300,300);
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" width="300" height="300"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js">init();</pre>
+</div>
+
+<p>{{EmbedLiveSample("An_animated_solar_system", "310", "310", "https://mdn.mozillademos.org/files/202/Canvas_animation1.png")}}</p>
+
+<h4 id="Um_relógio_animado">Um relógio animado</h4>
+
+<p>Esse exemplos desenha um relógio animado, mostrando sua hora atual.</p>
+
+<pre class="brush: js">function init(){
+  clock();
+  setInterval(clock,1000);
+}
+
+function clock(){
+  var now = new Date();
+  var ctx = document.getElementById('canvas').getContext('2d');
+  ctx.save();
+  ctx.clearRect(0,0,150,150);
+  ctx.translate(75,75);
+  ctx.scale(0.4,0.4);
+  ctx.rotate(-Math.PI/2);
+  ctx.strokeStyle = "black";
+  ctx.fillStyle = "white";
+  ctx.lineWidth = 8;
+  ctx.lineCap = "round";
+
+  // Hour marks
+  ctx.save();
+  for (var i=0;i&lt;12;i++){
+    ctx.beginPath();
+    ctx.rotate(Math.PI/6);
+    ctx.moveTo(100,0);
+    ctx.lineTo(120,0);
+    ctx.stroke();
+  }
+  ctx.restore();
+
+  // Minute marks
+  ctx.save();
+  ctx.lineWidth = 5;
+  for (i=0;i&lt;60;i++){
+    if (i%5!=0) {
+      ctx.beginPath();
+      ctx.moveTo(117,0);
+      ctx.lineTo(120,0);
+      ctx.stroke();
+    }
+    ctx.rotate(Math.PI/30);
+  }
+  ctx.restore();
+
+  var sec = now.getSeconds();
+  var min = now.getMinutes();
+  var hr  = now.getHours();
+  hr = hr&gt;=12 ? hr-12 : hr;
+
+  ctx.fillStyle = "black";
+
+  // write Hours
+  ctx.save();
+  ctx.rotate( hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec )
+  ctx.lineWidth = 14;
+  ctx.beginPath();
+  ctx.moveTo(-20,0);
+  ctx.lineTo(80,0);
+  ctx.stroke();
+  ctx.restore();
+
+  // write Minutes
+  ctx.save();
+  ctx.rotate( (Math.PI/30)*min + (Math.PI/1800)*sec )
+  ctx.lineWidth = 10;
+  ctx.beginPath();
+  ctx.moveTo(-28,0);
+  ctx.lineTo(112,0);
+  ctx.stroke();
+  ctx.restore();
+
+  // Write seconds
+  ctx.save();
+  ctx.rotate(sec * Math.PI/30);
+  ctx.strokeStyle = "#D40000";
+  ctx.fillStyle = "#D40000";
+  ctx.lineWidth = 6;
+  ctx.beginPath();
+  ctx.moveTo(-30,0);
+  ctx.lineTo(83,0);
+  ctx.stroke();
+  ctx.beginPath();
+  ctx.arc(0,0,10,0,Math.PI*2,true);
+  ctx.fill();
+  ctx.beginPath();
+  ctx.arc(95,0,10,0,Math.PI*2,true);
+  ctx.stroke();
+  ctx.fillStyle = "rgba(0,0,0,0)";
+  ctx.arc(0,0,3,0,Math.PI*2,true);
+  ctx.fill();
+  ctx.restore();
+
+  ctx.beginPath();
+  ctx.lineWidth = 14;
+  ctx.strokeStyle = '#325FA2';
+  ctx.arc(0,0,142,0,Math.PI*2,true);
+  ctx.stroke();
+
+  ctx.restore();
+}</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js">init();</pre>
+</div>
+
+<p>{{EmbedLiveSample("An_animated_clock", "180", "180", "https://mdn.mozillademos.org/files/203/Canvas_animation2.png")}}</p>
+
+<h4 id="Um_panorama_em_loop">Um panorama  em loop</h4>
+
+<p>Nesse exemplos, um panorama é rolado da esquerda pra direita. Nós estamos usando uma imagem do Parque Nacional de Yosemite que tiramos da Wikipedia, mas você pode usar qualquer imagem que fosse maior que a tela.</p>
+
+<pre class="brush: js">var img = new Image();
+
+// User Variables - customize these to change the image being scrolled, its
+// direction, and the speed.
+
+img.src = 'https://mdn.mozillademos.org/files/4553/Capitan_Meadows,_Yosemite_National_Park.jpg';
+var CanvasXSize = 800;
+var CanvasYSize = 200;
+var speed = 30; //lower is faster
+var scale = 1.05;
+var y = -4.5; //vertical offset
+
+// Main program
+
+var dx = 0.75;
+var imgW;
+var imgH;
+var x = 0;
+var clearX;
+var clearY;
+var ctx;
+
+img.onload = function() {
+    imgW = img.width*scale;
+    imgH = img.height*scale;
+    if (imgW &gt; CanvasXSize) { x = CanvasXSize-imgW; } // image larger than canvas
+    if (imgW &gt; CanvasXSize) { clearX = imgW; } // image larger than canvas
+    else { clearX = CanvasXSize; }
+    if (imgH &gt; CanvasYSize) { clearY = imgH; } // image larger than canvas
+    else { clearY = CanvasYSize; }
+    //Get Canvas Element
+    ctx = document.getElementById('canvas').getContext('2d');
+    //Set Refresh Rate
+    return setInterval(draw, speed);
+}
+
+function draw() {
+    //Clear Canvas
+    ctx.clearRect(0,0,clearX,clearY);
+    //If image is &lt;= Canvas Size
+    if (imgW &lt;= CanvasXSize) {
+        //reset, start from beginning
+        if (x &gt; (CanvasXSize)) { x = 0; }
+        //draw aditional image
+        if (x &gt; (CanvasXSize-imgW)) { ctx.drawImage(img,x-CanvasXSize+1,y,imgW,imgH); }
+    }
+    //If image is &gt; Canvas Size
+    else {
+        //reset, start from beginning
+        if (x &gt; (CanvasXSize)) { x = CanvasXSize-imgW; }
+        //draw aditional image
+        if (x &gt; (CanvasXSize-imgW)) { ctx.drawImage(img,x-imgW+1,y,imgW,imgH); }
+    }
+    //draw image
+    ctx.drawImage(img,x,y,imgW,imgH);
+    //amount to move
+    x += dx;
+}
+</pre>
+
+<p>Abaixo é o {{HTMLElement("canvas")}} em que a imagem é rolada. Note que a largura e a altura especificadas aqui devem corresponder aos valores das variáveis ​​CanvasXZSize e CanvasYSize no código JavaScript. </p>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="800" height="200"&gt;&lt;/canvas&gt;</pre>
+
+<p><strong>Live sample</strong></p>
+
+<p>{{EmbedLiveSample("A_looping_panorama", "830", "230")}}</p>
+
+<h2 id="Other_examples" name="Other_examples">Outros exemplos</h2>
+
+<dl>
+ <dt><a class="external" href="http://www.gartic.net/" title="http://www.gartic.net/">Gartic</a></dt>
+ <dd>Jogo de desenho para multiplayers.</dd>
+ <dt><a class="external" href="http://www.abrahamjoffe.com.au/ben/canvascape/">Canvascape</a></dt>
+ <dd>Um jogo de aventura 3D (tiro em primeira pessoa).</dd>
+ <dt><a href="/en-US/docs/Web/Guide/HTML/A_basic_ray-caster" title="/en-US/docs/Web/Guide/HTML/A_basic_ray-caster">A basic ray-caster</a></dt>
+ <dd>Um bom exemplo de como fazer animações usando os controles do teclado.</dd>
+ <dt><a class="external" href="http://andrewwooldridge.com/canvas/canvasgame001/canvasgame002.html">canvas adventure</a></dt>
+ <dd>Outro bom exemplo que usa controles de teclado.</dd>
+ <dt><a class="external" href="http://www.blobsallad.se/">An interactive Blob</a></dt>
+ <dd>Divirta-se com Blob.</dd>
+ <dt><a class="external" href="http://arapehlivanian.com/wp-content/uploads/2007/02/canvas.html">Flying through a starfield</a></dt>
+ <dd>Voe através de estrelas, círculos ou quadrados.</dd>
+ <dt><a class="external" href="http://igrapher.com/" title="http://igrapher.com/">iGrapher</a></dt>
+ <dd>Um exemplo que ilustra os dados do mercado de ações.</dd>
+</dl>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="/en-US/docs/JavaScript/Timers" title="/en-US/docs/JavaScript/Timers">JavaScript timers</a></li>
+ <li><a href="/en-US/docs/DOM/window.setInterval#A_little_framework" title="/en-US/docs/DOM/window.setInterval#A_little_framework"><code>setInterval</code> – A little framework</a></li>
+ <li><a href="/en-US/docs/JavaScript/Timers/Daemons" title="/en-US/docs/JavaScript/Timers/Daemons">JavaScript Daemons Management</a></li>
+ <li><a href="/en-US/docs/DOM/HTMLCanvasElement" title="/en-US/docs/DOM/HTMLCanvasElement">HTMLCanvasElement</a></li>
+</ul>
+
+<p>{{PreviousNext("Web/Guide/HTML/Canvas_tutorial/Compositing", "Web/Guide/HTML/Canvas_tutorial/Optimizing_canvas")}}</p>
diff --git a/files/pt-br/web/api/canvas_api/tutorial/basic_usage/index.html b/files/pt-br/web/api/canvas_api/tutorial/basic_usage/index.html
new file mode 100644
index 0000000000..767a5ff97c
--- /dev/null
+++ b/files/pt-br/web/api/canvas_api/tutorial/basic_usage/index.html
@@ -0,0 +1,153 @@
+---
+title: Utilização básica do Canvas
+slug: Web/Guide/HTML/Canvas_tutorial/Utilizacao_basica
+tags:
+  - Canvas
+  - HTML
+  - Intermediário
+  - Tutorial
+  - graficos
+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"><span id="result_box" lang="pt"><span>Vamos começar este tutorial olhando para o elemento </span></span> {{HTMLElement("canvas")}} {{Glossary("HTML")}} <span lang="pt"><span> em si.</span> <span>No final desta página, você saberá como configurar um contexto de canvas 2D e desenhar um primeiro exemplo em seu navegador.</span></span></div>
+
+<h2 id="O_elemento_&lt;canvas>">O elemento <code>&lt;canvas&gt;</code></h2>
+
+<p>Vamos começar esse tutorial olhando o elemento  {{HTMLElement("canvas")}} em si.</p>
+
+<pre class="brush: html">&lt;canvas id="tutorial" width="150" height="150"&gt;&lt;/canvas&gt;
+</pre>
+
+<p>Se parece muito com o elemento <code>&lt;img&gt; </code>com a diferença de não possuir os atributos <code>src</code> e <code>alt</code>. O elemento <code>&lt;canvas&gt;</code> tem apenas dois atributos - <em><strong>width</strong> </em>e <em><strong>height</strong>. </em>Ambos são opcionais e podem ser aplicados utilizando as propriedades <a href="/en-US/docs/DOM" rel="internal" title="en/DOM">DOM</a> respectivas. Se não forem especificados, o canvas será iniciado com <strong>300 <em>pixels</em></strong><em> </em>de largura por <strong>150 <em>pixels</em></strong><em> </em>de altura. O elemento pode ser redimensionado por <a href="/en-US/docs/Web/CSS" rel="internal" title="en/CSS">CSS</a>, mas durante a renderização a imagem é escalonada para caber no tamanho do layout.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> Se as suas renderizações parecerem distorcidas, tente especificar os atributos <code>width</code> e <code>height</code> no <code>&lt;canvas&gt;</code> e não usando CSS.</p>
+</div>
+
+<p>O atributo <code>id</code> não é específico do elemento <code>&lt;canvas&gt;</code> mas um dos atributos padrão do HTML que pode ser aplicado em (quase) todos os elementos HTML (como o <em><code>class</code> </em>por exemplo). É sempre uma boa ideia inserir um <code>id</code> pois fica muito mais fácil de capturar o elemento no seu <em>script.</em></p>
+
+<p>O elemento <code>&lt;canvas&gt;</code> pode ser estilizado como qualquer imagem (margem, borda, fundo, etc). Contudo, essas regras não afetarão o desenho no canvas. Nós veremos como isso é feito a seguir nesse tutorial. Quando nenhuma regra de estilo for aplicada, o canvas iniciará totalmente transparente.</p>
+
+<div id="section_2">
+<h3 id="Conteúdo_alternativo">Conteúdo alternativo</h3>
+
+<p>Uma vez que alguns navegadores mais antigos (em particular, versões do Internet Explorer anteriores a 9) não suportam o elemento {{HTMLElement("canvas")}}, você precisará prover um conteúdo alternativo para ser mostrado nesses navegadores.</p>
+
+<p>Isto é muito simples: basta inserir o conteúdo alternativo dentro do elemento <code>&lt;canvas&gt;</code>. Navegadores que não suportam o <code>&lt;canvas&gt;</code> irão renderizar o conteúdo alternativo. Já os navegadores que suportam <code>&lt;canvas&gt;</code> irão ignorar o conteúdo alternativo, renderizando o canvas normalmente.</p>
+
+<p>Por exemplo, podemos prover um texto descritivo do canvas ou uma imagem estática do conteúdo. Algo como isto:</p>
+
+<pre class="brush: html">&lt;canvas id="stockGraph" width="150" height="150"&gt;
+  preço das ações: $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>
+
+<h3 id="Tag_&lt;canvas>_é_necessária">Tag <code>&lt;/canvas&gt;</code> é necessária</h3>
+
+<p>Ao contrário do elemento {{HTMLElement("img")}}, o elemento {{HTMLElement("canvas")}} a tag de fechamento <span style="line-height: 1.5;">(</span><code style="font-style: normal; line-height: 1.5;">&lt;/canvas&gt;</code><span style="line-height: 1.5;">)</span><span style="line-height: 1.5;"> é necessária</span><span style="line-height: 1.5;">.</span></p>
+
+<div class="note">
+<p><strong>Nota:</strong> Embora as primeiras versões do navegador Safari da Apple não exijam a tag de fechamento, a especificação indica que ela é necessária para <span style="line-height: 1.5;">que haja maior compatibilidade, </span><span style="line-height: 1.5;">portanto não se esqueça de incluí-la. Essas versões do Safari (antes da versão 2.0) irão processar o conteúdo do alternativo, além da própria tela, a menos que você use o CSS para mascará-lo. Felizmente, os usuários dessas versões do Safari são raros hoje em dia.</span></p>
+</div>
+
+<p>Se o conteúdo alternativo não for necessário, um simples <code>&lt;canvas id="foo" ...&gt;&lt;/canvas&gt;</code> é totalmente compatível com todos os navegadores que suportam canvas.</p>
+
+<h2 id="O_contexto_de_renderização">O contexto de renderização</h2>
+
+<p>{{HTMLElement("canvas")}} cria uma superfície de desenho de tamanho fixo que expõe um ou mais contextos de renderização, que são usados ​​para criar e manipular o conteúdo mostrado. Vamos nos concentrar no contexto de renderização 2D. Outros contextos podem fornecer diferentes tipos de renderização; por exemplo, <a href="/pt-BR/docs/Web/WebGL" style="line-height: 1.5;" title="/en-US/docs/Web/WebGL">WebGL</a> <span style="line-height: 1.5;">usa um contexto 3D ("experimental-WebGL") baseado em </span><a class="external" href="http://www.khronos.org/opengles/" rel="external" title="http://en.wikipedia.org/wiki/OpenGL_ES">OpenGL ES</a><span style="line-height: 1.5;">.</span></p>
+
+<p>Incialmente o canvas é branco. Para mostrar alguma coisa, primeiro um <em>script </em>precisa acessar o contexto de renderização e desenhar sobre ele. O elemento {{HTMLElement("canvas")}} tem um <a href="/en-US/docs/Web/API/HTMLCanvasElement#Methods">método</a> chamado <code>getContext()</code>, usado para obter o contexto de renderização e suas funções de desenho. <code>getContext()</code> recebe o tipo de contexto como parâmetro. Para gráficos 2D, que serão abrangidos nesse tutorial, deverá ser especificado "2d".</p>
+
+<pre class="brush: js">var canvas = document.getElementById('tutorial');
+var ctx = canvas.getContext('2d');
+</pre>
+
+<p>A primeira linha recupera o nó DOM do elemento {{HTMLElement ("canvas")}} chamando o método {{domxref ("document.getElementById()")}}. Depois de ter o nó do elemento, podemos acessar o contexto de desenho usando o método <code>getContext()</code>.</p>
+
+<div id="section_5">
+<h2 id="Verificação_de_suporte">Verificação de suporte</h2>
+
+<p>O conteúdo alternativo é mostrado nos navegadores que não suportam o elemento {{HTMLElement("canvas")}}, mas essa checagem pode ser feita através de um <em>script</em> simplesmente testando a presença do método <code>getContext():</code></p>
+
+<pre class="brush: js">var canvas = document.getElementById('tutorial');
+
+if (canvas.getContext){
+  var ctx = canvas.getContext('2d');
+  // codigo de desenho aqui
+} else {
+  // codigo para quando o canvas nao for suportado aqui
+}
+</pre>
+</div>
+</div>
+
+<h2 id="Um_modelo_de_estrutura">Um modelo de estrutura</h2>
+
+<p>Aqui, um modelo minimalista, que vamos usar como ponto de partida para os exemplos posteriores:</p>
+
+<div class="note">
+<p><strong>Nota:</strong> <span id="result_box" lang="pt"><span>não é uma boa prática incorporar um script dentro do HTML.</span> <span>Nós fazemos isso aqui para manter o exemplo conciso</span></span>.</p>
+</div>
+
+<pre class="brush: html">&lt;html&gt;
+  &lt;head&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>O <em>script </em>inclui a função chamada draw(), que é executada uma vez ao término do carregamento da página; este exemplo usa o evento <em>onload </em>do documento. Essa função, ou uma parecida, poderia usar {{domxref("window.setTimeout()")}}, {{domxref("window.setInterval()")}}, ou qualquer outro manipulador de evento, contanto que a página tenha sido carregada primeiro.</p>
+
+<p>{{EmbedLiveSample("Um_modelo_de_estrutura", 160, 160)}}</p>
+
+<h2 id="Um_simples_exemplo">Um simples exemplo</h2>
+
+<p>Para começar, vamos dar uma olhada num exemplo simples que desenha a interseção de dois retângulos, dos quais um deles tem uma transparência. Exploraremos em mais detalhes o funcionamento nos exemplos posteriores.</p>
+
+<pre class="brush: html">&lt;html&gt;
+ &lt;head&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, 55, 50);
+
+        ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
+        ctx.fillRect (30, 30, 55, 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>Este exemplo parece assim:</p>
+
+<p>{{EmbedLiveSample("Um_simples_exemplo", 160, 160, "https://mdn.mozillademos.org/files/228/canvas_ex1.png")}}</p>
+
+<p>{{PreviousNext("Web/Guide/HTML/Canvas_tutorial", "Web/Guide/HTML/Canvas_tutorial/Drawing_shapes")}}</p>
diff --git a/files/pt-br/web/api/canvas_api/tutorial/compositing/example/index.html b/files/pt-br/web/api/canvas_api/tutorial/compositing/example/index.html
new file mode 100644
index 0000000000..87de5aa19d
--- /dev/null
+++ b/files/pt-br/web/api/canvas_api/tutorial/compositing/example/index.html
@@ -0,0 +1,294 @@
+---
+title: Exemplo de Composição
+slug: Web/Guide/HTML/Canvas_tutorial/Compositing/Exemplo
+tags:
+  - Canvas
+  - Example
+  - HTML5
+  - Tutorial
+translation_of: Web/API/Canvas_API/Tutorial/Compositing/Example
+---
+<div>{{CanvasSidebar}}</div>
+
+<p>Esse exemplo demonstra várias <a href="/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation">operações de composição</a>. A saída se parece assim:</p>
+
+<p>{{ EmbedLiveSample('Exemplo_de_composição', '', '7240px', '', 'Web/Guide/HTML/Canvas_tutorial/Compositing/Exemplo') }}</p>
+
+<h2 id="Exemplo_de_composição">Exemplo de composição</h2>
+
+<p><span id="result_box" lang="pt"><span>Este código configura os valores globais usados pelo restante do programa.</span></span></p>
+
+<pre class="brush: js">var canvas1 = document.createElement("canvas");
+var canvas2 = document.createElement("canvas");
+var gco = [ 'Source-over','Source-in','Source-out','Source-atop',
+            'Destination-over','Destination-in','Destination-out','Destination-atop',
+            'Lighter', 'Copy','XOR', 'Multiply', 'Screen', 'Overlay', 'Darken',
+            'Lighten', 'Color-dodge', 'Color-burn', 'Hard-light', 'Soft-light',
+            'Difference', 'Exclusion', 'HUE', 'Saturation', 'Color', 'Luminosity'
+          ].reverse();
+var gcoText = [
+'<span id="result_box" lang="pt"><span>Essa é a configuração padrão e desenha novas formas sobre o conteúdo da tela (canvas) existente</span></span>.',
+'<span id="result_box" lang="pt"><span class="alt-edited">A nova forma é desenhada apenas onde a nova forma e a tela (canvas) de destino se sobrepõem.</span> <span class="alt-edited">Todo o resto é transparente.</span></span> ',
+'A nova forma é desenhada onde ela não sobrepõe o conteúdo da tela (canvas) existente.',
+'A nova forma é somente desenahda onde ela sobrepõe o conteúdo da tela (canvas) existente.',
+'Novas formas são desenhadas por trás do conteúdo da tela (canvas) existente.',
+'O conteúdo da tela (canvas) existente é mantido onde ambos, a nova forma e o conteúdo da tela (canvas) existente, se sobrepõe. Todo o resto é transparente.',
+'O conteúdo existente é mantido onde ele não sobrepõe a nova forma.',
+'A tela (canvas) existente só é mantida onde ela sobrepõe a nova forma. A nova forma é desenahda por trás do conteúdo canvas.',
+'Onde ambas formas se sebrepõem a cor é determinada adicionando seus respectivos valores de cores.',
+'Somente a nova forma é mostrada.',
+'Formas são feitas transparentes onde ambos se sobrepõem e todo o resto é desenhado normalmente.',
+'<span id="result_box" lang="pt"><span>Os pixels da camada superior são multiplicados pelo pixel correspondente da camada inferior.</span> <span>Uma imagem mais escura é o resultado.</span></span> ',
+'<span id="result_box" lang="pt"><span>Os pixels são invertidos, multiplicados e invertidos novamente.</span> <span>Uma imagem mais clara é o resultado (oposto de multiplicar)</span></span>',
+'<span id="result_box" lang="pt"><span>Uma combinação de multiplicação e tela.</span> <span>As partes escuras na camada base tornam-se mais escuras e as partes claras tornam-se mais claras.</span></span>',
+'Mantêm os pixels mais escuro de ambas camadas.',
+'Mantêm os pixels mais claro de ambas camadas.',
+'<span id="result_box" lang="pt"><span>Divide a camada inferior pela camada superior invertida.</span></span>',
+'<span id="result_box" lang="pt"><span>Divide a camada inferior invertida pela camada superior e, em seguida, inverte o resultado.</span></span>',
+'<span id="result_box" lang="pt"><span>Uma combinação de multiplicação e tela como sobreposição, mas com a camada superior e inferior trocada.</span></span>',
+'<span id="result_box" lang="pt"><span>Uma versão mais suave da luz.</span> <span>Preto ou branco puro não resulta em preto ou branco puro.</span></span>',
+'<span id="result_box" lang="pt"><span>Subtrai a camada inferior da camada superior ou vice-versa para obter sempre um valor positivo.</span></span>',
+'<span class="short_text" id="result_box" lang="pt"><span>Como diferença, mas com menor contraste.</span></span>',
+'<span id="result_box" lang="pt"><span>Preserva o luma e o croma da camada inferior, enquanto adota a tonalidade da camada superior.</span></span>',
+'<span id="result_box" lang="pt"><span>Preserva o luma e a tonalidade da camada inferior, enquanto adota o croma da camada superior.</span></span>',
+'<span id="result_box" lang="pt"><span>Preserva a luma da camada inferior, enquanto adota a tonalidade e o croma da camada superior.</span></span>',
+'<span id="result_box" lang="pt"><span>Preserva a tonalidade e o croma da camada inferior, enquanto adota a luma da camada superior.</span></span>'
+          ].reverse();
+var width = 320;
+var height = 340;</pre>
+
+<h3 id="Programa_principal">Programa principal</h3>
+
+<p><span id="result_box" lang="pt"><span>Quando a página é carregada, esse código é executado para configurar e executar o exemplo:</span></span></p>
+
+<pre class="brush: js">window.onload = function() {
+    // lum em sRGB
+    var lum = {
+        r: 0.33,
+        g: 0.33,
+        b: 0.33
+    };
+    // redimensiona canvas
+    canvas1.width = width;
+    canvas1.height = height;
+    canvas2.width = width;
+    canvas2.height = height;
+    lightMix();
+    colorSphere();
+    runComposite();
+    return;
+};
+</pre>
+
+<p><span id="result_box" lang="pt"><span>E esse código, <code>runComposite ()</code>, manipula a maior parte do trabalho, contando com várias funções utilitárias para fazer as partes difíceis.</span></span></p>
+
+<pre class="brush: js">function createCanvas() {
+    var canvas = document.createElement("canvas");
+    canvas.style.background = "url("+op_8x8.data+")";
+    canvas.style.border = "1px solid #000";
+    canvas.style.margin = "5px";
+    canvas.width = width/2;
+    canvas.height = height/2;
+    return canvas;
+}
+
+function runComposite() {
+    var dl = document.createElement("dl");
+    document.body.appendChild(dl);
+    while(gco.length) {
+        var pop = gco.pop();
+        var dt = document.createElement("dt");
+        dt.textContent = pop;
+        dl.appendChild(dt);
+        var dd = document.createElement("dd");
+        var p = document.createElement("p");
+        p.textContent = gcoText.pop();
+        dd.appendChild(p);
+
+        var canvasToDrawOn = createCanvas();
+        var canvasToDrawFrom = createCanvas();
+        var canvasToDrawResult = createCanvas();
+
+        var ctx = canvasToDrawResult.getContext('2d');
+        ctx.clearRect(0, 0, width, height)
+        ctx.save();
+        ctx.drawImage(canvas1, 0, 0, width/2, height/2);
+        ctx.globalCompositeOperation = pop;
+        ctx.drawImage(canvas2, 0, 0, width/2, height/2);
+        ctx.globalCompositeOperation = "source-over";
+        ctx.fillStyle = "rgba(0,0,0,0.8)";
+        ctx.fillRect(0, height/2 - 20, width/2, 20);
+        ctx.fillStyle = "#FFF";
+        ctx.font = "14px arial";
+        ctx.fillText(pop, 5, height/2 - 5);
+        ctx.restore();
+
+        var ctx = canvasToDrawOn.getContext('2d');
+        ctx.clearRect(0, 0, width, height)
+        ctx.save();
+        ctx.drawImage(canvas1, 0, 0, width/2, height/2);
+        ctx.fillStyle = "rgba(0,0,0,0.8)";
+        ctx.fillRect(0, height/2 - 20, width/2, 20);
+        ctx.fillStyle = "#FFF";
+        ctx.font = "14px arial";
+        ctx.fillText('Conteúdo existente', 5, height/2 - 5);
+        ctx.restore();
+
+        var ctx = canvasToDrawFrom.getContext('2d');
+        ctx.clearRect(0, 0, width, height)
+        ctx.save();
+        ctx.drawImage(canvas2, 0, 0, width/2, height/2);
+        ctx.fillStyle = "rgba(0,0,0,0.8)";
+        ctx.fillRect(0, height/2 - 20, width/2, 20);
+        ctx.fillStyle = "#FFF";
+        ctx.font = "14px arial";
+        ctx.fillText('Novo conteúdo', 5, height/2 - 5);
+        ctx.restore();
+
+        dd.appendChild(canvasToDrawOn);
+        dd.appendChild(canvasToDrawFrom);
+        dd.appendChild(canvasToDrawResult);
+
+        dl.appendChild(dd);
+    }
+};
+</pre>
+
+<h3 id="Funções_Utilitárias">Funções Utilitárias</h3>
+
+<p><span id="result_box" lang="pt"><span>O programa depende de várias funções utilitárias.</span></span></p>
+
+<pre class="brush: js">var lightMix = function() {
+    var ctx = canvas2.getContext("2d");
+    ctx.save();
+    ctx.globalCompositeOperation = "lighter";
+    ctx.beginPath();
+    ctx.fillStyle = "rgba(255,0,0,1)";
+    ctx.arc(100, 200, 100, Math.PI*2, 0, false);
+    ctx.fill()
+    ctx.beginPath();
+    ctx.fillStyle = "rgba(0,0,255,1)";
+    ctx.arc(220, 200, 100, Math.PI*2, 0, false);
+    ctx.fill()
+    ctx.beginPath();
+    ctx.fillStyle = "rgba(0,255,0,1)";
+    ctx.arc(160, 100, 100, Math.PI*2, 0, false);
+    ctx.fill();
+    ctx.restore();
+    ctx.beginPath();
+    ctx.fillStyle = "#f00";
+    ctx.fillRect(0,0,30,30)
+    ctx.fill();
+};
+</pre>
+
+<pre class="brush: js">var colorSphere = function(element) {
+    var ctx = canvas1.getContext("2d");
+    var width = 360;
+    var halfWidth = width / 2;
+    var rotate = (1 / 360) * Math.PI * 2; // per degree
+    var offset = 0; // scrollbar offset
+    var oleft = -20;
+    var otop = -20;
+    for (var n = 0; n &lt;= 359; n ++) {
+        var gradient = ctx.createLinearGradient(oleft + halfWidth, otop, oleft + halfWidth, otop + halfWidth);
+        var color = Color.HSV_RGB({ H: (n + 300) % 360, S: 100, V: 100 });
+        gradient.addColorStop(0, "rgba(0,0,0,0)");
+        gradient.addColorStop(0.7, "rgba("+color.R+","+color.G+","+color.B+",1)");
+        gradient.addColorStop(1, "rgba(255,255,255,1)");
+        ctx.beginPath();
+        ctx.moveTo(oleft + halfWidth, otop);
+        ctx.lineTo(oleft + halfWidth, otop + halfWidth);
+        ctx.lineTo(oleft + halfWidth + 6, otop);
+        ctx.fillStyle = gradient;
+        ctx.fill();
+        ctx.translate(oleft + halfWidth, otop + halfWidth);
+        ctx.rotate(rotate);
+        ctx.translate(-(oleft + halfWidth), -(otop + halfWidth));
+    }
+    ctx.beginPath();
+    ctx.fillStyle = "#00f";
+    ctx.fillRect(15,15,30,30)
+    ctx.fill();
+    return ctx.canvas;
+};
+</pre>
+
+<pre class="brush: js">// HSV (1978) = H: Hue (tom)
+//              S: Saturation (Saturação)
+//              V: Value (Valor)
+Color = {};
+Color.HSV_RGB = function (o) {
+    var H = o.H / 360,
+        S = o.S / 100,
+        V = o.V / 100,
+        R, G, B;
+    var A, B, C, D;
+    if (S == 0) {
+        R = G = B = Math.round(V * 255);
+    } else {
+        if (H &gt;= 1) H = 0;
+        H = 6 * H;
+        D = H - Math.floor(H);
+        A = Math.round(255 * V * (1 - S));
+        B = Math.round(255 * V * (1 - (S * D)));
+        C = Math.round(255 * V * (1 - (S * (1 - D))));
+        V = Math.round(255 * V);
+        switch (Math.floor(H)) {
+            case 0:
+                R = V;
+                G = C;
+                B = A;
+                break;
+            case 1:
+                R = B;
+                G = V;
+                B = A;
+                break;
+            case 2:
+                R = A;
+                G = V;
+                B = C;
+                break;
+            case 3:
+                R = A;
+                G = B;
+                B = V;
+                break;
+            case 4:
+                R = C;
+                G = A;
+                B = V;
+                break;
+            case 5:
+                R = V;
+                G = A;
+                B = B;
+                break;
+        }
+    }
+    return {
+        R: R,
+        G: G,
+        B: B
+    };
+};
+
+var createInterlace = function (size, color1, color2) {
+    var proto = document.createElement("canvas").getContext("2d");
+    proto.canvas.width = size * 2;
+    proto.canvas.height = size * 2;
+    proto.fillStyle = color1; // top-left
+    proto.fillRect(0, 0, size, size);
+    proto.fillStyle = color2; // top-right
+    proto.fillRect(size, 0, size, size);
+    proto.fillStyle = color2; // bottom-left
+    proto.fillRect(0, size, size, size);
+    proto.fillStyle = color1; // bottom-right
+    proto.fillRect(size, size, size, size);
+    var pattern = proto.createPattern(proto.canvas, "repeat");
+    pattern.data = proto.canvas.toDataURL();
+    return pattern;
+};
+
+var op_8x8 = createInterlace(8, "#FFF", "#eee");</pre>
diff --git a/files/pt-br/web/api/canvas_api/tutorial/compositing/index.html b/files/pt-br/web/api/canvas_api/tutorial/compositing/index.html
new file mode 100644
index 0000000000..6d9ff5c33d
--- /dev/null
+++ b/files/pt-br/web/api/canvas_api/tutorial/compositing/index.html
@@ -0,0 +1,112 @@
+---
+title: Compositing and clipping
+slug: Web/Guide/HTML/Canvas_tutorial/Compositing
+translation_of: Web/API/Canvas_API/Tutorial/Compositing
+---
+<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Transformations", "Web/API/Canvas_API/Tutorial/Basic_animations")}}</div>
+
+<div class="summary">
+<p>Em todo os nossos <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Transformations">exemplos prévios</a>, formas estavam sempre desenhadas uma em cima das outras. Este é mais do que adequado para a maioria das situações, mas é limita a ordem no qual a composição das formas são construídas.</p>
+
+<p>Nós podemos, no entanto, mudar este comportamento por configurar a propriedade <code>globalCompositeOperation</code>. Além disto, a propriedade clipe permite-nos esconder indesejáveis partes da forma.</p>
+</div>
+
+<h2 id="globalCompositeOperation" name="globalCompositeOperation"><code>globalCompositeOperation</code></h2>
+
+<p>Nós podemos somente desenhar novas formas atrás das existentes formas mas nós podemos também usar isto para mascarar certas áreas, limpar seções do canvas(não limitado para retângulos como o {{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}} métodos faz) e mais.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.globalCompositeOperation", "globalCompositeOperation = type")}}</dt>
+ <dd>Este conjunto de operações compostas para aplicar quando desenha novas formas, onde type é uma string identificando quais das 12 operações compostas usar.</dd>
+</dl>
+
+<p>Veja os seguintes <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing/Example">exemplos de composição</a> para o código dos seguintes exemplos.</p>
+
+<p>{{ EmbedLiveSample('Exemplo_de_composição', '', '', '', 'Web/Guide/HTML/Canvas_tutorial/Compositing/Exemplo') }}</p>
+
+<h2 id="Clipping_paths" name="Clipping_paths">Caminhos de recorte (Clipping path)</h2>
+
+<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/209/Canvas_clipping_path.png" style="float: right;">Um caminho de recorte (Clipping path) é como uma forma normal canvas mas isto age como uma máscara para esconder indesejáveis partes de formas. Isto é visualizado na imagem na direita. A forma da estrela vermelha é nosso caminho de recorte. Tudo que cai do lado de fora deste caminho não sai desenhado no canvas.</p>
+
+<p>Se nós compararmos caminho de recorte para a propriedade <code>globalCompositeOperation</code> nós temos visto acima, nós veremos dois modelos de composição que alcança mais ou menos o mesmo efeito no source-in e source-atop. A mais importante diferença entre os dois é que o caminho de recorte nunca desenha algo na tela e o caminho de recorte nunca afeta por adicionar novas formas. Isto faz o caminho do recorte ideal para desenhar múltiplos na área restrita.</p>
+
+<p>No capítulo sobre <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes">formas de desenho (drawing shapes)</a> eu somente mencionei os métodos stroke() e fill(), mas há um método que nós podemos usar com caminhos chamado clip().</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.clip", "clip()")}}</dt>
+ <dd>Volta o caminho atualmente sendo construído no caminho de recorte atual.</dd>
+</dl>
+
+<p>Você usou clip() em vez de closePath() para fechar um caminho e voltar para dentro de um caminho de recorte em vez de contornar (stroking) ou completar (filling) o caminho.</p>
+
+<p>Por padrão o elemento {{HTMLElement("canvas")}} tem um caminho de recorte que é exatamente o mesmo tamanho do canvas em si. Em outras palavras, nenhum recorte ocorreu.</p>
+
+<h3 id="A_clip_example" name="A_clip_example">Um exemplo do recorte</h3>
+
+<p>Neste exemplo, Nós usaremos um recorte circular para restringir o desenho do conjunto de inícios randômicos para uma região particular</p>
+
+<pre class="brush: js;highlight[9]">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  ctx.fillRect(0, 0, 150, 150);
+  ctx.translate(75, 75);
+
+  // Create a circular clipping path
+  ctx.beginPath();
+  ctx.arc(0, 0, 60, 0, Math.PI * 2, true);
+  ctx.clip();
+
+  // draw background
+  var lingrad = ctx.createLinearGradient(0, -75, 0, 75);
+  lingrad.addColorStop(0, '#232256');
+  lingrad.addColorStop(1, '#143778');
+
+  ctx.fillStyle = lingrad;
+  ctx.fillRect(-75, -75, 150, 150);
+
+  // draw stars
+  for (var j = 1; j &lt; 50; j++) {
+    ctx.save();
+    ctx.fillStyle = '#fff';
+    ctx.translate(75 - Math.floor(Math.random() * 150),
+                  75 - Math.floor(Math.random() * 150));
+    drawStar(ctx, Math.floor(Math.random() * 4) + 2);
+    ctx.restore();
+  }
+
+}
+
+function drawStar(ctx, r) {
+  ctx.save();
+  ctx.beginPath();
+  ctx.moveTo(r, 0);
+  for (var i = 0; i &lt; 9; i++) {
+    ctx.rotate(Math.PI / 5);
+    if (i % 2 === 0) {
+      ctx.lineTo((r / 0.525731) * 0.200811, 0);
+    } else {
+      ctx.lineTo(r, 0);
+    }
+  }
+  ctx.closePath();
+  ctx.fill();
+  ctx.restore();
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html">canvas id="canvas" width="150" height="150" /canvas</pre>
+
+<pre class="brush: js">draw();</pre>
+</div>
+
+<p>Nas primeiras linhas de código, nós desenhamos um retângulo negro do tamanho do canvas como um pano de fundo, então traduzido da origem para o centro. Próximo, nós criamos o recorte circular do caminho recortado para desenhar um arco e chamá-lo clip(). Caminho de recortes são também parte do canvas com estado salvo. Se nós procuramos guardar o caminho do recorte original nós podemos ter salvo o estado do canvas antes de criar mais um.</p>
+
+<p>Tudo que for desenhado depois de criado o caminho de recorte somente aparecerá dentro daquele caminho. Você pode ver isto claramente no gradiente linear que está desenhado adiante. Depois deste conjunto de de 50 randomicamente posicionadas e escaladas estrelas for desenhada. Usando a função customizada drawStar(). De novo as estrelas somente aparecerão dentro do caminho de recorte definido.</p>
+
+<p>Um exemplo de recorte:</p>
+
+<p><img src="https://mdn.mozillademos.org/files/208/Canvas_clip.png"></p>
+
+<p>{{EmbedLiveSample("A_clip_example", "180", "180", "https://mdn.mozillademos.org/files/208/Canvas_clip.png")}}</p>
+
+<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Transformations", "Web/API/Canvas_API/Tutorial/Basic_animations")}}</p>
diff --git a/files/pt-br/web/api/canvas_api/tutorial/drawing_shapes/index.html b/files/pt-br/web/api/canvas_api/tutorial/drawing_shapes/index.html
new file mode 100644
index 0000000000..f54fca780e
--- /dev/null
+++ b/files/pt-br/web/api/canvas_api/tutorial/drawing_shapes/index.html
@@ -0,0 +1,581 @@
+---
+title: Desenhando formas com canvas
+slug: Web/Guide/HTML/Canvas_tutorial/Drawing_shapes
+tags:
+  - Canvas
+  - Gráficos(2)
+  - HTML
+  - HTML Canvas
+  - HTML5
+  - Intermediário
+  - Tutorial
+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>Agora que criamos nosso <a href="https://developer.mozilla.org/pt-BR/docs/Web/API/Canvas_API/Tutorial/Basic_usage">ambiente em canvas</a>, podemos entrar nos detalhes de como desenhar no canvas. No final deste artigo, você terá aprendido a desenhar retângulos, triângulos, linhas, arcos e curvas, proporcionando familiaridade com algumas das formas básicas. Trabalhar com caminhos (<em>shapes</em>) é essencial ao desenhar objetos na tela e veremos como isso pode ser feito.</p>
+</div>
+
+<h2 id="A_grade">A grade</h2>
+
+<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/224/Canvas_default_grid.png" style="float: right; height: 220px; width: 220px;">Antes que possamos começar a desenhar, precisamos falar sobre a grade de tela ou <strong>espaço de coordenadas</strong>. O modelo HTML na página anterior tinha um elemento canvas de 150 pixels de largura e 150 pixels de altura. À direita, você verá este canvas com a grade padrão sobreposta. Normalmente 1 unidade na grade corresponde a um pixel na tela. A origem desta grade está posicionada no canto superior esquerdo (coordenadas (0,0)). Todos os elementos são colocados em relação a esta origem. Assim, a posição do canto superior esquerdo do quadrado azul, se torna x pixels dos pixels da esquerda e y a partir do topo (coordenadas (x,y)). Mais tarde nesse tutorial vamos ver como podemos traduzir a origem para uma posição diferente, girar a grade e até mesmo escaloná-la. Por enquanto vamos ficar com o padrão.</p>
+
+<h2 id="Desenhando_retângulos">Desenhando retângulos</h2>
+
+<p>Diferente do {{Glossary("SVG")}} , o {{HTMLElement("canvas")}} suporta somente formas primitivas: retângulos. Todas as outras formas são criadas a partir da combinação de um ou mais caminhos (<em>paths</em>), lista de pontos conectados por uma linha. Felizmente, temos uma variedade de funções de desenho que tornam possíveis criar formas muito complexas.</p>
+
+<p>Primeiramente vamos olhar o retângulo. Aqui está listado três funções para desenhar retângulos pelo canvas:</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.fillRect", "fillRect(x, y, width, height)")}}</dt>
+ <dd>Desenha um retângulo preenchido.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.strokeRect", "strokeRect(x, y, width, height)")}}</dt>
+ <dd>Desenha a borda do retângulo.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.clearRect", "clearRect(x, y, width, height)")}}</dt>
+ <dd>Limpa um retângulo específico, tornando-o totalmente transparente.</dd>
+</dl>
+
+<p>Cada umas das funções recebem os mesmos parâmetros. <code>x</code> e <code>y</code> determinam a posição no canvas (em relação a origem) no canto superior esquerdo do retângulo. O <code>width</code> (largura) e o <code>height</code> (altura) definem o tamanho do retângulo.</p>
+
+<p>Abaixo esta listado a função <code>draw()</code> da página anterior, porém utilizando as três funções.</p>
+
+<h3 id="Exemplo_de_forma_retangular">Exemplo de forma retangular</h3>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&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 notranslate">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>O resultado desse exemplo é mostrado abaixo.</p>
+
+<p>{{EmbedLiveSample('Exemplo_de_forma_retangular', 160, 160, "https://mdn.mozillademos.org/files/245/Canvas_rect.png")}}</p>
+
+<p>A função <code>fillRect()</code> desenha um grande quadrado preto de 100 pixels. A função <code>clearRect()</code> por sua vez apaga um quadrado de 60x60 pixels a partir do centro, por fim, a função <code>strokeRect()</code> é chamada para criar uma borda de 50x50 pixels em volta do quadrado apagado.</p>
+
+<p>Posteriormente veremos duas alternativas à função <code>clearRect()</code>, nós também aprenderemos como alterar a cor e o estilo das linhas nas camadas renderizadas.</p>
+
+<p>Ao contrário das funções de <em>paths</em> que veremos na próxima seção, todas as três funções de retângulo desenham imediatamente no canvas.</p>
+
+<h2 id="Desenhando_caminhosregiões_paths">Desenhando caminhos/regiões (paths)</h2>
+
+<p>Para criar uma camada usando caminhos (regiões ou <em>paths</em>) é necessário alguns passos extras. Primeiro, cria-se a região de desenho. Depois usa-se comandos de desenho para desenhar nesta região. Por fim, você limita a região (path). Uma vez que a região de desenho está criada, você pode traçar ou preencher o caminho para que seja renderizado. Aqui estão as funções utilizadas para isso:</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}}</dt>
+ <dd>Cria um novo path. Uma vez criado, futuros comandos de desenho são direcionados do path atual para a construção de um novo path no canvas.</dd>
+</dl>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/pt-BR/docs/Web/API/CanvasRenderingContext2D#Paths">Métodos de Caminhos (Path)</a></dt>
+ <dd>Métodos para manipuliar diferentes paths para objetos.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.closePath", "closePath()")}}</dt>
+ <dd>Finaliza o path para futuros comandos de desenho, fazendo com que voltem a ser direcionados ao contexto.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.stroke", "stroke()")}}</dt>
+ <dd>Desenha uma borda na camada.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.fill", "fill()")}}</dt>
+ <dd>Desenha uma forma sólida através de preenchimento.</dd>
+</dl>
+
+<p>O primeiro passo para criar um caminho é chamar o <code>beginPath()</code>. Internamente, caminhos são armazenados como uma lista de sub-caminhos (linhas, arcos, etc.) que juntos formam uma forma (<em>shape</em>). Sempre que esse método é chamado, a lista é redefinida e podemos começar a desenhar novas formas.</p>
+
+<div class="note"><strong>Nota:</strong> Quando o caminho atual está vazio, assim como imediatamente depois de chamar <code>beginPath()</code>, ou em uma tela recém-criada, o primeiro comando de construção de caminho é sempre tratado como um <code>moveTo()</code>, independentemente do que ele seja realmente. Por essa razão, você quase sempre vai precisar definir especificamente sua posição inicial após redefinir um caminho.</div>
+
+<p>A segunda etapa é chamar os métodos que realmente especificam os caminhos a serem desenhados. Vamos ver isso em breve.</p>
+
+<p><br>
+ O terceiro, e um passo opcional, é chamar <code>closePath()</code>. Este método tenta fechar a forma desenhando uma linha reta do ponto atual para o início. Se a forma (<em>shape</em>) já foi fechada ou existe apenas um ponto na lista, esta função não faz nada.</p>
+
+<div class="note"><strong>Nota:</strong> Quando você chama <code>fill()</code>, todas as formas abertas são fechadas automaticamente, assim você não precisa chamar <code>closePath()</code>. Isso <strong>não acontece</strong> quando você chamar <code>stroke()</code>.</div>
+
+<h3 id="Desenhando_um_triângulo">Desenhando um triângulo</h3>
+
+<p>Por exemplo, o código para desenhar um triângulo seria algo parecido com isto:</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&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 notranslate">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>O resultado se parece com isso:</p>
+
+<p>{{EmbedLiveSample('Desenhando_um_triângulo', 160, 160, "https://mdn.mozillademos.org/files/9847/triangle.png")}}</p>
+
+<h3 id="Desenhando">Desenhando</h3>
+
+<p>Uma função muito útil, que na verdade não desenha nada, mas torna-se parte da lista de caminhos descritos acima, é a função <code>moveTo()</code>. Você provavelmente pode imaginar melhor isso como se fosse o levantar uma caneta ou lápis de um ponto em um pedaço de papel e colocá-lo no próximo ponto.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.moveTo", "moveTo(x, y)")}}</dt>
+ <dd>Move a caneta (<em>pen</em>) para as coordenadas especificadas por <code>x</code> e <code>y</code>.</dd>
+</dl>
+
+<p>Quando o canvas é inicializado ou <code>beginPath()</code> é chamado, você normalmente vai querer usar a função <code>moveTo()</code> para colocar o ponto inicial em outro lugar. Poderíamos também usar <code>moveTo()</code> para desenhar caminhos não conectados. Dê uma olhada no rosto sorridente abaixo. Eu marquei os lugares onde eu usei o método <code>moveTo()</code> (as linhas vermelhas).</p>
+
+<p>Caso queira tentar fazer isso, você pode usar o snippet de código abaixo. Basta colá-lo na função <code>draw()</code> que vimos anteriormente.</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&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 notranslate">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); // Círculo exterior
+    ctx.moveTo(110, 75);
+    ctx.arc(75, 75, 35, 0, Math.PI, false);  // Boca (sentido horário)
+    ctx.moveTo(65, 65);
+    ctx.arc(60, 65, 5, 0, Math.PI * 2, true);  // Olho esquerdo
+    ctx.moveTo(95, 65);
+    ctx.arc(90, 65, 5, 0, Math.PI * 2, true);  // Olho direito
+    ctx.stroke();
+  }
+}
+</pre>
+
+<p>O resultado aparece como:</p>
+
+<p>{{EmbedLiveSample("Desenhando", 160, 160, "https://mdn.mozillademos.org/files/252/Canvas_smiley.png")}}</p>
+
+<p>Se você não gosta de ver linhas conectadas, você pode remover as linhas que chamam a função <code>moveTo()</code>.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> Para aprender mais sobre a função <code>arc()</code>, veja sobre {{anch("Arcos")}}.</p>
+</div>
+
+<h3 id="Linhas">Linhas</h3>
+
+<p>Para desenhar linhas retas, use o método <code>lineTo().</code></p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.lineTo", "lineTo(x, y)")}}</dt>
+ <dd>Desenha uma linha do ponto atual a até a posição especificada por <code>x</code> e <code>y</code>.</dd>
+</dl>
+
+<p>Esse método recebe dois argumentos, <code>x</code> e <code>y</code>, que são as coordenadas do ponto final da linha. O ponto inicial é dependente de caminhos previamente desenhados, onde o ponto final do caminho anterior é o ponto inicial para o seguinte, e assim por diante. O ponto inicial também pode ser alterado usando o método <code>moveTo()</code>.<br>
+ <br>
+ O exemplo abaixo desenha dois triângulos, um preenchido e um delineado.</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&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 notranslate">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>Isso começa chamando o método <code>beginPath()</code> para iniciar um novo <em>shape path</em>. Em seguida, usamos o método <code>moveTo()</code> para mover o ponto inicial para a posição desejada. Logo abaixo, duas linhas, que compõem os dois lados do triângulo, são desenhadas.</p>
+
+<p>{{EmbedLiveSample("Linhas", 160, 160, "https://mdn.mozillademos.org/files/238/Canvas_lineTo.png")}}</p>
+
+<p>Você notará a diferença entre o triângulo preenchido (<em>filled</em>) e não prenchido (<em>stroked</em>). Isto ocorre, como mencionado acima, porque as formas são automaticamente fechadas quando um caminho é preenchido, mas não quando são não preenchidos. Se deixássemos de fora o <code>closePath()</code> para os triângulos não preenchidos, apenas duas linhas teriam sido desenhadas, não um triângulo completo.</p>
+
+<h3 id="Arcos">Arcos</h3>
+
+<p>Para desenhar arcos, nós usamos os métodos <code>arc()</code> ou <code>arcTo()</code>.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.arc", "arc(x, y, radius, startAngle, endAngle, anticlockwise)")}}</dt>
+ <dd>Desenha um arco centralizado na posição <em>(x, y)</em> com um raio <em>r</em> iniciando em <em>startAngle e</em> terminando em <em>endAngle</em> apontando na direção indicada pelo sentido anti-horário (padronizando para o sentido horário).</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.arcTo", "arcTo(x1, y1, x2, y2, radius)")}}</dt>
+ <dd>Desenha um arco com os pontos de controle e raio, conectados ao ponto anterior por uma linha reta.</dd>
+</dl>
+
+<p>Vamos dar uma olhada mais detalhada sobre o método <code>arc</code>, que tem seis parâmetros: <code>x</code> e <code>y</code> são as coordenadas do centro do círculo em que o arco deve ser desenhado. <code>radius</code> é o raio. Os parâmetros <code>startAngle</code> e <code>endAngle</code> definem os pontos inicial e final do arco em radianos, ao longo da curva do círculo. Estes são medidos a partir do eixo <code>x</code>. O parâmetro <code>anticlockwise</code> é um valor Booleano que, quando verdadeiro, desenha o arco no sentido anti-horário; Caso contrário, o arco é desenhado no sentido horário.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Os ângulos na função <code>arc</code> são medidos em radianos, não em graus. Para converter graus em radianos você pode usar a seguinte expressão JavaScript: <code>radians = (Math.PI/180)*degrees</code>.</p>
+</div>
+
+<p>O exemplo a seguir é um pouco mais complexo do que os que vimos anteriormente. Ele desenha 12 arcos diferentes, todos com diferentes ângulos e preenchimentos.</p>
+
+<p>Os dois laços <code>for</code> são para iterar através das linhas e colunas de arcos. Para cada arco, é criado um novo caminho chamando <code>beginPath()</code>. No código, cada um dos parâmetros para o arco estão em uma variável somente para demonstração, assim você não precisa fazer isso na vida real.</p>
+
+<p>As coordenadas <code>x</code> e <code>y</code> devem ser suficientemente claras. O parâmetros <code>radius</code> e <code>startAngle</code> são fixos. O <code>endAngle</code> começa em 180 graus (metade de um círculo) na primeira coluna e aumenta gradualmente em 90 graus, culminando em um círculo completo na última coluna.</p>
+
+<p>A manipulação do parâmetro <code>clockwise</code> faz com que a primeira e terceira linhas sejam desenhadas como arcos no sentido horário, e a segunda e quarta linhas como arcos no sentido anti-horário. Finalmente, a instrução <code>if</code> faz com que a metade superior dos arcos não sejam preenchidos e a metade inferior dos arcos sejam.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Este exemplo requer um canvas um pouco maior que as outras desta página: 150 x 200 pixels.</p>
+</div>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&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 notranslate">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;               // coordenada x
+        var y              = 25+i*50;               // coordenada y
+        var radius         = 20;                    // Raio do Arco
+        var startAngle     = 0;                     // Ponto inicial no círculo
+        var endAngle       = Math.PI+(Math.PI*j)/2; // Ponto final no círculo
+        var anticlockwise  = i%2==0 ? false : true; // horário ou anti-horário
+
+        ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
+
+        if (i&gt;1){
+          ctx.fill();
+        } else {
+          ctx.stroke();
+        }
+      }
+    }
+  }
+}
+</pre>
+
+<p>{{EmbedLiveSample("Arcos", 160, 210, "https://mdn.mozillademos.org/files/204/Canvas_arc.png")}}</p>
+
+<h3 id="Curvas_de_Bézier_Cúbicas_e_Quadráticas">Curvas de Bézier Cúbicas e Quadráticas</h3>
+
+<p>O próximo tipo de caminhos disponíveis são as Curvas de Bézier, disponíveis nas variedades cubícas e quadráticas. Elas são geralmente usadas para desenhar complexas formas orgânicas.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.quadraticCurveTo", "quadraticCurveTo(cp1x, cp1y, x, y)")}}</dt>
+ <dd>Desenha uma curva de Bézier quadrática da posição atual indicada pelo cursor, até a posição final especificada por <code>x</code> e <code>y</code>, usando o controle de pontos guiados por <code>cp1x</code> <code>e cp1y</code>.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.bezierCurveTo", "bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)")}}</dt>
+ <dd>Desenha uma curva de Bézier cúbica partindo da posição atual indicada pelo cursor, até a posição final especificada por <code>x</code> e <code>y</code>, usando o controle de pontos guiados por (<code>cp1x</code>, <code>cp1y</code>) e (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;">A diferença entre estes métodos pode ser descrita de forma melhor usando a imagem à direita. Uma curva quadrática de Bézier tem um ponto inicial e final (pontos azuis) e apenas um ponto de controle (indicado pelo ponto vermelho) enquanto que uma curva cúbica de Bézier utiliza dois pontos de controles.</p>
+
+<p>Os parâmetros <code>x</code> e <code>y</code> em ambos os métodos são as coordenadas do ponto final. <code>cp1x</code> e<code> cp1y</code> são as coordenadas do primeiro ponto de controle, e <code>cp2x</code> e <code>cp2y</code> são as coordenadas do segundo ponto de controle.</p>
+
+<p>Usando curvas de Bézier quadráticas e cúbicas pode ser algo bastante desafiador, porque ao contrário de um software de desenho vetorial, como o Adobe Illustrator, não temos resultados visuais imediatos sobre o que estamos fazendo. Isso torna bastante difícil desenhar formas complexas. No exemplo a seguir, vamos desenhar algumas formas orgânicas simples, mas se você tiver tempo e, acima de tudo, paciência, formas muito mais complexas podem ser criadas.</p>
+
+<p>Não há nada muito difícil nestes exemplos. Em ambos os casos vemos uma sucessão de curvas sendo desenhadas, resultando no fim, em uma forma (<em>shape</em>) completa.</p>
+
+<h4 id="Curvas_de_Bézier_Quadráticas">Curvas de Bézier Quadráticas</h4>
+
+<p>Este exemplo usa múltiplas curvas de Bézier quadráticas para renderizar um balão de fala.</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&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 notranslate">function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    // Exemplo de curvas de Bézier quadráticas
+    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('Curvas_de_Bézier_Quadráticas', 160, 160, "https://mdn.mozillademos.org/files/243/Canvas_quadratic.png")}}</p>
+
+<h4 id="Curvas_de_Bézier_Cúbicas">Curvas de Bézier Cúbicas</h4>
+
+<p>Este exemplo desenha um coração usando curvas de Bézier cúbicas.</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&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 notranslate">function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext){
+    var ctx = canvas.getContext('2d');
+
+    // Exemplo de curvas de Bézier cúbicas
+    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('Curvas_de_Bézier_Cúbicas', 160, 160, "https://mdn.mozillademos.org/files/207/Canvas_bezier.png")}}</p>
+
+<h3 id="Retângulos">Retângulos</h3>
+
+<p>Além dos três métodos que vimos em {{anch("Desenhando retângulos")}}, que desenham formas retangulares diretamente no canvas, há também o método <code>rect()</code>, que adiciona uma forma retangular a um caminho (<em>path</em>) atualmente aberto.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.rect", "rect(x, y, width, height)")}}</dt>
+ <dd>
+ <p>Desenha um retângulo cujo canto superior esquerdo é especificado por (<code>x</code>, <code>y</code>) com base em uma largura (<code>width</code>) e uma altura (<code>height</code>).</p>
+ </dd>
+</dl>
+
+<p>Quando este método é executado, o método <code>moveTo()</code> é automaticamente chamado com os parâmetros (0,0). Em outras palavras, a posição atual do cursor é automaticamente redefinida para as coordenadas padrões.</p>
+
+<h3 id="Combinando_Elementos">Combinando Elementos</h3>
+
+<p>Até agora, em cada exemplo dessa página foi usada apenas um tipo de função de caminho (<em>path</em>) para cada forma (<em>shape</em>). No entanto, não há nenhuma limitação para o número ou tipos de caminhos que você pode usar para criar um <em>shape</em>. Então, neste exemplo final, vamos combinar todas as funções de caminho para fazer um conjunto de personagens de jogo muito conhecido.</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&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 notranslate">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();
+  }
+}
+
+// Uma função útil para desenhar um retângulo com cantos arredondados.
+
+function roundedRect(ctx,x,y,width,height,radius){
+  ctx.beginPath();
+  ctx.moveTo(x,y+radius);
+  ctx.lineTo(x,y+height-radius);
+  ctx.quadraticCurveTo(x,y+height,x+radius,y+height);
+  ctx.lineTo(x+width-radius,y+height);
+  ctx.quadraticCurveTo(x+width,y+height,x+width,y+height-radius);
+  ctx.lineTo(x+width,y+radius);
+  ctx.quadraticCurveTo(x+width,y,x+width-radius,y);
+  ctx.lineTo(x+radius,y);
+  ctx.quadraticCurveTo(x,y,x,y+radius);
+  ctx.stroke();
+}
+</pre>
+
+<p>O resultado é:</p>
+
+<p>{{EmbedLiveSample("Combinando_Elementos", 160, 160, "https://mdn.mozillademos.org/files/9849/combinations.png")}}</p>
+
+<p>Não vamos discutir isso em detalhes, uma vez que é realmente muito simples. As coisas mais importantes a serem observadas são o uso da propriedade <code>fillStyle</code> no contexto de desenho e o uso de uma função auxiliar (neste caso <code>roundedRect()</code>). Usando funções auxiliares para construir um desenho frequentemente pode ser muito útil, além de reduzir a quantidade de código que você precisa, bem como a sua complexidade.</p>
+
+<p>Vamos dar uma nova olhada em <code>fillStyle</code>, em mais detalhes, mais adiante neste tutorial. Aqui, tudo o que estamos fazendo é apenas usando-o para alterar sucessivamente a cor de preenchimento dos caminhos (<em>paths</em>) de cor preta (padrão) para branca.</p>
+
+<h2 id="Path2D">Path2D</h2>
+
+<p>Como vimos no último exemplo, pode haver uma série de <em>paths</em> e comandos de desenho para desenhar objetos em sua tela. Para simplificar o código e melhorar o desempenho, o objeto {{domxref("Path2D")}}, disponível em versões recentes dos navegadores, permite armazenar em cache ou gravar esses comandos de desenho. Com ele, você pode construir seus <em>paths</em> rapidamente.<br>
+ Vamos ver como podemos construir um objeto de <code>Path2D</code>:</p>
+
+<dl>
+ <dt>{{domxref("Path2D.Path2D", "Path2D()")}}</dt>
+ <dd>
+ <p>O construtor de <code><strong>Path2D()</strong></code> retorna um objeto <code>Path2D</code> instanciado recentemente, opcionalmente através de um outro objeto <code>Path2D</code> como argumento (cria uma cópia) ou, opcionalmente, com uma <em>string</em> que representam dados de <a href="/en-US/docs/Web/SVG/Tutorial/Paths"><em>paths</em> em SVG</a>.</p>
+ </dd>
+</dl>
+
+<pre class="brush: js notranslate">new Path2D();     // objeto vazio de Path2D
+new Path2D(path); // cópia de outro objeto de Path2D
+new Path2D(d);    // objeto criado a partir de <em>paths</em> em SVG</pre>
+
+<p>Todos os <a href="/pt_BR/docs/Web/API/CanvasRenderingContext2D#Paths">métodos de caminho (path methods)</a> como <code>moveTo</code>, <code>rect</code>, <code>arc</code> ou <code>quadraticCurveTo</code>, etc., que temos de saber acima, estão disponíveis em <code>Path2D</code>.</p>
+
+<p>A API <code>Path2D</code> também adiciona uma maneira de combinar caminhos usando o método <code>addPath</code>. Isso pode ser útil quando você deseja criar objetos com vários componentes, por exemplo.</p>
+
+<dl>
+ <dt>{{domxref("Path2D.addPath", "Path2D.addPath(path [, transform])")}}</dt>
+ <dd>Adiciona um <code>path</code> para o <code>path</code> atual através de uma matriz de transformação opcional.</dd>
+</dl>
+
+<h3 id="Exemplo_de_Path2D">Exemplo de Path2D</h3>
+
+<p>Neste exemplo, estamos criando um retângulo e um círculo. Ambos são armazenados como um objeto de <code>Path2D</code>, de modo que eles estão disponíveis para uso posterior. Com a nova API <code>Path2D</code>, vários métodos foram atualizados como, por exemplo, opcionalmente usar um objeto <code>Path2D</code> em vez do <code>path</code> atual. Aqui, os métodos <code>stroke</code> e <code>fill</code> são usados, ​​com um argumento de <em>path</em>, para desenhar ambos os objetos na tela, por exemplo.</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&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] notranslate">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("Exemplo_de_Path2D", 140, 110, "https://mdn.mozillademos.org/files/9851/path2d.png")}}</p>
+
+<h3 id="Usando_paths_em_SVG">Usando <em>paths</em> em SVG</h3>
+
+<p>Outro recurso poderoso da nova API de Path2D é a utilização de dados de <em>path</em> em SVG para inicializar caminhos (<em>paths</em>) no canvas. Isso permite que você crie dados de <em>paths </em>que possam ser utilizados tanto no SVG como no canvas.</p>
+
+<p>O caminho se moverá para o ponto <code>(M10 10)</code> e então se moverá horizontalmente 80 pontos para a direita <code>(h 80)</code>, depois 80 pontos para baixo <code>(v 80)</code>, então 80 pontos para a esquerda (h -80) e, por fim, volta para o início (<code>z</code>). Você pode ver este exemplo na página do <a href="/en-US/docs/Web/API/Path2D.Path2D#Using_SVG_paths">construtor do Path2D</a>.</p>
+
+<pre class="brush: js; notranslate">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>
diff --git a/files/pt-br/web/api/canvas_api/tutorial/drawing_text/index.html b/files/pt-br/web/api/canvas_api/tutorial/drawing_text/index.html
new file mode 100644
index 0000000000..550719e627
--- /dev/null
+++ b/files/pt-br/web/api/canvas_api/tutorial/drawing_text/index.html
@@ -0,0 +1,169 @@
+---
+title: Drawing text
+slug: Web/Guide/HTML/Canvas_tutorial/Drawing_text
+tags:
+  - Canvas
+  - Intermediário
+  - Tutorial
+  - graficos
+translation_of: Web/API/Canvas_API/Tutorial/Drawing_text
+---
+<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Applying_styles_and_colors", "Web/API/Canvas_API/Tutorial/Using_images")}}</div>
+
+<div class="summary">
+<p>Após entender como <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">aplicar estilos e cores</a> no capítulo anterior, nós veremos agora como desenhar texto dentro do contexto de uma canvas.</p>
+</div>
+
+<h2 id="Desenhando_texto">Desenhando texto</h2>
+
+<p>O context de renderização da canvas fornece dois métodos para renderização textual: </p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.fillText", "fillText(text, x, y [, maxWidth])")}}</dt>
+ <dd>Preenche com um determinado texto as cordenadas (x,y) recebidas. Opcionalmente com uma largura máxima para o desenho.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.strokeText", "strokeText(text, x, y [, maxWidth])")}}</dt>
+ <dd>Traçeja um determinado texto nas cordenadas (x,y) recebidas. Opcionalmente com uma largura máxima para o desenho.</dd>
+</dl>
+
+<h3 id="Um_exemplo_com_fillText">Um exemplo com <code>fillText</code></h3>
+
+<p>O texto a seguir é rederizado utilizando <code>fillStyle</code>.</p>
+
+<pre class="brush: js;highlight[4]">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  ctx.font = '48px serif';
+  ctx.fillText('Hello world', 10, 50);
+}</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" width="300" height="100"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js">draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("A_fillText_example", 310, 110)}}</p>
+
+<h3 id="Um_exemplo_com_strokeText">Um exemplo com <code>strokeText</code></h3>
+
+<p> </p>
+
+<p dir="ltr" id="tw-target-text">O texto é preenchido usando o strokeStyle atual.</p>
+
+<p> </p>
+
+<pre class="brush: js;highlight[4]">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  ctx.font = '48px serif';
+  ctx.strokeText('Hello world', 10, 50);
+}</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" width="300" height="100"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js">draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("A_strokeText_example", 310, 110)}}</p>
+
+<h2 id="Estilo_de_Texto"><strong>Estilo de Texto</strong></h2>
+
+<p>Nos exemplos anteriores, já usamos a propriedade font para tornar o texto um pouco maior que o tamanho padrão. Existem mais algumas propriedades que permitem ajustar a maneira como o texto é exibido no canvas:</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.font", "font = value")}}</dt>
+ <dd>The current text style being used when drawing text. This string uses the same syntax as the <a href="/en-US/docs/Web/CSS">CSS</a> {{cssxref("font")}} property. The default font is 10px sans-serif.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.textAlign", "textAlign = value")}}</dt>
+ <dd>Text alignment setting. Possible values: <code>start</code>, <code>end</code>, <code>left</code>, <code>right</code> or <code>center</code>. The default value is <code>start</code>.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.textBaseline", "textBaseline = value")}}</dt>
+ <dd>Baseline alignment setting. Possible values: <code>top</code>, <code>hanging</code>, <code>middle</code>, <code>alphabetic</code>, <code>ideographic</code>, <code>bottom</code>. The default value is <code>alphabetic</code>.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.direction", "direction = value")}}</dt>
+ <dd>Directionality. Possible values: <code>ltr</code>, <code>rtl</code>, <code>inherit</code>. The default value is <code>inherit</code>.</dd>
+</dl>
+
+<p>Essas propriedades podem ser similares para você, se você trabalhou com CSS antes.</p>
+
+<p>O diagrama seguinte do <a class="external" href="http://www.whatwg.org/" title="http://www.whatwg.org/">WHATWG</a> demonstra as várias baselines suportadas pela propriedade do <code>textBaseline</code><img alt="The top of the em square is
+roughly at the top of the glyphs in a font, the hanging baseline is
+where some glyphs like आ are anchored, the middle is half-way
+between the top of the em square and the bottom of the em square,
+the alphabetic baseline is where characters like Á, ÿ,
+f, and Ω are anchored, the ideographic baseline is
+where glyphs like 私 and 達 are anchored, and the bottom
+of the em square is roughly at the bottom of the glyphs in a
+font. The top and bottom of the bounding box can be far from these
+baselines, due to glyphs extending far outside the em square." src="http://www.whatwg.org/specs/web-apps/current-work/images/baselines.png"></p>
+
+<h3 id="O_exemplo_de_uma_textBaseline">O exemplo de uma textBaseline</h3>
+
+<p>Edite o código abaixo e veja as atualizações em tempo real no canvas.</p>
+
+<pre class="brush: js;highlight[2]">ctx.font = '48px serif';
+ctx.textBaseline = 'hanging';
+ctx.strokeText('Hello world', 0, 100);
+</pre>
+
+<div class="hidden">
+<h6 id="Playable_code" name="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.font = "48px serif";
+ctx.textBaseline = "hanging";
+ctx.strokeText("Hello world", 0, 100);&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var edit = document.getElementById('edit');
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener('click', function() {
+  textarea.focus();
+})
+
+textarea.addEventListener('input', drawCanvas);
+window.addEventListener('load', drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h2 id="Advanced_text_measurements">Advanced text measurements</h2>
+
+<p>In the case you need to obtain more details about the text, the following method allows you to measure it.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.measureText", "measureText()")}}</dt>
+ <dd>Returns a {{domxref("TextMetrics")}} object containing the width, in pixels, that the specified text will be when drawn in the current text style.</dd>
+</dl>
+
+<p>The following code snippet shows how you can measure a text and get its width.</p>
+
+<pre class="brush: js;highlight[3]">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  var text = ctx.measureText('foo'); // TextMetrics object
+  text.width; // 16;
+}
+</pre>
+
+<h2 id="Notas_específicas_-_Gecko">Notas específicas - Gecko</h2>
+
+<p>No Gecko (a engine de renderização do Firefox, Firefox OS e outras aplicações Mozilla), algumas APIs prefixadas foram implementadas em versões anteriores para escrever texto em um canvas. Essas APIs agora estão depreciadas e removidas, e não são mais garantidas para uso.</p>
+
+<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Applying_styles_and_colors", "Web/API/Canvas_API/Tutorial/Using_images")}}</p>
diff --git a/files/pt-br/web/api/canvas_api/tutorial/finale/index.html b/files/pt-br/web/api/canvas_api/tutorial/finale/index.html
new file mode 100644
index 0000000000..9cd393b652
--- /dev/null
+++ b/files/pt-br/web/api/canvas_api/tutorial/finale/index.html
@@ -0,0 +1,49 @@
+---
+title: Conclusão
+slug: Web/Guide/HTML/Canvas_tutorial/Conclusão
+translation_of: Web/API/Canvas_API/Tutorial/Finale
+---
+<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Optimizing_canvas")}}</div>
+
+<div class="summary">
+<p>Parabéns! Você terminou o <a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas tutorial</a>! Este conhecimento ajudará você a fazer ótimos gráficos 2D na web.</p>
+</div>
+
+<h2 id="Mais_exemplos_e_tutoriais">Mais exemplos e tutoriais</h2>
+
+<p>Há uma variedade de demonstrações e mais explicações sobre canvas nesses sites:</p>
+
+<dl>
+ <dt><a href="http://codepen.io/search?q=canvas">Codepen.io</a></dt>
+ <dd>Front End Developer Playground &amp; Code Editor no navegador.</dd>
+ <dt><a href="http://www.html5canvastutorials.com/">HTML5CanvasTutorials</a></dt>
+ <dd>Exemplos para a maioria das APIs canvas.</dd>
+ <dt><a href="http://creativejs.com/2011/08/31-days-of-canvas-tutorials/">31 days of Canvas tutorials</a></dt>
+ <dd><span id="result_box" lang="pt"><span>Uma ótima fundação para codificação visual em JavaScript</span></span> .</dd>
+ <dt><a href="/en-US/docs/Games">Game development</a></dt>
+ <dd><span id="result_box" lang="pt"><span>O jogo é uma das atividades de computador mais populares.</span> <span>Novas tecnologias estão chegando constantemente para possibilitar o desenvolvimento de jogos melhores e mais poderosos que podem ser executados em qualquer navegador da Web compatível com os padrões.</span></span></dd>
+</dl>
+
+<h2 id="Outras_Web_APIs">Outras Web APIs</h2>
+
+<p>Essas APIs podem ser úteis, quando trabalhando mais com canvas e gráficos:</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/WebGL">WebGL</a></dt>
+ <dd>API para renderização interativa de gráficos 3D.</dd>
+ <dt><a href="/en-US/docs/Web/SVG">SVG</a></dt>
+ <dd><span id="result_box" lang="pt"><span>Scalable Vector Graphics permitem que você descreva imagens como conjuntos de vetores (linhas) e formas, a fim de permitir que eles sejam redimensionados sem problemas, independentemente do tamanho em que são desenhados.</span></span></dd>
+ <dt><a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio</a></dt>
+ <dd><span id="result_box" lang="pt"><span>A Web Audio API fornece um sistema poderoso e versátil para controlar o áudio na Web, permitindo que os desenvolvedores escolham fontes de áudio, adicionem efeitos ao áudio, criem visualizações de áudio, apliquem efeitos espaciais (como panning) e muito mais.</span></span></dd>
+</dl>
+
+<h2 id="Questions">Questions</h2>
+
+<dl>
+ <dt><a href="http://stackoverflow.com/questions/tagged/canvas">Stackoverflow</a></dt>
+ <dd>Perguntas marcadas como "canvas".</dd>
+ <dt><a href="/en-US/docs/MDN">Comentários sobre esse tutorial – A comunidade MDN de documentação</a></dt>
+ <dd><span id="result_box" lang="pt"><span>Se você tiver algum comentário sobre este tutorial ou quiser nos agradecer, fique à vontade para entrar em contato conosco!</span></span></dd>
+</dl>
+
+<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Optimizing_canvas")}}</p>
diff --git a/files/pt-br/web/api/canvas_api/tutorial/index.html b/files/pt-br/web/api/canvas_api/tutorial/index.html
new file mode 100644
index 0000000000..2f9dbab7df
--- /dev/null
+++ b/files/pt-br/web/api/canvas_api/tutorial/index.html
@@ -0,0 +1,56 @@
+---
+title: Canvas tutorial
+slug: Web/Guide/HTML/Canvas_tutorial
+tags:
+  - Canvas
+  - Graphics
+  - Guide
+  - HTML
+  - HTML5
+  - Intermediate
+  - Web
+translation_of: Web/API/Canvas_API/Tutorial
+---
+<p> {{CanvasSidebar}} <a href="/pt-BR/docs/Web/HTML/Canvas"><img alt="" src="https://mdn.mozillademos.org/files/257/Canvas_tut_examples.jpg" style="float: right; height: 450px; width: 200px;"></a></p>
+
+<p class="summary"><a href="/en-US/docs/HTML/Canvas" title="HTML/Canvas"><strong><code>&lt;canvas&gt;</code></strong></a> é um elemento <a href="/en-US/docs/HTML" title="HTML">HTML</a> que pode ser usado para desenhar usando linguagem de "script" (normalmente <a href="/en-US/docs/JavaScript" title="JavaScript">JavaScript</a>). Isto pode ser usado, por exemplo, para desenhar gráficos, fazer composições de fotos ou simples (e <a href="/en-US/docs/HTML/Canvas/A_Basic_RayCaster" title="A_Basic_RayCaster">não tão simples</a>) animações. As imagens à direita mostram exemplos de implementações <strong><code><a href="/en-US/docs/HTML/Canvas" title="HTML/Canvas">&lt;canvas&gt;</a></code></strong> que serão parte deste tutorial.</p>
+
+<p><span class="seoSummary">Este tutorial descreve como utilizar o elemento <code>&lt;canvas&gt;</code> para desenhar gráficos 2D, iniciando com o básico. Os exemplos fornecidos devem lhe trazer algumas ideias claras sobre o que você pode fazer com o canvas e irá fornecer trechos de código que podem lhe ajudar na contrução do seu próprio conteúdo. </span></p>
+
+<p>Introduzido pela primeira vez no WebKit pela Apple para o OS X Dashboard, o <code>&lt;canvas&gt;</code>, desde então, tem sido implementado em navegadores. Hoje, todos os principais navegadores suportam isso.</p>
+
+<h2 id="Before_you_start" name="Before_you_start">Antes de começar</h2>
+
+<p>Usar o elemento <code>&lt;canvas&gt; </code>não é muito difícil, mas você precisa de um conhecimento básico sobre <a href="/en-US/docs/HTML" title="HTML">HTML</a> e <a href="/en-US/docs/JavaScript" title="JavaScript">JavaScript</a>. O elemento <code>&lt;canvas&gt;</code> não é suportado por alguns navegadores antigos, mas é suportado em versões recentes da maioria dos navegadores. O tamanho padrão de um canvas é de 300px * 150px (largura * altura). Porém, tamanhos customizados podem ser definidos usando as propriedades <code>width</code> e <code>height</code> do CSS. Para desenhar gráficos no canvas iremos usar um contexto de objeto JavaScript, o que criará gráficos em tempo real.</p>
+
+<h2 id="In_this_tutorial" name="In_this_tutorial">Nesse tutorial</h2>
+
+<ul>
+ <li><a href="/pt-BR/docs/Web/Guide/HTML/Canvas_tutorial/Utilizacao_basica" title="Canvas_tutorial/Basic_usage">Utilização básica</a></li>
+ <li><a href="/pt-BR/docs/Web/Guide/HTML/Canvas_tutorial/Drawing_shapes" title="Canvas_tutorial/Drawing_shapes">Desenhando formas</a></li>
+ <li><a href="/pt-BR/docs/Web/Guide/HTML/Canvas_tutorial/Applying_styles_and_colors" title="Canvas_tutorial/Applying_styles_and_colors">Aplicando estilos e cores</a></li>
+ <li><a href="/pt-BR/docs/Web/Guide/HTML/Canvas_tutorial/Drawing_text">Desenhando texto</a></li>
+ <li><a href="/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_images" title="Canvas_tutorial/Using_images">Usando imagens (em inglês)</a></li>
+ <li><a href="/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Transformations" title="Canvas_tutorial/Transformations">Transformações</a></li>
+ <li><a href="/pt-BR/docs/Web/Guide/HTML/Canvas_tutorial/Compositing" title="Canvas_tutorial/Compositing">Composição e recorte</a></li>
+ <li><a href="/pt-BR/docs/Web/Guide/HTML/Canvas_tutorial/Basic_animations" title="Canvas_tutorial/Basic_animations">Animações básicas</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Advanced_animations">Animações avançadas</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas">Manipulação de pixel</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility">Regiões e acessibilidade</a></li>
+ <li><a href="/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Optimizing_canvas" title="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Optimizing_canvas">Otimizando o canvas</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Finale">Conclusão</a></li>
+</ul>
+
+<h2 id="See_also" name="See_also">Veja também</h2>
+
+<ul>
+ <li><a href="/pt-BR/docs/Web/HTML/Canvas" title="HTML/Canvas">Canvas</a></li>
+ <li><a class="external external-icon" href="http://visitmix.com/labs/ai2canvas/" title="http://visitmix.com/labs/ai2canvas/">Plug-in Canvas para Adobe Illustrator</a></li>
+ <li><a class="external external-icon" href="http://www.html5canvastutorials.com/" title="http://www.html5canvastutorials.com/">HTML5CanvasTutorials</a><a href="http://davidwalsh.name/convert-canvas-image"> </a></li>
+</ul>
+
+<h2 id="Nota_dos_contribuidores">Nota dos contribuidores</h2>
+
+<p><span id="result_box" lang="pt"><span>Devido a um erro técnico lamentável que ocorreu na semana de 17 de junho de 2013, perdemos parte do histórico deste tutorial, incluindo atribuições a todos os contribuidores anteriores ao seu conteúdo.</span> <span>Pedimos desculpas por isso, e espero que você nos perdoe desse infeliz infortúnio.</span></span></p>
+
+<div>{{ Next("Web/Guide/HTML/Canvas_tutorial/Utilizacao_basica") }}</div>
diff --git a/files/pt-br/web/api/canvas_api/tutorial/optimizing_canvas/index.html b/files/pt-br/web/api/canvas_api/tutorial/optimizing_canvas/index.html
new file mode 100644
index 0000000000..d18afddefa
--- /dev/null
+++ b/files/pt-br/web/api/canvas_api/tutorial/optimizing_canvas/index.html
@@ -0,0 +1,115 @@
+---
+title: Otimizando canvas
+slug: Web/Guide/HTML/Canvas_tutorial/Otimizando_Canvas
+tags:
+  - Canvas
+  - Gráfico 2D
+  - Otimização
+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>O elemento {{HTMLElement("canvas")}} é um dos padrões mais largamente utilizados para renderização de gráficos 2D na Web. É muito usado em jogos e em visualizações complexas. Porém, quando sítios web e aplicativos utilizam canvas até seus limites, começam a surgir problemas de perda de performance. <span class="seoSummary">Este artigo tem o objetivo de prover sugestões de otimização de seu elemento canvas e garantir que seu site ou aplicativo funcione melhor.</span></p>
+</div>
+
+<h2 id="Dicas_de_performance">Dicas de performance</h2>
+
+<p>O que segue é uma coleção de dicas para melhorar a performance.</p>
+
+<h3 id="Pre-render_similar_primitives_or_repeating_objects_on_an_off-screen_canvas">Pre-render similar primitives or repeating objects on an off-screen canvas</h3>
+
+<p>If you find yourself with complex drawing operations on each frame, consider creating an offscreen canvas, draw to it once (or whenever it changes) on the offscreen canvas, then on each frame draw the offscreen canvas.</p>
+
+<pre class="brush: js">myEntity.offscreenCanvas = document.createElement('canvas');
+myEntity.offscreenCanvas.width = myEntity.width;
+myEntity.offscreenCanvas.height = myEntity.height;
+myEntity.offscreenContext = myEntity.offscreenCanvas.getContext('2d');
+
+myEntity.render(myEntity.offscreenContext);
+</pre>
+
+<h3 id="Avoid_floating-point_coordinates_and_use_integers_instead">Avoid floating-point coordinates and use integers instead</h3>
+
+<p>Sub-pixel rendering occurs when you render objects on a canvas without whole values.</p>
+
+<pre class="brush: js">ctx.drawImage(myImage, 0.3, 0.5);
+</pre>
+
+<p>This causes the browser to do extra calculations to create the anti-aliasing effect. To avoid this, make sure to round all co-ordinates used in calls to {{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}} using {{jsxref("Math.floor()")}}, for example.</p>
+
+<h3 id="Don’t_scale_images_in_drawImage">Don’t scale images in <code>drawImage</code></h3>
+
+<p>Cache various sizes of your images on an offscreen canvas when loading as opposed to constantly scaling them in {{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}}.</p>
+
+<h3 id="Use_multiple_layered_canvases_for_complex_scenes">Use multiple layered canvases for complex scenes</h3>
+
+<p>You may find you have some elements that are frequently changing and moving around whereas other things (like UI) never change. An optimization in this situation is to create layers using multiple canvas elements.</p>
+
+<p>For example you could create a UI layer that sits on top of everything and is only drawn during user input. You could create game layer where the frequently updating entities exist and a background layer for entities that rarely update.</p>
+
+<pre class="brush: html">&lt;div id="stage"&gt;
+  &lt;canvas id="ui-layer" width="480" height="320"&gt;&lt;/canvas&gt;
+  &lt;canvas id="game-layer" width="480" height="320"&gt;&lt;/canvas&gt;
+  &lt;canvas id="background-layer" width="480" height="320"&gt;&lt;/canvas&gt;
+&lt;/div&gt;
+
+&lt;style&gt;
+  #stage {
+    width: 480px;
+    height: 320px;
+    position: relative;
+    border: 2px solid black
+  }
+  canvas { position: absolute; }
+  #ui-layer { z-index: 3 }
+  #game-layer { z-index: 2 }
+  #background-layer { z-index: 1 }
+&lt;/style&gt;
+</pre>
+
+<h3 id="CSS_for_large_background_images">CSS for large background images</h3>
+
+<p>If like most games you have a static background image, use a plain {{HTMLElement("div")}} element with a CSS {{cssxref("background")}} property and position it under the canvas. This will avoid drawing a large image to the canvas on every tick.</p>
+
+<h3 id="Scaling_canvas_using_CSS_transforms">Scaling canvas using CSS transforms</h3>
+
+<p><a href="/en-US/docs/Web/Guide/CSS/Using_CSS_transforms">CSS transforms</a> are faster by using the GPU. Best case is to not scale the canvas or have a smaller canvas and scale up rather than a bigger canvas and scale down. For Firefox OS, target 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="Turn_off_transparency">Turn off transparency</h3>
+
+<p>If your game uses canvas and doesn’t need to be transparent, set the <code>alpha</code> option to <code>false</code> when creating a drawing context with <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>. This information can be used internally to optimize rendering.</p>
+
+<pre class="brush: js">var ctx = canvas.getContext('2d', { alpha: false });</pre>
+
+<h3 id="More_tips">More tips</h3>
+
+<ul>
+ <li>Batch canvas calls together (for example, draw a poly-line instead of multiple separate lines).</li>
+ <li>Avoid unnecessary canvas state changes.</li>
+ <li>Render screen differences only, not the whole new state.</li>
+ <li>Avoid the {{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur")}} property whenever possible.</li>
+ <li>Avoid <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text">text rendering</a> whenever possible.</li>
+ <li>Try different ways to clear the canvas ({{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}} vs. {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}} vs. resizing the canvas)</li>
+ <li>With animations, use {{domxref("window.requestAnimationFrame()")}} instead of {{domxref("window.setInterval()")}} .</li>
+ <li>Be careful with heavy physics libraries</li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="http://www.html5rocks.com/en/tutorials/canvas/performance/#toc-ref">Improving HTML5 Canvas Performance – HTML5 Rocks</a></li>
+ <li><a href="https://hacks.mozilla.org/2013/05/optimizing-your-javascript-game-for-firefox-os/">Optimizing your JavaScript game for 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/pt-br/web/api/canvas_api/tutorial/using_images/index.html b/files/pt-br/web/api/canvas_api/tutorial/using_images/index.html
new file mode 100644
index 0000000000..0b0dcfe7e7
--- /dev/null
+++ b/files/pt-br/web/api/canvas_api/tutorial/using_images/index.html
@@ -0,0 +1,333 @@
+---
+title: Using images
+slug: Web/Guide/HTML/Canvas_tutorial/Using_images
+translation_of: Web/API/Canvas_API/Tutorial/Using_images
+---
+<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_text", "Web/API/Canvas_API/Tutorial/Transformations" )}}</div>
+
+<div class="summary">
+<p>Até agora nós criamos nossos próprios <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes">shapes</a> e aplicamos estilos(<a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">applied styles</a>) a eles. Um dos recursos mais interessantes do {{HTMLElement("canvas")}} é a capacidade de usar imagens. Eles podem ser usados para composição dinâmica de fotos ou como pano de fundo de gráficos, como sprites em jogos e assim por diante. Imagens externas podem ser usadas em qualquer formato suportado pelo navegador, tais como PNG, GIF, ou JPEG. Você pode até usar a imagem produzida por outros elementos da tela na mesma página que a fonte!</p>
+</div>
+
+<p>A importação de imagens para o canvas é basicamente um processo de duas etapas:</p>
+
+<ol>
+ <li>Obter uma referência a um objeto {{domxref("HTMLImageElement")}} ou a outro elemento do canvas como fonte. Também é possível usar imagens fornecendo uma URL.</li>
+ <li>Desenhar a imagem no canvas usando a função <code>drawImage()</code> .</li>
+</ol>
+
+<p>Vamos dar uma olhada em como fazer isso.</p>
+
+<h2 id="Getting_images_to_draw">Getting images to draw</h2>
+
+<p>The canvas API is able to use any of the following data types as an image source:</p>
+
+<dl>
+ <dt>{{domxref("HTMLImageElement")}}</dt>
+ <dd>These are images created using the <code>Image()</code> constructor, as well as any {{HTMLElement("img")}} element.</dd>
+ <dt>{{domxref("SVGImageElement")}}</dt>
+ <dd>These are images embedded using the {{SVGElement("image")}} element.</dd>
+ <dt>{{domxref("HTMLVideoElement")}}</dt>
+ <dd>Using an HTML {{HTMLElement("video")}} element as your image source grabs the current frame from the video and uses it as an image.</dd>
+ <dt>{{domxref("HTMLCanvasElement")}}</dt>
+ <dd>You can use another {{HTMLElement("canvas")}} element as your image source.</dd>
+</dl>
+
+<p>These sources are collectively referred to by the type {{domxref("CanvasImageSource")}}.</p>
+
+<p>There are several ways to get images for use on a canvas.</p>
+
+<h3 id="Using_images_from_the_same_page">Using images from the same page</h3>
+
+<p>We can obtain a reference to images on the same page as the canvas by using one of:</p>
+
+<ul>
+ <li>The {{domxref("document.images")}} collection</li>
+ <li>The {{domxref("document.getElementsByTagName()")}} method</li>
+ <li>If you know the ID of the specific image you wish to use, you can use {{domxref("document.getElementById()")}} to retrieve that specific image</li>
+</ul>
+
+<h3 id="Using_images_from_other_domains">Using images from other domains</h3>
+
+<p>Using the {{htmlattrxref("crossorigin", "img")}} attribute of an {{HTMLElement("img")}} element (reflected by the {{domxref("HTMLImageElement.crossOrigin")}} property), you can request permission to load an image from another domain for use in your call to <code>drawImage()</code>. If the hosting domain permits cross-domain access to the image, the image can be used in your canvas without tainting it; otherwise using the image will <a href="https://developer.mozilla.org/en-US/docs/HTML/CORS_Enabled_Image#What_is_a_.22tainted.22_canvas.3F" rel="internal">taint the canvas</a>.</p>
+
+<h3 id="Using_other_canvas_elements">Using other canvas elements</h3>
+
+<p>Just as with normal images, we access other canvas elements using either the {{domxref("document.getElementsByTagName()")}} or {{domxref("document.getElementById()")}} method. Be sure you've drawn something to the source canvas before using it in your target canvas.</p>
+
+<p>One of the more practical uses of this would be to use a second canvas element as a thumbnail view of the other larger canvas.</p>
+
+<h3 id="Creating_an_image_from_scratch">Creating an image from scratch</h3>
+
+<p>Another option is to create new {{domxref("HTMLImageElement")}} objects in our script. To do this, you can use the convenient <code>Image()</code> constructor:</p>
+
+<pre class="brush: js">var img = new Image();   // Create new img element
+img.src = 'myImage.png'; // Set source path
+</pre>
+
+<p>When this script gets executed, the image starts loading.</p>
+
+<p>If you try to call <code>drawImage()</code> before the image has finished loading, it won't do anything (or, in older browsers, may even throw an exception). So you need to be sure to use the load event so you don't try this before the image has loaded:</p>
+
+<pre class="brush: js">var img = new Image();   // Create new img element
+img.addEventListener('load', function() {
+  // execute drawImage statements here
+}, false);
+img.src = 'myImage.png'; // Set source path
+</pre>
+
+<p>If you're only using one external image this can be a good approach, but once you need to track more than one we need to resort to something more clever. It's beyond the scope of this tutorial to look at image pre-loading tactics, but you should keep that in mind.</p>
+
+<h3 id="Embedding_an_image_via_data_URL">Embedding an image via data: URL</h3>
+
+<p>Another possible way to include images is via the <a class="external" href="/en-US/docs/Web/HTTP/data_URIs" rel="external" title="http://en.wikipedia.org/wiki/Data:_URL">data: url</a>. Data URLs allow you to completely define an image as a Base64 encoded string of characters directly in your code.</p>
+
+<pre class="brush: js">var img = new Image();   // Create new img element
+img.src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==';
+</pre>
+
+<p>One advantage of data URLs is that the resulting image is available immediately without another round trip to the server. Another potential advantage is that it is also possible to encapsulate in one file all of your <a href="/en-US/docs/Web/CSS" title="/en-US/docs/Web/CSS">CSS</a>, <a href="/en-US/docs/Web/JavaScript" title="/en-US/docs/Web/JavaScript">JavaScript</a>, <a href="/en-US/docs/Web/HTML" title="/en-US/docs/Web/HTML">HTML</a>, and images, making it more portable to other locations.</p>
+
+<p>Some disadvantages of this method are that your image is not cached, and for larger images the encoded url can become quite long.</p>
+
+<h3 id="Using_frames_from_a_video">Using frames from a video</h3>
+
+<p>You can also use frames from a video being presented by a {{HTMLElement("video")}} element (even if the video is not visible). For example, if you have a {{HTMLElement("video")}} element with the ID "myvideo", you can do this:</p>
+
+<pre class="brush: js">function getMyVideo() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    return document.getElementById('myvideo');
+  }
+}
+</pre>
+
+<p>This returns the {{domxref("HTMLVideoElement")}} object for the video, which, as covered earlier, is one of the objects that can be used as a <code>CanvasImageSource</code>.</p>
+
+<h2 id="Drawing_images">Drawing images</h2>
+
+<p>Once we have a reference to our source image object we can use the <code>drawImage()</code> method to render it to the canvas. As we will see later the <code>drawImage()</code> method is overloaded and has several variants. In its most basic form it looks like this:</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.drawImage", "drawImage(image, x, y)")}}</dt>
+ <dd>Draws the <code>CanvasImageSource</code> specified by the <code>image</code> parameter at the coordinates (<code>x</code>, <code>y</code>).</dd>
+</dl>
+
+<div class="note">
+<p>SVG images must specify a width and height in the root &lt;svg&gt; element.</p>
+</div>
+
+<h3 id="Example_A_simple_line_graph">Example: A simple line graph</h3>
+
+<p>In the following example, we will use an external image as the backdrop for a small line graph. Using backdrops can make your script considerably smaller because we can avoid the need for code to generate the background. In this example, we're only using one image, so I use the image object's <code>load</code> event handler to execute the drawing statements. The <code>drawImage()</code> method places the backdrop at the coordinate (0, 0), which is the top-left corner of the canvas.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;html&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="180" height="150"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<pre class="brush: js;highlight[5]">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  var img = new Image();
+  img.onload = function() {
+    ctx.drawImage(img, 0, 0);
+    ctx.beginPath();
+    ctx.moveTo(30, 96);
+    ctx.lineTo(70, 66);
+    ctx.lineTo(103, 76);
+    ctx.lineTo(170, 15);
+    ctx.stroke();
+  };
+  img.src = 'https://mdn.mozillademos.org/files/5395/backdrop.png';
+}</pre>
+
+<p>The resulting graph looks like this:</p>
+
+<p>{{EmbedLiveSample("Example_A_simple_line_graph", 220, 160, "https://mdn.mozillademos.org/files/206/Canvas_backdrop.png")}}</p>
+
+<h2 id="Scaling">Scaling</h2>
+
+<p>The second variant of the <code>drawImage()</code> method adds two new parameters and lets us place scaled images on the canvas.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.drawImage", "drawImage(image, x, y, width, height)")}}</dt>
+ <dd>This adds the <code>width</code> and <code>height</code> parameters, which indicate the size to which to scale the image when drawing it onto the canvas.</dd>
+</dl>
+
+<h3 id="Example_Tiling_an_image">Example: Tiling an image</h3>
+
+<p>In this example, we'll use an image as a wallpaper and repeat it several times on the canvas. This is done simply by looping and placing the scaled images at different positions. In the code below, the first <code>for</code> loop iterates over the rows. The second <code>for</code> loop iterates over the columns. The image is scaled to one third of its original size, which is 50x38 pixels.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Images can become blurry when scaling up or grainy if they're scaled down too much. Scaling is probably best not done if you've got some text in it which needs to remain legible.</p>
+</div>
+
+<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 ctx = document.getElementById('canvas').getContext('2d');
+  var img = new Image();
+  img.onload = function() {
+    for (var i = 0; i &lt; 4; i++) {
+      for (var j = 0; j &lt; 3; j++) {
+        ctx.drawImage(img, j * 50, i * 38, 50, 38);
+      }
+    }
+  };
+  img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
+}</pre>
+
+<p>The resulting canvas looks like this:</p>
+
+<p>{{EmbedLiveSample("Example_Tiling_an_image", 160, 160, "https://mdn.mozillademos.org/files/251/Canvas_scale_image.png")}}</p>
+
+<h2 id="Slicing">Slicing</h2>
+
+<p>The third and last variant of the <code>drawImage()</code> method has eight parameters in addition to the image source. It lets us cut out a section of the source image, then scale and draw it on our canvas.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.drawImage", "drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)")}}</dt>
+ <dd>Given an <code>image</code>, this function takes the area of the source image specified by the rectangle whose top-left corner is (<code>sx</code>, <code>sy</code>) and whose width and height are <code>sWidth</code> and <code>sHeight</code> and draws it into the canvas, placing it on the canvas at (<code>dx</code>, <code>dy</code>) and scaling it to the size specified by <code>dWidth</code> and <code>dHeight</code>.</dd>
+</dl>
+
+<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/225/Canvas_drawimage.jpg" style="float: right; height: 290px; width: 300px;">To really understand what this does, it may help to look at the image to the right. The first four parameters define the location and size of the slice on the source image. The last four parameters define the rectangle into which to draw the image on the destination canvas.</p>
+
+<p>Slicing can be a useful tool when you want to make compositions. You could have all elements in a single image file and use this method to composite a complete drawing. For instance, if you want to make a chart you could have a PNG image containing all the necessary text in a single file and depending on your data could change the scale of your chart fairly easily. Another advantage is that you don't need to load every image individually, which can improve load performance.</p>
+
+<h3 id="Example_Framing_an_image">Example: Framing an image</h3>
+
+<p>In this example, we'll use the same rhino as in the previous example, but we'll slice out its head and composite it into a picture frame. The picture frame image is a 24-bit PNG which includes a drop shadow. Because 24-bit PNG images include a full 8-bit alpha channel, unlike GIF and 8-bit PNG images, it can be placed onto any background without worrying about a matte color.</p>
+
+<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;div style="display:none;"&gt;
+     &lt;img id="source" src="https://mdn.mozillademos.org/files/5397/rhino.jpg" width="300" height="227"&gt;
+     &lt;img id="frame" src="https://mdn.mozillademos.org/files/242/Canvas_picture_frame.png" width="132" height="150"&gt;
+   &lt;/div&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<pre class="brush: js">function draw() {
+  var canvas = document.getElementById('canvas');
+  var ctx = canvas.getContext('2d');
+
+  // Draw slice
+  ctx.drawImage(document.getElementById('source'),
+                33, 71, 104, 124, 21, 20, 87, 104);
+
+  // Draw frame
+  ctx.drawImage(document.getElementById('frame'), 0, 0);
+}</pre>
+
+<p>We took a different approach to loading the images this time. Instead of loading them by creating new {{domxref("HTMLImageElement")}} objects, we included them as {{HTMLElement("img")}} tags directly in our HTML source and retrieved the images from those. The images are hidden from output by setting the CSS property {{cssxref("display")}} to none for those images.</p>
+
+<p>{{EmbedLiveSample("Example_Framing_an_image", 160, 160, "https://mdn.mozillademos.org/files/226/Canvas_drawimage2.jpg")}}</p>
+
+<p>The script itself is very simple. Each {{HTMLElement("img")}} is assigned an ID attribute, which makes them easy to select using {{domxref("document.getElementById()")}}. We then simply use <code>drawImage()</code> to slice the rhino out of the first image and scale him onto the canvas, then draw the frame on top using a second <code>drawImage()</code> call.</p>
+
+<h2 id="Art_gallery_example">Art gallery example</h2>
+
+<p>In the final example of this chapter, we'll build a little art gallery. The gallery consists of a table containing several images. When the page is loaded, a {{HTMLElement("canvas")}}  element is inserted for each image and a frame is drawn around it.</p>
+
+<p>In this case, every image has a fixed width and height, as does the frame that's drawn around them. You could enhance the script so that it uses the image's width and height to make the frame fit perfectly around it.</p>
+
+<p>The code below should be self-explanatory. We loop through the {{domxref("document.images")}} container and add new canvas elements accordingly. Probably the only thing to note, for those not so familiar with the DOM, is the use of the {{domxref("Node.insertBefore")}} method. <code>insertBefore()</code> is a method of the parent node (a table cell) of the element (the image) before which we want to insert our new node (the canvas element).</p>
+
+<pre class="brush: html">&lt;html&gt;
+ &lt;body onload="draw();"&gt;
+     &lt;table&gt;
+      &lt;tr&gt;
+        &lt;td&gt;&lt;img src="https://mdn.mozillademos.org/files/5399/gallery_1.jpg"&gt;&lt;/td&gt;
+        &lt;td&gt;&lt;img src="https://mdn.mozillademos.org/files/5401/gallery_2.jpg"&gt;&lt;/td&gt;
+        &lt;td&gt;&lt;img src="https://mdn.mozillademos.org/files/5403/gallery_3.jpg"&gt;&lt;/td&gt;
+        &lt;td&gt;&lt;img src="https://mdn.mozillademos.org/files/5405/gallery_4.jpg"&gt;&lt;/td&gt;
+      &lt;/tr&gt;
+      &lt;tr&gt;
+        &lt;td&gt;&lt;img src="https://mdn.mozillademos.org/files/5407/gallery_5.jpg"&gt;&lt;/td&gt;
+        &lt;td&gt;&lt;img src="https://mdn.mozillademos.org/files/5409/gallery_6.jpg"&gt;&lt;/td&gt;
+        &lt;td&gt;&lt;img src="https://mdn.mozillademos.org/files/5411/gallery_7.jpg"&gt;&lt;/td&gt;
+        &lt;td&gt;&lt;img src="https://mdn.mozillademos.org/files/5413/gallery_8.jpg"&gt;&lt;/td&gt;
+      &lt;/tr&gt;
+     &lt;/table&gt;
+     &lt;img id="frame" src="https://mdn.mozillademos.org/files/242/Canvas_picture_frame.png" width="132" height="150"&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>And here's some CSS to make things look nice:</p>
+
+<pre class="brush: css">body {
+  background: 0 -100px repeat-x url(https://mdn.mozillademos.org/files/5415/bg_gallery.png) #4F191A;
+  margin: 10px;
+}
+
+img {
+  display: none;
+}
+
+table {
+  margin: 0 auto;
+}
+
+td {
+  padding: 15px;
+}
+</pre>
+
+<p>Tying it all together is the JavaScript to draw our framed images:</p>
+
+<pre class="brush: js">function draw() {
+
+  // Loop through all images
+  for (var i = 0; i &lt; document.images.length; i++) {
+
+    // Don't add a canvas for the frame image
+    if (document.images[i].getAttribute('id') != 'frame') {
+
+      // Create canvas element
+      canvas = document.createElement('canvas');
+      canvas.setAttribute('width', 132);
+      canvas.setAttribute('height', 150);
+
+      // Insert before the image
+      document.images[i].parentNode.insertBefore(canvas,document.images[i]);
+
+      ctx = canvas.getContext('2d');
+
+      // Draw image to canvas
+      ctx.drawImage(document.images[i], 15, 20);
+
+      // Add frame
+      ctx.drawImage(document.getElementById('frame'), 0, 0);
+    }
+  }
+}</pre>
+
+<p>{{EmbedLiveSample("Art_gallery_example", 725, 400)}}</p>
+
+<h2 id="Controlling_image_scaling_behavior">Controlling image scaling behavior</h2>
+
+<p>As mentioned previously, scaling images can result in fuzzy or blocky artifacts due to the scaling process. You can use the drawing context's {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}} property to control the use of image smoothing algorithms when scaling images within your context. By default, this is <code>true</code>, meaning images will be smoothed when scaled. You can disable this feature like this:</p>
+
+<pre class="brush: js">ctx.mozImageSmoothingEnabled = false;
+ctx.webkitImageSmoothingEnabled = false;
+ctx.msImageSmoothingEnabled = false;
+ctx.imageSmoothingEnabled = false;
+</pre>
+
+<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_text", "Web/API/Canvas_API/Tutorial/Transformations")}}</p>