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
|
---
title: CanvasRenderingContext2D.drawImage()
slug: Web/API/CanvasRenderingContext2D/drawImage
tags:
- API
- Canvas
- CanvasRenderingContect2D
- Métodos
- Referencia
translation_of: Web/API/CanvasRenderingContext2D/drawImage
---
<div>{{APIRef}}</div>
<p>El método <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.drawImage()</code></strong> de la API Canvas 2D proporciona diferentes formas para dibujar una imagen dentro de canvas.</p>
<h2 id="Sintaxis">Sintaxis</h2>
<pre class="syntaxbox">void <var><em>ctx</em>.drawImage(image, dx, dy);</var>
void <var><em>ctx</em>.drawImage(image, dx, dy, dWidth, dHeight);</var>
void <var><em>ctx</em>.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);</var>
</pre>
<p><img alt="drawImage" src="https://mdn.mozillademos.org/files/225/Canvas_drawimage.jpg" style="float: right;"></p>
<h3 id="Parámetros">Parámetros</h3>
<dl>
<dt><code>image</code></dt>
<dd>Un elemento a dibujar dentro del context. La especificación permite cualquier fuente de imagen en canvas ({{domxref("CanvasImageSource")}}), tal como una {{domxref("HTMLImageElement")}}, un {{domxref("HTMLVideoElement")}}, un {{domxref("HTMLCanvasElement")}} o un{{domxref("ImageBitmap")}}.</dd>
<dt><code>dx</code></dt>
<dd>La coordenada X del canvas destino en la cual se coloca la esquina superior izquierda de la imagen origen.</dd>
<dt><code>dy</code></dt>
<dd>La coordenada Y del canvas destino en la cual se coloca la esquina superior izquierda de la imagen origen.</dd>
<dt><code>dWidth</code></dt>
<dd>El ancho para dibujar la imagen en el canvas destino.</dd>
<dt><code>dHeight</code></dt>
<dd>El alto para dibujar la imagen en el canvas destino. Esto permite escalar la imagen dibujada. Si no se especifica, el alto de la imagen no se escala al dibujar.</dd>
<dt><code>sx</code></dt>
<dd>La coordenada X de la esquina superior izquierda del sub-rectangulo de la imagen origen a dibujar en el contexto de destino.</dd>
<dt><code>sy</code></dt>
<dd>La coordenada Y de la esquina superior izquierda del sub-rectangulo de la imagen origen a dibujar en el contexto de destino.</dd>
<dt><code>sWidth</code></dt>
<dd>El ancho del sub-rectangulo de la imagen origen a dibujar en el contexto de destino. Si no se especifica, se utiliza todo el rectangulo entero desde las coordenadas especificadas por <code>sx</code> y <code>sy </code>hasta la esquina inferior derecha de la imagen.</dd>
<dt><code>sHeight</code></dt>
<dd>La altura del sub-rectangulo de la imagen origen a dibujar en el contexto de destino.</dd>
</dl>
<h3 id="Excepciones_lanzadas">Excepciones lanzadas</h3>
<dl>
<dt><code>INDEX_SIZE_ERR</code></dt>
<dd>Si el canvas o la fuente de anchura o altura del rectangulo es igual a cero.</dd>
<dt><code>INVALID_STATE_ERR</code></dt>
<dd>La imagen no tiene datos de imagen.</dd>
<dt><code>TYPE_MISMATCH_ERR</code></dt>
<dd>El elemento de origen especificado no es compatible.</dd>
</dl>
<h2 id="Ejemplos">Ejemplos</h2>
<h3 id="Usando_el_método_drawImage">Usando el método drawImage</h3>
<p>Este es sólo un simple fragmento de código que utiliza el método drawImage.</p>
<h4 id="HTML">HTML</h4>
<pre class="brush: html"><canvas id="canvas"></canvas>
<img id="source" src="https://mdn.mozillademos.org/files/5397/rhino.jpg"
width="300" height="227">
</div>
</pre>
<h4 id="JavaScript">JavaScript</h4>
<pre class="brush: js; highlight:[5]">var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var image = document.getElementById('source');
ctx.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104);
</pre>
<p>Edita el código debajo y observa los cambios actualizarse en vivo en el canvas:</p>
<div class="hidden">
<h6 id="Playable_code">Playable code</h6>
<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<img id="source" src="https://mdn.mozillademos.org/files/5397/rhino.jpg" width="300" height="227">
</div>
<div class="playable-buttons">
<input id="edit" type="button" value="Edit" />
<input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code">
ctx.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104);</textarea>
</pre>
<pre class="brush: js">var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var image = document.getElementById('source');
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var edit = document.getElementById("edit");
var code = textarea.value;
function drawCanvas() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
eval(textarea.value);
}
reset.addEventListener("click", function() {
textarea.value = code;
drawCanvas();
});
edit.addEventListener("click", function() {
textarea.focus();
})
textarea.addEventListener("input", drawCanvas);
window.addEventListener("load", drawCanvas);
</pre>
</div>
<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</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">Comentario</th>
</tr>
<tr>
<td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-drawimage", "CanvasRenderingContext2D.drawImage")}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
{{Compat("api.CanvasRenderingContext2D.drawImage")}}
<h2 id="sect1"> </h2>
<h2 id="Notas_de_compatibilidad">Notas de compatibilidad</h2>
<ul>
<li>Soporte para voltear imagen usando valores negativos para <code>sw</code> y <code>sh</code> fue añadido en Gecko 5.0 {{geckoRelease("5.0")}}.</li>
<li>Empezando con {{geckoRelease("5.0")}} <code>drawImage()</code> maneja argumentos negativos de acuerdo con la especificación, volteando el rectangulo alrededor del eje apopiado.</li>
<li>Especificación de una imagen <code>null</code> o <code>undefined</code> al llamar o <code>drawImage()</code> correctamente lanzando una excepción <code>TYPE_MISMATCH_ERR</code> empezando con {{geckoRelease("5.0")}}.</li>
<li>antes de Gecko 7.0 {{ geckoRelease("7.0") }}, Firefox lanzó una excepción si alguno de los valores de las coordenadas no eran finitos o cero. De acuerado a la especificación esto ya no ocurre.</li>
<li>Gecko 9.0 {{ geckoRelease("9.0") }} ahora soporta correctamente CORS para dibujar imágenes a través de dominios sin <a href="/en/CORS_Enabled_Image#What_is_a_.22tainted.22_canvas.3F" title="en/CORS_Enabled_Image#What_is_a_.22tainted.22_canvas.3F">manchar el canvas</a>.</li>
<li>Gecko 11.0 {{ geckoRelease("11.0") }} ahora permite SVG-como-una-imagen para ser dibujada en el canvas sin <a href="/en/CORS_Enabled_Image#What_is_a_.22tainted.22_canvas.3F" title="en/CORS_Enabled_Image#What_is_a_.22tainted.22_canvas.3F">manchar el canvas</a>.</li>
</ul>
<h2 id="Mira_también">Mira también</h2>
<ul>
<li>Definiendo la interfaz, {{domxref("CanvasRenderingContext2D")}}.</li>
</ul>
|
