Ver Mensaje Individual
  #1 (permalink)  
Antiguo 10/11/2014, 14:35
kfontana06
 
Fecha de Ingreso: noviembre-2009
Mensajes: 3
Antigüedad: 14 años, 6 meses
Puntos: 0
Colocar mas de una imagen en Canvas

Hola que tal gente ? Soy nuevo en el mundillo de javascript por lo tanto soy muy novato en esto y me surgio una duda al hacer un ejercicio para la facultad en Canvas.

Estuve tratando de poner mas de una imagen con el metodo drawImage pero no lo pude lograr, segui los pasos de un tutorial de otra web (no se si puedo colocar links a sitios externos) en donde ahí mostraban que les salia bien el metodo pero yo al probar en mi PC y despues cuando lo abría en el navegador no me salia.

El codigo textual que copie de esa pagina, es este:

Código:
<!DOCTYPE html>
<html>
<body>

<p>Image to use:</p>
<img id="scream" src="img_the_scream.jpg" alt="The Scream" width="220" height="277">

<p>Canvas:</p>
<canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);

</script>

</body>
</html>
En esa pagina les aparecia la imagen de The Scream dos veces, una dentro del area de canvas y otra fuera. En mi caso, solo aparece una vez fuera del canvas, pero nunca pude lograrlo que aparezca dentro, no se si algo estoy haciendo mal, la imagen la tengo descargada en el escritorio al igual que el html.

Saludos y gracias de antemano.