Question

I’m using Raphael.js. Everytime i load the page i get an error that reads:

con is undefined
x = con.x

I looked up con in the Raphael documentation, and this is what i found:

var con = R._getContainer.apply(0, arguments),
    container = con && con.container,
    x = con.x,
    y = con.y,
    width = con.width,
    height = con.height;
    //...

con is clearly defined here. Here is the code I am trying to load:

var paper = new Raphael(ele('canvas_container'), 500, 500);

window.onload = function() {
            var circle = paper.circle(100,100,100);
            for (i = 0; i < 5; i++) {
                var multiplier = i * 5;
                paper.circle(250 + (2 * multiplier), 100 + multiplier, 50 - multiplier);
            }
    }

Has anyone else gotten this error? Is this a bug in the version of Raphael that I have or is there some other problem?

Answer 1

Try moving the paper instantiation inside your window’s load function:

window.onload = function() {
    var paper = new Raphael(ele('canvas_container'), 500, 500);
    var circle = paper.circle(100,100,100);
    for (i = 0; i < 5; i++) {
        var multiplier = i * 5;
        paper.circle(250 + (2 * multiplier), 100 + multiplier, 50 - multiplier);
    }
}

If you try to get an element by its id before the DOM is ready, getElementById won’t return anything. As you can see here, trying your code on an empty document shows the same result.