CODEWITHSUNDEEP
javascriptobjectobject-literal
user3581784
user3581784

Reputation: 33

What am I missing for JS object literal with method?

I am trying to create a simple object literal with a method in it, which in this case is a moving block on a canvas. I wrote the following piece of code using a tutorial at http://www.html5rocks.com

var block = {
    color: "#000000",
    x: 0,
    y: 0,
    width: 30,
    height: 30,
    draw: function () {
        ctx.fillStyle = this.color;
        ctx.fillRect(this.x, this.y, this.width, this.height);
    }
};

function update() {
    block.x = block.x + 30;
    block.y = block.y + 30;
}

function draw() {
    var x = document.getElementById("space");
    var ctx = x.getContext("2d");

    ctx.clearRect(0, 0, 900, 600);

    block.draw();
}

For some reason it will not work like this, while it will if I write the code now in the draw method in the draw() function. I'm probably missing something, but what?

Upvotes: 1

Views: 105

Answers (2)

Luis Masuelli
Luis Masuelli

Reputation: 12323

ctx is not known when the method is declared. the method creates a closure, and has no value for ctx. remember that scopes are not precisely dynamic (regarding references), since the scope is defined upon function definition, and not function usage.

how to fix it: pass ctx as a parameter to the method, or as an assignable property (and modify the method to reference this.ctx)

Upvotes: 1

Paul Roub
Paul Roub

Reputation: 36438

block, and its members, have never heard of ctx, which is local to your draw() function.

Either make that global, or pass it into block.draw:

var block = {
  // ...

  draw: function(ctx) { 
    // ...
  }
};

// ...

block.draw(ctx);

Upvotes: 3

Related Questions