Canvas

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

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.

js
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

Specification
HTML Standard
# the-canvas-element

Compatibilidade com navegadores

BCD tables only load in the browser

Ver também