Método drawImage() de HTML canvas

Manual de referencia de HTML5 Canvas

Definición y uso

drawImage() El método dibuja una imagen en el lienzo, el lienzo o el video.

drawImage() El método también puede dibujar ciertas partes de la imagen y / o aumentar o disminuir el tamaño de la imagen.

Ejemplo

Ejemplo 1

Imagen a usar:

tulip

Dibujar la imagen en la parte superior del lienzo:

Su navegador no admite la etiqueta HTML5 canvas.

JavaScript:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("tulip");
ctx.drawImage(img, 10, 10);

Prueba personalmente

Consejo:Más ejemplos se proporcionan en la parte inferior de la página.

Sintaxis

Sintaxis JavaScript 1

Ubicar la imagen en el lienzo:

context.drawImage(img,x,y);

Sintaxis JavaScript 2

Ubicar la imagen en el lienzo y especificar el ancho y la altura de la imagen:

context.drawImage(img,x,y,width,height);

Sintaxis JavaScript 3

Cortar la imagen y ubicar la parte cortada en el lienzo:

context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

Valor del parámetro

Parámetros Descripción
img Especificar la imagen, lienzo o video a usar.
sx Opcional. Posición x de inicio del corte.
sy Opcional. Posición y de inicio del corte en el eje y.
swidth Opcional. Ancho de la imagen cortada.
sheight Opcional. Altura de la imagen cortada.
x Posición en el lienzo de la imagen en el eje x.
y Posición y en el lienzo de la imagen en el eje y.
width Opcional. Ancho de la imagen a usar. (Estirar o reducir la imagen)
height Opcional. Altura de la imagen a usar. (Estirar o reducir la imagen)

Más ejemplos

Ejemplo 2

Ubicar la imagen en el lienzo y especificar el ancho y la altura de la imagen:

Su navegador no admite la etiqueta HTML5 canvas.

JavaScript:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("tulip");
ctx.drawImage(img, 10, 10, 240, 160);

Prueba personalmente

Ejemplo 3

Cortar la imagen y ubicar la parte cortada en el lienzo:

Su navegador no admite la etiqueta HTML5 canvas.

JavaScript:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 90, 130, 90, 80, 20, 20, 90, 80);

Prueba personalmente

Ejemplo 4

Video a usar (presione el botón de reproducción para comenzar la demostración):

Cuadro de dibujo:

Su navegador no admite la etiqueta HTML5 canvas.

JavaScript (cada 20 milisegundo, el código dibuja el fotograma actual del video):

var v = document.getElementById("video1");
var c = document.getElementById("myCanvas");
ctx = c.getContext('2d');
v.addEventListener('play',function() {var i=window.setInterval(function()} 
{ctx.drawImage(v,0,0,270,135)},20);},false);
v.addEventListener('pause',function() {window.clearInterval(i);},false);
v.addEventListener('ended',function() {clearInterval(i);},false);

Prueba personalmente

Compatibilidad del navegador

Los números en la tabla indican la versión del navegador que admite completamente la propiedad por primera vez.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Nota:Internet Explorer 8 y versiones anteriores no admiten el elemento <canvas>.

Manual de referencia de HTML5 Canvas