---
title: HTMLCanvasElement
slug: Web/API/HTMLCanvasElement
translation_of: Web/API/HTMLCanvasElement
---
<div>
<div>{{APIRef("Canvas API")}}</div>
</div>

<p>La interfaz <strong><code><span>HTMLCanvasElement</span></code></strong> provee propiedades y métodos para manipular la capa de presentación de los elementos de tipo canvas. La interfaz <code>HTMLCanvasElement</code> también hereda las propiedades y métodos de la interfaz {{domxref("HTMLElement")}} .</p>

<h2 id="Propiedades">Propiedades</h2>

<p><em>Hereda propiedades de la interfaz padre, </em><em>{{domxref("HTMLElement")}}.</em></p>

<dl>
 <dt>{{domxref("HTMLCanvasElement.height")}}</dt>
 <dd>Un entero positivo que se asocia al atributo HTML {{htmlattrxref("height", "canvas")}} del elemento {{HTMLElement("canvas")}} interpretada en píxeles CSS. Cuando el atributo no está especificado, o si este se inicializa a un valor inválido, como un negativo, el valor 150 es usado por defecto.</dd>
 <dt>{{domxref("HTMLCanvasElement.mozOpaque")}} {{non-standard_inline}}</dt>
 <dd>Un {{jsxref("Boolean")}} asociado al atributo HTML {{htmlattrxref("moz-opaque", "canvas")}} del elemento {{HTMLElement("canvas")}} . Proporciona al canvas una forma de saber si  la transparencia será considerada un factor. Si el canvas conoce que no hay transparencia, el desempeño de renderezación será optimizado.</dd>
 <dt>{{domxref("HTMLCanvasElement.width")}}</dt>
 <dd>Un entero positivo asociado al atributo HTML {{htmlattrxref("width", "canvas")}} del elemento canvas {{HTMLElement("canvas")}} interpretado en píxeles CSS. Cuando el atributo no está especificado, o si se inicializa a un valor inválido, como un negativo, se utiliza el valor 300 por defecto.</dd>
</dl>

<h2 id="Métodos">Métodos</h2>

<p><em>Herada métodos de la interfaz padre, </em><em>{{domxref("HTMLElement")}}.</em></p>

<dl>
 <dt>{{domxref("HTMLCanvasElement.captureStream()")}} {{experimental_inline}}</dt>
 <dd>Retorna un {{domxref("CanvasCaptureMediaStream")}} que es una captura de video en tiempo real, de la superficie del canvas.</dd>
 <dt>{{domxref("HTMLCanvasElement.getContext()")}}</dt>
 <dd>Retorna el contexto del dibujado del canvas, o bien null(nulo) si el ID de contexto no está soportado. Un contexto de dibujo, te permite dibujar sobre el canvas. Llamando al método getContext con el parámetro <code>"2d"</code> retorna un objeto {{domxref("CanvasRenderingContext2D")}} , mientras que el llamarlo con el parámetroca <code>"experimental-webgl"</code> (o <code>"webgl"</code>) retorna un objeto {{domxref("WebGLRenderingContext")}} . Este tipo de contexto sólo está disponible en navegadores que implementen <a href="/en-US/docs/Web/WebGL">WebGL</a>.</dd>
 <dt>{{domxref("HTMLCanvasElement.toDataURL()")}}</dt>
 <dd>Retorna una data-URL conteniendo una representación de la imagen en el formato especificado por el tipo de parámetro(png por defecto). La imagen de retorno se encuentra a una resolución de 96dpi.</dd>
 <dt>{{domxref("HTMLCanvasElement.toBlob()")}}</dt>
 <dd>Crea un objeto {{domxref("Blob")}} representando la imagen contenida en el canvas; este archivo puede ser cacheado en disco o bien almacenado en memoria, lo cual dependerá del "user-agent"(especificación del navegador).</dd>
 <dt>{{domxref("HTMLCanvasElement.mozGetAsFile()")}} {{non-standard_inline}} {{deprecated_inline}}</dt>
 <dd>Retorna un objeto {{domxref("File")}} representando una imagen contenida en el canvas; este archivo es del tipo memory-based, con su nombre especificado. Si el tipo no se especifica, el tipo usado por defecto es <code>image/png</code>.</dd>
 <dt>{{domxref("HTMLCanvasElement.mozFetchAsStream()")}} {{non-standard_inline}}</dt>
 <dd>Crea un nuevo flujo de entrada, el cual una vez listo, proveerá los contenidos del canvas como datos de imagen. Cuando el nuevo flujo está listo, la retrollamada específica el método {{ifmethod("nsIInputStreamCallback", "onInputStreamReady")}} es invocada. Si no se especifica el tipo, el tipo de imagen por defecto es <code>image/png.</code>
 <div class="note"><strong>Nota:</strong> Sólo puede ser invocado desde Chrome.</div>
 </dd>
</dl>

<h2 id="Especificaciones">Especificaciones</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Especificación</th>
   <th scope="col">Estado</th>
   <th scope="col">Comentario</th>
  </tr>
  <tr>
   <td>{{SpecName('Media Capture DOM Elements', '#html-media-element-media-capture-extensions', 'HTMLCanvasElement')}}</td>
   <td>{{Spec2('Media Capture DOM Elements')}}</td>
   <td>Añade el método  <code>captureStream()</code>.</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML WHATWG', "#the-canvas-element", "HTMLCanvasElement")}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td>El método <code>getContext()</code>ahora retorna un objeto {{domxref("RenderingContext")}} en vez de un objeto opaco.<br>
    Los métodos  <code>probablySupportsContext()</code>, <code>setContext()</code> y <code>transferControlToProxy() han sido añadidos</code>.</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5.1', "scripting-1.html#the-canvas-element", "HTMLCanvasElement")}}</td>
   <td>{{Spec2('HTML5.1')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', "scripting-1.html#the-canvas-element", "HTMLCanvasElement")}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td>Definición Inicial.</td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilidad_en_Navegadores">Compatibilidad en Navegadores</h2>

<div>{{CompatibilityTable}}</div>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Característica</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Soporte básico (<code>2D</code> context)</td>
   <td>4.0</td>
   <td>{{CompatGeckoDesktop('1.9.2')}}</td>
   <td>9.0</td>
   <td>9.0 [1]</td>
   <td>3.1</td>
  </tr>
  <tr>
   <td><code>webgl</code> context</td>
   <td>9.0 as <code>experimental-webgl</code><br>
    ~33 as <code>webgl</code></td>
   <td>{{CompatGeckoDesktop('1.9.2')}} as <code>experimental-webgl</code><br>
    {{CompatGeckoDesktop('24')}} as <code>webgl</code></td>
   <td>11.0 as <code>experimental-webgl</code></td>
   <td>9.0 as <code>experimental-webgl</code>, behind a user pref.<br>
    15.0 as <code>experimental-webgl</code></td>
   <td>5.1 as <code>experimental-webgl</code><br>
    ~8.0 as <code>webgl</code></td>
  </tr>
  <tr>
   <td><code>toBlob()</code></td>
   <td>{{CompatNo}} (bug <a href="http://crbug.com/67587">67587</a>)</td>
   <td>{{CompatGeckoDesktop('19')}} [2]</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatNo}} (bug <a href="https://bugs.webkit.org/show_bug.cgi?id=71270">71270</a>)</td>
  </tr>
  <tr>
   <td><code>probablySupportsContext()</code>,<br>
    <code>setContext()</code>,<br>
    <code>transferControlToProxy()</code> {{experimental_inline}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td><code>mozGetAsFile()</code> {{non-standard_inline}} {{deprecated_inline}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatGeckoDesktop('2')}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td><code>mozFetchAsStream()</code> {{non-standard_inline}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatGeckoDesktop('13')}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td><code>captureStream()</code> {{experimental_inline}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatGeckoDesktop('41')}}</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>Característica</th>
   <th>Android</th>
   <th>Chrome para Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Soporte básico (<code>2D</code> context)</td>
   <td>2.1</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>10.0 [1]</td>
   <td>3.2</td>
  </tr>
  <tr>
   <td><code>webgl</code> context</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatVersionUnknown}} as <code>experimental-webgl</code></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>toBlob()</code></td>
   <td>{{CompatNo}} (bug <a href="http://crbug.com/67587">67587</a>)</td>
   <td>{{CompatNo}} (bug <a href="http://crbug.com/67587">67587</a>)</td>
   <td>{{CompatGeckoMobile('18')}} [2]</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatNo}} (bug <a href="https://bugs.webkit.org/show_bug.cgi?id=71270">71270</a>)</td>
  </tr>
  <tr>
   <td><code>probablySupportsContext()</code>,<br>
    <code>setContext()</code>,<br>
    <code>transferControlToProxy() </code>{{experimental_inline}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td><code>mozGetAsFile()</code> {{non-standard_inline}} {{deprecated_inline}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatGeckoMobile('2')}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td><code>mozFetchAsStream()</code> {{non-standard_inline}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatGeckoMobile('13')}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td><code>captureStream() </code>{{experimental_inline}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatGeckoMobile('41')}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] Opera Mini 5.0 y posteriores poseen soporte parcial.</p>

<p>[2] Soporte para un tercer parámetro, ha sido añadido sólo en Gecko 25: cuando se utiliza con el tipo <code>"image/jpeg"</code>, este argumento especifica la calida de imagen.</p>

<h2 id="Ver_también">Ver también</h2>

<ul>
 <li>Elementos HTML implementando esta interfaz: {{HTMLElement("canvas")}}.</li>
</ul>