processing.js canvas is not rendering anything, why?

Question

I am implementing the first method, as recommended here,http://processingjs.org/learning/.

My code is:

Anything.html

<script src="processing.js"></script> 
<canvas data-processing-sources="anything.pde"></canvas> 

Anything.pde

void setup()
{
  size(200,200);
  background(125);
  fill(255);
  noLoop();
  PFont fontA = loadFont("courier");
  textFont(fontA, 14);  
}

void draw(){  
  text("Hello Web!",20,20);
  println("Hello ErrorLog!");
}

Web browser screen shows nothing...

Why am I not seeing the canvas? What is the problem?

Second method as reccomeded in the site mentioned at the top, works well.

Second method code:

 <script src="processing.js"></script>
 <script type="text/processing" data-processing-target="mycanvas">
 void setup()
 {
   size(200,200);
   background(125);
   fill(255);
   noLoop();
   PFont fontA = loadFont("courier");
   textFont(fontA, 14);  
 }

 void draw(){  
   text("Hello Web!",20,20);
   println("Hello ErrorLog!");
 }
 </script>
 <canvas id="mycanvas"></canvas>

Web browsers output:

Answer 1

I tried the code in the same way and ran into the same problem with Chrome. It did work with Firefox. It is an interesting question, especially since it is shown as a preferred basic example.

I poked around a bit to try to make it work. I found a slightly different format that uses datasrc="anything.pde" and found the same results with only Firefox working.

I tried dancing the commands around inside a correctly formatted page with etc tags. It did not help.

I found a rather complex discussion that was over my head as a beginner at How do I include a JavaScript file in another JavaScript file?

I would have liked to have found an easy way to make the additional file work. I recommend sticking with the second method. That's what I'm going to do.