From f95628ffe3134db797ae15481e117f8687bba8f1 Mon Sep 17 00:00:00 2001 From: SphinxKnight Date: Thu, 15 Sep 2022 00:13:26 +0200 Subject: [PATCH] Markdown conversion for `pt-BR` - Cleanup - API section (#7961) * fix all except dls * Fix dls --- .../canvas_api/a_basic_ray-caster/index.html | 21 +-- .../pt-br/web/api/animation/cancel/index.html | 2 - files/pt-br/web/api/audionode/index.html | 4 +- .../web/api/background_tasks_api/index.html | 4 - .../baseaudiocontext/currenttime/index.html | 2 +- files/pt-br/web/api/blob/slice/index.html | 4 +- .../tutorial/advanced_animations/index.html | 2 +- .../applying_styles_and_colors/index.html | 47 +++--- .../tutorial/basic_usage/index.html | 10 +- .../tutorial/compositing/example/index.html | 38 ++--- .../tutorial/compositing/index.html | 2 +- .../tutorial/drawing_shapes/index.html | 2 +- .../tutorial/drawing_text/index.html | 8 +- .../api/canvas_api/tutorial/finale/index.html | 10 +- .../web/api/canvas_api/tutorial/index.html | 2 +- .../tutorial/using_images/index.html | 2 +- .../canvasrenderingcontext2d/arc/index.html | 2 +- .../canvasrenderingcontext2d/arcto/index.html | 2 +- .../beginpath/index.html | 2 +- .../clearrect/index.html | 2 +- .../canvasrenderingcontext2d/clip/index.html | 2 +- .../closepath/index.html | 2 +- .../canvasrenderingcontext2d/fill/index.html | 2 +- .../fillrect/index.html | 2 +- .../fillstyle/index.html | 16 +- .../lineto/index.html | 2 +- .../moveto/index.html | 2 +- .../quadraticcurveto/index.html | 2 +- .../canvasrenderingcontext2d/rect/index.html | 6 +- .../stroke/index.html | 2 +- .../strokerect/index.html | 2 +- .../web/api/closeevent/closeevent/index.html | 3 - files/pt-br/web/api/closeevent/index.html | 12 +- .../web/api/crypto/getrandomvalues/index.html | 4 +- .../whendefined/index.html | 2 +- .../web/api/document/characterset/index.html | 6 - .../web/api/document/execcommand/index.html | 8 +- .../web/api/document/hasfocus/index.html | 2 +- files/pt-br/web/api/document/index.html | 6 +- .../pt-br/web/api/document/writeln/index.html | 6 +- .../introduction/index.html | 5 +- .../pt-br/web/api/element/animate/index.html | 6 +- .../api/element/childelementcount/index.html | 4 +- .../pt-br/web/api/element/closest/index.html | 8 +- .../api/element/contextmenu_event/index.html | 2 +- .../web/api/element/scrollintoview/index.html | 6 +- .../web/api/event/defaultprevented/index.html | 8 +- files/pt-br/web/api/event/event/index.html | 3 - .../api/eventsource/eventsource/index.html | 2 +- .../api/eventtarget/dispatchevent/index.html | 2 +- .../removeeventlistener/index.html | 4 +- files/pt-br/web/api/fetch_api/index.html | 2 +- .../pt-br/web/api/formdata/entries/index.html | 2 +- .../pt-br/web/api/geolocation_api/index.html | 2 +- files/pt-br/web/api/history_api/index.html | 16 +- .../htmlcanvaselement/todataurl/index.html | 2 +- .../getdistributednodes/index.html | 2 +- .../web/api/htmlcontentelement/index.html | 6 +- .../api/htmlcontentelement/select/index.html | 2 +- .../api/htmlelement/change_event/index.html | 2 +- .../checkvalidity/index.html | 2 +- .../web/api/htmlshadowelement/index.html | 6 +- files/pt-br/web/api/idbcursor/index.html | 24 +-- files/pt-br/web/api/idbfactory/index.html | 2 +- .../indexeddb_api/using_indexeddb/index.html | 8 +- .../pt-br/web/api/mediastreamtrack/index.html | 10 +- files/pt-br/web/api/mouseevent/index.html | 148 +++++++++--------- files/pt-br/web/api/node/baseuri/index.html | 2 +- files/pt-br/web/api/node/contains/index.html | 2 +- .../pt-br/web/api/node/textcontent/index.html | 2 +- .../web/api/page_visibility_api/index.html | 4 +- files/pt-br/web/api/performance/index.html | 2 +- .../web/api/performance/tojson/index.html | 5 +- files/pt-br/web/api/pushmanager/index.html | 64 ++++---- .../pt-br/web/api/request/request/index.html | 4 +- .../web/api/urlsearchparams/values/index.html | 2 +- .../using_the_web_animations_api/index.html | 6 +- files/pt-br/web/api/web_audio_api/index.html | 2 +- .../api/web_audio_api/simple_synth/index.html | 3 - files/pt-br/web/api/webgl_api/index.html | 8 +- .../getting_started_with_webgl/index.html | 4 +- files/pt-br/web/api/webrtc_api/index.html | 2 +- files/pt-br/web/api/websockets_api/index.html | 12 +- files/pt-br/web/api/webvr_api/index.html | 10 +- .../web/api/window/blur_event/index.html | 2 +- .../web/api/window/error_event/index.html | 2 +- .../web/api/window/focus_event/index.html | 2 +- .../web/api/window/getselection/index.html | 2 +- files/pt-br/web/api/window/index.html | 4 +- files/pt-br/web/api/window/length/index.html | 2 +- .../pt-br/web/api/window/location/index.html | 4 +- files/pt-br/web/api/window/scroll/index.html | 2 +- .../web/api/window/storage_event/index.html | 2 +- files/pt-br/web/api/worker/index.html | 1 - files/pt-br/web/api/xmlhttprequest/index.html | 8 +- .../web/api/xmlhttprequest/timeout/index.html | 9 +- .../using_xmlhttprequest/index.html | 36 ++--- 97 files changed, 338 insertions(+), 415 deletions(-) diff --git a/files/pt-br/orphaned/web/api/canvas_api/a_basic_ray-caster/index.html b/files/pt-br/orphaned/web/api/canvas_api/a_basic_ray-caster/index.html index 4196fc4a1ec734..f58048ce4963f2 100644 --- a/files/pt-br/orphaned/web/api/canvas_api/a_basic_ray-caster/index.html +++ b/files/pt-br/orphaned/web/api/canvas_api/a_basic_ray-caster/index.html @@ -26,12 +26,8 @@

Como?

A ideia básica é usar o {{domxref("window.setInterval","setInterval()")}} com um delay arbitrário que corresponda a uma taxa de atualização desejada. Depois de cada intervalo uma função de atualização irá redesenhar o canvas mostrando a view atual. Eu sei que poderia ter iniciado com um exemplo mais simples, mas estou certo que o tutorial do canvas vai fazê-lo, e eu queria verificar se poderia fazer isso.

-

Sendo assim, a cada atualização, o raycaster verifica se você pressionou qualquer tecla por último, para conservar os cálculos não fazendo casting caso você esteja ocioso. Se você tiver pressionado, então o canvas é limpo, o solo e o céu são desenhados, a posição da câmera e/ou a orientação são atualizados, e os raios são feitos. Como os raios se cruzam paredes, então eles tornam uma tira de tela vertical na cor da parede que eles atingiram, misturado com uma versão mais escura da cor de acordo com a distância para a parede. A altura da fita também é modulada pela distância da câmera para a parede, e é desenhada centrada sobre a linha do horizonte.
-
- O código que eu acabei com é um amálgama regurgitado dos capítulos de raycaster de um velho André LaMotheTricks do livro de Gurus de Programação de Jogos (ISBN: 0672305070), e um jaspe raycaster que encontrei online, filtrado através da minha compulsão de renomear tudo para que faça sentido Para mim, e todos os ajustes que tinham que ser feitos para fazer as coisas funcionarem bem.

+

Sendo assim, a cada atualização, o raycaster verifica se você pressionou qualquer tecla por último, para conservar os cálculos não fazendo casting caso você esteja ocioso. Se você tiver pressionado, então o canvas é limpo, o solo e o céu são desenhados, a posição da câmera e/ou a orientação são atualizados, e os raios são feitos. Como os raios se cruzam paredes, então eles tornam uma tira de tela vertical na cor da parede que eles atingiram, misturado com uma versão mais escura da cor de acordo com a distância para a parede.A altura da fita também é modulada pela distância da câmera para a parede, e é desenhada centrada sobre a linha do horizonte.
+
O código que eu acabei com é um amálgama regurgitado dos capítulos de raycaster de um velho André LaMotheTricks do livro de Gurus de Programação de Jogos (ISBN: 0672305070), e um jaspe raycaster que encontrei online, filtrado através da minha compulsão de renomear tudo para que faça sentido Para mim, e todos os ajustes que tinham que ser feitos para fazer as coisas funcionarem bem.

@@ -40,12 +36,11 @@

Resultados


- A tela no Safari 2.0.1 apresentou surpreendentemente bem. Com o fator de bloqueio criado para produzir slivers 8 pixels de largura, eu posso executar uma janela de 320 x 240 em 24 fps no meu Apple mini. Firefox 1.5 Beta 1 é ainda mais rápido; Eu posso executar 320 x 240 em 24 fps com 4 pixel slivers. Não exatamente um novo membro da família de software de ID, mas bastante decente considerando que é um ambiente totalmente interpretado, e eu não tenho que se preocupar com a alocação de memória ou modos de vídeo ou rotinas internas de codificação em assembler ou qualquer coisa. O código tenta ser muito eficiente, usando pesquisas de matrizes de valores pré-calculados, mas não sou um guru de otimização, então as coisas provavelmente poderiam ser escritas mais rapidamente.
+">O código tenta ser muito eficiente, usando pesquisas de matrizes de valores pré-calculados, mas não sou um guru de otimização, então as coisas provavelmente poderiam ser escritas mais rapidamente.

- Além disso, deixa muito a desejar em termos de tentar ser qualquer tipo de motor de jogo - não há texturas de parede, não sprites, sem portas, nem mesmo teleportadores para chegar a outro nível. Mas estou bastante confiante de que todas essas coisas poderiam ser adicionadas com tempo suficiente. A API de tela aceita a cópia de pixels de imagens, portanto, as texturas parecem possíveis. Vou deixar isso para outro artigo, provavelmente de outra pessoa. =)

+ Além disso, deixa muito a desejar em termos de tentar ser qualquer tipo de motor de jogo - não há texturas de parede, não sprites, sem portas, nem mesmo teleportadores para chegar a outro nível. Mas estou bastante confiante de que todas essas coisas poderiam ser adicionadas com tempo suficiente.A API de tela aceita a cópia de pixels de imagens, portanto, as texturas parecem possíveis. Vou deixar isso para outro artigo, provavelmente de outra pessoa. )

@@ -54,11 +49,9 @@

O ray-caster


- As pessoas agradáveis ​​aqui têm copiado manualmente meus arquivos para que você possa dar uma olhada, e para o seu prazer de hacking eu postei o conteúdo do arquivo individual como listagem de código (veja abaixo).
+As pessoas agradáveis ​​aqui têm copiado manualmente meus arquivos para que você possa dar uma olhada, e para o seu prazer de hacking eu postei o conteúdo do arquivo individual como listagem de código (veja abaixo).

- Então você está lá, o fogo até Safari 1.3 ou Firefox 1.5 ou outro navegador que suporta o elemento <canvas> e divirta-se!
+ Então você está lá, o fogo até Safari 1.3 ou Firefox 1.5 ou outro navegador que suporta o elemento <canvas> e divirta-se!

input.js | Level.js | Player.js | RayCaster.html | RayCaster.js | trace.css | trace.js

diff --git a/files/pt-br/web/api/animation/cancel/index.html b/files/pt-br/web/api/animation/cancel/index.html index 7fda9fa7835d0f..2198d3eda54dd8 100644 --- a/files/pt-br/web/api/animation/cancel/index.html +++ b/files/pt-br/web/api/animation/cancel/index.html @@ -13,10 +13,8 @@

Sintaxe

-
// cancela animação
 animation.cancel();
-

Parametros

diff --git a/files/pt-br/web/api/audionode/index.html b/files/pt-br/web/api/audionode/index.html index 861c88b84935b6..6f05b5b22b2bcd 100644 --- a/files/pt-br/web/api/audionode/index.html +++ b/files/pt-br/web/api/audionode/index.html @@ -62,9 +62,9 @@

Methods

Example

-

This simple snippet of code shows the creation of some audio nodes, and how the AudioNode properties and methods can be used. You can find examples of such usage on any of the examples linked to on the Web Audio API landing page (for example Violent Theremin.)

+

This simple snippet of code shows the creation of some audio nodes, and how the AudioNode properties and methods can be used. You can find examples of such usage on any of the examples linked to on the Web Audio API landing page (for example Violent Theremin.)

-
var AudioContext = window.AudioContext || window.webkitAudioContext;
+
var AudioContext = window.AudioContext || window.webkitAudioContext;
 
 var audioCtx = new AudioContext();
 
diff --git a/files/pt-br/web/api/background_tasks_api/index.html b/files/pt-br/web/api/background_tasks_api/index.html
index a59a50373ff7d1..72f74dd821b198 100644
--- a/files/pt-br/web/api/background_tasks_api/index.html
+++ b/files/pt-br/web/api/background_tasks_api/index.html
@@ -231,8 +231,6 @@ 
Declaração de variáveis

 
 
 
 
-
function draw() {
+
function draw() {
   var canvas = document.getElementById('canvas');
   if (canvas.getContext) {
     var ctx = canvas.getContext('2d');
diff --git a/files/pt-br/web/api/canvas_api/tutorial/drawing_text/index.html b/files/pt-br/web/api/canvas_api/tutorial/drawing_text/index.html
index f0f3fb8ea408c2..4305a3145cefd4 100644
--- a/files/pt-br/web/api/canvas_api/tutorial/drawing_text/index.html
+++ b/files/pt-br/web/api/canvas_api/tutorial/drawing_text/index.html
@@ -30,7 +30,7 @@ 
Um exemplo com fillText

 
 
O texto a seguir é rederizado utilizando fillStyle.

 
-
function draw() {
+
function draw() {
   var ctx = document.getElementById('canvas').getContext('2d');
   ctx.font = '48px serif';
   ctx.fillText('Hello world', 10, 50);
@@ -52,7 +52,7 @@ 
Um exemplo com strokeText

 
 
 

 
-
function draw() {
+
function draw() {
   var ctx = document.getElementById('canvas').getContext('2d');
   ctx.font = '48px serif';
   ctx.strokeText('Hello world', 10, 50);
@@ -98,7 +98,7 @@ 
O exemplo de uma textBaseline

 
 
Edite o código abaixo e veja as atualizações em tempo real no canvas.

 
-
ctx.font = '48px serif';
+
ctx.font = '48px serif';
 ctx.textBaseline = 'hanging';
 ctx.strokeText('Hello world', 0, 100);
 

@@ -156,7 +156,7 @@ 
Advanced text measurements

 
 
The following code snippet shows how you can measure a text and get its width.

 
-
function draw() {
+
function draw() {
   var ctx = document.getElementById('canvas').getContext('2d');
   var text = ctx.measureText('foo'); // TextMetrics object
   text.width; // 16;
diff --git a/files/pt-br/web/api/canvas_api/tutorial/finale/index.html b/files/pt-br/web/api/canvas_api/tutorial/finale/index.html
index 4cc811ba682dbc..894d9b715d6ee9 100644
--- a/files/pt-br/web/api/canvas_api/tutorial/finale/index.html
+++ b/files/pt-br/web/api/canvas_api/tutorial/finale/index.html
@@ -20,9 +20,9 @@ 
Mais exemplos e tutoriais

  
HTML5CanvasTutorials

  
Exemplos para a maioria das APIs canvas.

  
31 days of Canvas tutorials

- 
Uma ótima fundação para codificação visual em JavaScript .

+ 
Uma ótima fundação para codificação visual em JavaScript .

  
Game development

- 
O jogo é uma das atividades de computador mais populares. Novas tecnologias estão chegando constantemente para possibilitar o desenvolvimento de jogos melhores e mais poderosos que podem ser executados em qualquer navegador da Web compatível com os padrões.

+ 
O jogo é uma das atividades de computador mais populares. Novas tecnologias estão chegando constantemente para possibilitar o desenvolvimento de jogos melhores e mais poderosos que podem ser executados em qualquer navegador da Web compatível com os padrões.

 
 
 
Outras Web APIs

@@ -33,9 +33,9 @@ 
Outras Web APIs

  
WebGL

  
API para renderização interativa de gráficos 3D.

  
SVG

- 
Scalable Vector Graphics permitem que você descreva imagens como conjuntos de vetores (linhas) e formas, a fim de permitir que eles sejam redimensionados sem problemas, independentemente do tamanho em que são desenhados.

+ 
Scalable Vector Graphics permitem que você descreva imagens como conjuntos de vetores (linhas) e formas, a fim de permitir que eles sejam redimensionados sem problemas, independentemente do tamanho em que são desenhados.

  
Web Audio

- 
A Web Audio API fornece um sistema poderoso e versátil para controlar o áudio na Web, permitindo que os desenvolvedores escolham fontes de áudio, adicionem efeitos ao áudio, criem visualizações de áudio, apliquem efeitos espaciais (como panning) e muito mais.

+ 
A Web Audio API fornece um sistema poderoso e versátil para controlar o áudio na Web, permitindo que os desenvolvedores escolham fontes de áudio, adicionem efeitos ao áudio, criem visualizações de áudio, apliquem efeitos espaciais (como panning) e muito mais.

 
 
 
Questions

@@ -44,7 +44,7 @@ 
Questions

  
Stackoverflow

  
Perguntas marcadas como "canvas".

  
Comentários sobre esse tutorial – A comunidade MDN de documentação

- 
Se você tiver algum comentário sobre este tutorial ou quiser nos agradecer, fique à vontade para entrar em contato conosco!

+ 
Se você tiver algum comentário sobre este tutorial ou quiser nos agradecer, fique à vontade para entrar em contato conosco!

 
 
 
{{PreviousNext("Web/API/Canvas_API/Tutorial/Optimizing_canvas")}}

diff --git a/files/pt-br/web/api/canvas_api/tutorial/index.html b/files/pt-br/web/api/canvas_api/tutorial/index.html
index a35410aa85c25b..065b0b86dbed5f 100644
--- a/files/pt-br/web/api/canvas_api/tutorial/index.html
+++ b/files/pt-br/web/api/canvas_api/tutorial/index.html
@@ -52,6 +52,6 @@ 
Veja também

 
 
Nota dos contribuidores

 
-
Devido a um erro técnico lamentável que ocorreu na semana de 17 de junho de 2013, perdemos parte do histórico deste tutorial, incluindo atribuições a todos os contribuidores anteriores ao seu conteúdo. Pedimos desculpas por isso, e espero que você nos perdoe desse infeliz infortúnio.

+
Devido a um erro técnico lamentável que ocorreu na semana de 17 de junho de 2013, perdemos parte do histórico deste tutorial, incluindo atribuições a todos os contribuidores anteriores ao seu conteúdo. Pedimos desculpas por isso, e espero que você nos perdoe desse infeliz infortúnio.

 
 
{{ Next("Web/Guide/HTML/Canvas_tutorial/Utilizacao_basica") }}

diff --git a/files/pt-br/web/api/canvas_api/tutorial/using_images/index.html b/files/pt-br/web/api/canvas_api/tutorial/using_images/index.html
index c739deeab5dec0..87fc75c1091900 100644
--- a/files/pt-br/web/api/canvas_api/tutorial/using_images/index.html
+++ b/files/pt-br/web/api/canvas_api/tutorial/using_images/index.html
@@ -133,7 +133,7 @@ 
Example: A simple line graph

 

 
 
-
function draw() {
+
function draw() {
   var ctx = document.getElementById('canvas').getContext('2d');
   var img = new Image();
   img.onload = function() {
diff --git a/files/pt-br/web/api/canvasrenderingcontext2d/arc/index.html b/files/pt-br/web/api/canvasrenderingcontext2d/arc/index.html
index 7b965a1542c027..60bb7028c679e3 100644
--- a/files/pt-br/web/api/canvasrenderingcontext2d/arc/index.html
+++ b/files/pt-br/web/api/canvasrenderingcontext2d/arc/index.html
@@ -54,7 +54,7 @@ 
JavaScript

 
 
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°).

 
-
const canvas = document.querySelector('canvas');
+
const canvas = document.querySelector('canvas');
 const ctx = canvas.getContext('2d');
 
 ctx.beginPath();
diff --git a/files/pt-br/web/api/canvasrenderingcontext2d/arcto/index.html b/files/pt-br/web/api/canvasrenderingcontext2d/arcto/index.html
index 9ddac6e8208a3b..26d86e7ddbf11b 100644
--- a/files/pt-br/web/api/canvasrenderingcontext2d/arcto/index.html
+++ b/files/pt-br/web/api/canvasrenderingcontext2d/arcto/index.html
@@ -50,7 +50,7 @@ 
HTML

 
 
JavaScript

 
-
var canvas = document.getElementById('canvas');
+
var canvas = document.getElementById('canvas');
 var ctx = canvas.getContext('2d');
 
 ctx.beginPath();
diff --git a/files/pt-br/web/api/canvasrenderingcontext2d/beginpath/index.html b/files/pt-br/web/api/canvasrenderingcontext2d/beginpath/index.html
index 67cdeb13add90f..434d9513f9424e 100644
--- a/files/pt-br/web/api/canvasrenderingcontext2d/beginpath/index.html
+++ b/files/pt-br/web/api/canvasrenderingcontext2d/beginpath/index.html
@@ -31,7 +31,7 @@ 
HTML

 
 
JavaScript

 
-
var canvas = document.getElementById('canvas');
+
var canvas = document.getElementById('canvas');
 var ctx = canvas.getContext('2d');
 
 // Primeiro path
diff --git a/files/pt-br/web/api/canvasrenderingcontext2d/clearrect/index.html b/files/pt-br/web/api/canvasrenderingcontext2d/clearrect/index.html
index e05f50b761ce8d..7e72b3cffdb972 100644
--- a/files/pt-br/web/api/canvasrenderingcontext2d/clearrect/index.html
+++ b/files/pt-br/web/api/canvasrenderingcontext2d/clearrect/index.html
@@ -48,7 +48,7 @@ 
HTML

 
 
JavaScript

 
-
var canvas = document.getElementById('canvas');
+
var canvas = document.getElementById('canvas');
 var ctx = canvas.getContext('2d');
 
 ctx.beginPath();
diff --git a/files/pt-br/web/api/canvasrenderingcontext2d/clip/index.html b/files/pt-br/web/api/canvasrenderingcontext2d/clip/index.html
index c2ee022098fab5..bcfb97dd6478f3 100644
--- a/files/pt-br/web/api/canvasrenderingcontext2d/clip/index.html
+++ b/files/pt-br/web/api/canvasrenderingcontext2d/clip/index.html
@@ -44,7 +44,7 @@ 
HTML

 
 
JavaScript

 
-
var canvas = document.getElementById("canvas");
+
var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
 
 // Cria uma região de recorte
diff --git a/files/pt-br/web/api/canvasrenderingcontext2d/closepath/index.html b/files/pt-br/web/api/canvasrenderingcontext2d/closepath/index.html
index 3ba231589dc9b3..53240799640115 100644
--- a/files/pt-br/web/api/canvasrenderingcontext2d/closepath/index.html
+++ b/files/pt-br/web/api/canvasrenderingcontext2d/closepath/index.html
@@ -31,7 +31,7 @@ 
HTML

 
 
JavaScript

 
-
var canvas = document.getElementById('canvas');
+
var canvas = document.getElementById('canvas');
 var ctx = canvas.getContext('2d');
 
 ctx.beginPath();
diff --git a/files/pt-br/web/api/canvasrenderingcontext2d/fill/index.html b/files/pt-br/web/api/canvasrenderingcontext2d/fill/index.html
index 4fa35fdf6e03d4..05c176041497a2 100644
--- a/files/pt-br/web/api/canvasrenderingcontext2d/fill/index.html
+++ b/files/pt-br/web/api/canvasrenderingcontext2d/fill/index.html
@@ -48,7 +48,7 @@ 
HTML

 
 
JavaScript

 
-
var canvas = document.getElementById('canvas');
+
var canvas = document.getElementById('canvas');
 var ctx = canvas.getContext('2d');
 ctx.rect(10, 10, 100, 100);
 ctx.fill();
diff --git a/files/pt-br/web/api/canvasrenderingcontext2d/fillrect/index.html b/files/pt-br/web/api/canvasrenderingcontext2d/fillrect/index.html
index c40899d3dbaaa6..37b1c5b8c8525d 100644
--- a/files/pt-br/web/api/canvasrenderingcontext2d/fillrect/index.html
+++ b/files/pt-br/web/api/canvasrenderingcontext2d/fillrect/index.html
@@ -44,7 +44,7 @@ 
HTML

 
 
JavaScript

 
-
var canvas = document.getElementById('canvas');
+
var canvas = document.getElementById('canvas');
 var ctx = canvas.getContext('2d');
 ctx.fillStyle = 'green';
 ctx.fillRect(10, 10, 100, 100);
diff --git a/files/pt-br/web/api/canvasrenderingcontext2d/fillstyle/index.html b/files/pt-br/web/api/canvasrenderingcontext2d/fillstyle/index.html
index 97124324d211e2..de9920fa89359b 100644
--- a/files/pt-br/web/api/canvasrenderingcontext2d/fillstyle/index.html
+++ b/files/pt-br/web/api/canvasrenderingcontext2d/fillstyle/index.html
@@ -11,7 +11,7 @@
 ---
 
{{APIRef}}

 
-
A propriedade CanvasRenderingContext2D.fillStyle da API do Canvas 2D especifica a cor ou o estilo para usar regiões internas. O valor inicial é #000 (preto).

+
A propriedade CanvasRenderingContext2D.fillStyle da API do Canvas 2D especifica a cor ou o estilo para usar regiões internas. O valor inicial é #000 (preto).

 
 
Veja também o capítulo Aplicando estilos e cores no Canvas Tutorial.

 
@@ -37,7 +37,7 @@ 
Examples

 
 
Usando a propriedade fillStyle para definir uma cor diferente

 
-
Isto é apenas um trecho de código simples usando a propriedade fillStyle para definir uma cor diferente.

+
Isto é apenas um trecho de código simples usando a propriedade fillStyle para definir uma cor diferente.

 
 
HTML

 
@@ -53,7 +53,7 @@ 
JavaScript

 ctx.fillRect(10, 10, 100, 100);
 

 
-
Edite o código abaixo e veja as alterações atualizadas na tela:

+
Edite o código abaixo e veja as alterações atualizadas na tela: