aboutsummaryrefslogtreecommitdiff
path: root/files/es/web/api/htmlcanvaselement
diff options
context:
space:
mode:
Diffstat (limited to 'files/es/web/api/htmlcanvaselement')
-rw-r--r--files/es/web/api/htmlcanvaselement/getcontext/index.html284
-rw-r--r--files/es/web/api/htmlcanvaselement/height/index.html121
-rw-r--r--files/es/web/api/htmlcanvaselement/index.html249
-rw-r--r--files/es/web/api/htmlcanvaselement/toblob/index.html261
-rw-r--r--files/es/web/api/htmlcanvaselement/todataurl/index.html159
-rw-r--r--files/es/web/api/htmlcanvaselement/width/index.html119
6 files changed, 1193 insertions, 0 deletions
diff --git a/files/es/web/api/htmlcanvaselement/getcontext/index.html b/files/es/web/api/htmlcanvaselement/getcontext/index.html
new file mode 100644
index 0000000000..cb77b1594e
--- /dev/null
+++ b/files/es/web/api/htmlcanvaselement/getcontext/index.html
@@ -0,0 +1,284 @@
+---
+title: HTMLCanvasElement.getContext()
+slug: Web/API/HTMLCanvasElement/getContext
+translation_of: Web/API/HTMLCanvasElement/getContext
+---
+<div>{{APIRef("Canvas API")}}</div>
+
+<p>El método <strong><code>HTMLCanvasElement.getContext()</code></strong> retorna un contexto de dibujo en el lienzo, o {{jsxref("null")}} si el identificador del contexto no está soportado.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><var><em>canvas</em>.getContext(<em>contextType, contextAttributes</em>);</var>
+</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt>contextType</dt>
+ <dd>Es una  {{domxref("DOMString")}} que contiene el identificador del contexto que define el contexto de dibujo asociado a el lienzo. Los posibles valores son:
+ <ul>
+ <li><code>"2d</code>", dando lugar a la creación de un objeto {{domxref("CanvasRenderingContext2D")}} que representa un contexto de renderizado de dos dimensiones.</li>
+ <li><code>"webgl"</code> (o <code>"experimental-webgl"</code>) el cual creará  un objeto {{domxref("WebGLRenderingContext")}} que representa un contexto de renderizado de tres dimensiones. Este contexto sólo está disponible en navegadores que implementan <a href="https://developer.mozilla.org/en-US/docs/Web/WebGL">WebGL</a> version 1 (OpenGL ES 2.0).</li>
+ <li>"<code>webgl2</code>" (o "<code>experimental-webgl2</code>") el cual creará un objeto {{domxref("WebGL2RenderingContext")}} que representa un contexto de renderizado de tres dimensiones. Este contexto sólo está disponible en navegadores que implementan <a href="https://developer.mozilla.org/en-US/docs/Web/WebGL">WebGL</a> version 2 (OpenGL ES 3.0). {{experimental_inline}}</li>
+ <li><code>"bitmaprenderer"</code> el cuál creará un {{domxref("ImageBitmapRenderingContext")}} que únicamente provee funcionalidad para remplazar el contenido del lienzo con un {{domxref("ImageBitmap")}} dado.</li>
+ </ul>
+
+ <p>Nota: Los identificadores  "<code>experimental-webgl</code>" o "<code>experimental-webgl2</code>" son usados en nuevas implementaciones de WebGL. Estas implementaciones no han logrado aprobar el conjunto de pruebas de conformidad o la situación de los controladores gráficos en la plataforma no es estable aun. <a href="https://www.khronos.org/">Khronos Group</a> certifica las implementaciones de WebGL bajo ciertas <a href="https://www.khronos.org/registry/webgl/sdk/tests/CONFORMANCE_RULES.txt">reglas de conformidad</a>.</p>
+ </dd>
+ <dt><code>contextAttributes</code></dt>
+ <dd>
+ <p>Puedes usar varios atributos al momento de crear tu contexto de renderizado. Por ejemplo:</p>
+
+ <pre class="brush: js">canvas.getContext('webgl',
+ { antialias: false,
+ depth: false });</pre>
+ Atributos del contexto 2d:
+
+ <ul>
+ <li><strong><code>alpha</code></strong>: Booleano que indica si el lienzo contiene canal alfa. Si es asignado falso, el naveagdor sabe que el fondo siempre es opaco, lo cual puede acelerar el dibujado de contenido transparente e imágenes.</li>
+ <li>{{non-standard_inline}} (Gecko únicamente) <strong><code>willReadFrequently</code></strong>: Booleano que indica si muchas operaciones de read-back están planeadas o no. Esto forzará el uso de software (en lugar de aceleración de hardware) y puede ahorrar memoria al llamar {{domxref("CanvasRenderingContext2D.getImageData", "getImageData()")}} constantemente. Esta opción solo está disponible si <code>gfx.canvas.willReadFrequently.enable</code> es verdadero(lo cual solo está asignado por defecto en B2G/Firefox OS).</li>
+ <li>{{non-standard_inline}} (Blink únicamente) <strong><code>storage</code></strong>: Cadena que indica si el almacenamiento es usado ("persistent"  por defecto).</li>
+ </ul>
+ Atributos del contexto WebGL:
+
+ <ul>
+ <li><strong><code>alpha</code></strong>: Booleano que indica si el lienzo contiene un buffer alfa.</li>
+ <li><strong><code>depth</code></strong>: Booleano que indica si el buffer de dibujo tiene un buffer de profundidad de al menos 16 bits.</li>
+ <li><strong><code>stencil</code></strong>: Booleano que indica si el buffer de dibujo tiene un stencil de al menos 8 bits.</li>
+ <li><strong><code>antialias</code></strong>: Booleano que indica si se debe aplicar anti-aliasing.</li>
+ <li><strong><code>premultipliedAlpha</code></strong>: Booleano que indica que el compositor de páginas asumirá que el buffer de dibujo contiene colores con alfa premultiplicado.</li>
+ <li><strong><code>preserveDrawingBuffer</code></strong>: Si es verdadero los buffers no se limpiarán y mantendrán sus valores hasta que el autor los limpie o los sobreescriba.</li>
+ <li>
+ <p><code><strong>failIfMajorPerformanceCaveat</strong></code>: Booleano que indica si un contexto será creado si el rendimiento del sistema es bajo.</p>
+ </li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Valor_de_retorno">Valor de retorno</h3>
+
+<p>Un {{domxref("RenderingContext")}} que puede ser:</p>
+
+<ul>
+ <li>{{domxref("CanvasRenderingContext2D")}} para <code>"2d"</code>,</li>
+ <li>{{domxref("WebGLRenderingContext")}} para<code>"webgl"</code> y <code>"experimental-webgl"</code>,</li>
+ <li>{{domxref("WebGL2RenderingContext")}} para <code>"webgl2"</code> y <code>"experimental-webgl2"</code>, o</li>
+ <li>{{domxref("ImageBitmapRenderingContext")}} para <code>"bitmaprenderer"</code>.</li>
+</ul>
+
+<p>Si <em>contextType</em> no corresponde con un posible contexto de dibujo retorna null.</p>
+
+<h2 id="Ejemplos">Ejemplos</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>Puedes obtener un contexto 2d del canvas con el código siguiente:</p>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+console.log(ctx); // CanvasRenderingContext2D { ... }
+</pre>
+
+<p>Ahora tienes el <a href="/en-US/docs/Web/API/CanvasRenderingContext2D">contexto de renderizado 2D</a> para un canvas y puedes dibujar en él.</p>
+
+<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">Comentarios</th>
+ </tr>
+ <tr>
+ <td>{{SpecName('HTML WHATWG', "scripting.html#dom-canvas-getcontext", "HTMLCanvasElement.getContext")}}</td>
+ <td>{{Spec2('HTML WHATWG')}}</td>
+ <td>Sin cambios desde el último 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 del {{SpecName('HTML WHATWG')}} que contiene la definición inicial.</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+ <tr>
+ <th>Característica</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 {{experimental_inline}}</td>
+ <td>{{CompatNo}}</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 {{experimental_inline}}</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 y Gecko 1.9.2 inicialmente implementaron esta como <code>experimental-webgl</code>. A partir de Chrome 33 y Gecko 24 es implementado como <code>webgl </code>estándar.</p>
+
+<p>[2] Internet Explorer 11, WebKit 5.1 y Firefox Mobile implementaron esto como  <code>experimental-webgl</code>.</p>
+
+<p>[3] Opera 9 implementó esto como <code>experimental-webgl</code>, behind a user preference, in version 15.0 the user preference got removed.</p>
+
+<p>[4] Gecko 25 implements this as "<code>experimental-webgl2</code>" behind the user preference <code>webgl.enable-prototype-webgl2</code>. Starting with Gecko 42, the string "webgl2" is used behind the same preference.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The interface defining it, {{domxref("HTMLCanvasElement")}}.</li>
+ <li>{{domxref("OffscreenCanvas.getContext()")}}</li>
+ <li>Available rendering contexts: {{domxref("CanvasRenderingContext2D")}}, {{domxref("WebGLRenderingContext")}} and {{domxref("WebGL2RenderingContext")}} and {{domxref("ImageBitmapRenderingContext")}}.</li>
+</ul>
diff --git a/files/es/web/api/htmlcanvaselement/height/index.html b/files/es/web/api/htmlcanvaselement/height/index.html
new file mode 100644
index 0000000000..0d2fa7f2e2
--- /dev/null
+++ b/files/es/web/api/htmlcanvaselement/height/index.html
@@ -0,0 +1,121 @@
+---
+title: HTMLCanvasElement.height
+slug: Web/API/HTMLCanvasElement/height
+tags:
+ - Propiedad
+translation_of: Web/API/HTMLCanvasElement/height
+---
+<div>
+<div>
+<div>{{APIRef("Canvas API")}}</div>
+</div>
+</div>
+
+<p>La propiedad <strong><code><span>HTMLCanvasElement.height es un entero positivo que refleja el atributo </span></code></strong>{{htmlattrxref("height", "canvas")}} del elemento {{HTMLElement("canvas")}}  interpretado en pixeles CSS. Cuando el atributo no esta especificado o esta puesto en un valor invalido(ej. Número negativo), es usado el valor por defecto de 150.</p>
+
+<p>Esta es una de de las dos propiedades que controlan el tamaño del canvas, siendo la otra {{domxref("HTMLCanvasElement.width")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>var <em>pxl</em> = <em>canvas</em></var>.height;
+<em>canvas</em>.height = <em>pxl</em>;
+</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>Dado el siguiente elemento {{HTMLElement("canvas")}}:</p>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="300" height="300"&gt;&lt;/canvas&gt;
+</pre>
+
+<p>Puedes obtener la altura del canvas con el siguiente codigo:</p>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+console.log(canvas.height); // 300
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+ <tr>
+ <th scope="col">Especificación</th>
+ <th scope="col">Status</th>
+ <th scope="col">Comentarios</th>
+ </tr>
+ <tr>
+ <td>{{SpecName('HTML WHATWG', "scripting.html#attr-canvas-height", "HTMLCanvasElement.height")}}</td>
+ <td>{{Spec2('HTML WHATWG')}}</td>
+ <td>No hay cambios desde la ultima foto {{SpecName('HTML5 W3C')}}</td>
+ </tr>
+ <tr>
+ <td>{{SpecName('HTML5.1', "scripting-1.html#attr-canvas-height", "HTMLCanvasElement.height")}}</td>
+ <td>{{Spec2('HTML5.1')}}</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td>{{SpecName('HTML5 W3C', "scripting-1.html#attr-canvas-height", "HTMLCanvasElement.height")}}</td>
+ <td>{{Spec2('HTML5 W3C')}}</td>
+ <td>Foto que contiene la definición inicial {{SpecName('HTML WHATWG')}}.</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_Navegadores">Compatibilidad de Navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<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</td>
+ <td>{{ CompatChrome(4) }}</td>
+ <td>{{ CompatGeckoDesktop("1.9.2") }}</td>
+ <td>{{ CompatIE(9) }}</td>
+ <td>{{ CompatOpera(9) }}</td>
+ <td>{{ CompatSafari(3.1) }}</td>
+ </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+ <tr>
+ <th>Característica</th>
+ <th>Android</th>
+ <th>Chrome for 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</td>
+ <td>{{ CompatVersionUnknown() }}</td>
+ <td>{{ CompatVersionUnknown() }}</td>
+ <td>{{ CompatGeckoMobile("1.9.2") }}</td>
+ <td>{{ CompatVersionUnknown() }}</td>
+ <td>{{ CompatVersionUnknown() }}</td>
+ <td>{{ CompatVersionUnknown() }}</td>
+ </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_Also" name="See_Also">Ver también</h2>
+
+<ul>
+ <li>La interfaz que lo define, {{domxref("HTMLCanvasElement")}}.</li>
+ <li>La otra propiedad que controla el tamaño del canvas, {{domxref("HTMLCanvasElement.width")}}.</li>
+</ul>
diff --git a/files/es/web/api/htmlcanvaselement/index.html b/files/es/web/api/htmlcanvaselement/index.html
new file mode 100644
index 0000000000..07a570f193
--- /dev/null
+++ b/files/es/web/api/htmlcanvaselement/index.html
@@ -0,0 +1,249 @@
+---
+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>
diff --git a/files/es/web/api/htmlcanvaselement/toblob/index.html b/files/es/web/api/htmlcanvaselement/toblob/index.html
new file mode 100644
index 0000000000..4759cd6250
--- /dev/null
+++ b/files/es/web/api/htmlcanvaselement/toblob/index.html
@@ -0,0 +1,261 @@
+---
+title: HTMLCanvasElement.toBlob()
+slug: Web/API/HTMLCanvasElement/toBlob
+translation_of: Web/API/HTMLCanvasElement/toBlob
+---
+<div>
+<div>
+<div>{{APIRef("Canvas API")}}</div>
+</div>
+</div>
+
+<p>EL metodo <strong><code>HTMLCanvasElement.toBlob()</code></strong> crea un objeto {{domxref("Blob")}} que representa la imagen contenida en el canvas; este archivo puede ser cacheado en el disco oo guardado en la memoria a desicion del  user agent. Si la propiedad <code>type</code> no se especifica el tipo de la imagen será <code>image/png</code>. La imagen creada tiene una resolución de 96dpi.<br>
+ El tercer argumento es usado con las imagenes  <code>image/jpeg</code> para especificar la calidad de salida.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>void <em>canvas</em>.toBlob(<em>callback</em>, <em>type</em>, <em>encoderOptions</em>);</var>
+</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt>callback</dt>
+ <dd>A callback function with the resulting {{domxref("Blob")}} object as a single argument.</dd>
+ <dt><code>type</code> {{optional_inline}}</dt>
+ <dd>A {{domxref("DOMString")}} indicating the image format. The default type is <code>image/png</code>.</dd>
+ <dt><code>encoderOptions</code> {{optional_inline}}</dt>
+ <dd>A {{jsxref("Number")}} between <code>0</code> and <code>1</code> indicating image quality if the requested type is <code>image/jpeg </code>or <code>image/webp</code>. If this argument is anything else, the default value for image quality is used. Other arguments are ignored.</dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>None.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Getting_a_file_representing_the_canvas">Getting a file representing the canvas</h3>
+
+<p>Once you have drawn content into a canvas, you can convert it into a file of any supported image format. The code snippet below, for example, takes the image in the {{HTMLElement("canvas")}} element whose ID is "canvas", obtains a copy of it as a PNG image, then appends a new {{HTMLElement("img")}} element to the document, whose source image is the one created using the canvas.</p>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+
+canvas.toBlob(function(blob) {
+ var newImg = document.createElement("img"),
+ url = URL.createObjectURL(blob);
+
+ newImg.onload = function() {
+ // no longer need to read the blob so it's revoked
+ URL.revokeObjectURL(url);
+ };
+
+ newImg.src = url;
+ document.body.appendChild(newImg);
+});
+</pre>
+
+<p>Note that here we're creating a PNG image; if you add a second parameter to the <code>toBlob()</code> call, you can specify the image type. For example, to get the image in JPEG format:</p>
+
+<pre class="brush: js"> canvas.toBlob(function(blob){...}, "image/jpeg", 0.95); // JPEG at 95% quality</pre>
+
+<div>
+<h3 id="A_way_to_convert_a_canvas_to_an_ico_(Mozilla_only)">A way to convert a canvas to an ico (Mozilla only)</h3>
+
+<p>This uses <code>-moz-parse</code> to convert the canvas to ico. Windows XP doesn't support converting from PNG to ico, so it uses bmp instead. A download link is created by setting the download attribute. The value of the download attribute is the name it will use as the file name.</p>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var d = canvas.width;
+ctx = canvas.getContext("2d");
+ctx.beginPath();
+ctx.moveTo(d / 2, 0);
+ctx.lineTo(d, d);
+ctx.lineTo(0, d);
+ctx.closePath();
+ctx.fillStyle = "yellow";
+ctx.fill();
+
+function blobCallback(iconName) {
+ return function(b) {
+ var a = document.createElement("a");
+ a.textContent = "Download";
+ document.body.appendChild(a);
+ a.style.display = "block";
+ a.download = iconName + ".ico";
+ a.href = window.URL.createObjectURL(b);
+ }
+}
+canvas.toBlob(blobCallback('passThisString'), 'image/vnd.microsoft.icon',
+ '-moz-parse-options:format=bmp;bpp=32');</pre>
+</div>
+
+<h3 id="Save_toBlob_to_disk_with_OS.File_(chromeadd-on_context_only)">Save toBlob to disk with OS.File (chrome/add-on context only)</h3>
+
+<div class="note">
+<p>This technique saves it to the desktop and is only useful in Firefox chrome context or add-on code as OS APIs are not present on web sites.</p>
+</div>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var d = canvas.width;
+ctx = canvas.getContext("2d");
+ctx.beginPath();
+ctx.moveTo(d / 2, 0);
+ctx.lineTo(d, d);
+ctx.lineTo(0, d);
+ctx.closePath();
+ctx.fillStyle = "yellow";
+ctx.fill();
+
+function blobCallback(iconName) {
+ return function(b) {
+ var r = new FileReader();
+ r.onloadend = function () {
+ // r.result contains the ArrayBuffer.
+ Cu.import('resource://gre/modules/osfile.jsm');
+ var writePath = OS.Path.join(OS.Constants.Path.desktopDir,
+ iconName + '.ico');
+ var promise = OS.File.writeAtomic(writePath, new Uint8Array(r.result),
+ {tmpPath:writePath + '.tmp'});
+ promise.then(
+ function() {
+ console.log('successfully wrote file');
+ },
+ function() {
+ console.log('failure writing file')
+ }
+ );
+ };
+ r.readAsArrayBuffer(b);
+ }
+}
+
+canvas.toBlob(blobCallback('passThisString'), 'image/vnd.microsoft.icon',
+ '-moz-parse-options:format=bmp;bpp=32');</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>A low performance polyfill based on toDataURL.</p>
+
+<pre class="brush: js">if (!HTMLCanvasElement.prototype.toBlob) {
+ Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
+ value: function (callback, type, quality) {
+
+ var binStr = atob( this.toDataURL(type, quality).split(',')[1] ),
+ len = binStr.length,
+ arr = new Uint8Array(len);
+
+ for (var i=0; i&lt;len; i++ ) {
+ arr[i] = binStr.charCodeAt(i);
+ }
+
+ callback( new Blob( [arr], {type: type || 'image/png'} ) );
+ }
+ });
+}
+</pre>
+
+<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-toblob", "HTMLCanvasElement.toBlob")}}</td>
+ <td>{{Spec2('HTML WHATWG')}}</td>
+ <td>No change since the latest snapshot, {{SpecName('HTML5 W3C')}}</td>
+ </tr>
+ <tr>
+ <td>{{SpecName('HTML5.1', "scripting-1.html#dom-canvas-toblob", "HTMLCanvasElement.toBlob")}}</td>
+ <td>{{Spec2('HTML5.1')}}</td>
+ <td>No change</td>
+ </tr>
+ <tr>
+ <td>{{SpecName('HTML5 W3C', "scripting-1.html#dom-canvas-toblob", "HTMLCanvasElement.toBlob")}}</td>
+ <td>{{Spec2('HTML5 W3C')}}</td>
+ <td>Snapshot of the {{SpecName('HTML WHATWG')}} containing the initial definition.</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+ <tr>
+ <th>Feature</th>
+ <th>Chrome</th>
+ <th>Firefox (Gecko)</th>
+ <th>Internet Explorer</th>
+ <th>Opera</th>
+ <th>Safari</th>
+ </tr>
+ <tr>
+ <td>Basic support</td>
+ <td>{{CompatNo}}<sup>[1]</sup></td>
+ <td>{{CompatGeckoDesktop('19')}}</td>
+ <td>{{CompatIE(10)}}{{property_prefix("ms")}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}<sup>[2]</sup></td>
+ </tr>
+ <tr>
+ <td>Image quality parameter (jpeg)</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatGeckoDesktop('25')}}</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>Firefox Mobile (Gecko)</th>
+ <th>IE Mobile</th>
+ <th>Opera Mobile</th>
+ <th>Safari Mobile</th>
+ </tr>
+ <tr>
+ <td>Basic support</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatGeckoMobile("19")}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatUnknown}}</td>
+ </tr>
+ <tr>
+ <td>Image quality parameter (jpeg)</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatGeckoMobile("25")}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatUnknown}}</td>
+ </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Chrome does not implement this feature yet. See <a href="http://crbug.com/67587">bug 67587</a>.</p>
+
+<p>[2] WebKit does not implement this feature yet. See {{WebKitBug("71270")}}.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The interface defining it, {{domxref("HTMLCanvasElement")}}.</li>
+ <li>{{domxref("Blob")}}</li>
+</ul>
diff --git a/files/es/web/api/htmlcanvaselement/todataurl/index.html b/files/es/web/api/htmlcanvaselement/todataurl/index.html
new file mode 100644
index 0000000000..30e2fdd71a
--- /dev/null
+++ b/files/es/web/api/htmlcanvaselement/todataurl/index.html
@@ -0,0 +1,159 @@
+---
+title: HTMLCanvasElement.toDataURL()
+slug: Web/API/HTMLCanvasElement/toDataURL
+tags:
+ - API
+ - Canvas
+ - HTMLCanvasElement
+ - Lienzo
+ - Referencia
+ - metodo
+translation_of: Web/API/HTMLCanvasElement/toDataURL
+---
+<div>
+<div>
+<div>{{APIRef("Canvas API")}}</div>
+</div>
+</div>
+
+<p>El método <strong><code>HTMLCanvasElement.toDataURL()</code></strong> devuelve un <a href="/en-US/docs/Web/HTTP/data_URIs">data URI</a> el cual contiene una representación de la imagen en el formato especificado por el parámetro <code>type</code> (por defecto es <a href="https://en.wikipedia.org/wiki/Portable_Network_Graphics">PNG</a>). La imagen obtenida tendrá una resolución de 96 dpi.</p>
+
+<ul>
+ <li>Si la altura o anchura del canvas es <code>0</code>, devuelve un string con <code>"data:,"</code></li>
+ <li>Si el tipo solicitado no es <code>image/png</code> pero el valor devuelto empieza por <code>data:image/png</code>, entonces el formato especificado no esta soportado.</li>
+ <li>Chrome también soporta el tipo <code>image/webp</code>.</li>
+</ul>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="syntaxbox"><var><em>canvas</em>.toDataURL(<em>tipo</em>, <em>opcionesCodificación</em>);</var>
+</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>tipo</code>{{optional_inline}}</dt>
+ <dd>Un {{domxref("DOMString")}} indicando el formato de la imagen. El tipo por defecto es <code>image/png</code>.</dd>
+ <dt><code>opcionesCodificación</code>{{optional_inline}}</dt>
+ <dd>Un {{jsxref("Number")}} entre <code>0</code> y <code>1</code> indicando la calidad de la imagen si el tipo solicitado es <code>image/jpeg</code> o <code>image/webp</code>.<br>
+ Si este argumento es cualquier otra cosa, se usa el valor por defecto de la imagen. El valor por defecto es <code>0.92</code>. Otros argumentos se ignoran.</dd>
+</dl>
+
+<h3 id="Valor_devuelto">Valor devuelto</h3>
+
+<p>Un {{domxref("DOMString")}} que contiene el valor <a href="/en-US/docs/Web/HTTP/data_URIs">data URI</a>.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>Dado un elemento {{HTMLElement("canvas")}}:</p>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="5" height="5"&gt;&lt;/canvas&gt;
+</pre>
+
+<p>Puedes obtener el data-URL del canvas con las siguientes líneas:</p>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var dataURL = canvas.toDataURL();
+console.log(dataURL);
+// "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNby
+// blAAAADElEQVQImWNgoBMAAABpAAFEI8ARAAAAAElFTkSuQmCC"
+</pre>
+
+<h3 id="Establecer_la_calidad_de_imagen_con_jpegs">Establecer la calidad de imagen con jpegs</h3>
+
+<pre class="brush: js">var fullQuality = canvas.toDataURL('image/jpeg', 1.0);
+// "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ...9oADAMBAAIRAxEAPwD/AD/6AP/Z"
+var mediumQuality = canvas.toDataURL('image/jpeg', 0.5);
+var lowQuality = canvas.toDataURL('image/jpeg', 0.1);
+</pre>
+
+<h3 id="Example:_Dynamically_change_images" name="Example:_Dynamically_change_images">Ejemplo: Cambiar imágenes dinámicamente</h3>
+
+<p>Se puede usar esta técnica junto con los eventos del mouse para cambiar las imágenes de manera dinámica (escala de grises versus color en este ejemplo):</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;img class="grayscale" src="myPicture.png" alt="Description of my picture" /&gt;</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js;highlight:[33]">window.addEventListener('load', quitarColor);
+
+function verImgEnColor() {
+ this.style.display = 'none';
+ this.nextSibling.style.display = 'inline';
+}
+
+function verImgEnGris() {
+ this.previousSibling.style.display = 'inline';
+ this.style.display = 'none';
+}
+
+function quitarColor() {
+ var aImages = document.getElementsByClassName('escalagrises'),
+ nImgsLen = aImages.length,
+ oCanvas = document.createElement('canvas'),
+ oCtx = oCanvas.getContext('2d');
+ for (var nWidth, nHeight, oImgData, oGrayImg, nPixel, aPix, nPixLen, nImgId = 0; nImgId &lt; nImgsLen; nImgId++) {
+ var oColorImg = aImages[nImgId];
+ nWidth = oColorImg.offsetWidth;
+ nHeight = oColorImg.offsetHeight;
+ oCanvas.width = nWidth;
+ oCanvas.height = nHeight;
+ oCtx.drawImage(oColorImg, 0, 0);
+ oImgData = oCtx.getImageData(0, 0, nWidth, nHeight);
+ aPix = oImgData.data;
+ nPixLen = aPix.length;
+ for (nPixel = 0; nPixel &lt; nPixLen; nPixel += 4) {
+ aPix[nPixel + 2] = aPix[nPixel + 1] = aPix[nPixel] = (aPix[nPixel] + aPix[nPixel + 1] + aPix[nPixel + 2]) / 3;
+ }
+ oCtx.putImageData(oImgData, 0, 0);
+ oGrayImg = new Image();
+ oGrayImg.src = oCanvas.toDataURL();
+ oGrayImg.onmouseover = verImgEnColor;
+ oColorImg.onmouseout = verImgEnGris;
+ oCtx.clearRect(0, 0, nWidth, nHeight);
+ oColorImg.style.display = "none";
+ oColorImg.parentNode.insertBefore(oGrayImg, oColorImg);
+ }
+}</pre>
+
+<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">Comentarios</th>
+ </tr>
+ <tr>
+ <td>{{SpecName('HTML WHATWG', "scripting.html#dom-canvas-todataurl", "HTMLCanvasElement.toDataURL")}}</td>
+ <td>{{Spec2('HTML WHATWG')}}</td>
+ <td>Sin cambios desde el último snapshot, {{SpecName('HTML5 W3C')}}</td>
+ </tr>
+ <tr>
+ <td>{{SpecName('HTML5.1', "scripting-1.html#dom-canvas-todataurl", "HTMLCanvasElement.toDataURL")}}</td>
+ <td>{{Spec2('HTML5.1')}}</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td>{{SpecName('HTML5 W3C', "scripting-1.html#dom-canvas-todataurl", "HTMLCanvasElement.toDataURL")}}</td>
+ <td>{{Spec2('HTML5 W3C')}}</td>
+ <td>Snapshot del {{SpecName('HTML WHATWG')}} con la definición inicial.</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<div class="hidden">La tabla de compatibilidad de esta página se genera de datos estructurados. Si te gustaría contribuir a los datos, por favor revisa <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y haznos una pull request.</div>
+
+<p>{{Compat("api.HTMLCanvasElement.toDataURL")}}</p>
+
+<h2 id="See_Also" name="See_Also">Ver también</h2>
+
+<ul>
+ <li>La interfaz que lo define, {{domxref("HTMLCanvasElement")}}.</li>
+ <li><a href="/en-US/docs/Web/HTTP/data_URIs">Data URIs</a> en la referencía <a href="/en-US/docs/Web/HTTP">HTTP</a>.</li>
+</ul>
diff --git a/files/es/web/api/htmlcanvaselement/width/index.html b/files/es/web/api/htmlcanvaselement/width/index.html
new file mode 100644
index 0000000000..1eb26275af
--- /dev/null
+++ b/files/es/web/api/htmlcanvaselement/width/index.html
@@ -0,0 +1,119 @@
+---
+title: HTMLCanvasElement.width
+slug: Web/API/HTMLCanvasElement/width
+translation_of: Web/API/HTMLCanvasElement/width
+---
+<div>
+<div>
+<div>{{APIRef("Canvas API")}}</div>
+</div>
+</div>
+
+<p>TLa propiedad  <strong><code><span>HTMLCanvasElement.width</span></code></strong> es un entero positivo que refleja el atributo {{htmlattrxref("width", "canvas")}} del elemento {{HTMLElement("canvas")}} interpretado en pixeles CSS. Cuando el atributo no esta especificado o se define con un valor invalido (ej. Número negativo), es usado el valor por defecto de 150.</p>
+
+<p>Esta es una de de las dos propiedades que controlan el tamaño del canvas, siendo la otra {{domxref("HTMLCanvasElement.height")}}, that controls the size of the canvas.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>var <em>pxl</em> = <em>canvas</em></var>.width;
+<em>canvas</em>.width = <em>pxl</em>;
+</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>Dado el siguiente elemento {{HTMLElement("canvas")}} :</p>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="300" height="300"&gt;&lt;/canvas&gt;
+</pre>
+
+<p>Puedes obtener el ancho del canvas con el siguiente codigo:</p>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+console.log(canvas.width); // 300
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+ <tr>
+ <th scope="col">Especificación</th>
+ <th scope="col">Status</th>
+ <th scope="col">Comentarios</th>
+ </tr>
+ <tr>
+ <td>{{SpecName('HTML WHATWG', "scripting.html#attr-canvas-width", "HTMLCanvasElement.width")}}</td>
+ <td>{{Spec2('HTML WHATWG')}}</td>
+ <td>No hay cambios desde la ultima foto {{SpecName('HTML5 W3C')}}</td>
+ </tr>
+ <tr>
+ <td>{{SpecName('HTML5.1', "scripting-1.html#attr-canvas-width", "HTMLCanvasElement.width")}}</td>
+ <td>{{Spec2('HTML5.1')}}</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td>{{SpecName('HTML5 W3C', "scripting-1.html#attr-canvas-width", "HTMLCanvasElement.width")}}</td>
+ <td>{{Spec2('HTML5 W3C')}}</td>
+ <td>Foto que contiene la definición inicial {{SpecName('HTML WHATWG')}}.</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_Navegadores">Compatibilidad de Navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<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>BSoporte Básico</td>
+ <td>{{ CompatChrome(4) }}</td>
+ <td>{{ CompatGeckoDesktop("1.9.2") }}</td>
+ <td>{{ CompatIE(9) }}</td>
+ <td>{{ CompatOpera(9) }}</td>
+ <td>{{ CompatSafari(3.1) }}</td>
+ </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+ <tr>
+ <th>Característica</th>
+ <th>Android</th>
+ <th>Chrome for 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</td>
+ <td>{{ CompatVersionUnknown() }}</td>
+ <td>{{ CompatVersionUnknown() }}</td>
+ <td>{{ CompatGeckoMobile("1.9.2") }}</td>
+ <td>{{ CompatVersionUnknown() }}</td>
+ <td>{{ CompatVersionUnknown() }}</td>
+ <td>{{ CompatVersionUnknown() }}</td>
+ </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_Also" name="See_Also">Ver también</h2>
+
+<ul>
+ <li>La interfaz que lo define, {{domxref("HTMLCanvasElement")}}.</li>
+ <li>La otra propiedad que controla el tamaño del canvas,{{domxref("HTMLCanvasElement.height")}}.</li>
+</ul>
generated by cgit v1.2.3-54-g00ecf (git 2.39.0) at 2025-01-08 05:37:43 +0000