---
title: HTMLCanvasElement.getContext()
slug: Web/API/HTMLCanvasElement/getContext
tags:
  - API
  - Canvas
  - HTMLCanvasElement
  - Referencia
  - metodo
translation_of: Web/API/HTMLCanvasElement/getContext
---
<div>{{APIRef("Canvas API")}}</div>

<p>O metodo <strong><code>HTMLCanvasElement.getContext()</code></strong> retorna um contexto de desenho no canvas, ou {{jsxref("null")}} se o contexto identificado não é suportado.</p>

<h2 id="Syntax">Syntax</h2>

<pre class="syntaxbox"><var><em>canvas</em>.getContext(<em>contextType, contextAttributes</em>);</var>
</pre>

<h3 id="Parametros">Parametros</h3>

<dl>
 <dt>contextType</dt>
 <dd>É um {{domxref("DOMString")}} contendo o contexto identificador definindo o contexto de desenho associado ao canvas.        Os valores possiveis são:
 <ul>
  <li><code>"2d"</code>, levando a criação de um objeto {{domxref("CanvasRenderingContext2D")}} representando uma  renderização bidimensional.</li>
  <li><code>"webgl"</code> (or <code>"experimental-webgl"</code>) que criará um objeto {{domxref("WebGLRenderingContext")}} representando uma renderização tridimensional. Esse contexto está disponivel somente em browsers que implementam <a href="https://developer.mozilla.org/en-US/docs/Web/WebGL">WebGL</a> versão 1 (OpenGL ES 2.0).</li>
  <li><code>"webgl2"</code> que criará um objeto {{domxref("WebGL2RenderingContext")}} representando uma renderização tridimensional. Esse contexto está disponivel somente em browsers que implementam <a href="https://developer.mozilla.org/en-US/docs/Web/WebGL">WebGL</a> versão 2 (OpenGL ES 3.0). {{experimental_inline}}</li>
  <li><code>"bitmaprenderer"</code> que criará um  {{domxref("ImageBitmapRenderingContext")}} que apenas provê a funcionalidade de substituir o conteúdo do canvas pelo de um {{domxref("ImageBitmap")}}.</li>
 </ul>

 <div class="note">
 <p><strong>Note</strong>: O identificador "<code>experimental-webgl</code>" é usado em novas implementações do WebGL. Essas implementações ou ainda não passaram nos casos de teste, ou os drivers gráficos na plataforma ainda não estão estáveis. O <a href="https://www.khronos.org/">Khronos Group</a> certifica as implementações do WebGL sob certas <a href="https://www.khronos.org/registry/webgl/sdk/tests/CONFORMANCE_RULES.txt">regas de conformidade</a>.</p>
 </div>
 </dd>
 <dt><code>contextAttributes</code></dt>
 <dd>
 <p>Você pode usar alguns atributos de contexto quando criar o seu contexto de renderização, por exemplo:</p>

 <pre class="brush: js">canvas.getContext('webgl',
                 { antialias: false,
                   depth: false });</pre>
 Atributos de contexto 2d:

 <ul>
  <li><strong><code>alpha</code></strong>: Boleano que indica se o canvas contém um canal alfa. Se definido como <code>false</code>, o browser saberá que o resultado será sempre opaco, o que pode acelerar o desenho de conteudo transparente e imagens.</li>
  <li>{{non-standard_inline}} (Gecko only) <strong><code>willReadFrequently</code></strong>: Boleano que indica quando uma série de operações read-back estão planejadas. Isso forçará o uso de renderização 2D no canvas via software (ao invés de utilizar GPU) o que pode salvar memoria quando {{domxref("CanvasRenderingContext2D.getImageData", "getImageData()")}} for chamado frequentemente. Essa opção está disponivel somente, se a flag <code>gfx.canvas.willReadFrequently.enable</code> está definida como <code>true</code> (o que, por padrão, é o caso do B2G/Firefox OS apenas).</li>
  <li>{{non-standard_inline}} (Blink only) <strong><code>storage</code></strong>: String que indica qual storage é usado ("persistent" por padrão).</li>
 </ul>
 Atributos de contexto WebGL:

 <ul>
  <li><strong><code>alpha</code></strong>: Boleano que indica se o canvas contém um buffer alfa.</li>
  <li><strong><code>depth</code></strong>: Boleano que indica que o buffer do desenho tem um buffer de profundidade de pelo menos 16 bits.</li>
  <li><strong><code>stencil</code></strong>: Boleano que indica que o buffer do desenho tem um buffer de stencil de pelo menos 8 bits.</li>
  <li><strong><code>antialias</code></strong>: Boleano que indica se deve realizar o anti-aliasing ou não.</li>
  <li><strong><code>premultipliedAlpha</code></strong>: Boleano que indica se o compositor da página vai assumir que o buffer do desenho contendo cores com alfa pré-multiplicado.</li>
  <li><strong><code>preserveDrawingBuffer</code></strong>: Se o valor é <code>true</code> os buffers não serão limpos e preservarão seus valores até serem limpos ou subrescritos pelo autor.</li>
  <li>
   <p><code><strong>failIfMajorPerformanceCaveat</strong></code>: Boleano que indica se um contexto será criado se a performance do sistema for baixa.</p>
  </li>
 </ul>
 </dd>
</dl>

<h3 id="Return_value">Return value</h3>

<p>Um {{domxref("RenderingContext")}} que pode ser:</p>

<ul>
 <li>{{domxref("CanvasRenderingContext2D")}} para <code>"2d"</code>,</li>
 <li>{{domxref("WebGLRenderingContext")}} para <code>"webgl"</code> e <code>"experimental-webgl"</code>,</li>
 <li>{{domxref("WebGL2RenderingContext")}} para <code>"webgl2"</code> ou</li>
 <li>{{domxref("ImageBitmapRenderingContext")}} para <code>"bitmaprenderer"</code>.</li>
</ul>

<p>Se o <em>contextType</em> não bater com um possivel contexto de desenho,<code>null</code> é retornado.</p>

<h2 id="Examples">Examples</h2>

<p>Dado este elemento {{HTMLElement("canvas")}}:</p>

<pre class="brush: html">&lt;canvas id="canvas" width="300" height="300"&gt;&lt;/canvas&gt;
</pre>

<p>Você pega um contexto <code>2d</code> do canvas com o código a seguir:</p>

<pre class="brush: js">var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
console.log(ctx); // CanvasRenderingContext2D { ... }
</pre>

<p>Agora você tem <a href="/en-US/docs/Web/API/CanvasRenderingContext2D">contexto de renderização 2d</a> para o canvas e você pode desenhar nele.</p>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-canvas-getcontext", "HTMLCanvasElement.getContext")}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td>Nenhuma mudança desde o ultimo snapshot, {{SpecName('HTML5 W3C')}}</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5.1', "scripting-1.html#dom-canvas-getcontext", "HTMLCanvasElement.getContext")}}</td>
   <td>{{Spec2('HTML5.1')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', "scripting-1.html#dom-canvas-getcontext", "HTMLCanvasElement.getContext")}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td>Snapshot do {{SpecName('HTML WHATWG')}} contendo a definição inicial.</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Compatibilidade com navegadores</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Edge</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support (<code>2d</code> context)</td>
   <td>{{CompatChrome(4)}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop("1.9.2")}}</td>
   <td>{{CompatIE(9)}}</td>
   <td>{{CompatOpera(9)}}</td>
   <td>{{CompatSafari(3.1)}}</td>
  </tr>
  <tr>
   <td><code>webgl</code> context</td>
   <td>{{CompatChrome(9)}}<sup>[1]</sup><br>
    {{CompatChrome(33)}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop('1.9.2')}}<sup>[1]</sup><br>
    {{CompatGeckoDesktop('24')}}</td>
   <td>11.0<sup>[2]</sup></td>
   <td>9.0<sup>[3]</sup></td>
   <td>5.1<sup>[2]</sup></td>
  </tr>
  <tr>
   <td><code>webgl2</code> context </td>
   <td>{{CompatChrome(56)}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoDesktop('25')}}<sup>[4]</sup></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td>2d <code>alpha</code> context attribute</td>
   <td>32</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoDesktop(30)}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td>
    <p><code>failIfMajorPerformanceCaveat</code> attribute</p>
   </td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoDesktop(41)}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td>bitmaprenderer context</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoDesktop(46)}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Chrome for Android</th>
   <th>Edge</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support (<code>2d</code> context)</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoMobile("1.9.2")}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td><code>webgl</code> context</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}<sup>[2]</sup></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>webgl2</code> context </td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td>2d <code>alpha</code> context attribute</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile(30)}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td><code>failIfMajorPerformanceCaveat</code> attribute</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile(41)}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td>bitmaprenderer context</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile(46)}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] Chrome 9 e Gecko 1.9.2 inicialmente implementaram isso como um <code>experimental-webgl</code>. Desde o Chrome 33 e Gecko 24 é implementado como definido pelo padrão: <code>webgl</code>.</p>

<p>[2] Internet Explorer 11, WebKit 5.1 e Firefox Mobile implementaram isso como um <code>experimental-webgl</code>.</p>

<p>[3] Opera 9 implementou isso como um <code>experimental-webgl</code>, ativado nas preferencias do usuario, na versão 15.0 a preferencia de usuario foi removida.</p>

<p>[4] Gecko 25 implementou isso como um "<code>experimental-webgl2</code>" ativado na preferencia do usuario <code>webgl.enable-prototype-webgl2</code>. Apartir do Gecko 42, a string "<code>webgl2</code>"é usada na mesma configuração e "<code>experimental-webgl2</code>" não é mais aceito.</p>

<h2 id="See_also">See also</h2>

<ul>
 <li>A definição de interface, {{domxref("HTMLCanvasElement")}}.</li>
 <li>{{domxref("OffscreenCanvas.getContext()")}}</li>
 <li>Contextos de renderização disponiveis: {{domxref("CanvasRenderingContext2D")}}, {{domxref("WebGLRenderingContext")}} and {{domxref("WebGL2RenderingContext")}} and {{domxref("ImageBitmapRenderingContext")}}.</li>
</ul>