Pintar una imagen al hacer click con HTML5

Continuando con el proyecto del tilador, ya se puede ir poniendo un tile en la posición del mapa indicado! Solo tendreis que seguir con el código que pusimos anteriormente y modificar una función.

Lo que antes era:

function dibujar(x,y,x2,y2){
canvas = document.getElementById(“canvas”);
ctx = canvas.getContext(“2d”);

ctx.fillStyle = “red”;
ctx.fillRect(x, y, x2, y2);
ctx.fill();
}

Despues de la modificación para que al pulsar el botón del ratón aparezca una imagen es:

function dibujar(x,y,x2,y2){
canvas = document.getElementById(“canvas”);
ctx = canvas.getContext(“2d”);

//cargo la imagen y lo asigno al canvas
var ImagenHTML5 = new Image();
ImagenHTML5.src = “./vt.jpg”;
ImagenHTML5.onload = function() {
ctx.drawImage(ImagenHTML5, x, y);
}
}

 

Os dejo el ejemplo de como pintar una imagen cargada sobre una cuadrícula en HTML5

Espero que os sirva!

Te puede interesar:

Un comentario

Deja un comentario

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