Error: 'CanvasElement' is undefined

Question

I get Error: 'CanvasElement' is undefined when trying to run the following code using the javascript port of processing.

var p = Processing(CanvasElement);
    p.size(100, 100);
    p.background(0);
    p.fill(255);
    p.ellipse(50, 50, 50, 50);

Any help with this would be appreciated.

Answer 1

Where is CanvasElement defined? It sounds like the code you posted is executing before the code that defines CanvasElement.

Answer 2

You need to have a canvas element somewhere on the page that you can select:

<canvas id="theCanvas" width="500" height="500"></canvas>

Then you can select the element however you want and pass it (or its ID) to the Processing function:

var p = Processing(document.getElementById("theCanvas")); // or Processing("theCanvas")
p.size(100, 100);
p.background(0);
p.fill(255);
p.ellipse(50, 50, 50, 50);