aboutsummaryrefslogtreecommitdiff
path: root/files/es/web/api/htmlcanvaselement/getcontext/index.html
blob: cb77b1594e68f85dca8165741a30737907a297f2 (plain)
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
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
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><code>"experimental-webgl"</code>,</li>
 <li>{{domxref("WebGL2RenderingContext")}} para <code>"webgl2"</code><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>