--- title: Canvas slug: Web/API/Canvas_API tags: - API - Canvas - Referência(2) translation_of: Web/API/Canvas_API original_slug: Web/HTML/Canvas ---

{{CanvasSidebar}}

A Canvas API provê maneiras de desenhar gráficos via JavaScript e via elemento HTML {{HtmlElement("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 {{domxref("Document.getElementById()")}} pega uma referência para o elemento HTML <canvas>. Em seguida, o método {{domxref("HTMLCanvasElement.getContext()")}} pega o contexto daquele elemento - a coisa sobre a qual o desenho será renderizado.

O desenho atual é feito usando a interface {{domxref("CanvasRenderingContext2D")}}. A propriedade {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}} faz o retângulo verde. O método {{domxref("CanvasRenderingContext2D.fillRect()", "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

{{ EmbedLiveSample('Exemplo_básico', 700, 180) }}

Referência

Nota: As interfaces relacionadas ao WebGLRenderingContext são referenciadas sob WebGL.

{{domxref("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 {{HTMLElement("video")}} e {{HTMLElement("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.

Nota: Veja a WebGL API para bibliotecas 2D e 3D que usam WebGL.

Especificações

Especificações Estado Comentário
{{SpecName('HTML WHATWG', '#2dcontext', 'the 2D rendering context')}} {{Spec2('HTML WHATWG')}}

Compatibilidade de navegador

Aplicações Mozilla ganharam suporte para <canvas> a partir do Gecko 1.8 (Firefox 1.5). O elemento foi originalmente introduzido pela Apple para o Dashboard OS X e Safari. O Internet Explorer suporta <canvas> quando inclui-se um script do projeto Explorer Canvas, da google. Google Chrome e Opera 9 também suportam <canvas>.

Ver também