# Como usar <canvas> HTML para criar framework com conteúdo gráfico O elemento `` em HTML possibilita criar uma área para adicionar conteúdo gráfico ou animações usando JavaScript. Um objeto de contexto 2D é criado e, com os diferentes métodos da API ``, você consegue especificar o conteúdo que deseja exibir. ## O que é a tag `` em HTML? A tag `` em HTML é um elemento que oferece um espaço de desenho onde você pode criar **conteúdo gráfico ou animações** usando JavaScript. Essa área é definida pelos atributos de altura e largura e pode ser posicionada em qualquer lugar de um documento HTML usando a tag HTML ``. O conteúdo desenhado dentro do `` não é tratado como elementos HTML individuais e, por isso, não pode ser estilizado com CSS. No entanto, o próprio `` pode ter estilos aplicados via CSS, como bordas, largura, altura e posicionamento. Caso o navegador não ofereça suporte ao ``, qualquer conteúdo HTML colocado entre as tags `` e </canvas> será exibido como fallback. No entanto, quase todos os navegadores modernos já oferecem suporte nativo a esse elemento. ## Qual é a sintaxe da tag `` em HTML? O elemento `` em HTML não oferece nenhuma ferramenta de design integrada. Ele apenas disponibiliza um framework que permite usar JavaScript para criar conteúdo gráfico. A sintaxe básica do elemento é a seguinte: ```html ``` Nomeie o elemento usando `id` e atribua suas dimensões com `width` e `height`. Opcionalmente, você pode usar outros parâmetros para especificar o design do conteúdo gráfico. ## Como funciona a tag ``? Você pode usar a sintaxe acima para criar uma área simples. No exemplo abaixo, a área terá 500 pixels de largura e 250 pixels de altura. Este é o código: ```html

Exemplo de canvas HTML

``` Esse código criará um espaço em branco. Para preencher o elemento `` em HTML com **formas, imagens, textos ou gradientes** (ou animar elementos), você terá que usar JavaScript. O conteúdo será renderizado como bitmap, no qual cada pixel é manipulado individualmente. Ele poderá ser exportado para formatos como PNG ou JPEG posteriormente. Para usar o elemento, aplique o método `getElementById()`. Ele só funcionará se você tiver atribuído um ID único ao espaço de ``. Se quiser pintar, desenhar ou interagir com a área definida, você terá que criar um **objeto de contexto 2D**. Dando continuidade ao exemplo acima, o código ficaria assim: ```html const ExemploCanvas = document.getElementById("ExemploCanvas"); const ctx = ExemploCanvas.getContext("2d"); ``` Agora, podemos usar o elemento `` em HTML como uma tela. Começaremos posicionando um retângulo simples em uma área definida usando a função `fillRect()`. Ele terá a cor azul-petróleo com 200 pixels de largura e 150 pixels de altura. Vamos posicioná-lo a 10 pixels da borda esquerda e 50 pixels da borda superior. Este é o código: ```html

Exemplo de canvas HTML

``` ## Quais são os usos de `` em HTML? Apesar de termos desenhado apenas um retângulo simples no exemplo acima, você também pode usar o elemento `` para criar formas e designs muito mais complexos. Por exemplo, é possível criar **arcos, textos, transparências, gradientes de cor e gráficos** nos formatos *JPEG* e *PNG*, que podem ser recortados, escalados e posicionados. Você também pode usar a função de tempo do JavaScript para implementar animações em uma tag `` em HTML. ## Quais dimensões um elemento `` pode ter? As dimensões máximas de um elemento `` em HTML variam dependendo do navegador usado e de seu ambiente. Por exemplo, o limite no iOS é 4096 x 4096 pixels, enquanto outros sistemas permitem ultrapassar 10000 x 10000 pixels. A área não se ajusta automaticamente para **preservar as proporções**. Se necessário, é preciso definir regras de estilo no CSS para torná-lo responsivo e adequado para diferentes dispositivos ## Métodos com a API `` em HTML Vimos acima como criar um objeto de contexto 2D. Usando o comando `getContext("2d")`, você consegue preencher a área `` como quiser. Abaixo, resumimos os métodos mais importantes que estão disponíveis na API. ### Texto
Método Descrição
`font` Define a fonte do texto
`fillText()` Insere o texto (completamente preenchido) na área `` em HTML
`strokeText()` Insere o texto (apenas contornos)
### Imagem
Método Descrição
`drawImage()` Posiciona uma imagem ou vídeo em um elemento `` em HTML
### Desenhos
Método Descrição
`fillRect()` Desenha um retângulo preenchido
`strokeRect()` Desenha um retângulo sem preenchimento
`clearRect()` Limpa os pixels especificados dentro de um retângulo
### Caminho
Método Descrição
`beginPath()` Inicia um novo caminho
`lineTo()` Desenha uma linha para o caminho
`moveTo()` Move o caminho para um ponto específico dentro da área
### Design
Método Descrição
`addColorStop()` Especifica uma cor e uma posição em um objeto gradiente
`createLinearGradient()` Cria um objeto gradiente linear
`createPattern()` Repete o elemento especificado
`shadowBlur` Define ou retorna o nível de desfoque nas sombras
`shadowColor` Define ou retorna a cor usada nas sombras
### Funções adicionais
Método Descrição
`restore()` Restaura um desenho para o mesmo estado da última vez em que ele foi salvo
`save()` Salva o estado atual do desenho e todos os seus atributos
## Exemplo de `` em HTML com texto e gradiente de cor Em nosso último exemplo, combinaremos alguns dos métodos apresentados na seção acima. Primeiro, vamos criar uma área com as dimensões **500 x 250 pixels** usando a tag `` em HTML. Em seguida, criaremos um **objeto de contexto 2D**. Por fim, vamos inserir um título com contorno e uma frase com um gradiente de cor. ```html

Exemplo de canvas HTML com texto e gradiente de cor

Este exemplo usa os métodos strokeText() e gradiente.

``` This is a markdown version of: [https://www.ionos.com/pt-br/digitalguide/sites-de-internet/desenvolvimento-web/canvas-html/](https://www.ionos.com/pt-br/digitalguide/sites-de-internet/desenvolvimento-web/canvas-html/) for AI/LLM consumption.