Canvas
======

A **Canvas API** provê maneiras de desenhar gráficos via JavaScript e via elemento HTML `<canvas>`. Entre outras coisas, ele pode ser utilizado para animação, gráficos de jogos, visualização de dados, manipulação de fotos e processamento de vídeo em tempo real.

A Canvas API foca amplamente em gráficos 2D. A WebGL API, que também usa o elemento `<canvas>`, desenha gráficos 2D e 3D acelerados por hardware.

Exemplo básico
--------------

Este exemplo simples desenha um retângulo verde para um canvas.

### HTML


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

### JavaScript

O método `Document.getElementById()` pega uma referência para o elemento HTML `<canvas>`. Em seguida, o método `HTMLCanvasElement.getContext()` pega o contexto daquele elemento - a coisa sobre a qual o desenho será renderizado.

O desenho atual é feito usando a interface `CanvasRenderingContext2D`. A propriedade `fillStyle` faz o retângulo verde. O método `fillRect()` coloca seu canto superior direito em (10, 10) e dá a ele o tamanho de 150 unidades de largura e 100 de altura.


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

ctx.fillStyle = "green";
ctx.fillRect(10, 10, 150, 100);
```

### Resultado

Referência
----------

* `HTMLCanvasElement` (en-US)
* `CanvasRenderingContext2D`
* `CanvasGradient` (en-US)
* `CanvasImageSource` (en-US)
* `CanvasPattern` (en-US)
* `ImageBitmap` (en-US)
* `ImageData` (en-US)
* `RenderingContext`
* `TextMetrics` (en-US)
* `OffscreenCanvas` (en-US) 
Experimental
* `Path2D` 
Experimental
* `ImageBitmapRenderingContext` (en-US) 
Experimental

**Nota:** As interfaces relacionadas ao `WebGLRenderingContext` são referenciadas sob WebGL.

`CanvasCaptureMediaStream` (en-US) é uma interface relacionada.

Guias e Tutoriais
-----------------

Tutorial Canvas

Um tutorial compreensivo abordando o uso básico da API de Canvas e suas funcionalidades avançadas.

Mergulhando no Canvas HTML5

Uma introdução prática e extensa à API Canvas e WebGL.

Guia Canvas

Uma referência acessível para a API Canvas.

Demonstração: Um *ray-caster* básico

Uma demonstração de animação *ray-tracing* usando canvas.

Manipulando vídeos usando canvas (en-US)

Combinando `<video>` e `<canvas>` para manipular dados de vídeo em tempo real.

Bibliotecas
-----------

A API Canvas é extremamente poderosa, mas nem sempre é simples de usar. As bibliotecas listadas abaixo podem fazer a criação de projetos baseados em canvas mais rápida e fácil.

* EaselJS é uma biblioteca de código aberto que facilita criações de jogos, arte generativa e outras experiências altamente gráficas.
* Fabric.js é uma biblioteca código aberto em canvas com suporte à SVG.
* heatmap.js é uma biblioteca de código aberto para criar mapas de calor (heatmaps) baseados em canvas.
* JavaScript InfoVis Toolkit cria visualizações de dados interativas.
* Konva.js é uma biblioteca de canvas 2D para aplicações *desktop* e móveis.
* p5.js tem um conjunto completo de funcionalidades de desenho canvas para artistas, *designers*, educadores e iniciantes.
* Paper.js é um framework de código-aberto para scripting de vetores gŕaficos que funciona sobre o Canvas HTML5.
* Phaser é um framework de código-aberto rápido, grátis e divertido para jogos de navegador desenvolvidos com Canvas e WebGL.
* Processing.js é um conversor da linguagem de visualização Processing.
* Pts.js é uma biblioteca para codificação criativa e visualização em canvas e SVG.
* Rekapi é uma API de animação *key-framing* para Canvas.
* Scrawl-canvas é uma biblioteca JavaScript de código aberto para criação e manipulação de elementos canvas 2D.
* O framework ZIM provê conveniências, componentes e controles para programar criatividade no canvas - inclui acessibilidade e centenas de tutoriais cheios de cores.

**Nota:** Veja a WebGL API para bibliotecas 2D e 3D que usam WebGL.

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

| Specification |
| --- |
| HTML Standard # the-canvas-element |

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

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

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

* WebGL