Problem displaying text with P3D in HTML5- issue 2465


I have just been starting with Processing, it looks very promising indeed. I am working in a HTML5 document, using the Processing.js to make use of the full library (I want to connect to the HTML5 Audio API).

My problem is the following: I want to show a text string, and at the same time I want to show a 3D object. When using P2D, my text shows fine, but I have no 3D space. When switching to P3D, my text is not showing. This is my code (look below for the Processing script):


<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />    
<script type="text/javascript" src="js/processing-1.4.1.js"></script>   

<script type="text/processing">
/* @pjs
PFont font_name;

void setup() {
size (1200, 800, P3D);
background (34);
lineStart = height/2;   

void draw() { 

background (34);                          
font_name = createFont("georgia.ttf", 32);
text ("georgia in pjs", 20, 310); 

line(0, lineStart, width, lineStart);  
lineStart = lineStart - 0.5;
if (lineStart < 0) { 
lineStart = height; 

vertex(30, 30, -60); 
vertex(30, 60, -60);
vertex(60, 60, 0);  
vertex(60, 30, 0);  


<canvas id="mycanvas"></canvas>


I have found the bug describing my problem in 3D: It works fine in the processing editor, but in my HTML document my text is shown as a (black) bar.

Am I missing something or is there maybe an easier way to mix 2 and 3d in my HTML canvas?

Thanks in advance, hope someone knows a fix or a workaround!

greets Toreander



  • I'm not good at P3D. Just gonna mention some tips:

    • Processing.JS version 1.4.1 is very much like the old Processing version 1.5.1
    • In Processing.JS, P2D isn't WebGL. And P2D is the same as JAVA2D.
    • And P3D is the same as OPENGL renderer.
    • Don't load/create resources after setup(). That's why setup() exists for!
    • @pjs font directive:
  • Thanks very much for your tips, going to do some more research! It takes some time to put it all together...

Sign In or Register to comment.