Why I can't call to public function in a Javascript namespace

Question

I want to call to method setupCanvas.Draw(); to draw rectangle.

And for some reason I can not call a function Draw(); from out the scop game.setupCanvas(); Demo jsfiddle

window.game = window.game|| {};
game.main = function() {};      
game.setupCanvas = function(){

        var w = $(window).outerWidth();
        var h = $(window).outerHeight();
        myCanvas = document.createElement('canvas');
        document.body.appendChild(myCanvas);
        myCanvas.id     = "playground";
        myCanvas.width  = w * 0.8;
        myCanvas.height = h * 0.8;
        myCanvas.style.left= (w - myCanvas.width )/2 + 'px' ;
        myCanvas.style.top= (h -  myCanvas.height )/2 + 'px' ;     
        myCanvas.style.zIndex   = 10;
        myCanvas.style.position = "absolute";
        myCanvas.style.border   = "1px solid green ";
        this.ctx= $('#playground').get(0).getContext('2d');

       this.Draw  = function(){
         ctx.fillStyle="#0000FF";
         ctx.fillRect(150,75,150,75);
         ctx.fillStyle="#F0F0FF";
         ctx.fillRect(0,0,150,75);
    };
}();    
    game.setupCanvas.Draw();

Many thanks

David G · Accepted Answer · 2013-01-01 20:16:15Z

2

You need to create a new instance:

var x = new game.setupCanvas();

x.Draw();

Also, this part is wrong:

 };
}(); // <--

game.setupCanvas.Draw();

You're immediately-invoking the function, which you shouldn't be doing. It returns undefined to game.setupCanvas. Take it away and your code should work.

Moreover, when you reference a thectx property in your Draw method, you need to use this.ctx.

jsFiddle Demo

edited Jan 1, 2013 at 20:16

answered Jan 1, 2013 at 20:08

David G

97.6k41 gold badges173 silver badges258 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

David G Over a year ago

@limelights You need to get rid of the () at the end of the function expression to game.setupCanvas

Henrik Andersson Over a year ago

Yeah, I missed it. Also, he'll get a undefined on ctx since he's not referring to the this.ctx. You should update your answer! :)

David G Over a year ago

@rotem Why are you changing it now? It works like this -- jsfiddle.net/eEfJ7

Karl-Johan Sjögren · Accepted Answer · 2013-01-01 20:19:59Z

0

Your assignment of game.setupCanvas is invalid since the self invoking function doesn't return anything so game.setupCanvas will be undefined. Make sure to return an object with your public methods like this.

return {
    Draw: function(){
      ctx.fillStyle="#0000FF";
      ctx.fillRect(150,75,150,75);
      ctx.fillStyle="#F0F0FF";
      ctx.fillRect(0,0,150,75);
    },
    DrawSomethingElse: function(){
      ctx.fillStyle="#0000FF";
      ctx.fillRect(150,75,150,75);
      ctx.fillStyle="#F0F0FF";
      ctx.fillRect(0,0,150,75);
    }
};

Here is an update to your fiddle http://jsfiddle.net/dAvtS/11/

answered Jan 1, 2013 at 20:19

Karl-Johan Sjögren

17.8k7 gold badges66 silver badges75 bronze badges

Collectives™ on Stack Overflow

Why I can't call to public function in a Javascript namespace

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related