fillText on canvas keeps going behind the background

Question

I'm using ctx.globalCompositeOperation = 'destination-over'. Though the text still goes behind.

Game.setup();
  ctx = Game.context;
  if (AllImagesLoaded === true) {
    loading = false;
    clearInterval(int);
    BackgroundsA.push(true);
    ctx.globalCompositeOperation = 'destination-over';
    Interact = new text(window.innerWidth / 2, window.innerHeight / 2 - 200, 'Press F to Interact', 'white', '30px Verdana');
    Sprites.push(new sprite(window.innerWidth / 2 - 275, window.innerHeight / 2 - 315, 'idle_jack/frame_1.PNG', 600, 600, 5));
    Player = new component(window.innerWidth / 2, window.innerHeight / 2 - 100, 'rgba(0, 0, 0, 0)', 50, 150);
    ctx.globalCompositeOperation = 'source-over';
    Backgrounds.push(new background(0, 0, 'Backgrounds/Test/test2.jpg'));
    ctx.globalCompositeOperation = 'destination-over';

The "new [KEYWORDS]" are functions for filling or drawing text/components/images. Please help!

Answer 1

Why don't you draw everything from behind, ie firstly draw the backgrounds of the game, then text and at the end player and all of the game objects ?

However if you do want to draw everything like you're trying to now, then try changing global composite operation just before drawing, it's not clear if new Background() will actually draw the background or not from your code. Here is an article to read about global composite operation: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation