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
# the-canvas-element

Compatibilidade com navegadores

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
canvas
height
moz-opaque
DeprecatedNon-standard
width

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Non-standard. Check cross-browser support before using.
Deprecated. Not for use in new websites.
See implementation notes.

Ver também