Esta página foi traduzida do inglês pela comunidade.Saiba mais e junte-se à comunidade MDN Web Docs.
Canvas tutorial
<canvas> é um elementoHTML que pode ser usado para desenhar usando linguagem de "script" (normalmenteJavaScript). Isto pode ser usado, por exemplo, para desenhar gráficos, fazer composições de fotos ou simples (enão tão simples) animações. As imagens à direita mostram exemplos de implementações<canvas> que serão parte deste tutorial.
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.
Introduzido pela primeira vez no WebKit pela Apple para o OS X Dashboard, o<canvas>, desde então, tem sido implementado em navegadores. Hoje, todos os principais navegadores suportam isso.
Antes de começar
Usar o elemento<canvas>não é muito difícil, mas você precisa de um conhecimento básico sobreHTML eJavaScript. 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 propriedadeswidth eheight 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.