Canvas

A Canvas API provê maneiras de desenhar gráficos via JavaScript e via elemento HTML <canvas>. Entre outras coisas, ele pode ser utilizado para animação, gráficos de jogos, visualização de dados, manipulação de fotos e processamento de vídeo em tempo real.

A Canvas API foca amplamente em gráficos 2D. A WebGL API, que também usa o elemento <canvas>, desenha gráficos 2D e 3D acelerados por hardware.

Exemplo básico

Este exemplo simples desenha um retângulo verde para um canvas.

HTML

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

JavaScript

O método Document.getElementById() pega uma referência para o elemento HTML <canvas>. Em seguida, o método HTMLCanvasElement.getContext() pega o contexto daquele elemento - a coisa sobre a qual o desenho será renderizado.

O desenho atual é feito usando a interface CanvasRenderingContext2D. A propriedade fillStyle faz o retângulo verde. O método fillRect() coloca seu canto superior direito em (10, 10) e dá a ele o tamanho de 150 unidades de largura e 100 de altura.

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

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

Resultado

Referência

Nota: As interfaces relacionadas ao WebGLRenderingContext são referenciadas sob WebGL.

CanvasCaptureMediaStream é uma interface relacionada.

Guias e Tutoriais

Tutorial Canvas
Um tutorial compreensivo abordando o uso básico da API de Canvas e suas funcionalidades avançadas.
Mergulhando no Canvas HTML5
Uma introdução prática e extensa à API Canvas e WebGL.
Guia Canvas
Uma referência acessível para a API Canvas.
Demonstração: Um ray-caster básico 
Uma demonstração de animação ray-tracing usando canvas.
Manipulando vídeos usando canvas
Combinando <video> e <canvas> para manipular dados de vídeo em tempo real.

Bibliotecas

A API Canvas é extremamente poderosa, mas nem sempre é simples de usar. As bibliotecas listadas abaixo podem fazer a criação de projetos baseados em canvas mais rápida e fácil.

  • EaselJS é uma biblioteca de código aberto que facilita criações de jogos, arte generativa e outras experiências altamente gráficas.
  • Fabric.js é uma biblioteca código aberto em canvas com suporte à SVG.
  • heatmap.js é uma biblioteca de código aberto para criar mapas de calor (heatmaps) baseados em canvas.
  • JavaScript InfoVis Toolkit cria visualizações de dados interativas.
  • Konva.js é uma biblioteca de canvas 2D para aplicações desktop e móveis.
  • p5.js tem um conjunto completo de funcionalidades de desenho canvas para artistas, designers, educadores e iniciantes.
  • Paper.js é um framework de código-aberto para scripting de vetores gŕaficos que funciona sobre o Canvas HTML5.
  • Phaser é um framework de código-aberto rápido, grátis e divertido para jogos de navegador desenvolvidos com Canvas e WebGL.
  • Processing.js  é um conversor da linguagem de visualização Processing.
  • Pts.js é uma biblioteca para codificação criativa e visualização em canvas e SVG.
  • Rekapi é uma API de animação key-framing para Canvas.
  • Scrawl-canvas é uma biblioteca JavaScript de código aberto para criação e manipulação de elementos canvas 2D.
  • O framework ZIM provê conveniências, componentes e controles para programar criatividade no canvas - inclui acessibilidade e centenas de tutoriais cheios de cores.

Nota: Veja a WebGL API para bibliotecas 2D e 3D que usam WebGL.

Especificações

Especificações Estado Comentário
HTML Living Standard
The definition of 'the 2D rendering context' in that specification.
Padrão em tempo real

Compatibilidade de navegador

Aplicações Mozilla ganharam suporte para <canvas> a partir do Gecko 1.8 (Firefox 1.5). O elemento foi originalmente introduzido pela Apple para o Dashboard OS X e Safari. O Internet Explorer suporta <canvas> quando inclui-se um script do projeto Explorer Canvas, da google. Google Chrome e Opera 9 também suportam <canvas>.

Ver também