# Get coordinate of character on canvas

**URL:** <https://discourse.processing.org/t/get-coordinate-of-character-on-canvas/30749>\
**Category:** Coding Questions\
**Created:** [June 16, 2021, 9:17pm UTC](https://discourse.processing.org/t/get-coordinate-of-character-on-canvas/30749 "2021-06-16T21:17:48Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![slow\_izzm](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/slow_izzm/32/5637_2.png) [@slow\_izzm](https://discourse.processing.org/u/slow_izzm)\
**Post date:** [June 16, 2021, 9:17pm UTC](https://discourse.processing.org/t/get-coordinate-of-character-on-canvas/30749/1 "2021-06-16T21:17:48Z")

</div>

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`?

---

<div class="post-metadata">

**Author:** ![KumuPaul](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kumupaul/32/13072_2.png) [@KumuPaul](https://discourse.processing.org/u/KumuPaul)\
**Post date:** [June 16, 2021, 10:50pm UTC](https://discourse.processing.org/t/get-coordinate-of-character-on-canvas/30749/2 "2021-06-16T22:50:26Z")

</div>

You can use [textWidth](https://p5js.org/reference/#/p5/textWidth), [textAscent](https://p5js.org/reference/#/p5/textAscent), and [textDescent](https://p5js.org/reference/#/p5/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):

```auto
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](https://editor.p5js.org/Kumu-Paul/sketches/uP67OP3t1)

---

<div class="post-metadata">

**Author:** ![slow\_izzm](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/slow_izzm/32/5637_2.png) [@slow\_izzm](https://discourse.processing.org/u/slow_izzm)\
**Post date:** [June 16, 2021, 10:59pm UTC](https://discourse.processing.org/t/get-coordinate-of-character-on-canvas/30749/3 "2021-06-16T22:59:25Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![KumuPaul](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kumupaul/32/13072_2.png) [@KumuPaul](https://discourse.processing.org/u/KumuPaul)\
**Post date:** [June 16, 2021, 11:03pm UTC](https://discourse.processing.org/t/get-coordinate-of-character-on-canvas/30749/4 "2021-06-16T23:03:52Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![KumuPaul](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kumupaul/32/13072_2.png) [@KumuPaul](https://discourse.processing.org/u/KumuPaul)\
**Post date:** [June 17, 2021, 12:04am UTC](https://discourse.processing.org/t/get-coordinate-of-character-on-canvas/30749/6 "2021-06-17T00:04:47Z")

</div>

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

```auto
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();
  }
}

```

---

<div class="post-metadata">

**Author:** ![slow\_izzm](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/slow_izzm/32/5637_2.png) [@slow\_izzm](https://discourse.processing.org/u/slow_izzm)\
**Post date:** [June 17, 2021, 12:09am UTC](https://discourse.processing.org/t/get-coordinate-of-character-on-canvas/30749/7 "2021-06-17T00:09:16Z")

</div>

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.