variable throwing 'undefined' error, cannot figure out

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.

Answer 2

Raphael.js expects there to be a hard coded HTML element on the page with the name of the Raphael canvas (ie: "canvas_container"). If the HTML element is created during run time (dynamically in your JavaScript code), it will throw this error.

R._engine.create = function () {
    var con = R._getContainer.apply(0, arguments),
        container = con && con.container,
        x = con.x,
        y = con.y,
        width = con.width,
        height = con.height;
    if (!container) {
        throw new Error("SVG container not found.");
    }
    var cnvs = $("svg"),
        css = "overflow:hidden;",
        isFloating;
    x = x || 0;
    y = y || 0;
    width = width || 512;
    height = height || 342;
    $(cnvs, {
        height: height,
        version: 1.1,
        width: width,
        xmlns: "http://www.w3.org/2000/svg"
    });
    if (container == 1) {
        cnvs.style.cssText = css + "position:absolute;left:" + x + "px;top:" + y + "px";
        R._g.doc.body.appendChild(cnvs);
        isFloating = 1;
    } else {
        cnvs.style.cssText = css + "position:relative";
        if (container.firstChild) {
            container.insertBefore(cnvs, container.firstChild);
        } else {
            container.appendChild(cnvs);
        }
    }
    container = new R._Paper;
    container.width = width;
    container.height = height;
    container.canvas = cnvs;
    container.clear();
    container._left = container._top = 0;
    isFloating && (container.renderfix = function () {});
    container.renderfix();
    return container;
};