Adicionado ao HTML5, o elemento HTML <canvas> é um elemento que pode ser usado para desenhar gráficos via código (nomalmente JavaScript). Por exemplo, ele pode ser usado para desenhar gráficos, fazer composição de fotos, criar animações ou até mesmo fazer processamento ou renderização de vídeo em tempo real.

Aplicativos Mozilla ganharam suporte ao <canvas> a partir do Gecko 1.8 (por exemplo Firefox 1.5). O elemento foi originalmente introduzido pela Apple para o OS X Dashboard e Safari. Internet Explorer suporta <canvas> a partir da versão 9; para versões mais antigas do IE, uma página pode efetivamente adicionar suporte para <canvas> ao incluír um código do projeto da Google chamado Explorer Canvas. Google Chrome e Opera 9 também suportam <canvas>.

O elemento <canvas> é também usado pelo WebGL para fazer aceleração gráfica 3D por hardware nas páginas da web.

Exemplo

Este é apenas um trecho de código simples que usa o método CanvasRenderingContext2D.fillRect().

HTML

<canvas id="canvas"></canvas>

JavaScript

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.fillStyle = 'green';
ctx.fillRect(10, 10, 100, 100);

Edite o código abaixo e veja suas alterações atualizadas imediatamente no canvas:

Referências

As interfaces relacionadas ao WebGLRenderingContext são referenciadas em WebGL.

Documentações e Tutoriais

 
Tutorial Canvas
Um tutorial compreensivo abordando o uso básico do <canvas> e suas características avançadas.
Trechos de código: Canvas
Algumas extensões para desenvolvedores envolvendo <canvas>.
Demo: A basic raycaster
Uma demo de uma animação ray-tracing usando canvas.
Desenhando objetos DOM dentro de um canvas
Como desenhar um conteúdo DOM, assim como elementos HTML, dentro de um canvas.
Manipulando vídeo usando canvas
Combinando <video> e <canvas> para manipular dados de vídeo em tempo real.

Ver Todos..

Recursos

Gerais

Bibliotecas

  • Fabric.js é uma biblioteca código aberto em canvas com suporte à SVG.
  • Kinetic.js é uma biblioteca código aberto com foco em interatividade para aplicações desktop e mobile.
  • Paper.js é um framework código aberto para códificação de gráficos vetoriais que é executado em cima do HTML5 Canvas.
  • Origami.js é uma biblioteca de canvas leve de código aberto.
  • libCanvas é um poderoso e leve framework para canvas.
  • Processing.js é uma adpação da Processing visualization language.
  • PlayCanvas é um game engine de código aberto.
  • Pixi.js é um game engine de código aberto.
  • PlotKit é uma biblioteca de de contruição e plotação de gráficos.
  • Rekapi é uma API de animação de quadros para Canvas.
  • PhiloGL é um framework  WebGL para visualização de dados, criação de código e desenvolvimento de jogos
  • JavaScript InfoVis Toolkit cria visualizações interativas de dados em Canvas 2D para a Web .
  • EaselJS é uma biblioteca grátis/de código aberto para facilitar a utilização de canvas para jogos e arte
  • Scrawl-canvas é outra biblioteca javascript de código aberto para criar e manipular elementos de canvas 2d

Especificações

Especificações Estado Comentário
WHATWG HTML Living Standard
The definition of 'Canvas' in that specification.
Living Standard  

Ver também

Comunidade

Etiquetas do documento e colaboradores

Etiquetas: 
 Colaboradores desta página: alipseight, MarceloBRN, juniorgarcia, erickzanardo, teoli, matheusmariano
 Última atualização por: alipseight,