Get coordinate of character on canvas

p5.js Coding Questions
1

Is there a method or some way of getting the coordinate (or coordinate range ) of a character or portion of a string in a string drawn to canvas using text()?

Say I draw text('hello p5', 100,100); … what are the coordinates of the o? Also, what is the coordinate range of ell?

2

You can use textWidth, textAscent, and textDescent to determine the region where text will be rendered (Note: not all fonts use the full ascent/descent, so this will be an upper bound):

let txt = 'The quick brown fox jumps over the lazy dog.';

function setup() {
  createCanvas(400, 400);
  noStroke();
}

function draw() {
  background(220);
  
  text(txt, 100, 100);
  push();
  stroke('red');
  line(100, 100, 100 + textWidth(txt), 100);
  stroke('green');
  line(100, 100 - textAscent(), 100 + textWidth(txt), 100 - textAscent());
  line(100, 100 + textDescent(), 100 + textWidth(txt), 100 + textDescent());
  pop();
}

This code would need to be tweaked if you were using non-default text alignment.

https://editor.p5js.org/Kumu-Paul/sketches/uP67OP3t1

3

ty … but how would you find either the coordinate of b or the coordinate range of brown in your txt?

4

Simply measure the textWidth(txt.substr(0, 10)) to get the horizontal offset of the 'b' and then textWidth('brown') would be the width of the word brown.

1 Like
6

You could try sharing some example code, the following works perfectly for me:

let txt = 'The quick brown fox jumps over the lazy dog.';

function setup() {
  createCanvas(400, 400);
  noStroke();
}

function draw() {
  background(220);
  
  text(txt, 100, 100);
  push();
  stroke('red');
  line(100, 100, 100 + textWidth(txt), 100);
  stroke('green');
  line(100, 100 - textAscent(), 100 + textWidth(txt), 100 - textAscent());
  line(100, 100 + textDescent(), 100 + textWidth(txt), 100 + textDescent());
  pop();
  
  let ix = txt.indexOf('brown');
  if (ix >= 0) {
    let xOffset = textWidth(txt.substr(0, ix));
    push();
    stroke('blue');
    noFill();
    rect(100 + xOffset, 100 - textAscent(), textWidth('brown'), textAscent() + textDescent());
    pop();
  }
}
7

Thank you … the textWidth() of the substr() is exactly what I was needing … Not sure why it was not working for me the first time I tried, must have set the wrong index.

1 Like