Create a simple square and add it to the game

Start by creating a new rectangle. Here is a basic line of code:

var square = new Playlib.Rect(new Playlib.Vector2(60, 60), new Playlib.Size(20,20), /* Add screen size from the game: */ new Playlib.Size(game.width, game.height));

Now, let's draw this square into the game's canvas. Here is the code:

// Begin with calling create() method from your game: 
game.create((ctx /* Write ctx or any other name */ )=>{ // and give it a function.  We will directly create a function while giving it. 
    
    // Then, let's draw the square using ctx. 
    square.draw(ctx); 
})

And thats all. Let's see if it works, use a local server to run it, like Live Server extension on Visual Studio Code, or Serve on npm. It should look something like this:

White box in the game

So, let's talk what the function create() does and have.

When you call it, you must give it a function. Any, inside it or create one and give it. The function must have ctx parameter (or any recognizable name) for drawing objects you give it. The game, gives you the context, and the object get drawn. Well done, you did create and add your first square to the game. There is much more to create there, and more lies in reference, where i tell you all the stuff detailed.