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!