--- 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.
Este exemplo simples desenha um retângulo verde para um canvas.
<canvas id="canvas"></canvas>
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);
{{ EmbedLiveSample('Exemplo_básico', 700, 180) }}
Nota: As interfaces relacionadas ao WebGLRenderingContext
são referenciadas sob WebGL.
{{domxref("CanvasCaptureMediaStream")}} é uma interface relacionada.
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 | Estado | Comentário |
---|---|---|
{{SpecName('HTML WHATWG', '#2dcontext', 'the 2D rendering context')}} | {{Spec2('HTML WHATWG')}} |
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>
.