Canvas tutorial

<canvas> é um elemento HTML que pode ser usado para desenhar usando linguagem de "script" (normalmente JavaScript). Isto pode ser usado, por exemplo, para desenhar gráficos, fazer composições de fotos ou simples (e não tão simples) animações. As imagens à direita mostram exemplos de implementações <canvas> que serão parte deste tutorial.

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

Este tutorial descreve como utilizar o elemento <canvas> para desenhar gráficos 2D, iniciando com o básico. Os exemplos fornecidos devem lhe trazer algumas ideias claras sobre o que você pode fazer com o canvas e irá fornecer trechos de código que podem lhe ajudar na contrução do seu próprio conteúdo. 

Antes de começar

Usar o elemento <canvas> não é muito difícil, mas antes de começar, você precisa de um conhecimento básico sobre HTML e JavaScript. O elemento <canvas> não é suportado por alguns navegadores antigos, mas é suportado em versões recentes da maioria dos navegadores. O tamanho padrão de um canvas é de 300px * 150px (largura * altura). Porém, tamanhos customizados podem ser definidos usando as propriedades width e height do CSS. Para desenhar gráficos no canvas iremos usar um contexto de objeto JavaScript, o que criará gráficos em tempo real.

Nesse tutorial

Veja também

Nota dos contribuidores

Devido a um erro técnico lamentável que ocorreu na semana de 17 de junho de 2013, perdemos parte do histórico deste tutorial, incluindo atribuições a todos os contribuidores anteriores ao seu conteúdo. Pedimos desculpas por isso, e espero que você nos perdoe desse infeliz infortúnio.

Etiquetas do documento e colaboradores

 Colaboradores desta página: MarceloBRN, angelosds, Claudiovascaino, gxovano, gutierri, trevorh
 Última atualização por: MarceloBRN,