drawText() always draw in the middle

So the idea is I want to draw multiple line into dynamic texture. Even if I set the y = 0 when drawing the text, it is still being drawn in the middle (vertically).

//inside for loop
var top = 0;
tex.drawText(textArr[i], 0, top, drawFont, style.fontColor, "transparent", true, true);

Each line of text will be drawn in the middle. The are overlapping each other.

How can I set the y coordinate for each drawing?

Here is an example PG https://www.babylonjs-playground.com/#5ZCGRM#344 that does multiple lines.

Note use null not “transparent” to write on top of an existing dynamic texture canvas.