I have the following block of code.
I am trying have a dark, black background. I am already able to draw stuff on this black canvas. Now, I am trying to add text on top of this black background.
let canvasx = 400;
let canvasy = 400;
let defaultTextSize = 50;
let defaultFontType = 'Georgia';
let defaultTextContent = "P5DRAWINGTREEDEFAULTTEXT";
let defaultTextX = 0;
let defaultTextY = 0;
function setup() {
defaultTextX = canvasx / 2;
defaultTextY = canvasy / 2;
createCanvas(400, 400);
}
function draw() {
background(0);
doTheWords();
}
function doTheWords() {
setupDefaultTextStyle()
testSimpleTextOne();
}
function setupDefaultTextStyle() {
fill(0, 102, 153, 51);
textFont(defaultFontType);
textSize(defaultTextSize);
textAlign(CENTER, CENTER);
}
function testSimpleTextOne() {
text(defaultTextContent, defaultTextX, defaultTextY);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>Any value other zero, for background(0); I can see my text. The moment I put zero, the text dissappears but the rest of the drawing (the actual art that I am drawing, not shown in above code) remains as it is.
Why would background(0) paint away the text?
Note : The text color can be anything, like, pure white, but the problem remains.
I moved the text code to setupDefaultTextStyle.
function setupDefaultTextStyle() {
fill(0, 102, 153, 51);
textFont(defaultFontType);
textSize(defaultTextSize);
textAlign(CENTER, CENTER);
text(defaultTextContent, defaultTextX, defaultTextY);
}
Now, I am getting the display. So, the issue is resolved, but I am still curious, why would text not work, when it is called as a separate function?
The alpha value you assigned was way too low to be visible. (The alpha is the last parameter in the fill function). Also, I cleaned up a bit since you made a couple of variables that could be avoided. You can define the canvas first then use the default variables of width and height (width and height of the canvas) to set defaultTextX and Y
let defaultTextSize = 50;
let defaultFontType = 'Georgia';
let defaultTextContent = "P5DRAWINGTREEDEFAULTTEXT";
let defaultTextX = 0;
let defaultTextY = 0;
function setup() {
createCanvas(400, 400);
defaultTextX = width / 2;
defaultTextY = height / 2;
}
function draw() {
background(0);
doTheWords();
}
function doTheWords() {
setupDefaultTextStyle()
testSimpleTextOne();
}
function setupDefaultTextStyle() {
fill(0, 102, 153, 255);
textFont(defaultFontType);
textSize(defaultTextSize);
textAlign(CENTER, CENTER);
}
function testSimpleTextOne() {
text(defaultTextContent, defaultTextX, defaultTextY);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>Your issue is clearly not reproducible. You claimed that even when using "pure white" the text was still not visible, but as you can see, it is visible (same results in editor.p5js.org). You're just using a very dark and mostly transparent color.
let canvasx = 400;
let canvasy = 400;
let defaultTextSize = 50;
let defaultFontType = 'Georgia';
let defaultTextContent = "P5DRAWINGTREEDEFAULTTEXT";
let defaultTextX = 0;
let defaultTextY = 0;
function setup() {
defaultTextX = canvasx / 2;
defaultTextY = canvasy / 2;
createCanvas(400, 400);
}
function draw() {
background(0);
doTheWords();
}
function doTheWords() {
setupDefaultTextStyle()
testSimpleTextOne();
}
function setupDefaultTextStyle() {
fill(255);
textFont(defaultFontType);
textSize(defaultTextSize);
textAlign(CENTER, CENTER);
}
function testSimpleTextOne() {
text(defaultTextContent, defaultTextX, defaultTextY);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>