O que é a Canvas API e como ela funciona?

A API Canvas é uma ferramenta poderosa que permite manipular gráficos diretamente dentro do seu arquivo JavaScript. Tudo começa com um elemento canvas em HTML. Este elemento serve como uma superfície de desenho que você pode manipular usando os métodos de instância e propriedades da API Canvas. A API Canvas fornece tudo que você precisa para criar visuais incríveis, incluindo formas, texto, animações e até jogos complexos. Ele possui interfaces como HTMLCanvasElement, CanvasRenderingContext2D, CanvasGradient, CanvasPattern, TextMetrics que fornecem métodos e propriedades que você pode usar para criar gráficos no seu arquivo JavaScript. Vamos ver como a API Canvas funciona para que você possa começar a criar gráficos com JavaScript. Primeiro, você precisa criar um elemento canvas no seu arquivo HTML:

<canvas id="my-canvas"></canvas>

O elemento canvas é representado pela interface HTMLCanvasElement, que fornece métodos e propriedades para manipulá-lo. Além disso, você pode usar métodos e propriedades de outras interfaces na API Canvas. Você pode definir um width e height para o seu canvas dentro do HTML:

<canvas id="my-canvas" width="400" height="400"></canvas>

Ou você pode usar as propriedades width e height da interface HTMLCanvasElement:

const canvas = document.getElementById("my-canvas");
canvas.width = 400;
canvas.height = 400;

Por enquanto, você ainda não pode ver nada na tela. Após criar seu elemento canvas, o próximo passo é obter acesso ao contexto de desenho do canvas com o método getContext() da interface HTMLCanvasElement. O contexto mais comum é 2d, que permite desenhar em duas dimensões:

const canvas = document.getElementById("my-canvas");
const ctx = canvas.getContext('2d');

Se você registrar a variável ctx no console, verá os métodos e propriedades de CanvasRenderingContext2D que você pode usar para criar formas, cores, linhas e mais, junto com seus valores padrão:

console.log(ctx);

Uma vez que você tenha o contexto 2D, você pode começar a desenhar na tela. A API Canvas fornece vários métodos e propriedades para desenhar formas, linhas e texto. Uma delas é a propriedade fillStyle, que você pode combinar com o método fillRect() para desenhar um retângulo ou quadrado:

<html>
  <head>
  </head>
  <body>
    <canvas id="my-canvas" width="400" height="400"></canvas>
    <script src="index.js"></script>
  </body>
</html>

const canvas = document.getElementById("my-canvas");

const ctx = canvas.getContext("2d");

// Set the background color
ctx.fillStyle = "crimson";

// Draw a rectangle
ctx.fillRect(1, 1, 150, 100);

fillRect recebe 4 valores numéricos que representam o eixo x, eixo y, largura e altura, respectivamente. Há algo na tela agora. Você também pode desenhar texto ou até criar uma animação. Aqui está uma tela para representar texto:

<canvas id="my-text-canvas" width="300" height="70"></canvas>

Para finalmente desenhar o texto, passe o texto para o método fillText() como o primeiro argumento, seguido pelos valores para os eixos x e y:

<html>
  <head>
  </head>
  <body>
    <canvas id="my-text-canvas" width="300" height="70"></canvas>
    <script src="index.js"></script>
  </body>
</html>

const textCanvas = document.getElementById("my-text-canvas");

const textCanvasCtx = textCanvas.getContext("2d");

// Set font family and size
textCanvasCtx.font = "30px Arial";

// Set text color
textCanvasCtx.fillStyle = "crimson";

// Draw the text
textCanvasCtx.fillText("Hello HTML Canvas!", 1, 50);

O resultado no navegador será o texto vermelho Hello HTML Canvas!. Há muito mais que você pode fazer com a API Canvas. Por exemplo, você pode combiná-lo com requestAnimationFrame para criar animações personalizadas, visualizações, jogos e mais.

Este módulo não possui perguntas. Marque como concluído.

O que é a Canvas API e como ela funciona?

Concluído!