Sketch loading test; both inline and from source

canvas 1 - script-src from head for text/processing

<head>
  ...
  <script type="text/processing" src="c1.pde" data-target="c1"></script>
  ...
</head>

canvas 2 - script block from head for text/processing

<head>
  ...
  <script type="text/processing" data-target="c2"> /*code*/ </script>
  ...
</head>

canvas 3 - script-src from head for application/processing

<head>
  ...
  <script type="application/processing" src="c3.pde" data-target="c3"></script>
  ...
</head>

canvas 4 - script block from head for application/processing

<head>
  ...
  <script type="application/processing" data-target="c4"> /*code*/ </script>
  ...
</head>

canvas (anonymous 1) - inline sketch without a target for text/processing

  <script type="text/processing">
    String lstring = "A1 loaded successfully!";
    void setup() {
      size(200,100);
      textFont(createFont("Arial",18));
      noLoop();
    }
    void draw() {
      fill(0);
      float tw = textWidth(lstring);
      text(lstring, (width-tw)/2, height/2);
    }
  </script>
  <canvas></canvas>

NOTE: because there is no explicit element ordering, this is (strictly speaking) magic behaviour

canvas (anonymous 2) - inline sketch without a target for application/processing

  <script type="application/processing">
    String lstring = "A2 loaded successfully!";
    void setup() {
      size(200,100);
      textFont(createFont("Arial",18));
      noLoop();
    }
    void draw() {
      fill(0);
      float tw = textWidth(lstring);
      text(lstring, (width-tw)/2, height/2);
    }
  </script>
  <canvas></canvas>

NOTE: because there is no explicit element ordering, this is (strictly speaking) magic behaviour

canvas 5 - inline sketch with target for text/processing

<body>
  <script type="text/processing" data-target="c5">
    String lstring = "C5 loaded successfully!";
    void setup() {
      size(200,100);
      textFont(createFont("Arial",18));
      noLoop();
    }
    void draw() {
      fill(0);
      float tw = textWidth(lstring);
      text(lstring, (width-tw)/2, height/2);
    }
  </script>
  ...
  <canvas id="c5"></canvas>
  ...
</body>

canvas 6 - inline sketch with target for application/processing

<body>
  <script type="application/processing" data-target="c6">
    String lstring = "C6 loaded successfully!";
    void setup() {
      size(200,100);
      textFont(createFont("Arial",18));
      noLoop();
    }
    void draw() {
      fill(0);
      float tw = textWidth(lstring);
      text(lstring, (width-tw)/2, height/2);
    }
  </script>
  ...
  <canvas id="c6"></canvas>
  ...
</body>

canvas 7 - script-src from body for text/processing, using target

<body>
  <script type="text/processing" src="c7.pde" data-target="c7"></script>
  ...
  <canvas id="c7"></canvas>
  ...
</body>

canvas 8 - script-src from body for application/processing, using target

<body>
  <script type="application/processing" src="c8.pde" data-target="c8"></script>
  ...
  <canvas id="c8"></canvas>
  ...
</body>

canvas 9 - script-src from body for text/processing, no target

  <script type="text/processing" src="c9.pde"></script>
  <canvas id="c9"></canvas>

NOTE: because there is no explicit element ordering, this is (strictly speaking) magic behaviour

canvas 10 - script-src from body for application/processing, no target

  <script type="application/processing" src="c10.pde"></script>
  <canvas id="c10"></canvas>

NOTE: because there is no explicit element ordering, this is (strictly speaking) magic behaviour

canvas (anonymous 3) - normal loading using a canvas, without id, that indicates its own source files

  <canvas data-processing-sources="a3.pde"></canvas>

canvas 11 - normal loading using a canvas, with id, that indicates its own source files

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