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
<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
HTMLCanvasElement
CanvasRenderingContext2D
CanvasGradient
CanvasImageSource
CanvasPattern
ImageBitmap
ImageData
RenderingContext
TextMetrics
OffscreenCanvas
ExperimentalPath2D
ExperimentalImageBitmapRenderingContext
Experimental
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