text example:

void setup() {
size(200, 200);
background(100);
PFont fontA = loadFont("Times New Roman");
textFont(fontA,32);
}
void draw() {
textAlign(LEFT,TOP);
text("word", 100, 30);
textAlign(CENTER,CENTER);
text("word", 100, 70);
textAlign(RIGHT,BOTTOM);
text("word", 100, 110);
}

output

At last, thank you to Zhibin reminding me that out of the border is not my fault.

void setup() {
size(200, 200);
background(100);
PFont fontA = loadFont("Times New Roman");
textFont(fontA,32);
}
void draw() {
textAlign(RIGHT);
text("word", 50, 30);
textAlign(CENTER);
text("word", 50, 70);
textAlign(LEFT);
text("word", 50, 110);
}

In processing.js, if I define :

 p.textAlign = function textAlign() {
    alert(arguments[0].toString());
    curContext.textAlign = arguments[0].toLowerCase();
 };

I got a number like 39;

I don’t know how to cast a parameter to a string except toString() method.  I have no choice. I change the test case using a string as a parameter, and comment out alert statement:

void draw() {
textAlign("RIGHT");
text("word", 50, 30);
textAlign("CENTER");
text("word", 50, 70);
textAlign("LEFT");
text("word", 50, 110);
}

Then, I got:

The words become out of  border. I believe the main reason is I did not consider the font size that is similar with my textWidth() case. However, this time “curContext.font = curContext.mozTextStyle = curTextSize + “px ” + curTextFont.name;” does not work here. I need to find out another way to finish this.

When I deleted _11.pde in file KNOWN-FAILURES. I passed the test, I got “TEST SUMMARY: 1311 passed, 0 failed (78 known), 1389 total”. So, I think I pass the test. I will update my ticket.

 p.textWidth = function textWidth(str) {
 curContext.font = curTextSize + "px " + curTextFont.name;
 if (curContext.fillText) {
 return curContext.measureText(str).width;
 } else if (curContext.mozDrawText) {
 return curContext.mozMeasureText(str);
 }
 };

Then it works perfectly!

Now, I can work on my textAlign() function.

For my processing.js ticket #455, I build a function:

 p.textWidth = function textWidth(str) {
 if (curContext.fillText) {
 return curContext.measureText(str).width;
 } else if (curContext.mozDrawText) {
 return curContext.mozMeasureText(str);
 }
 };

It looks working, but not perfect. I think I maybe need to measure the pixels of the each of letter. And then multiply the string’s width.

For the ticket #451, because Canvas drawing text has two attributes (textAlign, textBaseline). I think I can build a function like:

p.textAlign = function textAlign() {
 curContext.textAlign = arguments[0].toLowseCase();
if(arguments.length === 2)
   curContext.textBaseline = arguments[1].toLowseCase();
 };

However, it does not work at all. The attributes textAlign and textBaseline are working in canvas.But, curContext.textAlign looks like configure the whole canvas and tricky. If I do curContext.textAlign = "left", all words align to a little right. curContext.textAlign = "center", it does not align to the center of the canvas. The same with textBaseline. It's hard to control.

To do: I still need to work on html 5.0 canvas and the text() method. Maybe Zhibin can help me to understand how the text() works because he made the text() method.


context . textAlign [ = value ]

Returns the current text alignment settings.

Can be set, to change the alignment. The possible values are start, end, left, right, and center. Other values are ignored. The default is start.

So, I think I can use that function in Processing.js. I make function like
p.textAlign = function textAlign(position) {
if (position==”LEFT”)
textAlign=”left”;
};

This does not work. I will continue learning text stuff, prepare my knowledge to do my tickets.

Var Counter = (function(){ var C=arguments[0];
  return {
     increase: function(){
         ct = arguments[1];
     },
     getValue: function(){
         return c:
     }
  };
})(1,2);

When you see so many brackets and commas, you will have a headache. In the Processing.js, there are lots of  this kind of codes. So, I believe it looks simple when you learn a language. But, when you use it in the real work, it become complex, because you need to deal with a complex task.

For my Processing.js project, my two ticket is going to Super review, I will find another ticket. This time, I plan to work on a missing feature ticket.

aCode = aCode.replace(/catch\s*\(\W*(\w*)\s+(\w*)\W*\)[^\{]*\{([^\}]*)\}/g,function(all,expName,name,blockCode){
blockCode = blockCode.replace(RegExp(“\(\\W\)”+name+”\(\\W\)”,”g”),”$1″+name+expName+”$2″);
return (“catch \( “+name+expName+” \)\{“+blockCode+”\}”);
});

Now, it works perfectly! However, I can’t pass the test. the test example is processing-js\test\parser\Processing-Book-001\Extensions\Network\_03\_03.pde . I believe that changing var name can’t fix this bug. But, I have no any other idea.  Also, my  Automated Test and git still have some problem.  Tomorrow, I will delete all my repository, and refork again. hope it will fix my problem. And, I will work on my other ticket.