initial commit

16 files changed, 3142 insertions, 0 deletions

diff --git a/files/pt-br/web/api/canvasrenderingcontext2d/arc/index.html b/files/pt-br/web/api/canvasrenderingcontext2d/arc/index.html
new file mode 100644
index 0000000000..763831af7d
--- /dev/null
+++ b/files/pt-br/web/api/canvasrenderingcontext2d/arc/index.html
@@ -0,0 +1,138 @@
+---
+title: CanvasRenderingContext2D.arc()
+slug: Web/API/CanvasRenderingContext2D/arc
+tags:
+  - API
+  - Arco
+  - Canvas
+  - CanvasRenderingContext2D
+  - Circulo
+  - Method
+  - Reference
+translation_of: Web/API/CanvasRenderingContext2D/arc
+---
+<div>{{APIRef}}</div>
+
+<p><span class="seoSummary">O método <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.arc()</code></strong> da API Canvas 2D adiciona um arco circular para o atual sub-caminhoa (<em>sub-path</em>).</span></p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox notranslate">void <em>ctx</em>.arc(<em>x</em>, <em>y</em>, <em>raio</em>, <em>anguloInicial</em>, <em>anguloFinal</em> [, <em>antiHorario</em>]);
+</pre>
+
+<p>O método <code>arc()</code> cria um arco circular centralizado em <code>(x, y)</code> com um <code>raio</code>. O caminho inicia-se no <code>anguloInicial</code>, e finaliza no <code>anguloFinal</code>, e é desenhado no sentido <code>antiHoario</code> (o padrão é no sentido horario).</p>
+
+<h3 id="Parâmetros">Parâmetros</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>A coordenada horizontal do centro do arco.</dd>
+ <dt><code>y</code></dt>
+ <dd>A coordenada vertical do centro do arco.</dd>
+ <dt><code>raio</code></dt>
+ <dd>O raio do arco. Deve ser um valor positivo.</dd>
+ <dt><code>anguloInicial</code></dt>
+ <dd>O ângulo em radianos em que o arco começa medido a partir do eixo x positivo.</dd>
+ <dt><code>anguloFinal</code></dt>
+ <dd>O ângulo em que o arco finaliza medido a partir do eixo x positivo.</dd>
+ <dt><code>antiHorario</code> {{optional_inline}}</dt>
+ <dd>Um {{jsxref("Boolean")}} opcional. Se <code>verdadeiro</code>, desenha o arco no sentido anti-horário entre os ângulos inicial e final. O padrão é <code>falso</code> (sentido horário).</dd>
+</dl>
+
+<h2 id="Examplos">Examplos</h2>
+
+<h3 id="Desenhando_um_círculo_completo">Desenhando um círculo completo</h3>
+
+<p>O exemplo desenha um círculo completo com o método <code>arc()</code>.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;canvas&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<p>O arco recebe 100 como uma coordenada x, e 75 como uma coordenada y e um raio de 50. para fazer um círculo completo, o arco inicia no ângulo 0 (0º) em radianos e finaliza em um ângulo de 2π radianos (360<strong>°</strong>).</p>
+
+<pre class="brush: js; highlight:[5] notranslate">const canvas = document.querySelector('canvas');
+const ctx = canvas.getContext('2d');
+
+ctx.beginPath();
+ctx.arc(100, 75, 50, 0, 2 * Math.PI);
+ctx.stroke();
+</pre>
+
+<h4 id="Resultado">Resultado</h4>
+
+<p>{{ EmbedLiveSample('Drawing_a_full_circle', 700, 180) }}</p>
+
+<h3 id="Diferentes_formas_demonstradas">Diferentes formas demonstradas</h3>
+
+<p>Este exemplo desenha diversas formas para mostrar o que é possível fazer com o método <code>arc()</code>.</p>
+
+<div class="hidden">
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;canvas width="150" height="200"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript_2">JavaScript</h4>
+</div>
+
+<pre class="brush: js notranslate">const canvas = document.querySelector('canvas');
+const ctx = canvas.getContext('2d');
+
+// Draw shapes
+for (let i = 0; i &lt;= 3; i++) {
+  for (let j = 0; j &lt;= 2; j++) {
+    ctx.beginPath();
+    let x             = 25 + j * 50;                 // coordenada x
+    let y             = 25 + i * 50;                 // coordenada y
+    let radius        = 20;                          // raio
+    let startAngle    = 0;                           // angulo inicial
+    let endAngle      = Math.PI + (Math.PI * j) / 2; // angulo final
+    let anticlockwise = i % 2 == 1;                  // sentido anti-horário
+
+    ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
+
+    if (i &gt; 1) {
+      ctx.fill();
+    } else {
+      ctx.stroke();
+    }
+  }
+}</pre>
+
+<h4 id="Resultado_2">Resultado</h4>
+
+<p>{{ EmbedLiveSample('Different_shapes_demonstrated', 160, 210, "https://mdn.mozillademos.org/files/204/Canvas_arc.png") }}</p>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-arc", "CanvasRenderingContext2D.arc")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_de_navegador">Compatibilidade de navegador</h2>
+
+<div class="hidden">A tabela de compatibilidade nesta página é gerada a partir de dados estruturados. Se você quiser constribuir com os dados, por favor acesse o link <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e nos envie um <em>pull request</em>.</div>
+
+<p>{{Compat("api.CanvasRenderingContext2D.arc")}}</p>
+
+<h2 id="Veja_mais">Veja mais</h2>
+
+<ul>
+ <li>A interface definindo este método: {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>Utilize {{domxref("CanvasRenderingContext2D.ellipse()")}} para desenhar um arco elíptico.</li>
+</ul>
diff --git a/files/pt-br/web/api/canvasrenderingcontext2d/arcto/index.html b/files/pt-br/web/api/canvasrenderingcontext2d/arcto/index.html
new file mode 100644
index 0000000000..c4fcdc1e69
--- /dev/null
+++ b/files/pt-br/web/api/canvasrenderingcontext2d/arcto/index.html
@@ -0,0 +1,147 @@
+---
+title: CanvasRenderingContext2D.arcTo()
+slug: Web/API/CanvasRenderingContext2D/arcTo
+translation_of: Web/API/CanvasRenderingContext2D/arcTo
+---
+<div>{{APIRef}}</div>
+
+<p> </p>
+
+<p>O método <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.arcTo()</code></strong> da API 2D do Canvas adiciona um arco ao caminho quando fornecemos seus pontos de controle e raio.</p>
+
+<p>O arco será parte de um círculo, nunca de uma elipse. Frequentemente é usado para fazer cantos arredoondados.</p>
+
+<p>Pode-se imaginar o arco como dois segmentos de reta, partindo de um ponto inicial (ponto mais recente definido no caminho) até o primeiro ponto de controle e, em seguida, do primeiro ponto de controle até o segundo ponto de controle. Esses dois segmentos de reta formam um angulo, com o primeiro ponto de controle sendo a curva. Usando arcTo, o ângulo será formado de acordo com o raio fornecido.</p>
+
+<p>O arco é tangencial ao dois segmentos de reta, e por vezes, pode produzir resultados inesperados se, por exemplo, o raio fornecido for maior que a distância entre o ponto inicial e o primeiro ponto de controle.</p>
+
+<p>Se o raio fornecido não atingir o ponto inicial (ponto mais recente definido no caminho), o ponto inicial é conectado ao arco por um segmento de reta.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox">void <var><em>ctx</em>.arcTo(x1, y1, x2, y2, radius);</var>
+</pre>
+
+<h3 id="Parâmetros">Parâmetros</h3>
+
+<dl>
+ <dt><code>x1</code></dt>
+ <dd>coordenada do eixo x para o primeiro ponto de controle.</dd>
+ <dt><code>y1</code></dt>
+ <dd>coordenada do eixo y para o primeiro ponto de controle.</dd>
+ <dt><code>x2</code></dt>
+ <dd>coordenada do eixo x para o segundo ponto de controle.</dd>
+ <dt><code>y2</code></dt>
+ <dd>coordenada do eixo y para o segundo ponto de controle.</dd>
+ <dt><code>radius</code></dt>
+ <dd>O raio do arco.</dd>
+</dl>
+
+<h2 id="Exemplos">Exemplos</h2>
+
+<h3 id="Using_the_arc_method" name="Using_the_arc_method">Usando o método <code>arcTo</code> </h3>
+
+<p>Esse é um trecho simples de código que desenha um arco. O ponto de partida é azul e os pontos de controls são vermelhos.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[6]">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.beginPath();
+ctx.moveTo(150, 20);
+ctx.arcTo(150, 100, 50, 20, 30);
+ctx.lineTo(50, 20)
+ctx.stroke();
+
+ctx.fillStyle = 'blue';
+// starting point
+ctx.fillRect(150, 20, 10, 10);
+
+ctx.fillStyle = 'red';
+// control point one
+ctx.fillRect(150, 100, 10, 10);
+// control point two
+ctx.fillRect(50, 20, 10, 10);
+</pre>
+
+<p>{{ EmbedLiveSample('Using_the_arc_method', 315, 165) }}</p>
+
+<h3 id="Trying_the_arcTo_parameters" name="Trying_the_arcTo_parameters">Treinando os parâmetros do  <code>arcTo</code> </h3>
+
+<p>Altere o código abaixo e veja suas alterações atualizadas na tela:</p>
+
+<div style="display: none;">
+<pre class="brush: html">&lt;canvas id="canvas" class="playable-canvas" height="200" width="400"&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.beginPath();
+ctx.moveTo(150, 20);
+ctx.arcTo(150,100,50,100,20);
+ctx.stroke();&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('Trying_the_arcTo_parameters', 700, 360) }}</p>
+
+<h2 id="Espeficicações">Espeficicações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-arcto", "CanvasRenderingContext2D.arcTo")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade">Compatibilidade</h2>
+
+<div class="hidden">A tabela de compatibilidade desta página é gerada a partir de dados estruturados. Caso queira contribuir, confira <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e nos mande um pull request.</div>
+
+<p>{{Compat("api.CanvasRenderingContext2D.arcTo")}}</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>The interface defining it, {{domxref("CanvasRenderingContext2D")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/canvasrenderingcontext2d/beginpath/index.html b/files/pt-br/web/api/canvasrenderingcontext2d/beginpath/index.html
new file mode 100644
index 0000000000..b3ad87ff61
--- /dev/null
+++ b/files/pt-br/web/api/canvasrenderingcontext2d/beginpath/index.html
@@ -0,0 +1,184 @@
+---
+title: CanvasRenderingContext2D.beginPath()
+slug: Web/API/CanvasRenderingContext2D/beginPath
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - Referencia
+  - metodo
+translation_of: Web/API/CanvasRenderingContext2D/beginPath
+---
+<div>{{APIRef}}</div>
+
+<p>O método <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.beginPath()</code></strong> da API Canvas 2D  inicia um novo caminho (<em>path</em>), esvaziando a lista de sub-caminhos (<em>sub-paths</em>). Use esse método quando você quiser criar um novo <em>path</em>.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox">void <var><em>ctx</em>.beginPath();</var>
+</pre>
+
+<h2 id="Exemplos">Exemplos</h2>
+
+<h3 id="Usando_o_método_beginPath">Usando o método <code>beginPath</code></h3>
+
+<p>Isto é só um simples trecho de código que usa o método <code>fillRect</code>.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[5,12]">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+// Primeiro path
+ctx.beginPath();
+ctx.strokeStyle = 'blue';
+ctx.moveTo(20, 20);
+ctx.lineTo(200, 20);
+ctx.stroke();
+
+// Segundo path
+ctx.beginPath();
+ctx.strokeStyle = 'green';
+ctx.moveTo(20, 20);
+ctx.lineTo(120, 120);
+ctx.stroke();
+</pre>
+
+<p>Edite o código abaixo e veja as alterações instantâneas no canvas:</p>
+
+<div style="display: none;">
+<h6 id="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" style="height:200px"&gt;
+// First path
+ctx.beginPath();
+ctx.strokeStyle = 'blue';
+ctx.moveTo(20,20);
+ctx.lineTo(200,20);
+ctx.stroke();
+
+// Second path
+ctx.beginPath();
+ctx.strokeStyle = 'green';
+ctx.moveTo(20,20);
+ctx.lineTo(120, 120);
+ctx.stroke();&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, 460) }}</p>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-beginpath", "CanvasRenderingContext2D.beginPath")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_em_Navegadores">Compatibilidade em Navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome para Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>A definição da interface {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.closePath()")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/canvasrenderingcontext2d/clearrect/index.html b/files/pt-br/web/api/canvasrenderingcontext2d/clearrect/index.html
new file mode 100644
index 0000000000..ec1be69b57
--- /dev/null
+++ b/files/pt-br/web/api/canvasrenderingcontext2d/clearrect/index.html
@@ -0,0 +1,195 @@
+---
+title: CanvasRenderingContext2D.clearRect()
+slug: Web/API/CanvasRenderingContext2D/clearRect
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - Referencia
+  - metodo
+translation_of: Web/API/CanvasRenderingContext2D/clearRect
+---
+<div>{{APIRef}}</div>
+
+<p>O método <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.clearRect()</code></strong> da API Canvas 2D limpa todos os pixels de um retângulo definido na posição <em>(x, y)</em> e tamanho (<em>width</em> (largura)<em>, height </em>(altura)) para uma cor preta transparente, apagando algum conteúdo anterior.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox">void <var><em>ctx</em>.clearRect(x, y, width, height);</var>
+</pre>
+
+<h3 id="Parâmetros">Parâmetros</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>O valor da coordenada x para o ponto inicial do retângulo.</dd>
+ <dt><code>y</code></dt>
+ <dd>O valor da coordenada y para o ponto inicial do retângulo.</dd>
+ <dt><code>width</code></dt>
+ <dd>A largura do retângulo.</dd>
+ <dt><code>height</code></dt>
+ <dd>A altura do retângulo.</dd>
+</dl>
+
+<h2 id="Notas_de_uso">Notas de uso</h2>
+
+<p>Um problema comum com <code>clearRect</code> que pode acontecer, é que pode não funcionar corretamente, caso não seja usada alguma <a href="https://developer.mozilla.org/pt_BR/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes#Drawing_paths">propriedade de <em>path</em></a>. Não esqueça de usar {{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}} antes de começar um novo frame depois de chamar <code>clearRect</code>.</p>
+
+<h2 id="Exemplos">Exemplos</h2>
+
+<h3 id="Usando_o_método_clearRect">Usando o método <code>clearRect</code></h3>
+
+<p>Isto é só um simples trecho de código que usa o método <code>clearRect</code>.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[11]">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.beginPath();
+ctx.moveTo(20, 20);
+ctx.lineTo(200, 20);
+ctx.lineTo(120, 120);
+ctx.closePath(); // draws last line of the triangle
+ctx.stroke();
+
+ctx.clearRect(10, 10, 100, 100);
+
+// clear the whole canvas
+// ctx.clearRect(0, 0, canvas.width, canvas.height);
+</pre>
+
+<p>Edite o código abaixo e veja as alterações instantâneas no canvas:</p>
+
+<div style="display: none;">
+<h6 id="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" style="height:140px;"&gt;
+ctx.beginPath();
+ctx.moveTo(20,20);
+ctx.lineTo(200,20);
+ctx.lineTo(120,120);
+ctx.closePath(); // draws last line of the triangle
+ctx.stroke();
+
+ctx.clearRect(10, 10, 100, 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, 400) }}</p>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-clearrect", "CanvasRenderingContext2D.clearRect")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_em_Navegadores">Compatibilidade em Navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome para Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>A definição da interface {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.fillRect()")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.strokeRect()")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/canvasrenderingcontext2d/clip/index.html b/files/pt-br/web/api/canvasrenderingcontext2d/clip/index.html
new file mode 100644
index 0000000000..780ba3cd58
--- /dev/null
+++ b/files/pt-br/web/api/canvasrenderingcontext2d/clip/index.html
@@ -0,0 +1,195 @@
+---
+title: CanvasRenderingContext2D.clip()
+slug: Web/API/CanvasRenderingContext2D/clip
+translation_of: Web/API/CanvasRenderingContext2D/clip
+---
+<div>{{APIRef}}</div>
+
+<p>O método<code><strong> CanvasRenderingContext2D</strong></code><strong><code>.clip()</code></strong> da API do Canvas 2D transforma o caminho atualmente construido em um caminho atual de recorte.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox">void <var><em>ctx</em>.clip();</var>
+void <var><em>ctx</em>.clip(fillRule);</var>
+void <var><em>ctx</em>.clip(path, fillRule);</var>
+</pre>
+
+<h3 id="Parâmetros">Parâmetros</h3>
+
+<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/209/Canvas_clipping_path.png" style="float: right;"></p>
+
+<dl>
+ <dt><code>fillRule</code></dt>
+ <dd>O algoritmo pelo qual determina se um ponto esta dentro de um caminho ou fora de um caminho.<br>
+ Valores Possíveis:
+ <ul>
+  <li><code><strong>"nonzero</strong></code>": A <a href="http://en.wikipedia.org/wiki/Nonzero-rule">regra contorno diferente de zero</a>, que é a regra padrão.</li>
+  <li><code><strong>"evenodd"</strong></code>: A <a href="http://en.wikipedia.org/wiki/Even%E2%80%93odd_rule">regra do contorno par ou ímpar</a>.</li>
+ </ul>
+ </dd>
+ <dt><code>path</code></dt>
+ <dd>Um {{domxref("Path2D")}} caminho para recorte.</dd>
+</dl>
+
+<h2 id="Exemplos">Exemplos</h2>
+
+<h3 id="Usando_do_método_de_corte">Usando do método de corte</h3>
+
+<p>Isso é só um simples fragmento de código que usa o método de corte para criar uma região de recorte.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[6]">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+// Cria uma região de recorte
+ctx.arc(100, 100, 75, 0, Math.PI*2, false);
+ctx.clip();
+
+ctx.fillRect(0, 0, 100,100);
+</pre>
+
+<p>Edite o código abaixo e veja suas mudanças atualizadas ao vivo no canvas:</p>
+
+<div style="display: none;">
+<h6 id="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.arc(100, 100, 75, 0, Math.PI*2, false);
+ctx.clip();
+ctx.fillRect(0, 0, 100,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>
+
+<div class="note">
+<p><strong>Nota</strong>: Tenha consciência de que o <code>clip()</code> só funciona com formas adicionadas ao caminho; ele não funciona com uma forma primitiva, como retângulos criados com {{domxref("CanvasRenderingContext2D.fillRect()","fillRect()")}}. Nesse caso você teria que usar {{domxref("CanvasRenderingContext2D.rect()","rect()")}} para desenhar um caminho de forma retângular para ser recortado.</p>
+</div>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-clip", "CanvasRenderingContext2D.clip")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_com_os_navegadores">Compatibilidade com os navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Suporte Básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Parametro do Caminho</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatGeckoDesktop(31) }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome para Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Suporte Básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Parametro do Caminho</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatGeckoMobile(31) }}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_também">Ver também</h2>
+
+<ul>
+ <li>A interface como defini-la, {{domxref("CanvasRenderingContext2D")}}.</li>
+</ul>
diff --git a/files/pt-br/web/api/canvasrenderingcontext2d/closepath/index.html b/files/pt-br/web/api/canvasrenderingcontext2d/closepath/index.html
new file mode 100644
index 0000000000..62c72086f7
--- /dev/null
+++ b/files/pt-br/web/api/canvasrenderingcontext2d/closepath/index.html
@@ -0,0 +1,170 @@
+---
+title: CanvasRenderingContext2D.closePath()
+slug: Web/API/CanvasRenderingContext2D/closePath
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - Referencia
+  - metodo
+translation_of: Web/API/CanvasRenderingContext2D/closePath
+---
+<div>{{APIRef}}</div>
+
+<p>O método <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.closePath()</code></strong> da API Canvas 2D faz o ponto da caneta (<em>pen</em>) mover-se de volta para o início do sub-caminho (<em>sub-path</em>) atual. Tenta adicionar uma nova linha (mas não a desenha realmente) que conecta o ponto atual até o ponto inicial. Se a região (<em>shape</em>) já estiver fechada, ou tem somente um ponto na tela, esta função não funciona.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox">void <var><em>ctx</em>.closePath();</var>
+</pre>
+
+<h2 id="Exemplos">Exemplos</h2>
+
+<h3 id="Usando_o_método_beginPath">Usando o método <code>beginPath</code></h3>
+
+<p>Isto é só um simples trecho de código que usa o método <code>fillRect</code>.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[8]">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.beginPath();
+ctx.moveTo(20, 20);
+ctx.lineTo(200, 20);
+ctx.lineTo(120, 120);
+ctx.closePath(); // desenha a última linha do triângulo
+ctx.stroke();
+</pre>
+
+<p>Edite o código abaixo e veja as alterações instantâneas no canvas:</p>
+
+<div style="display: none;">
+<h6 id="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" style="height:140px;"&gt;
+ctx.beginPath();
+ctx.moveTo(20,20);
+ctx.lineTo(200,20);
+ctx.lineTo(120,120);
+ctx.closePath(); // draws last line of the triangle
+ctx.stroke();&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, 400) }}</p>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-closepath", "CanvasRenderingContext2D.closePath")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_em_Navegadores">Compatibilidade em Navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome para Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>A definição da interface {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.beginPath()")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/canvasrenderingcontext2d/fill/index.html b/files/pt-br/web/api/canvasrenderingcontext2d/fill/index.html
new file mode 100644
index 0000000000..0c0c1dd890
--- /dev/null
+++ b/files/pt-br/web/api/canvasrenderingcontext2d/fill/index.html
@@ -0,0 +1,196 @@
+---
+title: CanvasRenderingContext2D.fill()
+slug: Web/API/CanvasRenderingContext2D/fill
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - Referencia
+  - metodo
+translation_of: Web/API/CanvasRenderingContext2D/fill
+---
+<div>{{APIRef}}</div>
+
+<p>O método <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.fill()</code></strong> da API Canvas 2D preenche um dado <em>path</em> ou o <em>path</em> atual com o estilo atual de preenchimento usando uma regra de controle diferente de zero, ou uma regra par-ímpar.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">void <var><em>ctx</em>.fill();</var>
+void <var><em>ctx</em>.fill(fillRule);</var>
+void <var><em>ctx</em>.fill(path, fillRule);</var>
+</pre>
+
+<h3 id="Parâmetros">Parâmetros</h3>
+
+<dl>
+ <dt><code>fillRule</code></dt>
+ <dd>O algoritmo que determina se um ponto está do lado de dentro do path ou do lado fora do path.<br>
+ Possíveis valores:
+ <ul>
+  <li><code><strong>"nonzero</strong></code>": A <a href="http://en.wikipedia.org/wiki/Nonzero-rule">regra de controle não-zero</a>, que é a regra padrão.</li>
+  <li><code><strong>"evenodd"</strong></code>: A <a href="http://en.wikipedia.org/wiki/Even%E2%80%93odd_rule">regra de controle par-ímpar</a>.</li>
+ </ul>
+ </dd>
+ <dt><code>path</code></dt>
+ <dd>Um <em>path</em> de <a class="new" href="https://developer.mozilla.org/pt-BR/docs/Web/API/Path2D" title="The documentation about this has not yet been written; please consider contributing!"><code>Path2D</code></a> para preenchimento.</dd>
+</dl>
+
+<h2 id="Exemplos">Exemplos</h2>
+
+<h3 id="Usando_o_método_fill">Usando o método <code>fill</code></h3>
+
+<p>Isto é só um simples trecho de código que usa o métod <code>fill</code> para contornar um <em>path</em>.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[4]">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+ctx.rect(10, 10, 100, 100);
+ctx.fill();
+</pre>
+
+<p>Edite o código abaixo e veja as alterações instantâneas no canvas:</p>
+
+<div style="display: none;">
+<h6 id="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.rect(10, 10, 100, 100);
+ctx.fill();&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="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fill", "CanvasRenderingContext2D.fill")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_em_Navegadores">Compatibilidade em Navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>Suporte para o parâmetro<em> path</em></td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoDesktop(31) }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>Suporte para o parâmetro<em> path</em></td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoMobile(31) }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>A definição da interface {{domxref("CanvasRenderingContext2D")}}.</li>
+</ul>
diff --git a/files/pt-br/web/api/canvasrenderingcontext2d/fillrect/index.html b/files/pt-br/web/api/canvasrenderingcontext2d/fillrect/index.html
new file mode 100644
index 0000000000..44b57ca77a
--- /dev/null
+++ b/files/pt-br/web/api/canvasrenderingcontext2d/fillrect/index.html
@@ -0,0 +1,179 @@
+---
+title: CanvasRenderingContext2D.fillRect()
+slug: Web/API/CanvasRenderingContext2D/fillRect
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - Referencia
+  - metodo
+translation_of: Web/API/CanvasRenderingContext2D/fillRect
+---
+<div>{{APIRef}}</div>
+
+<p>O método <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.fillRect()</code></strong> da API Canvas 2D desenha um retângulo preenchido na posição <em>(x, y)</em>, no qual o tamanho é determinado pela <em>width</em> (largura) e pela <em>height</em> (altura), e cujo o estilo é determinado pelo atributo <code>fillStyle</code>.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox">void <var><em>ctx</em>.fillRect(x, y, width, height);</var>
+</pre>
+
+<h3 id="Parâmetros">Parâmetros</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>O valor da coordenada x para o ponto inicial do retângulo.</dd>
+ <dt><code>y</code></dt>
+ <dd>O valor da coordenada y para o ponto inicial do retângulo.</dd>
+ <dt><code>width</code></dt>
+ <dd>A largura do retângulo.</dd>
+ <dt><code>height</code></dt>
+ <dd>A altura do retângulo.</dd>
+</dl>
+
+<h2 id="Exemplos">Exemplos</h2>
+
+<h3 id="Usando_o_método_fillRect">Usando o método <code>fillRect</code></h3>
+
+<p>Isto é só um simples trecho de código que usa o método <code>fillRect</code>.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[4]">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+ctx.fillStyle = 'green';
+ctx.fillRect(10, 10, 100, 100);
+
+// preenche todo o canvas
+// ctx.fillRect(0, 0, canvas.width, canvas.height);
+</pre>
+
+<p>Edite o código abaixo e veja as alterações instantâneas no canvas:</p>
+
+<div style="display: none;">
+<h6 id="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.fillStyle = "green";
+ctx.fillRect(10, 10, 100, 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="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fillrect", "CanvasRenderingContext2D.fillRect")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_em_Navegadores">Compatibilidade em Navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome para Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>A definição da interface {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.fillStyle")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.clearRect()")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.strokeRect()")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/canvasrenderingcontext2d/fillstyle/index.html b/files/pt-br/web/api/canvasrenderingcontext2d/fillstyle/index.html
new file mode 100644
index 0000000000..37dd9ba936
--- /dev/null
+++ b/files/pt-br/web/api/canvasrenderingcontext2d/fillstyle/index.html
@@ -0,0 +1,213 @@
+---
+title: CanvasRenderingContext2D.fillStyle
+slug: Web/API/CanvasRenderingContext2D/fillStyle
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - Propriedade
+  - Referencia
+translation_of: Web/API/CanvasRenderingContext2D/fillStyle
+---
+<div>{{APIRef}}</div>
+
+<p>A propriedade <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.fillStyle</code></strong> da API do Canvas 2D <span id="result_box" lang="pt"><span>especifica a cor ou o estilo para usar regiões internas</span></span>. O valor inicial é <code>#000</code> (preto).</p>
+
+<p>Veja também o capítulo <a href="https://developer.mozilla.org/pt-BR/docs/Web/Guide/HTML/Canvas_tutorial/Applying_styles_and_colors">Aplicando estilos e cores</a> no <a href="https://developer.mozilla.org/pt-BR/docs/Web/Guide/HTML/Canvas_tutorial">Canvas Tutorial</a>.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox"><var><em>ctx</em>.fillStyle = color;
+</var><var><em>ctx</em>.fillStyle = gradient;
+</var><var><em>ctx</em>.fillStyle = pattern;</var>
+</pre>
+
+<h3 id="Opções">Opções</h3>
+
+<dl>
+ <dt><code>color</code></dt>
+ <dd>Um {{domxref("DOMString")}} passado como um valor de CSS {{cssxref("&lt;color&gt;")}}.</dd>
+ <dt><code>gradient</code></dt>
+ <dd>Um objeto {{domxref("CanvasGradient")}} (um gradiente linear ou radial).</dd>
+ <dt><code>pattern</code></dt>
+ <dd>Um objeto {{domxref("CanvasPattern")}} (uma imagem repetitiva).</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Using_the_fillStyle_property" name="Using_the_fillStyle_property">Usando a propriedade <code>fillStyle</code> para definir uma cor diferente</h3>
+
+<p><span id="result_box" lang="pt"><span class="alt-edited">Isto é apenas um trecho de código simples usando a propriedade</span></span> <code>fillStyle</code> para definir uma cor diferente.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.fillStyle = 'blue';
+ctx.fillRect(10, 10, 100, 100);
+</pre>
+
+<p><span id="result_box" lang="pt"><span>Edite o código abaixo e veja as alterações atualizadas na tela</span></span>:</p>
+
+<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.fillStyle = 'blue';
+ctx.fillRect(10, 10, 100, 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>
+
+<h3 id="Um_exemplo_de_fillStyle_com_laços_for">Um exemplo de <code>fillStyle</code> com laços <code>for</code></h3>
+
+<p>Neste exemplo, nós usamos dois laços <code>for</code> para desenhar uma grade de retângulos, cada um com uma cor diferente. <span id="result_box" lang="pt"><span>A imagem resultante deve parecer algo como uma captura de tela.</span> <span>Não há nada de espetacular acontecendo aqui.</span> <span>Usamos as duas variáveis</span></span> <code>i</code> é <code>j</code> <span id="result_box" lang="pt"><span>para gerar uma cor RGB exclusiva para cada quadrado, e apenas modificamos os valores vermelho e verde.</span> <span>O canal azul tem um valor fixo.</span> <span>Ao modificar os canais, você pode gerar todos os tipos de paletas.</span> <span>Ao aumentar os valores, você pode conseguir algo que pareça com as paletas de cores que o Photoshop usa.</span></span></p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+</div>
+
+<pre class="brush: js">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>
+
+<p><span class="short_text" id="result_box" lang="pt"><span>O resultado fica assim</span></span>:</p>
+
+<p>{{EmbedLiveSample("Um_exemplo_de_fillStyle_com_laços_for", 160, 160, "https://mdn.mozillademos.org/files/5417/Canvas_fillstyle.png")}}</p>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fillstyle", "CanvasRenderingContext2D.fillStyle")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibibidade_com_o_Navegador">Compatibibidade com o Navegador</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Suporte Básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome para Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Suporte Básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Notas_específicas_doWebKitBlink"><span class="short_text" id="result_box" lang="pt"><span>Notas específicas do</span></span>WebKit/Blink</h2>
+
+<ul>
+ <li>Nos navegadores baseados em WebKit e Blink, <span class="short_text" id="result_box" lang="pt"><span>além da propriedade </span></span><code>fillStyle</code><span class="short_text" lang="pt"><span>, o método não padrão e obsoleto</span></span> <code>ctx.setFillColor()</code> <span class="short_text" id="result_box" lang="pt"><span>é implementado</span></span>.
+
+  <pre class="brush: js">setFillColor(color, optional alpha);
+setFillColor(grayLevel, optional alpha);
+setFillColor(r, g, b, a);
+setFillColor(c, m, y, k, a);
+</pre>
+ </li>
+</ul>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><span class="short_text" id="result_box" lang="pt"><span>A interface que o define</span></span>, {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasGradient")}}</li>
+ <li>{{domxref("CanvasPattern")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/canvasrenderingcontext2d/index.html b/files/pt-br/web/api/canvasrenderingcontext2d/index.html
new file mode 100644
index 0000000000..38ec19a3e3
--- /dev/null
+++ b/files/pt-br/web/api/canvasrenderingcontext2d/index.html
@@ -0,0 +1,450 @@
+---
+title: 'Canvas: Contexto de Renderização em "2D"'
+slug: Web/API/CanvasRenderingContext2D
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - Games
+  - Graphics
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+translation_of: Web/API/CanvasRenderingContext2D
+---
+<div>{{APIRef}}</div>
+
+<div>A interface <strong>Canvas Renderização de Contexto de duas Dimensões (</strong> <strong>CanvasRenderingContext2D</strong>) é usada para desenhar retangulos, textos, imagens e outros objetos na tag ou elemento canvas. Fornece o contexto de renderização em 2D para a superfície de desenho do elemento  {{ HTMLElement("canvas") }}.</div>
+
+<div></div>
+
+<p>Para obter um objeto desta interface, chama-se  {{domxref("HTMLCanvasElement.getContext()", "getContext()")}} em um <code>elemento &lt;canvas&gt;</code>, adicionando "2d" como argumento, veja o exemplo abaixo:</p>
+
+<pre class="brush: js notranslate">var canvas = document.getElementById('meuCanvas'); // em seu HTML esse elemento se parece com &lt;canvas id="meuCanvas"&gt;&lt;/canvas&gt;
+var ctx = canvas.getContext('2d');
+</pre>
+
+<p>Agora que você possui o contexto de renderização 2D, você pode desenhar dentro deste canvas. Por exemplo:</p>
+
+<pre class="brush: js notranslate">ctx.fillStyle = "rgb(200,0,0)"; // define a cor de preenchimento do retângulo
+ctx.fillRect(10, 10, 55, 50);   // desenha o retângulo na posição 10, 10 com 55 pixels de largura e uma altura de 50
+</pre>
+
+<p>Veja as propriedades e métodos no menu lateral e abaixo. O <a href="/en-US/docs/Web/API/Canvas_API/Tutorial" title="Canvas tutorial">tutorial canvas</a> tem mais informações, exemplos e recursos.</p>
+
+<h2 id="Desenhando_Retângulos">Desenhando Retângulos</h2>
+
+<p>Existem três métodos que imediatamente desenham retângulos ao canvas.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.clearRect()")}}</dt>
+ <dd>Determina todos os pixels no retângulo definido, pelo ponto inicial (<em>x, y</em>) e tamanho (<em>largura</em>, <em>altura</em>) para preto transparente, apagando qualquer conteúdo desenhado anteriormente.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.fillRect()")}}</dt>
+ <dd>Desenha um retângulo preenchido na posição (<em>x, y</em>) com tamanho definido pela <em>largura </em>e <em>altura</em></dd>
+ <dt>{{domxref("CanvasRenderingContext2D.strokeRect()")}}</dt>
+ <dd>Pinta um retângulo o qual possui um ponto inicial em <em>(x, y)</em> e possui um<em> w</em> <em>width</em>(largura) e um <em>h</em> <em>height</em>(altura) dentro da tela(canvas), usando o estilo de traçado(stroke) atual.</dd>
+</dl>
+
+<h2 id="Desenhando_Textos">Desenhando Textos</h2>
+
+<p>Os métodos seguintes são fornecidos para desenhar texto. Veja também o objeto {{domxref("TextMetrics")}} para propriedades de texto.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.fillText()")}}</dt>
+ <dd>Desenha(preenche) um texto fornecido, em uma posição fornecida(<em>x,y</em>).</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.strokeText()")}}</dt>
+ <dd>Desenha(traçados) um texto fornecido, em uma posição fornecida(<em>x,y</em>).</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.measureText()")}}</dt>
+ <dd>Retorna um objeto {{domxref("TextMetrics")}} .</dd>
+</dl>
+
+<h2 id="Estilos_de_linha">Estilos de linha</h2>
+
+<p>Os seguintes métodos e propriedades, controlam como as linhas são desenhadas.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.lineWidth")}}</dt>
+ <dd>Largura das linhas. Padrão: <code>1.0</code></dd>
+ <dt>{{domxref("CanvasRenderingContext2D.lineCap")}}</dt>
+ <dd>Tipos de pontas no final das linhas. Valores possíveis: <code>butt</code> (padrão), <code>round</code>, <code>square</code>.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.lineJoin")}}</dt>
+ <dd>Define o tipo de encontro entre duas linhas. Possíveis valores: <code>round</code>, <code>bevel</code>, <code>miter</code> (default).</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.miterLimit")}}</dt>
+ <dd>Relação do limite de esquadria. Padrão: <code>10</code>.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.getLineDash()")}}</dt>
+ <dd>Retorna a matriz de padrão de traço de linha atual contendo um número par de números não negativos.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.setLineDash()")}}</dt>
+ <dd>Define o padrão de traço de linha atual.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.lineDashOffset")}}</dt>
+ <dd>Especifica onde iniciar uma matriz de traços em uma linha.</dd>
+</dl>
+
+<h2 id="Estilos_de_textos">Estilos de textos</h2>
+
+<p>As propriedades abaixo controlam a estilização do texto a ser apresentado:</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.font")}}</dt>
+ <dd>Configuração da fonte. Valor padrão: <code>10px sans-serif</code>.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.textAlign")}}</dt>
+ <dd>Alinhamento do texto. Possíveis valores: <code>start</code> (padrão), <code>end</code>, <code>left</code>, <code>right</code> or <code>center</code>.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.textBaseline")}}</dt>
+ <dd>Configuração de alinhamento da linha de base (Baseline). Possíveis valores: <code>top</code>, <code>hanging</code>, <code>middle</code>, <code>alphabetic</code> (padrão), <code>ideographic</code>, <code>bottom</code>.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.direction")}}</dt>
+ <dd>Direção do texto. Possívels valores: <code>ltr, rtl</code>, <code>inherit</code> (padrão).</dd>
+</dl>
+
+<h2 id="Estilos_de_preenchimento_e_traço">Estilos de preenchimento e traço</h2>
+
+<p>O estilo de preenchimento é usado para cores e estilos dentro das formas e o estilo de traço é usado para as linhas ao redor das formas.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.fillStyle")}}</dt>
+ <dd>Cor ou estilo para usar formas internas. Padrão <code>#000</code> (preto).</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.strokeStyle")}}</dt>
+ <dd>Cor ou estilo a ser usado para as linhas em torno das formas. Padrão: <code>#000</code> (preto).</dd>
+</dl>
+
+<h2 id="Gradientes_e_padrões">Gradientes e padrões</h2>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.createLinearGradient()")}}</dt>
+ <dd>Cria um gradiente linear ao longo da linha fornecida pelas coordenadas representadas pelos parâmetros.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.createRadialGradient()")}}</dt>
+ <dd>Cria um gradiente radial dado pelas coordenadas dos dois círculos representados pelos parâmetros.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.createPattern()")}}</dt>
+ <dd>Cria um padrão usando a imagem especificada (uma {{domxref("CanvasImageSource")}}). Ele repete a fonte nas direções especificadas pelo argumento de repetição. Este método retorna um {{domxref("CanvasPattern")}}.</dd>
+</dl>
+
+<h2 id="Sombras">Sombras</h2>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.shadowBlur")}}.</dt>
+ <dd>Especifica o efeito de desfoque. Padrão: <code>0</code>.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.shadowColor")}}</dt>
+ <dd>Cor da sombra. Padrão: fully-transparent black (preto totalmente transparente).</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.shadowOffsetX")}}</dt>
+ <dd>Distância horizontal em que a sombra será deslocada. Padrão: <code>0</code>.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.shadowOffsetY")}}</dt>
+ <dd>Distância vertical em que a sombra será deslocada. Padrão: <code>0</code>.</dd>
+</dl>
+
+<h2 id="Caminhos">Caminhos</h2>
+
+<p>Os seguintes métodos podem ser usados para manipular caminhos de desenhos.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.beginPath()")}}</dt>
+ <dd>Inicia um novo caminho esvaziando a lista de subcaminhos. Chame esse método quando você quiser criar um novo caminho.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.closePath()")}}</dt>
+ <dd>Faz com que a ponta da caneta se mova de volta para o início do subcaminho atual. Ele tenta traçar uma linha reta do ponto atual ao início. Se o desenho já foi fechado ou tem apenas um ponto, este método não faz nada.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.moveTo()")}}</dt>
+ <dd>Move o ponto inicial de um novo subcaminho para as coordenadas (x, y).</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.lineTo()")}}</dt>
+ <dd>Conecta o último ponto do caminho atual com as coordenadas (x, y) com linha reta.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.bezierCurveTo()")}}</dt>
+ <dd>Adiciona uma curva de Bézier ao caminho atual.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.quadraticCurveTo()")}}</dt>
+ <dd>Adiciona uma curva de Bézier quadrática ao caminho atual.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.arc()")}}</dt>
+ <dd>Adiciona um arco circular ao caminho atual.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.arcTo()")}}</dt>
+ <dd>Adiciona um arco no caminho atual com os pontos de controle e raio fornecidos, conectado ao ponto anterior por uma linha reta.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.ellipse()")}}</dt>
+ <dd>Adiciona um arco elíptico ao caminho atual.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.rect()")}}</dt>
+ <dd>Cria um caminho de retângulo na posição (x, y) com o tamanho determinado por <em>width</em> e <em>height</em>.</dd>
+</dl>
+
+<h2 id="Drawing_paths">Drawing paths</h2>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.fill()")}}</dt>
+ <dd>Fills the subpaths with the current fill style.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.stroke()")}}</dt>
+ <dd>Strokes the subpaths with the current stroke style.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.drawFocusIfNeeded()")}}</dt>
+ <dd>If a given element is focused, this method draws a focus ring around the current path.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.scrollPathIntoView()")}}</dt>
+ <dd>Scrolls the current path or a given path into the view.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.clip()")}}</dt>
+ <dd>Creates a clipping path from the current sub-paths. Everything drawn after <code>clip()</code> is called appears inside the clipping path only. For an example, see <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing" title="Clipping paths">Clipping paths</a> in the Canvas tutorial.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.isPointInPath()")}}</dt>
+ <dd>Reports whether or not the specified point is contained in the current path.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.isPointInStroke()")}}</dt>
+ <dd>Reports whether or not the specified point is inside the area contained by the stroking of a path.</dd>
+</dl>
+
+<h2 id="Transformações">Transformações</h2>
+
+<p>Objects in the <code>CanvasRenderingContext2D</code> rendering context have a current transformation matrix and methods to manipulate it. The transformation matrix is applied when creating the current default path, painting text, shapes and {{domxref("Path2D")}} objects. The methods listed below remain for historical and compatibility reasons as {{domxref("SVGMatrix")}} objects are used in most parts of the API nowadays and will be used in the future instead.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.currentTransform")}}</dt>
+ <dd>Current transformation matrix ({{domxref("SVGMatrix")}} object).</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.rotate()")}}</dt>
+ <dd>Adds a rotation to the transformation matrix. The angle argument represents a clockwise rotation angle and is expressed in radians.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.scale()")}}</dt>
+ <dd>Adds a scaling transformation to the canvas units by x horizontally and by y vertically.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.translate()")}}</dt>
+ <dd>Adds a translation transformation by moving the canvas and its origin x horzontally and y vertically on the grid.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.transform()")}}</dt>
+ <dd>Multiplies the current transformation matrix with the matrix described by its arguments.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.setTransform()")}}</dt>
+ <dd>Resets the current transform to the identity matrix, and then invokes the <code>transform()</code> method with the same arguments.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.resetTransform()")}} {{experimental_inline}}</dt>
+ <dd>Resets the current transform by the identity matrix.</dd>
+</dl>
+
+<h2 id="Compositing">Compositing</h2>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.globalAlpha")}}</dt>
+ <dd>Alpha value that is applied to shapes and images before they are composited onto the canvas. Default <code>1.0</code> (opaque).</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.globalCompositeOperation")}}</dt>
+ <dd>With <code>globalAlpha</code> applied this sets how shapes and images are drawn onto the existing bitmap.</dd>
+</dl>
+
+<h2 id="Desenhando_imagens">Desenhando imagens</h2>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.drawImage()")}}</dt>
+ <dd>Draws the specified image. This method is available in multiple formats, providing a great deal of flexibility in its use.</dd>
+</dl>
+
+<h2 id="Manipulação_de_pixels">Manipulação de pixels</h2>
+
+<p>See also the {{domxref("ImageData")}} object.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.createImageData()")}}</dt>
+ <dd>Creates a new, blank {{domxref("ImageData")}} object with the specified dimensions. All of the pixels in the new object are transparent black.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.getImageData()")}}</dt>
+ <dd>Returns an {{domxref("ImageData")}} object representing the underlying pixel data for the area of the canvas denoted by the rectangle which starts at <em>(sx, sy)</em> and has an <em>sw</em> width and <em>sh</em> height.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.putImageData()")}}</dt>
+ <dd>Paints data from the given {{domxref("ImageData")}} object onto the bitmap. If a dirty rectangle is provided, only the pixels from that rectangle are painted.</dd>
+</dl>
+
+<h2 id="Image_smoothing">Image smoothing</h2>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}} {{experimental_inline}}</dt>
+ <dd>Image smoothing mode; if disabled, images will not be smoothed if scaled.</dd>
+</dl>
+
+<h2 id="The_canvas_state">The canvas state</h2>
+
+<p>The <code>CanvasRenderingContext2D</code> rendering context contains a variety of drawing style states (attributes for line styles, fill styles, shadow styles, text styles). The following methods help you to work with that state:</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.save()")}}</dt>
+ <dd>Saves the current drawing style state using a stack so you can revert any change you make to it using <code>restore()</code>.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.restore()")}}</dt>
+ <dd>Restores the drawing style state to the last element on the 'state stack' saved by <code>save()</code>.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.canvas")}}</dt>
+ <dd>A read-only back-reference to the {{domxref("HTMLCanvasElement")}}. Might be {{jsxref("null")}} if it is not associated with a {{HTMLElement("canvas")}} element.</dd>
+</dl>
+
+<h2 id="Hit_regions">Hit regions</h2>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.addHitRegion()")}} {{experimental_inline}}</dt>
+ <dd>Adds a hit region to the canvas.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.removeHitRegion()")}} {{experimental_inline}}</dt>
+ <dd>Removes the hit region with the specified <code>id</code> from the canvas.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.clearHitRegions()")}} {{experimental_inline}}</dt>
+ <dd>Removes all hit regions from the canvas.</dd>
+</dl>
+
+<h2 id="Non-standard_APIs">Non-standard APIs</h2>
+
+<h3 id="Blink_and_WebKit">Blink and WebKit</h3>
+
+<p>Most of these APIs are <a href="https://code.google.com/p/chromium/issues/detail?id=363198">deprecated and will be removed in the future</a>.</p>
+
+<dl>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.clearShadow()</code></dt>
+ <dd>Removes all shadow settings like {{domxref("CanvasRenderingContext2D.shadowColor")}} and {{domxref("CanvasRenderingContext2D.shadowBlur")}}.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.drawImageFromRect()</code></dt>
+ <dd>This is redundant with an equivalent overload of <code>drawImage</code>.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setAlpha()</code></dt>
+ <dd>Use {{domxref("CanvasRenderingContext2D.globalAlpha")}} instead.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setCompositeOperation()</code></dt>
+ <dd>Use {{domxref("CanvasRenderingContext2D.globalCompositeOperation")}} instead.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setLineWidth()</code></dt>
+ <dd>Use {{domxref("CanvasRenderingContext2D.lineWidth")}} instead.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setLineJoin()</code></dt>
+ <dd>Use {{domxref("CanvasRenderingContext2D.lineJoin")}} instead.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setLineCap()</code></dt>
+ <dd>Use {{domxref("CanvasRenderingContext2D.lineCap")}} instead.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setMiterLimit()</code></dt>
+ <dd>Use {{domxref("CanvasRenderingContext2D.miterLimit")}} instead.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setStrokeColor()</code></dt>
+ <dd>Use {{domxref("CanvasRenderingContext2D.strokeStyle")}} instead.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setFillColor()</code></dt>
+ <dd>Use {{domxref("CanvasRenderingContext2D.fillStyle")}} instead.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setShadow()</code></dt>
+ <dd>Use {{domxref("CanvasRenderingContext2D.shadowColor")}} and {{domxref("CanvasRenderingContext2D.shadowBlur")}} instead.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitLineDash</code></dt>
+ <dd>Use {{domxref("CanvasRenderingContext2D.getLineDash()")}} and {{domxref("CanvasRenderingContext2D.setLineDash()")}} instead.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitLineDashOffset</code></dt>
+ <dd>Use {{domxref("CanvasRenderingContext2D.lineDashOffset")}} instead.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitImageSmoothingEnabled</code></dt>
+ <dd>Use {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}} instead.</dd>
+</dl>
+
+<h3 id="Blink_only">Blink only</h3>
+
+<dl>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.getContextAttributes()</code></dt>
+ <dd>Inspired by the same <code>WebGLRenderingContext</code> method it returns an <code>Canvas2DContextAttributes</code> object that contains the attributes "storage" to indicate which storage is used ("persistent" by default) and the attribute "alpha" (<code>true</code> by default) to indicate that transparency is used in the canvas.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.isContextLost()</code></dt>
+ <dd>Inspired by the same <code>WebGLRenderingContext</code> method it returns <code>true</code> if the Canvas context has been lost, or <code>false</code> if not.</dd>
+</dl>
+
+<h3 id="WebKit_only">WebKit only</h3>
+
+<dl>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitBackingStorePixelRatio</code></dt>
+ <dd>The backing store size in relation to the canvas element. See <a href="http://www.html5rocks.com/en/tutorials/canvas/hidpi/">High DPI Canvas</a>.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitGetImageDataHD</code></dt>
+ <dd>Intended for HD backing stores, but removed from canvas specifications.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitPutImageDataHD</code></dt>
+ <dd>Intended for HD backing stores, but removed from canvas specifications.</dd>
+</dl>
+
+<dl>
+</dl>
+
+<h3 id="Gecko_only">Gecko only</h3>
+
+<dl>
+ <dt>{{non-standard_inline}} {{domxref("CanvasRenderingContext2D.filter")}}</dt>
+ <dd>CSS and SVG filters as Canvas APIs. Likely to be standardized in a new version of the specification.</dd>
+</dl>
+
+<h4 id="Prefixed_APIs">Prefixed APIs</h4>
+
+<dl>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.mozCurrentTransform</code></dt>
+ <dd>Sets or gets the current transformation matrix, see {{domxref("CanvasRenderingContext2D.currentTransform")}}.  {{ gecko_minversion_inline("7.0") }}</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.mozCurrentTransformInverse</code></dt>
+ <dd>Sets or gets the current inversed transformation matrix.  {{ gecko_minversion_inline("7.0") }}</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.mozFillRule</code></dt>
+ <dd>The <a class="external" href="http://cairographics.org/manual/cairo-cairo-t.html#cairo-fill-rule-t" title="http://cairographics.org/manual/cairo-cairo-t.html#cairo-fill-rule-t">fill rule</a> to use. This must be one of <code>evenodd</code> or <code>nonzero</code> (default).</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.mozImageSmoothingEnabled</code></dt>
+ <dd>See {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}}.</dd>
+ <dt>{{non-standard_inline}} {{deprecated_inline}} <code>CanvasRenderingContext2D.mozDash</code></dt>
+ <dd>An array which specifies the lengths of alternating dashes and gaps {{ gecko_minversion_inline("7.0") }}. Use {{domxref("CanvasRenderingContext2D.getLineDash()")}} and {{domxref("CanvasRenderingContext2D.setLineDash()")}} instead.</dd>
+ <dt>{{non-standard_inline}} {{deprecated_inline}} <code>CanvasRenderingContext2D.mozDashOffset</code></dt>
+ <dd>Specifies where to start a dash array on a line. {{ gecko_minversion_inline("7.0") }}. Use {{domxref("CanvasRenderingContext2D.lineDashOffset")}} instead.</dd>
+ <dt>{{non-standard_inline}} {{deprecated_inline}} <code>CanvasRenderingContext2D.mozTextStyle</code></dt>
+ <dd>Introduced in in Gecko 1.9, deprecated in favor of the {{domxref("CanvasRenderingContext2D.font")}} property.</dd>
+ <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.mozDrawText()</code></dt>
+ <dd>This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0. Use {{domxref("CanvasRenderingContext2D.strokeText()")}} or {{domxref("CanvasRenderingContext2D.fillText()")}} instead.</dd>
+ <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.mozMeasureText()</code></dt>
+ <dd>This method was introduced in Gecko 1.9 and is unimplemented starting with Gecko 7.0. Use {{domxref("CanvasRenderingContext2D.measureText()")}} instead.</dd>
+ <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.mozPathText()</code></dt>
+ <dd>This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0.</dd>
+ <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.mozTextAlongPath()</code></dt>
+ <dd>This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0.</dd>
+</dl>
+
+<h4 id="Internal_APIs_chrome-context_only">Internal APIs (chrome-context only)</h4>
+
+<dl>
+ <dt>{{non-standard_inline}} {{domxref("CanvasRenderingContext2D.asyncDrawXULElement()")}}</dt>
+ <dd>Renders a region of a XUL element into the <code>canvas</code>.</dd>
+ <dt>{{non-standard_inline}} {{domxref("CanvasRenderingContext2D.drawWindow()")}}</dt>
+ <dd>Renders a region of a window into the <code>canvas</code>. The contents of the window's viewport are rendered, ignoring viewport clipping and scrolling.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.demote()</code></dt>
+ <dd>This causes a context that is currently using a hardware-accelerated backend to fallback to a software one. All state should be preserved.</dd>
+</dl>
+
+<h3 id="Internet_Explorer">Internet Explorer</h3>
+
+<dl>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.msFillRule</code></dt>
+ <dd>The <a class="external" href="http://cairographics.org/manual/cairo-cairo-t.html#cairo-fill-rule-t" title="http://cairographics.org/manual/cairo-cairo-t.html#cairo-fill-rule-t">fill rule</a> to use. This must be one of <code>evenodd</code> or <code>nonzero</code> (default).</dd>
+</dl>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#2dcontext:canvasrenderingcontext2d", "CanvasRenderingContext2D")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_do_Navegador">Compatibilidade do Navegador</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome("1")}}</td>
+   <td>{{CompatGeckoDesktop("1.8")}}</td>
+   <td>{{CompatIE("9")}}</td>
+   <td>{{CompatOpera("9")}}</td>
+   <td>{{CompatSafari("2")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Compatibility_notes">Compatibility notes</h2>
+
+<ul>
+ <li>Starting with Gecko 5.0 {{geckoRelease("5.0")}}, specifying invalid values are now silently ignored for the following methods and properties: <code>translate()</code>, <code>transform()</code>, <code>rotate(), </code><code>scale(),</code> <code>rect()</code>, <code>clearRect()</code>, <code>fillRect()</code>, <code>strokeRect()</code>, <code>lineTo()</code>, <code>moveTo()</code>, <code>quadraticCurveTo()</code>, <code>arc()</code>, <code>shadowOffsetX</code>, <code>shadowOffsetY</code>,  <code>shadowBlur</code>.</li>
+</ul>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>{{domxref("HTMLCanvasElement")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/canvasrenderingcontext2d/lineto/index.html b/files/pt-br/web/api/canvasrenderingcontext2d/lineto/index.html
new file mode 100644
index 0000000000..1876b469a8
--- /dev/null
+++ b/files/pt-br/web/api/canvasrenderingcontext2d/lineto/index.html
@@ -0,0 +1,176 @@
+---
+title: CanvasRenderingContext2D.lineTo()
+slug: Web/API/CanvasRenderingContext2D/lineTo
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - Referencia
+  - metodo
+translation_of: Web/API/CanvasRenderingContext2D/lineTo
+---
+<div>{{APIRef}}</div>
+
+<p>O método <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.lineTo()</code></strong> da API Canvas 2D conecta o último ponto do sub-caminho (<em>sub-path</em>) para as coordenadas <code>x, y</code>, através de uma linha (mas na realidade não a desenha).</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox">void <var><em>ctx</em>.lineTo(x, y);</var>
+</pre>
+
+<h3 id="Parâmetros">Parâmetros</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>O valor da coordenada x que indica o fim da linha.</dd>
+ <dt><code>y</code></dt>
+ <dd>O valor da coordenada y que indica o fim da linha.</dd>
+</dl>
+
+<h2 id="Exemplos">Exemplos</h2>
+
+<h3 id="Usando_o_método_lineTo">Usando o método <code>lineTo</code></h3>
+
+<p>sto é só um simples trecho de código que usa o método <code>lineTo</code>. Use o {{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}} para indicar o <em>path</em> onde será desenhada a linha, mova a caneta (<em>pen</em>) com {{domxref("CanvasRenderingContext.moveTo", "moveTo()")}} e use o método {{domxref("CanvasRenderingContext2D.stroke", "stroke()")}} para desenhar a linha.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[6]">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.beginPath();
+ctx.moveTo(50, 50);
+ctx.lineTo(100, 100);
+ctx.stroke();
+</pre>
+
+<p>Edite o código abaixo e veja as alterações instantâneas no canvas:</p>
+
+<div style="display: none;">
+<h6 id="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.beginPath();
+ctx.moveTo(50,50);
+ctx.lineTo(100, 100);
+ctx.stroke();&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="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-lineto", "CanvasRenderingContext2D.lineTo")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_em_Navegadores">Compatibilidade em Navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome para Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>A definição da interface {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.moveTo()")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.stroke()")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/canvasrenderingcontext2d/moveto/index.html b/files/pt-br/web/api/canvasrenderingcontext2d/moveto/index.html
new file mode 100644
index 0000000000..137e4e2203
--- /dev/null
+++ b/files/pt-br/web/api/canvasrenderingcontext2d/moveto/index.html
@@ -0,0 +1,176 @@
+---
+title: CanvasRenderingContext2D.moveTo()
+slug: Web/API/CanvasRenderingContext2D/moveTo
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - Referencia
+  - metodo
+translation_of: Web/API/CanvasRenderingContext2D/moveTo
+---
+<div>{{APIRef}}</div>
+
+<p>O método <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.moveTo()</code></strong> da API Canvas 2D move o ponto inicial de um novo sub-caminho (sub-path) para as coordenadas <code>(x, y)</code>.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox">void <var><em>ctx</em>.moveTo(x, y);</var>
+</pre>
+
+<h3 id="Parâmetros">Parâmetros</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>O valor da coordenada x.</dd>
+ <dt><code>y</code></dt>
+ <dd>O valor da coordenada y.</dd>
+</dl>
+
+<h2 id="Exemplos">Exemplos</h2>
+
+<h3 id="Usando_o_método_moveTo">Usando o método <code>moveTo</code></h3>
+
+<p>Isto é só um simples trecho de código que usa o método <code>moveTo</code> para mover a caneta (<em>pen</em>) para um deteminado ponto onde vai iniciar o desenho.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[5]">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.beginPath();
+ctx.moveTo(50, 50);
+ctx.lineTo(200, 50);
+ctx.stroke();
+</pre>
+
+<p>Edite o código abaixo e veja as alterações instantâneas no canvas:</p>
+
+<div style="display: none;">
+<h6 id="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.beginPath();
+ctx.moveTo(50,50);
+ctx.lineTo(200, 50);
+ctx.stroke()&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="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-moveto", "CanvasRenderingContext2D.moveTo")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_em_Navegadores">Compatibilidade em Navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome para Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>A definição da interface {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.lineTo()")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.stroke()")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/canvasrenderingcontext2d/quadraticcurveto/index.html b/files/pt-br/web/api/canvasrenderingcontext2d/quadraticcurveto/index.html
new file mode 100644
index 0000000000..b60b7de07c
--- /dev/null
+++ b/files/pt-br/web/api/canvasrenderingcontext2d/quadraticcurveto/index.html
@@ -0,0 +1,182 @@
+---
+title: CanvasRenderingContext2D.quadraticCurveTo()
+slug: Web/API/CanvasRenderingContext2D/quadraticCurveTo
+translation_of: Web/API/CanvasRenderingContext2D/quadraticCurveTo
+---
+<div>{{APIRef}}</div>
+
+<p>o método <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.quadraticCurveTo()</code></strong> da API Canvas 2D adiciona uma Curva de Bézier quadrática ao caminho. São exigidos dois pontos. O primeiro ponto é um ponto de controle e o segundo é o ponto final. The starting point is the last point in the current path, which can be changed using <code>moveTo()</code> before creating the quadratic Bézier curve.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox">void <var><em>ctx</em>.quadraticCurveTo(cpx, cpy, x, y);</var>
+</pre>
+
+<h3 id="Parâmetros">Parâmetros</h3>
+
+<dl>
+ <dt><code>cpx</code></dt>
+ <dd>O eixo X da coordenada para o ponto de controle.</dd>
+ <dt><code>cpy</code></dt>
+ <dd>O eixo Y da coordenada para o ponto de controle.</dd>
+ <dt><code>x</code></dt>
+ <dd>O eixo X da coordenada para o ponto final.</dd>
+ <dt><code>y</code></dt>
+ <dd>O eixo Y da coordenada para o ponto final.</dd>
+</dl>
+
+<h2 id="Exemplos">Exemplos</h2>
+
+<h3 id="Usando_o_método_quadraticCurveTo">Usando o método <code>quadraticCurveTo</code></h3>
+
+<p>This is just a simple code snippet drawing a quadratic bezier curve. The <span style="color: red;">control point is red</span> and the <span style="color: blue;">start and end points are blue</span>.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[6]">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.beginPath();
+ctx.moveTo(50,20);
+ctx.quadraticCurveTo(230, 30, 50, 100);
+ctx.stroke();
+
+ctx.fillStyle = 'blue';
+// start point
+ctx.fillRect(50, 20, 10, 10);
+// end point
+ctx.fillRect(50, 100, 10, 10);
+
+ctx.fillStyle = 'red';
+// control point
+ctx.fillRect(230, 30, 10, 10);</pre>
+
+<p>{{ EmbedLiveSample('Using_the_quadraticCurveTo_method', 315, 165) }}</p>
+
+<h3 id="Trying_the_quadraticCurveTo_parameters">Trying the <code>quadraticCurveTo</code> parameters</h3>
+
+<p>Edit the code below and see your changes update live in the canvas:</p>
+
+<div style="display: none;">
+<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.beginPath();
+ctx.moveTo(50,20);
+ctx.quadraticCurveTo(230, 30, 50, 100);
+ctx.stroke();&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('Trying_the_quadraticCurveTo_parameters', 700, 360) }}</p>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-quadraticcurveto", "CanvasRenderingContext2D.quadraticCurveTo")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">{{CompatVersionUnknown}}
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">{{CompatVersionUnknown}}
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>The interface defining it, {{domxref("CanvasRenderingContext2D")}}</li>
+ <li><a href="http://en.wikipedia.org/wiki/B%C3%A9zier_curve">WikiPedia article on Bézier curves</a>.</li>
+</ul>
diff --git a/files/pt-br/web/api/canvasrenderingcontext2d/rect/index.html b/files/pt-br/web/api/canvasrenderingcontext2d/rect/index.html
new file mode 100644
index 0000000000..6c19b38495
--- /dev/null
+++ b/files/pt-br/web/api/canvasrenderingcontext2d/rect/index.html
@@ -0,0 +1,177 @@
+---
+title: CanvasRenderingContext2D.rect()
+slug: Web/API/CanvasRenderingContext2D/rect
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - Referencia
+  - metodo
+translation_of: Web/API/CanvasRenderingContext2D/rect
+---
+<div>{{APIRef}}</div>
+
+<p>O método <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.rect()</code></strong> da Canvas 2D API cria um <em>path </em>(trajeto) para um retângulo na posição <em>(x, y)</em>, cujo tamanho é determinado pelo <em>width </em>(largura) e <em>height</em> (altura). <span id="result_box" lang="pt"><span>Esses quatro pontos estão conectados por linhas retas e o </span></span> <em>sub-path</em> <span lang="pt"><span>(sub-</span></span>trajeto<span lang="pt"><span>) é marcado como fechado, para que você possa</span></span> <code>fill (preencher)</code> ou <code>stroke (contornar)</code> o retângulo.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox">void <var><em>ctx</em>.rect(x, y, width, height);</var>
+</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>O valor da coordenada x que indica ponto de início (superior esquerdo) do retângulo.</dd>
+ <dt><code>y</code></dt>
+ <dd>O valor da coordenada y que indica ponto de início (superior esquerdo) do retângulo.</dd>
+ <dt><code>width</code></dt>
+ <dd>A largura do retângulo.</dd>
+ <dt><code>height</code></dt>
+ <dd>A altura do retângulo.</dd>
+</dl>
+
+<h2 id="Exemplos">Exemplos</h2>
+
+<h3 id="Usando_o_método_rect">Usando o método <code>rect</code></h3>
+
+<p>Isto é somente um simples fragmentode código que usa o método <code>rect</code> para criar um <em>path</em>. Para verdadeiramente desenhar um <em>path </em>no canvas, você pode usar o método {{domxref("CanvasRenderingContext2D.fill", "fill()")}} ou o {{domxref("CanvasRenderingContext2D.stroke", "stroke()")}}. Veja também os métodos {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}} e {{domxref("CanvasRenderingContext2D.strokeRect", "strokeRect()")}}, que podem fazer isto em um único passo.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[3]">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+ctx.rect(10, 10, 100, 100);
+ctx.fill();
+</pre>
+
+<p>Edite o código abaixo e veja as alterações instantâneas no canvas:</p>
+
+<div style="display: none;">
+<h6 id="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.rect(10, 10, 100, 100);
+ctx.fill();&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="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-rect", "CanvasRenderingContext2D.rect")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_em_Navegadores">Compatibilidade em Navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><span class="short_text" id="result_box" lang="pt"><span>A interface que a define</span></span>, {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.fillRect")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.strokeRect()")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.fill()")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.stroke()")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/canvasrenderingcontext2d/stroke/index.html b/files/pt-br/web/api/canvasrenderingcontext2d/stroke/index.html
new file mode 100644
index 0000000000..866e317383
--- /dev/null
+++ b/files/pt-br/web/api/canvasrenderingcontext2d/stroke/index.html
@@ -0,0 +1,187 @@
+---
+title: CanvasRenderingContext2D.stroke()
+slug: Web/API/CanvasRenderingContext2D/stroke
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - Referencia
+  - metodo
+translation_of: Web/API/CanvasRenderingContext2D/stroke
+---
+<div>{{APIRef}}</div>
+
+<p>O método <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.stroke()</code></strong> da API Canvas 2D contorna um dado <em>path</em> ou o <em>path</em> atual com o estilo atual de traçado usando uma regra de controle diferente de zero.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox">void <var><em>ctx</em>.stroke();</var>
+void <var><em>ctx</em>.stroke(path);</var>
+</pre>
+
+<h3 id="Parâmetros">Parâmetros</h3>
+
+<dl>
+ <dt><code>path</code></dt>
+ <dd>Um <em>path</em> de {{domxref("Path2D")}} para contorno.</dd>
+</dl>
+
+<h2 id="Exemplos">Exemplos</h2>
+
+<h3 id="Usando_o_método_stroke">Usando o método <code>stroke</code></h3>
+
+<p>Isto é só um simples trecho de código que usa o método <code>stroke</code> para contornar um <em>path</em>.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[4]">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+ctx.rect(10, 10, 100, 100);
+ctx.stroke();
+</pre>
+
+<p>Edite o código abaixo e veja as alterações instantâneas no canvas:</p>
+
+<div style="display: none;">
+<h6 id="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.rect(10, 10, 100, 100);
+ctx.stroke();&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="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-stroke", "CanvasRenderingContext2D.stroke")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_em_Navegadores">Compatibilidade em Navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>Suporte para o parâmetro<em> path</em></td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoDesktop(31) }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome para Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>Suporte para o parâmetro<em> path</em></td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoMobile(31) }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>A definição da interface {{domxref("CanvasRenderingContext2D")}}.</li>
+</ul>
diff --git a/files/pt-br/web/api/canvasrenderingcontext2d/strokerect/index.html b/files/pt-br/web/api/canvasrenderingcontext2d/strokerect/index.html
new file mode 100644
index 0000000000..e11812857f
--- /dev/null
+++ b/files/pt-br/web/api/canvasrenderingcontext2d/strokerect/index.html
@@ -0,0 +1,177 @@
+---
+title: CanvasRenderingContext2D.strokeRect()
+slug: Web/API/CanvasRenderingContext2D/strokeRect
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - Referencia
+  - metodo
+translation_of: Web/API/CanvasRenderingContext2D/strokeRect
+---
+<div>{{APIRef}}</div>
+
+<p>O método <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.strokeRect()</code></strong> da API Canvas 2D desenha um retângulo na posição <em>(x, y)</em>, que possui uma largura<em> </em>(<em>width</em>) <em>w</em> e uma altura (<em>height</em>) <em>h</em><code>,</code> e não tem nenhum preenchimento (estilo <em>stroke</em>).</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox">void <var><em>ctx</em>.strokeRect(x, y, width, height);</var>
+</pre>
+
+<h3 id="Parâmetros">Parâmetros</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>O valor da coordenada x para o ponto inicial do retângulo.</dd>
+ <dt><code>y</code></dt>
+ <dd>O valor da coordenada y para o ponto inicial do retângulo.</dd>
+ <dt><code>width</code></dt>
+ <dd>A largura do retângulo.</dd>
+ <dt><code>height</code></dt>
+ <dd>A altura do retângulo.</dd>
+</dl>
+
+<h2 id="Exemplos">Exemplos</h2>
+
+<h3 id="Usando_o_método_strokeRect">Usando o método <code>strokeRect</code></h3>
+
+<p>Isto é só um simples trecho de código que usa o método <code>strokeRect</code>.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[5]">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.strokeStyle = 'green';
+ctx.strokeRect(10, 10, 100, 100);
+</pre>
+
+<p>Edite o código abaixo e veja as alterações instantâneas no canvas:</p>
+
+<div style="display: none;">
+<h6 id="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.strokeStyle = "green";
+ctx.strokeRect(10, 10, 100, 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="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-strokerect", "CanvasRenderingContext2D.strokeRect")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_em_Navegadores">Compatibilidade em Navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome para Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>A definição da interface {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.strokeStyle")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.clearRect()")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.fillRect()")}}</li>
+</ul>