This is a sketch that is loaded from source. If you want to be able to use this sketch after loading, for instance in your own JavaScript code, it needs an id='...' so that you can request it using:
Processing.getIntanceById('...')
You can also load a sketch from multiple source files by putting them all in a canvas data-processing-sources attribute string, separated with spaces:
<canvas ... data-processing-sources="file1.pde file2.pde file3.pde" ...>
This is a source-less sketch, loaded from inline source code. Note that in order for an on-page inline sketch to be loaded into a canvas, the sketch must either immediately preceed the <canvas> it is to be loaded in, or the script needs to indicate the id for the canvas.
This means you can either place your script inside the <body> element, above its associated <canvas>, or in the <head> element, pointing to its associated <canvas> element.
This sketch is loaded from a <script> in the html header block which specifies this canvas as its target, referencing its id:
<script type="text/processing" data-processing-target="targetcanvas">...</script>