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.
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
- Uso básico
- Desenhando formas
- Usando imagens
- Aplicando estilos e cores
- Transformações
- Composição
- Animações básicas
Veja também (em inglês)
- Canvas topic page
- Drawing Graphics with Canvas
- Canvas examples
- HTML5 Tutorial
- Drawing Text Using a Canvas
- Adding Text to Canvas
- Canvas Demos – Games, applications, tools and tutorials
- Canvas Drawing and Animation Application
- Interactive canvas tutorial
- Canvas Cheat Sheet with all attributes and methods
- Adobe Illustrator to Canvas plug-in
- HTML5CanvasTutorials
- How to draw N grade Bézier curves with the Canvas API
- 31 days of canvas tutorials
- W3C Standard
- HTML5 Canvas tutorials and reference