Curso-Tutorial HTML5 – Cargar una imagen en Canvas

Bienvenidos a VerTutoriales.com, en esta ocasión vamos a seguir con el curso de HTML 5, y siguiendo con el canvas, vamos a mostrar el código para ver como podemos cargar una imagen en el canvas, en siguientes tutoriales veremos como tratar esa imagen, girarla, modificarla, etc… pero vamos poco a poco, para empezar, vamos a cargarla. Veamos como:

Cargar una imagen en un canvas con HTML5

Para comenzar con este tutorial, vamos a explicar el metodo drawImage() y continuaremos como cargar imagenes en el objeto Image de Javascript. Pero comencemos con DrawImage()

drawImage(objeto_imagen, x, y):

Esta función recibe 3 parámetros, la primera es el objeto imagen que más adelante explicaremos como cargarlo, el segundo y tercer parámetro son las coordenadas donde colocar nuestra imagen dentro del lienzo del Canvas. Ahora vamos a ver el...

Objeto Image de JavaScript:

Para cargar una imagen, lo primero que debemos de cargar es un objeto imagen

var imagenCanvas = new Image();

A continuación le paso el recurso (la imagen en sí) que puede ser JPG, GIF y PNG, de la siguiente manera:

imagenCanvas.src = "http://www.forohtml5.com/forohtml5.jpg";

Y para finalizar cargamos en el contexto del Canvas, pero para ahorrarnos problemas de descarga en nuestro navegador, usaremos el evento onload de la imagen para no mostrar la imagen antes de haberla cargado de la siguiente manera:

imagenCanvas.onload = function() {
contexto.drawImage(
imagenCanvas, 30, 15);
}

Aunando todo el ejemplo, veamos como quedaría el script completo:

<script type="text/javascript">
window.onload = function() {
var PintaCanvas = document.getElementById('Canvas-HTML5');

// compruebo que pueda soportar el canvas
if(PintaCanvas && PintaCanvas.getContext) {
// inicializo para “dibujar” en 2D
var contexto = PintaCanvas.getContext(‘2d’);

//cargo la imagen y lo asigno al canvas
var ImagenHTML5 = new Image();
ImagenHTML5.onload = function() {
contexto.drawImage(ImagenHTML5, 30, 15);
}
ImagenHTML5 .src = “http://www.forohtml5.com/forohtml5.jpg”;

}
}
</script>

Con este script ya podriamos cargar una imagen de forma sencilla, luego solo faltaría cargarlo en el canvas, os dejo el código de ejemplo completo para que lo copieis y podais hacer pruebas en vuestro pc:

<html>
<head>
<title>Cargar imagen en un Canvas de HTML5</title>
<script type=”text/javascript”>
window.onload = function() {
var PintaCanvas = document.getElementById(‘Canvas-HTML5’);

// compruebo que pueda soportar el canvas
if(PintaCanvas && PintaCanvas.getContext) {
// inicializo para “dibujar” en 2D
var contexto = PintaCanvas.getContext(‘2d’);

//cargo la imagen y lo asigno al canvas
var ImagenHTML5 = new Image();
ImagenHTML5.onload = function() {
contexto.drawImage(ImagenHTML5, 30, 15);
}
ImagenHTML5.src = “http://www.forohtml5.com/forohtml5.jpg”;
}
}
</script>
</head>
<body>
<canvas id=”Canvas-HTML5″ width=”200″ height=”200″>
<p>tu navegador no soporta canvas.</p>
</canvas>
</body>
</html>

Si habeis seguido el resto de tutoriales no tendreis problema en comprender este ejemplo, si no los habeis seguido, os recomiendo que comenceis por el primer tutorial sobre Canvas en HTML5, tambien os recomiendo que si teneis más interés sobre esta ampliación de html, visitad forohtml5.com.

Ya sabeis que para cualquier duda podeis comentarlo o visitar el foro que mencionamos antes.

Un saludo!

<canvas id="myDrawing" width="200" height="200">
<p>tu navegador no soporta canvas.</p>
</canvas>

Te puede interesar:

2 comentarios

  • andresw commented on 19 junio, 2012 Reply

    Excelente turorial, cayo de perlas.

    tengo una pregunta: Al llamar las imagenes desde javascript, como hago para generarle un identificador, para luego darle un estilo en un css? o ¿como llamo a esa imagen desde el css o desde otro archivo externo como un jQuery?

    Gracias por tu respuesta.

    • VideoTutoriales commented on 20 junio, 2012 Reply

      Cuando llamas la imagen con el .src entiendo que puedes asignarle el estilo, el id y todos los campos del objeto, pero no lo he probado.

      Si haces uso y consigues algo, te agradecería que lo compartieras!

      Un saludo y gracias por adelantado 🙂

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *