Canvas

Baseline Widely available

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

ACanvas API provê maneiras de desenhar gráficos viaJavaScript e via elementoHTML <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. AWebGL 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></canvas>

JavaScript

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

O desenho atual é feito usando a interfaceCanvasRenderingContext2D. A propriedadefillStyle faz o retângulo verde. O métodofillRect() 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);

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: Umray-caster básico: Uma demonstração de animaçãoray-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çõesdesktop 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çãokey-framing para Canvas.
Scrawl-canvas é uma biblioteca JavaScript de código aberto para criação e manipulação de elementos canvas 2D.
O frameworkZIM provê conveniências, componentes e controles para programar criatividade no canvas - inclui acessibilidade e centenas de tutoriais cheios de cores.