example.html

<!DOCTYPE html>
<html>
  <head>
    <title>Processing.js Example Page</title>
    <meta charset="UTF-8">
    <script type="text/javascript" src="processing.js"></script>

    <!--
        This is a source-file-less sketch, loaded from inline source code in
        the html header. This only works if the script specifies a data-processing-target
    -->
    <script type="text/processing" data-processing-target="targetcanvas">
      //  Processing.js example sketch
      int fontsize = 24;

      void setup() {
        size(200, 200);
        stroke(0);
        fill(0);
        textFont(createFont("Arial",fontsize));
        noLoop();
      }

      void draw() {
        background(#F0F0E0);
        String textstring = "header example";
        float twidth = textWidth(textstring);
        text(textstring, (width-twidth)/2, height/2);
      }
    </script>
  </head>

  <body>
    <h3>Processing.js Example Page - Loading Sketches</h3>

    <p>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:</p>

    <pre>   Processing.getInstanceById('...')</pre>

    <p>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:</p>

    <pre>   &lt;canvas ... data-processing-sources="file1.pde file2.pde file3.pde" ...&gt;</pre>

    <canvas data-processing-sources="example.pde" style="border: 1px solid black;"></canvas>

    <hr/>

    <p>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 &lt;canvas&gt; it is to be
        loaded in, or the script needs to indicate the id for the canvas.</p>

    <p>This means you can either place your script inside the &lt;body&gt; element,
        above its associated &lt;canvas&gt;, or in the &lt;head&gt; element, pointing to
        its associated &lt;canvas&gt; element.</p>

    <script type="text/processing">
      //  Processing.js example sketch
      int fontsize = 24;

      void setup() {
        size(200, 200);
        stroke(0);
        fill(0);
        textFont(createFont("Arial",fontsize));
        noLoop();
      }

      void draw() {
        background(#F0F0E0);
        String textstring = "inline example";
        float twidth = textWidth(textstring);
        text(textstring, (width-twidth)/2, height/2);
      }
    </script>
    <canvas style="border: 1px solid black;"></canvas>

    <hr/>

    <p>This sketch is loaded from a &lt;script&gt; in the html header block
        which specifies this canvas as its target, referencing its id:</p>

    <pre>   &lt;script type="text/processing" data-processing-target="targetcanvas"&gt;...&lt;/script&gt;</pre>

    <canvas id="targetcanvas" style="border: 1px solid black;"></canvas>
  </body>
</html>