recursal/MDN huggingface dataset:
CanvasRenderingContext2D.arc()
==============================

O método **`CanvasRenderingContext2D.arc()`** da API Canvas 2D adiciona um arco circular para o atual sub-caminhoa (*sub-path*).

Sintaxe
-------
```

void ctx.arc(x, y, raio, anguloInicial, anguloFinal [, antiHorario]);
```


O método `arc()` cria um arco circular centralizado em `(x, y)` com um `raio`. O caminho inicia-se no `anguloInicial`, e finaliza no `anguloFinal`, e é desenhado no sentido `antiHoario` (o padrão é no sentido horario).

### Parâmetros

`x`

A coordenada horizontal do centro do arco.

`y`

A coordenada vertical do centro do arco.

`raio`

O raio do arco. Deve ser um valor positivo.

`anguloInicial`

O ângulo em radianos em que o arco começa medido a partir do eixo x positivo.

`anguloFinal`

O ângulo em que o arco finaliza medido a partir do eixo x positivo.

`antiHorario` Optional

Um `Boolean` opcional. Se `verdadeiro`, desenha o arco no sentido anti-horário entre os ângulos inicial e final. O padrão é `falso` (sentido horário).

Exemplos
--------

### Desenhando um círculo completo

O exemplo desenha um círculo completo com o método `arc()`.

#### HTML


```html
<canvas></canvas>
```


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


```js
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 \* Math.PI);
ctx.stroke();
```


#### Resultado

### Diferentes formas demonstradas

Este exemplo desenha diversas formas para mostrar o que é possível fazer com o método `arc()`.
```

<canvas width="150" height="200"></canvas>
```



```js
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");

// Draw shapes
for (let i = 0; i <= 3; i++) {
  for (let j = 0; j <= 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 > 1) {
      ctx.fill();
    } else {
      ctx.stroke();
    }
  }
}
```


#### Resultado

| Screenshot | Live sample |
| --- | --- |
|  |  |

Especificações
--------------

| Specification |
| --- |
| HTML Standard # dom-context-2d-arc-dev |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja mais
---------

* A interface definindo este método: `CanvasRenderingContext2D`
* Utilize `CanvasRenderingContext2D.ellipse()` (en-US) para desenhar um arco elíptico.
CanvasRenderingContext2D.closePath()
====================================

O método **`CanvasRenderingContext2D.closePath()`** da API Canvas 2D faz o ponto da caneta (*pen*) mover-se de volta para o início do sub-caminho (*sub-path*) 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 (*shape*) já estiver fechada, ou tem somente um ponto na tela, esta função não funciona.

Sintaxe
-------
```

void ctx.closePath();
```

Exemplos
--------

### Usando o método `beginPath`

Isto é só um simples trecho de código que usa o método `fillRect`.

#### HTML


```html
<canvas id="canvas"></canvas>
```


#### JavaScript


```js
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();
```


Edite o código abaixo e veja as alterações instantâneas no canvas:
```

<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
  <input id="edit" type="button" value="Edit" />
  <input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code" style="height:140px;">
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(200,20);
ctx.lineTo(120,120);
ctx.closePath(); // draws last line of the triangle
ctx.stroke();</textarea
>
```


```
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);
```

Especificações
--------------

| Specification |
| --- |
| HTML Standard # dom-context-2d-closepath-dev |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* A definição da interface `CanvasRenderingContext2D`
* `CanvasRenderingContext2D.beginPath()`
CanvasRenderingContext2D.fill()
===============================

O método **`CanvasRenderingContext2D.fill()`** da API Canvas 2D preenche um dado *path* ou o *path* atual com o estilo atual de preenchimento usando uma regra de controle diferente de zero, ou uma regra par-ímpar.

Syntax
------
```

void ctx.fill();
void ctx.fill(fillRule);
void ctx.fill(path, fillRule);
```

### Parâmetros

`fillRule`

 O algoritmo que determina se um ponto está do lado de dentro do path ou do lado fora do path.
 Possíveis valores:


`nonzero`

A regra de controle não-zero, que é a regra padrão.

`evenodd`

A regra de controle par-ímpar.


`path`

Um *path* de `Path2D` para preenchimento.

Exemplos
--------

### Usando o método `fill`

Isto é só um simples trecho de código que usa o métod `fill` para contornar um *path*.

#### HTML


```html
<canvas id="canvas"></canvas>
```


#### JavaScript


```js
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.rect(10, 10, 100, 100);
ctx.fill();
```


Edite o código abaixo e veja as alterações instantâneas no canvas:
```

<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
  <input id="edit" type="button" value="Edit" />
  <input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code">
ctx.rect(10, 10, 100, 100);
ctx.fill();</textarea
>
```


```
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);
```

Especificações
--------------

| Specification |
| --- |
| HTML Standard # dom-context-2d-fill-dev |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* A definição da interface `CanvasRenderingContext2D`.
CanvasRenderingContext2D.quadraticCurveTo()
===========================================

o método **`CanvasRenderingContext2D.quadraticCurveTo()`** 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 `moveTo()` before creating the quadratic Bézier curve.

Sintaxe
-------
```

void ctx.quadraticCurveTo(cpx, cpy, x, y);
```

### Parâmetros

`cpx`

O eixo X da coordenada para o ponto de controle.

`cpy`

O eixo Y da coordenada para o ponto de controle.

`x`

O eixo X da coordenada para o ponto final.

`y`

O eixo Y da coordenada para o ponto final.

Exemplos
--------

### Usando o método `quadraticCurveTo`

This is just a simple code snippet drawing a quadratic bezier curve. The control point is red and the start and end points are blue.

#### HTML


```html
<canvas id="canvas"></canvas>
```


#### JavaScript


```js
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);
```

### Trying the `quadraticCurveTo` parameters

Edit the code below and see your changes update live in the canvas:
```

<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
  <input id="edit" type="button" value="Edit" />
  <input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code">
ctx.beginPath();
ctx.moveTo(50,20);
ctx.quadraticCurveTo(230, 30, 50, 100);
ctx.stroke();</textarea
>
```


```
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);
```

Especificações
--------------

| Specification |
| --- |
| HTML Standard # dom-context-2d-quadraticcurveto-dev |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* The interface defining it, `CanvasRenderingContext2D`
* WikiPedia article on Bézier curves.
CanvasRenderingContext2D.clip()
===============================

O método **`CanvasRenderingContext2D.clip()`** da API do Canvas 2D transforma o caminho atualmente construido em um caminho atual de recorte.

Sintaxe
-------
```

void ctx.clip();
void ctx.clip(fillRule);
void ctx.clip(path, fillRule);
```

### Parâmetros

![](/pt-BR/docs/Web/API/CanvasRenderingContext2D/clip/canvas_clipping_path.png)

`fillRule`

 O algoritmo pelo qual determina se um ponto esta dentro de um caminho ou fora de um caminho.
 Valores Possíveis:


`nonzero`

A regra contorno diferente de zero, que é a regra padrão.

`evenodd`

A regra do contorno par ou ímpar.


`path`

Um `Path2D` caminho para recorte.

Exemplos
--------

### Usando do método de corte

Isso é só um simples fragmento de código que usa o método de corte para criar uma região de recorte.

#### HTML


```html
<canvas id="canvas"></canvas>
```


#### JavaScript


```js
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);
```


Edite o código abaixo e veja suas mudanças atualizadas ao vivo no canvas:
```

<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
  <input id="edit" type="button" value="Edit" />
  <input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code">
ctx.arc(100, 100, 75, 0, Math.PI*2, false);
ctx.clip();
ctx.fillRect(0, 0, 100,100);</textarea
>
```


```
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);
```


**Nota:** Tenha consciência de que o `clip()` só funciona com formas adicionadas ao caminho; ele não funciona com uma forma primitiva, como retângulos criados com `fillRect()`. Nesse caso você teria que usar `rect()` para desenhar um caminho de forma retângular para ser recortado.

Especificações
--------------

| Specification |
| --- |
| HTML Standard # dom-context-2d-clip-dev |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Ver também
----------

* A interface como defini-la, `CanvasRenderingContext2D`.
CanvasRenderingContext2D.strokeRect()
=====================================

O método **`CanvasRenderingContext2D.strokeRect()`** da API Canvas 2D desenha um retângulo na posição *(x, y)*, que possui uma largura (*width*) *w* e uma altura (*height*) *h*, e não tem nenhum preenchimento (estilo *stroke*).

Sintaxe
-------
```

void ctx.strokeRect(x, y, width, height);
```

### Parâmetros

`x`

O valor da coordenada x para o ponto inicial do retângulo.

`y`

O valor da coordenada y para o ponto inicial do retângulo.

`width`

A largura do retângulo.

`height`

A altura do retângulo.

Exemplos
--------

### Usando o método `strokeRect`

Isto é só um simples trecho de código que usa o método `strokeRect`.

#### HTML


```html
<canvas id="canvas"></canvas>
```


#### JavaScript


```js
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.strokeStyle = "green";
ctx.strokeRect(10, 10, 100, 100);
```


Edite o código abaixo e veja as alterações instantâneas no canvas:
```

<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
  <input id="edit" type="button" value="Edit" />
  <input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code">
ctx.strokeStyle = "green";
ctx.strokeRect(10, 10, 100, 100);</textarea
>
```


```
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);
```

Especificações
--------------

| Specification |
| --- |
| HTML Standard # dom-context-2d-strokerect-dev |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* A definição da interface `CanvasRenderingContext2D`
* `CanvasRenderingContext2D.strokeStyle` (en-US)
* `CanvasRenderingContext2D.clearRect()`
* `CanvasRenderingContext2D.fillRect()`
CanvasRenderingContext2D.rect()
===============================

O método **`CanvasRenderingContext2D.rect()`** da Canvas 2D API cria um *path* (trajeto) para um retângulo na posição *(x, y)*, cujo tamanho é determinado pelo *width* (largura) e *height* (altura). Esses quatro pontos estão conectados por linhas retas e o *sub-path* (sub-trajeto) é marcado como fechado, para que você possa `fill (preencher)` ou `stroke (contornar)` o retângulo.

Sintaxe
-------
```

void ctx.rect(x, y, width, height);
```

### Parameters

`x`

O valor da coordenada x que indica ponto de início (superior esquerdo) do retângulo.

`y`

O valor da coordenada y que indica ponto de início (superior esquerdo) do retângulo.

`width`

A largura do retângulo.

`height`

A altura do retângulo.

Exemplos
--------

### Usando o método `rect`

Isto é somente um simples fragmentode código que usa o método `rect` para criar um *path*. Para verdadeiramente desenhar um *path* no canvas, você pode usar o método `fill()` ou o `stroke()`. Veja também os métodos `fillRect()` e `strokeRect()`, que podem fazer isto em um único passo.

#### HTML


```html
<canvas id="canvas"></canvas>
```


#### JavaScript


```js
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.rect(10, 10, 100, 100);
ctx.fill();
```


Edite o código abaixo e veja as alterações instantâneas no canvas:
```

<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
  <input id="edit" type="button" value="Edit" />
  <input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code">
ctx.rect(10, 10, 100, 100);
ctx.fill();</textarea
>
```


```
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);
```

Especificações
--------------

| Specification |
| --- |
| HTML Standard # dom-context-2d-rect-dev |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* A interface que a define, `CanvasRenderingContext2D`
* `CanvasRenderingContext2D.fillRect`
* `CanvasRenderingContext2D.strokeRect()`
* `CanvasRenderingContext2D.fill()`
* `CanvasRenderingContext2D.stroke()`
CanvasRenderingContext2D.moveTo()
=================================

O método **`CanvasRenderingContext2D.moveTo()`** da API Canvas 2D move o ponto inicial de um novo sub-caminho (sub-path) para as coordenadas `(x, y)`.

Sintaxe
-------
```

void ctx.moveTo(x, y);
```

### Parâmetros

`x`

O valor da coordenada x.

`y`

O valor da coordenada y.

Exemplos
--------

### Usando o método `moveTo`

Isto é só um simples trecho de código que usa o método `moveTo` para mover a caneta (*pen*) para um deteminado ponto onde vai iniciar o desenho.

#### HTML


```html
<canvas id="canvas"></canvas>
```


#### JavaScript


```js
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(200, 50);
ctx.stroke();
```


Edite o código abaixo e veja as alterações instantâneas no canvas:
```

<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
  <input id="edit" type="button" value="Edit" />
  <input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code">
ctx.beginPath();
ctx.moveTo(50,50);
ctx.lineTo(200, 50);
ctx.stroke()</textarea
>
```


```
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);
```

Especificações
--------------

| Specification |
| --- |
| HTML Standard # dom-context-2d-moveto-dev |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* A definição da interface `CanvasRenderingContext2D`
* `CanvasRenderingContext2D.lineTo()`
* `CanvasRenderingContext2D.stroke()`
CanvasRenderingContext2D.clearRect()
====================================

O método **`CanvasRenderingContext2D.clearRect()`** da API Canvas 2D limpa todos os pixels de um retângulo definido na posição *(x, y)* e tamanho (*width* (largura), *height* (altura)) para uma cor preta transparente, apagando algum conteúdo anterior.

Sintaxe
-------
```

void ctx.clearRect(x, y, width, height);
```

### Parâmetros

`x`

O valor da coordenada x para o ponto inicial do retângulo.

`y`

O valor da coordenada y para o ponto inicial do retângulo.

`width`

A largura do retângulo.

`height`

A altura do retângulo.

Notas de uso
------------

Um problema comum com `clearRect` que pode acontecer, é que pode não funcionar corretamente, caso não seja usada alguma propriedade de *path*. Não esqueça de usar `beginPath()` antes de começar um novo frame depois de chamar `clearRect`.

Exemplos
--------

### Usando o método `clearRect`

Isto é só um simples trecho de código que usa o método `clearRect`.

#### HTML


```html
<canvas id="canvas"></canvas>
```


#### JavaScript


```js
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);
```


Edite o código abaixo e veja as alterações instantâneas no canvas:
```

<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
  <input id="edit" type="button" value="Edit" />
  <input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code" style="height:140px;">
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);</textarea
>
```


```
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);
```

Especificações
--------------

| Specification |
| --- |
| HTML Standard # dom-context-2d-clearrect-dev |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* A definição da interface `CanvasRenderingContext2D`
* `CanvasRenderingContext2D.fillRect()`
* `CanvasRenderingContext2D.strokeRect()`