How to create separate objects using Modular JavaScript pattern

Question

I'm trying to update the interval value x but not succeeding. I hope to eventually have different pawn objects with internal values I can update when keypress up/down/left/right to redraw the canvas.

Code Update: Able to update x, y values now, but not sure about creating seperate objects using modular JavaScript pattern.

JavaScript using jQuery 1.5.1:

//Constructors
    var pawn = (function() {        

        var x = 25;
        var y = 25;     
        var getX = function() {
            return x;
        };
        var getY = function() {
            return y;
        };

        function _drawPawn(x,y) {
            var x = x || 25;
            var y = y || 25;
            var canvas = document.getElementById("canvas");
            if (canvas.getContext) {
                var b = $('body');
                var winH = b.height();
                var winW = b.width();
                $(canvas).attr('height',winH).attr('width',winW);
                var ctx = canvas.getContext("2d");  
                ctx.beginPath();
                ctx.lineWidth="3";
                ctx.arc(x, y, 10, 0, Math.PI * 2, true); // circle              
                ctx.stroke();
            }
        }

        function left() {
            x = 100;
            y = 100;
        }

        return {
            getX:getX,
            getY:getY,
            draw: function drawPawn(x,y) {
                _drawPawn(x,y);
            },
            left:left
        }
    })();   

    //Init
    $(function() {      
        var b = pawn;
        b.left();
        alert(b.getX());

            var a = pawn;
    alert(a.getX());

        //b.draw();
    });

and the html:

<canvas id="canvas" height="800px" width="600px">
    Download a modern browser like Internet Explorer 9, Firefox, Safari or Chome to view this.
</canvas>

Answer 1

As it is currently written, your getX() function will be automatically invoked with the supplied (empty) parameter list, and return x, which is then equivalent to:

var getX = x;

which will give getX the value of x at the time it was declared.

To fix, removed the parentheses:

var getX = function() {
        return x;
};

---

You also need to fix this function in your returned object:

draw: function drawPawn(x, y) {
    _drawPawn(x, y);
}

Since the apparent intent is to call draw without parameters and use the currently bound x and y values, it should be:

draw: function drawPawn() {
    _drawPawn(x, y);
}

Answer 2

First like alnitak said remove paranthese from getX, getY. If u want different pawn objects you should use var b = new pawn()