Fondo en Canvas

Garhard · #1 (**permalink**) 22/03/2013, 12:47

Buenas, tengo un problema en el Javascript, lo que intento es insertar fondo en el canvas y que el texto actúe dentro del fondo, no por separado.

Este es el codigo:

Código HTML:

<!DOCTYPE html>
<html lang="es" >
	<head>
		<meta charset="UTF-8" />
		<script type="text/javascript">

		var imagenX = 0;
		var imagenY = 0;

		var img = new Image;
		img.src = "http://imageshack.us/a/img541/1415/texti.png";
		
		function comenzar(){
			
			var imagenCab = document.createElement("img");
			imagenCab.setAttribute("src", "http://imageshack.us/a/img543/6204/cabtl.png");
			fondo = document.getElementById('fondo');
			fondo.appendChild(imagenCab);
 			lienzo = document.getElementById('lienzo');
 			ctx = lienzo.getContext('2d');
 			setInterval(mover, 10);
			

		}

		function mover(){

		 	imagenX = imagenX + 1;
		 	
		 	if (imagenX == 681){
		 		imagenX = -610;
		 	}
		 	ctx.clearRect(0,0,lienzo.width,lienzo.height);
			ctx.drawImage(img, imagenX, imagenY);
		}

		

		</script>

	</head>
	<body onload="comenzar()">
		<div id = "fondo" width="681" height="180">
		<canvas id="lienzo" width="681" height="180"></canvas>
		</div>
	</body>

</html>

Espero su ayuda. Saludos!