How to Print Text to DrawingArea in Gnome-Shell-Extension

Question

I'm doing my first gnome-shell extension (gnome shell 41.3) and I seem to encounter the most common problems, finding the right manual for that...

What I try to achive is...

• A Widget shown (above everything) on the desktop...
• Draw something into the widget...
• Write some Text to the widget...

What I already acomplished is...

• Using a DrawingArea and Cairo (I assume) I can use .moveTo (), .lineTo (), etc..., .stroke() to draw something into my widget...
• Whe widget is displayed above everything else and stuff...
• My extension has a settings widget to configure...

What I am missing is...

• Any clue on how to put text in addition to the drawing stuff onto the Drawing area...

I did 1.5 days of duckduckgoing into it but, again, I'm running in circles with not a single Idea on how to proceed...

Could anyone point me into the correct direction, plz...???

Pseudo Code goes something like this

const {St, GLib} = imports.gi;

var area = new St.DrawingArea({
        style_class : 'bg-color',
        reactive : true,
        can_focus : true,
        track_hover : true,
        width: myWidth,
        height: myHeight
    });

area.connect('repaint', (area) => drawMyStuff(area));

Main.layoutManager.addChrome(area, {
    affectsInputRegion : false,
    affectsStruts : false,
    trackFullscreen : false,
    });

timeout = GLib.timeout_add(0, 500, () => {
    this.area.queue_repaint();
    return true;
    });

function drawMyStuff(area) {
    let cr = area.get_context();

    cr.translate(area.width / 2, area.height / 2);
    cr.scale(area.width / 2, area.height / 2);

    cr.setSourceRGBA (1, 1, 1, 1);
    cr.arc(0.0, 0.0, 1.0 - 0.05, 0, 2 * Math.PI);
    cr.fill();

    /*
     * Would like to print some text here but obviously I am to stupid to do so...
     * Help me StackExchangeCommunity, you're my only hope...
     *
     * Obviously it is not that easy:
     * cr.setSourceRGBA (1, 0, 0, 1);
     * cr.write(0.0, 0.0, "Not a moon")
     * cr.fill();
     *
     */ 
    
    cr.$dispose();
    return true;
}

Answer 1

It's kinda hard to find out and I had no luck finding any documentation on that but after digging into the GJS Code here (https://gitlab.gnome.org/GNOME/gjs/-/blob/HEAD/modules/cairo-context.cpp) I was able to understand a lot more on how to do cairo stuff like this (https://www.cairographics.org/manual/) from GJS...

The solution for my question stated above goes like this:

function drawMyStuff(area) {
    let cr = area.get_context();

    cr.translate(area.width / 2, area.height / 2);
    cr.scale(area.width / 2, area.height / 2);

    cr.setSourceRGBA (1, 1, 1, 1);
    cr.arc(0.0, 0.0, 1.0 - 0.05, 0, 2 * Math.PI);
    cr.fill();

    /*
     * Thank me, I'm my only hope...
     *
     * Obviously it is that easy:
     *
     */ 

    cr.moveTo(-0.5,-0.5);
    cr.setSourceRGBA (1, 0, 0, 1);
    cr.setFontSize(0.125);
    cr.showText('No Moon');

    cr.$dispose();
    return true;
}