Tutorial de Canvas

O <canvas> é um elemento do HTML que pode ser usado para desenhar gráficos através do uso de scripts (normalmente JavaScript). Pode, por exemplo, ser usado para desenhar gráficos, criar composições de fotos ou criar animações simples (ou não). A imagem abaixo mostra alguns exemplos de implementações do <canvas>  que veremos nos artigos seguintes.

Canvas_tut_examples

O <canvas> foi introduzido inicialmente pela Apple para o Dashboard do Mac OS X e mais tarde implementado no Safari e no Google Chrome. Os navegadores baseados no Gecko 1.8, como o Firefox 1.5, também suportam esse elemento. O elemento <canvas> é parte da especificação WhatWG Web applications 1.0 também conhecida como HTML5.

Essa série de artigos descreverá como usar o elemento  <canvas> para desenhar gráficos 2D, começando com o básico. Os exemplos fornecidos devem lhe dar ideias claras sobre o que pode ser feito com o canvas e lhe fornecerão pedaços de código que pode servir como ponto de partida para a construção de seu próprio conteúdo.

Antes de começar

Usar o elemento <canvas> não é muito díficil mas você precisa de um conhecimento básico de HTML e JavaScript. O elemento <canvas> não é suportado em alguns navegadores antigos, mas é suportado pelas versões mais recentes de todos os principais navegadores. O tamanho padrão do canvas é 300px * 150px (comprimento * altura). Mas tamanhos personalizados podem ser definidos usando as propriedades height e width do CSS. Para poder desenhar gráficos no canvas, usamos um objeto de contexto do Javascript, que cria gráficos em tempo real.

Nesse tutorial

Veja também (em inglês)

Traduzido de developer.mozilla.org