Problema con Canvas para pasarle imagenes

[pkjns]

Hola a todos,

Estoy intentando meter unas imágenes en varios canvas contenidos en un div y no soy capaz de hacerlo.

Evidentemente soy un piolín de js y html5, es decir, un novato. Pongo el código e (esto es lo mas complicado) intentaré explicar que quiero conseguir.

El objetivo es el siguiente:
He creado una barra de navegacion <nav> que contiene una lista no ordenada <ul> incluida en un <div> que contiene cuatro <canvas>, lo que pretendo hacer es que en lugar de generar un dibujo dentro del canvas, insertar una imagen dentro de cada canvas.
No se si me explico bien.

Dentro de una etiqueta nav e incluido un div que a su vez contendrá cuatro canvas:

Código: Seleccionar todo

<nav>
    <div id="linav">
         <ul>
            <li><a href="Index.html"><canvas id="im1" width="55" height="55"><p>Su navegador no es compatible con canvas</p></canvas>Inicio</a></li>
      <li><a href="noticias.html"><canvas id="im2" width="55" height="55"><p>Su navegador no es compatible con canvas</p></canvas>Noticias</a> </li>
           <li><a href="sobremi.html"><canvas id="im3" width="55" height="55"><p>Su navegador no es compatible con canvas</p></canvas>Sobre mí</a></li>
           <li><a href="contacto.html"><canvas id="im4" width="55" height="55"><p>Su navegador no es compatible con canvas</p></canvas>Contacto</a> </li>
         </ul>
     </div>
</nav>

Dentro del head he metido la referencia al script que se encuentra en un fichero externo:

Código: Seleccionar todo

<script type="text/javascript" src="js/canvas_index.js"></script>

Este fichero js contiene:

Código: Seleccionar todo

function cargaImg1Canvas(im1){
   var elemento = document.getElementById("im1");
   if(elemento && elemento.getContext){
      var contexto = elemento.getContext("2d");
      if(contexto){
         return contexto;
      }
   }
   return FALSE;
}
window.onload = function(){
  var ctx = cargaImg1Canvas("im1");
   if(ctx){
      var img1 = new Image();
      img1.src = "img/inicio.png";
      img1.onload = function(){
         ctx.drawImage(im1, 1, 1);
      }
   }
}

El código javascript hubo un momento que me funcionó pero tanto tocarlo me he perdido definitivamente.

Las preguntas son:
¿que esta mal en el javascript?
¿Hay algo bien en el planteamiento o no se puede hacer tal como lo hago?
¿Podría copiar el código javascript para cada uno de los canvas dentro del mismo fichero .js?

Si alguno entiende lo que quiero decir, sería estupendo, sino pues ya seguiré probando.

Gracias a todos.

[admin945]

Hola buenas,

Espero que te pueda servir este código:

Código: Seleccionar todo

var c=document.getElementById("canvas");
var cxt=c.getContext("2d");
var img1=new Image()
img1.src="img/inicio.png";
img1.onload = function() {
    cxt.drawImage(img1,0,0);
};


Como verás, es sólo una base

Un saludo!

[pkjns]

Hola admin945,
Ante todo gracias por responder. El código que me has indicado ya lo había probado inicialmente, como no sé mucho de javascript, fui probando de forma individual en cada uno de los canvas. El ejemplo de código que he puesto en el anterior post es una copia de un tuto que vi por la red, hubo un momento que me funcionó, aunque solo me servia para un canvas a la vez, al duplicar el código y referenciar al segundo canvas dejaba de mostrarme de nuevo la imagen.

Quiero ademas meter el código en un fichero externo porque aunque el proyecto que estoy haciendo no es muy complejo, si estoy utilizando en el HTML5 y CSS3, para lograr algunos de los nuevos efectos y simplificación de programación que ofrece HTML5, ademas de que estoy empezando por lo que quiero llevar un orden lo mas limpio posible para poder depurar los errores con mas facilidad.

Me da la sensación que me estoy liando mas que lo que debería y la solución pasará por algún pequeño trozo de código que esta mal colocado o falta.

Muchas gracias por tu respuesta, un saludo.

[admin945]

Con este ejemplo deberías de poder crear lo que necesitas,

Puedes subir tu proyecto? de esta manera será más fácil ayudarte,

Un saludo!

[pkjns]

¿Con los tres ficheros relacionados sería suficiente? Hasta ahora lo estoy maquetando con Dreamweaver en local.

¿Como se puede subir el proyecto?

[admin945]

No sé si podrás probarlo aquí,

Espero que sí. Después nos pasas tu link:

http://jsfiddle.net/

Un saludo!

[pkjns]

A ver si he sido capaz de entender lo que me has indicado.

http://jsfiddle.net/KzJJm/2/

http://jsfiddle.net/KzJJm/1/

Lo que no se verán las imágenes porque no se donde ubicarlas en caso de que puedan subirse.

Disculpa tanta torpeza.

[admin945]

Hola no te preocupes, al principio es normal. Si tienes ganas aprenderás.

Te he actualizado el segudno link. Como verás, puedes usar imagenes remotas para hacer este ejemplo. Así no dependes de ningún fichero de imagen. Te he creado una función load_image, donde le pasas la ruta de la imagen, y el canvas al que quieres que baya.

Además, si lo deseas, puedes pasarle las coordenadas por parámetro ( adaptando la función )

Código: Seleccionar todo

// JavaScript Document

window.onload = function(){
    var canvas = document.getElementById("im1");
    var img = "http://www.foroshtml5.com/styles/html5/imageset/foro-html5.jpg";

    load_image(img, canvas);
};


function load_image(img, canvas) {
   
    var context = canvas.getContext("2d");
    var destX = 0;
    var destY = 0;
    var imageObj = new Image();
 
    imageObj.onload = function(){
        context.drawImage(imageObj, destX, destY);
    };
    imageObj.src = img
}


Con coordenadas simplemente sería:

Código: Seleccionar todo

// JavaScript Document

window.onload = function(){
    var canvas = document.getElementById("im1");
    var img = "http://www.foroshtml5.com/styles/html5/imageset/foro-html5.jpg";

    load_image(img, canvas);
};


function load_image(img, canvas, x, y) {
   
    var context = canvas.getContext("2d");
    var imageObj = new Image();
 
    imageObj.onload = function(){
        context.drawImage(imageObj, x, y);
    };
    imageObj.src = img
}



Un saludo!

[admin945]

Se me olvidada el link!:

http://jsfiddle.net/KzJJm/3/

[pkjns]

Ante todo te agradezco mucho tu tiempo.

He colocado el codigo en local, le modifico la ruta a mi imagen y perfecto. El primer canvas ya tiene la imagen que quiero.

¿Pero como hacer para que el resto de los canvas muestre también las imágenes correspondientes? No sirve con duplicar el codigo y referenciar la imagen correspondiente ¿no? Copio el código y me muestra la imagen del siguiente canvas pero desaparece la primera.
Lo siento pero el Javascript no lo domino nada, se me da fatal.

Lo que hago en el fichero js es esto:

Código: Seleccionar todo

window.onload = function(){
    var canvas = document.getElementById("im1");
    var img = "img/inicio.png";

    load_image(img, canvas);
};

function load_image(img, canvas) {
   
    var context = canvas.getContext("2d");
    var destX = 0;
    var destY = 0;
    var imageObj = new Image();
 
    imageObj.onload = function(){
        context.drawImage(imageObj, destX, destY);
    };
    imageObj.src = img
};

window.onload = function(){
    var canvas = document.getElementById("im2");
    var img = "img/noticias.png";

    load_image(img, canvas);
};

function load_image(img, canvas) {
   
    var context = canvas.getContext("2d");
    var destX = 0;
    var destY = 0;
    var imageObj = new Image();
 
    imageObj.onload = function(){
        context.drawImage(imageObj, destX, destY);
    };
    imageObj.src = img
};


Es obvio que le estoy volviendo loco al código (a ti también, lo siento). Haber si me aclaro de algo, si hay mas de un window.onload hace caso solo al ultimo, según he leído, con lo ya conozco el motivo por el que solo puedo ver uno a la vez (ya es algo). También he leído alguna solución para que se pueda cargar mas de un window.onload a la vez, pero mi limitación de js hace que me pierda.

De verás que lamento marearte tanto, porque estoy haciendo que escribas el código por mi. Tengo que darle mas al js pero tengo que ir poco a poco, HTML5, CSS3, Js, todo a la vez es demasiado para mi.

Muchas gracias por tu tiempo y tu ayuda.