Drawing text over an FBO

Currently I am making a meme maker which allows users to draw with a pencil over an image as well as write text. I use an FBO to store the drawing which the user has done but when I use the FBO, the text I have placed over the image disappears. Why would this be happening?

Here is my relevant c++ code:

#include "ofApp.h"

/*
 * Please note that this project is using a modified version of OF.
 * The reason why is that with the normal OF, the image screen grab function inverts the blue
 * and red color channels, so I had to manually change that in the OF source code. Pretty
 * dumb but whatever I gues..
*/

//--------------------------------------------------------------
void ofApp::setup(){
    // Load the fonts we will be using
    normalFont.load("helvetica.ttf", 13);
    bigFont.load("impact.ttf", 15);
    comicSans.load("comicsans.ttf", 14);
    
    // Load the meme images
    yallHearSumn.load("YallHearSumn.jpg");
    hittingButton.load("HittingButton.jpg");
    screamingLady.load("ScreamingLady.jpg");
    squintingWoman.load("SquintingWoman.jpg");
    isThisAPigeon.load("IsThisAPigeon.jpg");
    lebronScreaming.load("LebronScreaming.jpg");
    pikachu.load("Pikachu.jpg");
    tiredSpongebob.load("TiredSpongebob.jpg");
    krustyKrabChumBucket.load("KrustyKrabChumBucket.jpg");
    thisIsWorthless.load("ThisIsWorthless.jpg");
    nobodyIsBornCool.load("NobodyIsBornCool.jpg");
    changeMyMind.load("ChangeMyMind.jpg");
    
    // Load the GUI
    gui.setup();
    gui.add(red.set("red", 0, 0, 255));
    gui.add(green.set("green", 0, 0, 255));
    gui.add(blue.set("blue", 0, 0, 255));
    gui.add(alpha.set("alpha", 255, 0, 255));
    gui.add(imageScale.set("pencil size", 8, 0, 30));
    
    // Setup the canvas for which the user can draw on
    fbo.allocate(500, 500);
    fbo.begin();
    ofClear(255);
    fbo.end();
}

//--------------------------------------------------------------
void ofApp::update() {
   
}

//--------------------------------------------------------------
void ofApp::draw() {
    // Meme generator
    // Title
    ofSetColor(0, 0, 0);
    ofDrawRectRounded(5, 0, 1000, 70, 25);
    ofSetColor(255, 255, 255);
    bigFont.drawString("Meme Generator!", 15, 40);
    
   // User options
    ofSetColor(200, 200, 200);
    normalFont.drawString("Click on any of the meme templates to begin", 410, 20);
    normalFont.drawString("Press `b` to go back out of the meme maker to the main menu", 410, 54);
    
    ofSetColor(255); // Reset grayscale
    
    if (memeToPick == 0) { // No meme selected, so we let the user select one
        // Draw the images to the screen with their titles
        screamingLady.draw(50,75, 150, 150);
        changeMyMind.draw(300, 75, 150, 150);
        tiredSpongebob.draw(550, 75, 150, 150);
        squintingWoman.draw(800, 75, 150, 150);
        isThisAPigeon.draw(50, 275, 150, 150);
        lebronScreaming.draw(300, 275, 150, 150);
        thisIsWorthless.draw(550, 275, 150, 150);
        yallHearSumn.draw(800, 275, 150, 150);
        hittingButton.draw(50, 475, 150, 150);
        nobodyIsBornCool.draw(300, 475, 150, 150);
        pikachu.draw(550, 475, 150, 150);
        krustyKrabChumBucket.draw(800, 475, 150, 150);
        
        ofSetColor(0, 0, 0);
        normalFont.drawString("Screaming Lady:", 50, 250);
        normalFont.drawString("Change My Mind:", 275, 250);
        normalFont.drawString("Relieved Spongebob:", 525, 250);
        normalFont.drawString("Squinting Woman:", 800, 250);
        normalFont.drawString("Is This a Pigeon:", 50, 450);
        normalFont.drawString("Lebron Yelling at JR:", 270, 450);
        normalFont.drawString("Ariana Grande Lollipop:", 520, 450);;
        normalFont.drawString("Y'all Hear Sum'n:", 790, 450);
        normalFont.drawString("Slap Button:", 50, 650);
        normalFont.drawString("Nobody is Born Cool", 300, 650);
        normalFont.drawString("Confused Pikachu:", 510, 650);
        normalFont.drawString("Krusty Krab Chum Bucket:", 745, 650);
        ofSetColor(255);
    } else {
        // Create box to draw in
        gui.setPosition(650, 100);
        gui.draw();
        fbo.draw(100, 100);
        
        ofSetColor(255, 255, 255);
        ofDrawRectRounded(900, 100, 100, 100, 20);
        ofSetColor(red, green, blue, alpha);
        ofDrawCircle(950, 150, imageScale);
        ofSetColor(255);
    }
    
    if ((!isDrawing || !canDraw) && memeToPick != 0) {
        stillOnMenu = false;
        canDraw = true;
        
        switch (memeToPick) {
            case 1:
                screamingLady.draw(100, 100, 500, 500);
                break;
            case 2:
                changeMyMind.draw(100, 100, 500, 500);
                break;
            case 3:
                tiredSpongebob.draw(100, 100, 500, 500);
                break;
            case 4:
                squintingWoman.draw(100, 100, 500, 500);
                break;
            case 5:
                isThisAPigeon.draw(100, 100, 500, 500);
                break;
            case 6:
                lebronScreaming.draw(100, 100, 500, 500);
                break;
            case 7:
                thisIsWorthless.draw(100, 100, 500, 500);
                break;
            case 8:
                yallHearSumn.draw(100, 100, 500, 500);
                break;
            case 9:
                hittingButton.draw(100, 100, 500, 500);
                break;
            case 10:
                nobodyIsBornCool.draw(100, 100, 500, 500);
                break;
            case 11:
                pikachu.draw(100, 100, 500, 500);
                break;
            case 12:
                krustyKrabChumBucket.draw(100, 100, 500, 500);
                break;
        }
    }
}

//--------------------------------------------------------------
void ofApp::keyPressed(int key) {
    if (key == 'b') {
        memeToPick = 0;
        stillOnMenu = true;
        canDraw = false;
        isDrawing = false;
    } else if (key == 's') { 
        ofImage imageToSave;
        imageToSave.grabScreen(100, 100, 500, 500);
        
        nfdchar_t* outPath = NULL;
        nfdresult_t result = NFD_SaveDialog(NULL, NULL, &outPath);
        
        if (result == NFD_OKAY) {
            std::string str(outPath); // Covert nfdchar_t to a std::string which we can actually use
            imageToSave.save(str + ".jpg");
        }
    }
}

//--------------------------------------------------------------
void ofApp::mouseDragged(int x, int y, int button){
    if (!stillOnMenu && canDraw) {
        fbo.begin();
        
        if (!isDrawing && memeToPick != 0) {
            isDrawing = true;
            
            switch (memeToPick) {
                case 1:
                    screamingLady.draw(0, 0, 500, 500);
                    break;
                case 2:
                    changeMyMind.draw(0, 0, 500, 500);
                    break;
                case 3:
                    tiredSpongebob.draw(0, 0, 500, 500);
                    break;
                case 4:
                    squintingWoman.draw(0, 0, 500, 500);
                    break;
                case 5:
                    isThisAPigeon.draw(0, 0, 500, 500);
                    break;
                case 6:
                    lebronScreaming.draw(0, 0, 500, 500);
                    break;
                case 7:
                    thisIsWorthless.draw(0, 0, 500, 500);
                    break;
                case 8:
                    yallHearSumn.draw(0, 0, 500, 500);
                    break;
                case 9:
                    hittingButton.draw(0, 0, 500, 500);
                    break;
                case 10:
                    nobodyIsBornCool.draw(0, 0, 500, 500);
                    break;
                case 11:
                    pikachu.draw(0, 0, 500, 500);
                    break;
                case 12:
                    krustyKrabChumBucket.draw(0, 0, 500, 500);
                    break;
            }
        }
        
        ofPushStyle();
        
        ofSetColor(red, green, blue, alpha);
        ofDrawCircle(mouseX - 100, mouseY - 100, imageScale);
        ofPopStyle();
        
        fbo.end();
    }
}

//--------------------------------------------------------------
void ofApp::mousePressed(int x, int y, int button){
    if (stillOnMenu) {
        // Check to see if a user has selected an image to start using
        if (y < 225 && y > 75) { // Meme son first row
            if (x > 50 && x < 200) memeToPick = 1;
            else if (x > 300 && x < 450) memeToPick = 2;
            else if (x > 550 && x < 700) memeToPick = 3;
            else if (x > 800 && x < 950) memeToPick = 4;
        } else if (y < 425 && y > 275) { // Memes on second row
            if (x > 50 && x < 200) memeToPick = 5;
            else if (x > 300 && x < 450) memeToPick = 6;
            else if (x > 550 && x < 700) memeToPick = 7;
            else if (x > 800 && x < 950) memeToPick = 8;
        } else if (y < 625 && y > 475) { // Memes on third row
            if (x > 50 && x < 200) memeToPick = 9;
            else if (x > 300 && x < 450) memeToPick = 10;
            else if (x > 550 && x < 700) memeToPick = 11;
            else if (x > 800 && x < 950) memeToPick = 12;
        }
    }
}

May be I am missing something but where are you drawing your string inside a fbo.begin() - fbo.end() block? Can’t find it :thinking: