Canvas - la imagen me deja un rastro Estoy haciendo un ejercicio de canvas que mueve una imagen que he insertado. El problema es que cuando se mueve deja un rastro de imagen.
He probado el clearRect pero claro de fondo tengo una imagen y si pongo el clearRect se me pone todo blanco y no se ve el fondo.
Os dejo una captura de mi problema y mi código por si me pudieran ayudar.
Muchas gracias.
IMAGEN DEL PROBLEMA:
CODIGO:
<html>
<head>
<meta charset="UTF-8">
<title>Canvas 2</title>
</head>
<style>
#capa {
margin-left: 0px;
margin-top: 0px;
border: 1px solid black;
}
</style>
<script>
var block;
function fondo(){
block = document.getElementById("capa").getContext("2d");
var img = new Image();
img.src = "imagenes/playa.jpg";
img.onload = function() {
block.drawImage(img, 0, 0,800,400);
}
}
function Animacion(){
block = document.getElementById("capa").getContext("2d");
var img2 = new Image();
img2.src="imagenes/barco.png";
var x=0;
setInterval(function(){
block.drawImage(img2,x,150,100,100);
if(x>800){
document.getElementById("capa2").innerHTML = "<input type='button' value='Pasar de escena'>";
}
x++;
},1);
}
</script>
<body onload="fondo();Animacion();">
<canvas id="capa" width="800" height="400"></canvas>
<div id="capa2"></div>
<br>
<a href="index2.html">
</a>
</body>
</html>
