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!