Pong-0 simply prints text exactly in the center of the screen. This is not incredibly exciting, but it does showcase how to use HTML5 canvas’ most important functions moving forward.

Important Functions

• canvas.getContext('2d')
  • This function returns a context object. The context object contains all of the methods we need to draw things to the screen.
• gameLoop(currentTime)
  • This function is the heartbeat of the application. It is called 60 times per second (depending on your monitor’s refresh rate) and it is what we will use to drive our game’s animations. The way that this function is called 60 times per second is by using the browser’s requestAnimationFrame() API which you can read more about here.
• update(dt)
  • This function is called by gameLoop() at each frame of program execution; dt (i.e., DeltaTime) will be the elapsed time in seconds since the last frame, and we can use this to scale any changes in our game for even behavior across frame rates.
  • This is where the logic of our game will be executed.
• render()
  • This function is also executed at each frame since it is called by update(). It is called after the update step completes so that we can draw things to the screen once they’ve changed.
• context.clearRect(x, y, width, height)
  • This function erases the canvas at the specified dimensions. We need to perform this on every single frame render so that we can draw the updated shapes.
• context.fillText(text, x, y)
  • A print function that will print the specified text to the specified coordinates.

Now, with these puzzle pieces in mind, you can see how we’re rendering “Hello Pong!” to the center of the screen:

Important Code

We initialize our game by creating the canvas element and getting the context object from it. Next, we set the width and height of the canvas. Then, we have to append the canvas element to the DOM. Finally, we declare lastTime which will be used to calculate delta time later on.

const canvas = document.createElement('canvas');
const maybeContext = canvas.getContext('2d');

if (!maybeContext) {
  throw new Error('Could not get 2D rendering context.');
}

const context = maybeContext;
const CANVAS_WIDTH = 1280;
const CANVAS_HEIGHT = 720;

canvas.width = CANVAS_WIDTH;
canvas.height = CANVAS_HEIGHT;

document.body.appendChild(canvas);

let lastTime = 0;

Then we define gameLoop(), calculate deltaTime, and call update(). The mechanism that calls gameLoop() over and over again is requestAnimationFrame().

function gameLoop(currentTime = 0) {
  const deltaTime = (currentTime - lastTime) / 1000;

  update(deltaTime);
  lastTime = currentTime;
  requestAnimationFrame(gameLoop);
}

Next, we define render() so that we can specify the text we’d like to render to the screen, along with coordinates for where it should be drawn. Your challenge is to fill in the missing fillText() arguments in the editor, so the exact line is intentionally not shown here.

Use these clues instead:

• the text should be the Pong greeting,
• the X position should be halfway across the canvas,
• the Y position should be halfway down the canvas.

🧩 Challenge: Render the welcome message

Set the fillText() call so the canvas displays Hello Pong! in the exact center of the screen.