Question about my line of code

So, I just want to confirm that the line of code directly below this sentence means the canvas should be inserted before any other elements, right?

  document.body.insertBefore(this.canvas, document.body.childNodes[0]);

The full code is below, but it’s really the last line I’m looking for confirmation about. I’m leaving notes behind for myself while I code through a tutorial.

function startGame() {
    myGameArea.start();
}

//an object, game area to be used in function of the game.
var myGameArea = {
    // Canvas creation for when game is created.
    canvas : document.createElement("canvas"),

    //start key being given a function to give the canvas created above a width, height and 2d context.
    //Last line of the start key ensuring canvas is inserted before any future components.
    start : function() {
        this.canvas.width = 480;
        this.canvas.height = 270;
        this.context = this.canvas.getContext("2d");
        document.body.insertBefore(this.canvas, document.body.childNodes[0]);
    }
}

//the function start game accesses the object game area and start key. The start key, accesses the canvas key
// and then creates the canvas with the specifications of the start key.
//The CSS styles in the head give styling decoration to the canvas and with the start game function triggered when the 
//browser loads, the canvas is created.

i think so

check those

https://developer.mozilla.org/en-US/docs/Web/API/Node/insertBefore

and

https://developer.mozilla.org/en-US/docs/Web/API/Node/childNodes

i see you becoming a boss in js well done @ayanda keep the good work

1 Like