Question

I cannot find the reason why this doesn’t work:

var c=document.getElementById("myCanvas"),
ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo.apply(this, [100, 100]);
ctx.stroke();

Answer 1

Right now, this is either window… which really doesn’t know what to do with .lineTo, or this is whatever object owns the function that this code is wrapped in.

If this code is not wrapped in a function (or even if it is, if that function is anything other than the property of an object, this === window).

eg:

MyObj.myFunc = function () {
    var c = document.getElementById("myCanvas"),
    //  ..........etc
    ctx.lineTo.apply(this, [100,100]);
};

That code would call .lineTo using MyObj as this.
If MyObj didn’t know what to do with that information, or .lineTo couldn’t find the properties it needed attached to MyObj, then it will fail.

In almost all other cases of reading from this, instead of writing to it, this refers to window.

Another common pitfall: functions inside of functions.

MyObj = {
    name : "Bob",
    sayName : function () {
        console.log(this.name); // works -- "this"===MyObj
        var say_it_again = function () {
            console.log(this.name + ", for the second time");
        };
        say_it_again();
        // second function doesn't work -- "this"===window
};

in order to scope this properly in this case, save it as a variable in the first function, and reference it in the second.

MyObj = {
    name : "Bob",
    sayName : function () {
        var person = this; // now the reference to "this" is kept in "person"
        console.log(this.name); // works -- "this"===MyObj
        var say_it_again = function () {
            console.log(person.name + ", for the second time");
        };
        say_it_again();
        // works -- "person" refers to the saved variable in the first function
        // that variable happens to hold a reference to "this" from the first function
        // which happens to be MyObj
};