processing.js inside handlebars not loading

Question

I have an HTML canvas element that uses a processing.js script as shown here:

<canvas id="mysketch" data-processing-sources="form.pde"></canvas>

This canvas element is inside a handlebars script. At the end of the file, before the closing body tag, I have:

<script type="text/javascript" src="processing.js"></script>

If I put the canvas inside the handlebars script, the processing script doesn't render. (I think this is because the processing script, even though it's the last thing in the HTML file, renders before the handlebars script does, and therefore before the canvas element has even been created. I'm not sure though.)

If I put the processing canvas outside the handlebars script, it renders correctly, but I need to do it inside the handlebars script.

Maybe, is there a way to run processing after everything else has run?

Answer 1

Processing.js only does automatic script loading on DOMContentLoaded. If you're templating your canvas in later on (i.e. through a templating library) you need to make Processing either reload, using Processing.reload(), or you need to add some JS that explicitly loads your source where you need it, using Processing.loadSketchFromSources()