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

In my processing.js sketch there is a size () call which depends on the window being loaded as it grabs the size of the div. 50% of the time, the thumbnail is loaded before the CSS starts working, so the thumbnail is not sized properly. I believe the best way to deal with this is to load it in the window.onload function, but canvas doesn't seem to be calling innerHTML. How could I wrap multiple canvases with a processing sketch in the div on command?

+3


source to share


1 answer


it's not much canvas that doesn't work as it doesn't look for DOM inserts for the canvas to load thumbnails; it only performs a generic thumbnail pass to load DOM content. Since you want your thumbnail injected after that, you can either invoke reprocessing (by calling Processing.reload (), which will reset everything, so if you have other thumbnails on the same page that shouldn't 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 one thumbnail when it's safe to put it on the page.

+5


source







All Articles