in Webgl Mode, textAscent() stays sticked to the first call result and is never updated.

[pirelaurent]

Most appropriate sub-area of p5.js?

• Accessibility (Web Accessibility)
• Build tools and processes
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Friendly error system
• Image
• IO (Input/Output)
• Localization
• Math
• Unit Testing
• Typography
• Utilities
• WebGL
• Other (specify if possible)

Details about the bug:

in Webgl Mode, textAscent() stays sticked to the first call result and is never updated.
in P2D textAScent() works correctly with same code :

Same thing of course for textDescent() .

• p5.js version: p5.js v1.1.9 July 22, 2020
• Web browser and version: chrome 87.0.4280.88 (Build officiel) (64 bits) same on Firefox: 84.0
• Operating System: windows 10 64bits
• Steps to reproduce this:
  ( note: font is loaded in preload . Tests done with verdana.ttf & consolab.ttf )

function setup() {
  createCanvas(900, 900, WEBGL);
}

function draw() {
 translate(-width/2,-height/2);
  background(0);
  fill('white');
  textFont(consola);
  textSize(12);
  text('WEBGL : textAscent', 200,20);
  text('12: '+textAscent(), 20,20);
  textSize(14);
  text('14: '+textAscent(), 20,40);
  textSize(16);
  text('16: '+textAscent(), 20,60);
  textSize(32);
  text('32: '+textAscent(), 20,100);
 }

[welcome]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, be sure to follow the issue template if you haven't already.

[vulongphan]

I will work on this issue.

[vulongphan]

@pirelaurent For some reason, when I switched to P2D mode, no text is displayed on the screen anymore. @stalgiag any thought on this?

[stalgiag]

Perhaps the translate(-width / 2, -height /2) line? The coordinate system is different in WebGL with (0,0) as the center of the canvas.

[pirelaurent]

i don't know what you call 'switch'. You cannot change mode while running. You must run once with a webgl canvas, then stop, change to p2d, run again.
if you use a p2d graphics to create text while in webgl (what i do frequently for response time), think about to advance image a little bit on z to be on top of background things for camera.
Hth

[AryanKoundal]

Highlights:

When the text() function gets called with P2D renderer,in every call the _textAscent property is NULL. But when the text() function gets called with WebGL renderer, the _textAscent property is NULL for the 1st call and then it stays as it is for any further calls.

And the textAscend() function only updates the values when _textAscent is NULL.

Details:

So the problem originates from the _renderer properties where _textAscent is initiated differently for P2D and WebGL . Further, the _texAscent is updated via _updateTextMetrics()

p5.js/src/core/p5.Renderer.js

Line 469 in 1dff6da

p5.Renderer.prototype._updateTextMetrics = function() {

only when _texAscent property is NULL.

p5.js/src/core/p5.Renderer.js

Line 189 in 1dff6da

if (this._textAscent === null) {

Hence, it's not getting updated for new calls to textAscend() .

[Forchapeatl]

@vulongphan may i take this off your hands ? i would love to work on it

[davepagurek]

@Forchapeatl I think it's ok if you want to start looking into this, thanks!