What is the best way to add and remove text and shapes? - p5.js

Question

I am drawing a circle and want to show some text when the mouse is inside the circle and have the text not shown when the mouse is outside.
The code below works to show the text when the mouse goes in but it seems getting rid of the text is much more difficult! I have looked at different p5 functions such as remove() but they do not do what I expect/want.
What is the right way to hide the text in this situation?
I imagine the same method would be used to also hide a shape too? For example if I were to have drawn a rectangle instead of showing some text, or is that handled differently?
var centerX = 400;
var centerY = 400;
var radius = 40;
function setup() {
var canvas = createCanvas(800, 800);
canvas.parent("Example");
background(200);
fill(204, 101, 192, 127);
ellipse(centerX, centerY, radius, radius);
}
function draw() {
mouseOver(radius, centerX, centerY);
}
function mouseOver(radius, centerX, centerY) {
var d = Math.sqrt(((mouseX - centerX) * (mouseX - centerX)) + ((mouseY - centerY) * (mouseY - centerY)));
if (d < radius) {
textSize(12);
text("Hello", 400, 400);
} else {
//remove the text
}
}

Answer 1

To remove part of a drawing it is very common to simply call background in draw and then redraw the entire canvas
Your code could be written like this:
var centerX;
var centerY;
var radius = 40;
function setup() {
var canvas = createCanvas(200, 200);
centerX = width/2;
centerY = height/2
}
function draw() {
background(200);
fill(204, 101, 192, 127);
ellipse(centerX, centerY, radius*2, radius*2);
mouseOver(radius, centerX, centerY);
}
function mouseOver(radius, centerX, centerY) {
var d = Math.sqrt(((mouseX - centerX) * (mouseX - centerX)) + ((mouseY - centerY) * (mouseY - centerY)));
if (d < radius) {
fill(0);
textSize(12);
text("Hello", centerX, centerY);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>