# Erasing text or lines?

**URL:** <https://discourse.processing.org/t/erasing-text-or-lines/10104>\
**Category:** Coding Questions\
**Created:** [April 8, 2019, 6:11pm UTC](https://discourse.processing.org/t/erasing-text-or-lines/10104 "2019-04-08T18:11:13Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![joba1](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/joba1/32/4512_2.png) [@joba1](https://discourse.processing.org/u/joba1)\
**Post date:** [April 8, 2019, 6:11pm UTC](https://discourse.processing.org/t/erasing-text-or-lines/10104/1 "2019-04-08T18:11:13Z")

</div>

Hi,

I’m new to p5.js (and js in general) and stumbled over this while playing around with the first learning examples. Not sure if Beginners category is only for processing, so I post here:

If I write a text in black over white background and then overwrite this with the same text in white, it does not disappear completely as I had expected.

How can I overwrite text without knowing its exact width and height and without overwriting everything at each draw()?

The same happens with lines. So, how do I “delete” lines?  
Is there a setting, that makes drawing more deterministic?

sample code that produces the behaviour:

```auto
function setup() {
  createCanvas(100, 100);
  fill(0);
  stroke(0);
  line(10, 10, 90, 90);
  noLoop();
}

function draw() {
  fill(255);
  stroke(255);
  line(10, 10, 90, 90);
}

```

Greetings,  
Joachim

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [April 8, 2019, 8:22pm UTC](https://discourse.processing.org/t/erasing-text-or-lines/10104/2 "2019-04-08T20:22:01Z")

</div>

> [@joba1](#):
>
> and without overwriting everything at each draw()?

No, do that. That is how you should do it. Redraw your entire scene every frame. To erase something, just don’t draw it!

---

<div class="post-metadata">

**Author:** ![joba1](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/joba1/32/4512_2.png) [@joba1](https://discourse.processing.org/u/joba1)\
**Post date:** [April 8, 2019, 8:51pm UTC](https://discourse.processing.org/t/erasing-text-or-lines/10104/3 "2019-04-08T20:51:12Z")

</div>

Always good to know how things are supposed to work.  
I thought - after my notebook became quite loud - it might be overkill to draw a whole scene when all I want to do is update a small text or move a line. Seems thats not the usecase of p5.

Thanks.

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [April 10, 2019, 5:10am UTC](https://discourse.processing.org/t/erasing-text-or-lines/10104/4 "2019-04-10T05:10:00Z")

</div>

The alternative is to keep layers in p5.Image or p5.Graphics, and redraw only that layer – then composite the layers each draw frame.

if your sketch is largely inactive and unchanging, you can also noloop to stop rendering, then loop during an active mode (like text editing or mouse interaction).

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [April 10, 2019, 7:30am UTC](https://discourse.processing.org/t/erasing-text-or-lines/10104/5 "2019-04-10T07:30:52Z")

</div>

> [@joba1](#):
>
> after my notebook became quite loud

possibly  
[Unwanted beeping sounds with Vertex functions - #2 by kll](https://discourse.processing.org/t/unwanted-beeping-sounds-with-vertex-functions/9985/2) can help.

* * *

now for the use of the 2 modes:

```auto
function draw() {
  background(); 
  // redraw all again 60 times per sec
}

```

or disabled

```auto
// background();

```

one tip, for showing changing text need to clean up background behind first  
like [p5.js Web Editor](https://editor.p5js.org/kll/sketches/0UmJ7iuox) here.