Load processing.js sketch after window is fully loaded with innerHTML?

Question

My processing.js sketch has a size() call that depends on the window being loaded as it grabs the size of a div. 50% of the time, the sketch loads before the CSS kicks in, so the sketch doesn't have the right size. I figure the best way to combat this is to load it in a window.onload function, but canvas doesn't seem to like being invoked by innerHTML. How could I pump some canvas with a processing sketch into a div on command?

Answer 1

it's not so much canvas not working as it's Processing.js not looking for DOM insertions for canvas to load sketches; it only does a general pass for sketches to load on DOM content loaded. Since you want your sketch injected after that, you can either trigger a reparse (by calling Processing.reload(), which will reset everything, so if you have other sketches on the same page that should not be reset, don't use that) or you can call

var sourceList = ['file1.pde','file2.pde','...',...];
var canvas = document.querySelector("#mycanvas");
Processing.loadSketchFromSources(canvas, sourceList);

specifically for the one sketch whenever it's safe to inject it into the page.