1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
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>
|
