Canvas

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

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);

• HTMLCanvasElement
• CanvasRenderingContext2D
• CanvasGradient
• CanvasImageSource
• CanvasPattern
• ImageBitmap
• ImageData
• RenderingContext
• TextMetrics
• OffscreenCanvas Experimental
• Path2D Experimental
• ImageBitmapRenderingContext Experimental

CanvasCaptureMediaStream é uma interface relacionada.

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.

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.

• WebGL