1 files changed, 0 insertions, 112 deletions
diff --git a/files/pt-br/web/guide/html/canvas_tutorial/compositing/index.html b/files/pt-br/web/guide/html/canvas_tutorial/compositing/index.html
deleted file mode 100644
index 6d9ff5c33d..0000000000
--- a/files/pt-br/web/guide/html/canvas_tutorial/compositing/index.html
+++ /dev/null
@@ -1,112 +0,0 @@
----
-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>