cargar imagen en canvas con prototype(no me sale)

[Toshirou]

No sé porque no me aparece la imagen , he revisado bien el codigo y no veo ningun problema o no sé, ojala me puedan ayudar:

Código HTML:

<canvas id="c" width="600"  height="600"></canvas>
 

Código Javascript:

var lienzo, cxt;
 
        lienzo = document.getElementById("c");
        cxt = lienzo.getContext("2d");
 
        var cargaImagen = function(dondeEstoy)
        {
            this.imagen = new Image();
            this.imagen.src = dondeEstoy;
            this.imagen.onload = subeImagen;
        }
 
        cargaImagen.prototype.subeImagen = function () 
        {
            this.cxt.drawImage(this.imagen,0,0);
        }
 
        var gato = new cargaImagen("imagen.jpg");
 

No me sale la imagen y me sale en la consola

Código:

Uncaught ReferenceError: subeImagen is not defined  

He probado al dibujar (drawImage) quitando el this o el cxt , pero no me sale la imagen aun , también he probado con variables globales y nada ... no entiendo porque me pasa esto.

[PHPeros]

La propiedad subeImagen la estás definiendo en el prototipo de cargaImagen, por lo tanto no puedes accederla de esa forma.

[Toshirou]

Iniciado por PHPeros

La propiedad subeImagen la estás definiendo en el prototipo de cargaImagen, por lo tanto no puedes accederla de esa forma.

Cuál sería la forma correcta entonces de hacerlo con prototype..?? disculpa la ignorancia.. saludos.

[PHPeros]

Iniciado por Toshirou

Cuál sería la forma correcta entonces de hacerlo con prototype..?? disculpa la ignorancia.. saludos.

Código:

this.imagen.onload = this.subeImagen;

[Toshirou]

Iniciado por PHPeros

Código:

this.imagen.onload = this.subeImagen;

Bueno .. igual no me sale la imagen. Me sale un error:

Código:

Uncaught TypeError: Cannot read property 'drawImage' of undefined 

Probé quitando el 'this' del drawImage y me sale otro error:

Código:

Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': No function was found that matched the signature provided. 

No entiendo porque, ya intenté muchas formas y nada... ejecutando al ultimo ( gato.subeImagen() ) y nada .. podrías probar tu y me pasas el codigo que te funcione por favor.

[zerokilled]

buenas...
@toshirou, creo que deberias leer más teoría acerca de prototype porque me parece que estas dando palos de ciego. estas cometiendo un error similar al anterior. en la web hay muuuuuuuuuucho material al respecto: prototipos vs clases, ejemplos de prototipos y herencia, entendiendo los prototipos en javascript, y un largo etc.

[jp91]

Ok algo sencillo quedaria asim pero si tienes que estudiar un poco mas, cuando declaras una variable como "cxt" esta es de ambito global no tienes que llamarla con "this" , y sobre prototypes hay si que tienes que practicar.

Código Javascript:

window.addEventListener('load',run,false);
 
var lienzo, contexto;
 
 
            lienzo = document.getElementById("caja");
            contexto = lienzo.getContext('2d');
 
 
            function cargaImagen (dondeEstoy)
            {
                this.imagen = new Image();
                this.imagen.src = dondeEstoy;
 
            };
 
            cargaImagen.prototype.subeImagen = function (contexto)
            {
 
               contexto.drawImage(this.imagen,100,0);
            };
 
         var gato = new cargaImagen("cualquiera.png");
   
         function run(){
           gato.subeImagen(contexto);
           }
 

[Toshirou]

Iniciado por jp91

Ok algo sencillo quedaria asim pero si tienes que estudiar un poco mas, cuando declaras una variable como "cxt" esta es de ambito global no tienes que llamarla con "this" , y sobre prototypes hay si que tienes que practicar.

Código Javascript:

window.addEventListener('load',run,false);
 
var lienzo, contexto;
 
 
            lienzo = document.getElementById("caja");
            contexto = lienzo.getContext('2d');
 
 
            function cargaImagen (dondeEstoy)
            {
                this.imagen = new Image();
                this.imagen.src = dondeEstoy;
 
            };
 
            cargaImagen.prototype.subeImagen = function (contexto)
            {
 
               contexto.drawImage(this.imagen,100,0);
            };
 
         var gato = new cargaImagen("cualquiera.png");
   
         function run(){
           gato.subeImagen(contexto);
           }
 

Si me di cuenta que el this en el drawImage estaba mal y que en el onload faltaba el this... pero después de arreglar eso , igual no se dibujaba mi imagen... y solo lo dibuja usando el window.addEventListener("load") en donde ejecuta recien el metodo prototype.. pero me pregunto, porque no lo dibujó? si mi sintaxis después de arreglar, estaba bien..

[jp91]

Lo que mencionas ya es cuestion como el navegador interpreta y todo eso, tu error es llamar a image.src antes de image.load, en esto siempre se deberia asegurar que todo ha sido cargado (window.onload) , si usas la figuras primitivas del canvas veras que tu codigo funciona pero cuando necesita cargar imagenes ps ya ves lo que pasa.