Recently I published a long JavaScript game tutorial. While it was a very packed guide, there were still a few things we could not cover in it: how to display the game in fullscreen.

When you watch a video on YouTube, you have the option to also watch it on fullscreen. But did you know that the fullscreen feature isn't only for video elements?

In JavaScript, there’s a Fullscreen API. And it’s surprisingly simple to use. Here's a quick demo of what we're about to implement. Let's see how it works.

You can also watch this article as a video on YouTube.

Table of Contents:

• How to Enter Fullscreen Mode
• How to Style the Fullscreen
• How to Display Games with the Canvas Element in Fullscreen
• How to Exit Fullscreen
• How to Code a Fullscreen Icon with SVG
• Learn More

How to Enter Fullscreen Mode

Let’s say we have a simple website with some text. And at the bottom, we have a button that will display the text in full screen. We are going to refine the look of this button, but first, let’s get work on the main logic.

A simple website with some text and a Toggle Fullscreen button

body {
  font-family: Montserrat;
  margin: 50px;
  max-width: 500px;
}

In the code above, we attached an event handler to the button in HTML. We can then implement the toggleFullscreen function logic in JavaScript.

In this function, all we have to do is call the requestFullScreen method on the document’s documentElement property. And that’s it:

function toggleFullscreen() {
  document.documentElement.requestFullscreen();
}

If you click the button, your website will pop into fullscreen.

How to Style the Fullscreen

Before we cover how to exit full screen and create a nice-looking toggle button, let’s see a few other things.

What you might notice right away is that, with more space, your content might get a bit lost on a full screen. Make sure you have a responsive styling that looks good on every screen size.

You can even style the layout specifically for fullscreen. In CSS you can set a media query that only applies the styling in case the display-mode is fullscreen.

For instance, you can change the font-size, or change the background-color to have a distinct look on full screen.

@media (display-mode: fullscreen) {
  body {
    background-color: #f9bb86;
    font-size: 1.2em;
  }
}

How to Display Games with the Canvas Element in Fullscreen

In this case, we want to make a game that uses the canvas element to be fullscreen – like the Gorillas game – we also need to resize the canvas element to fit the whole screen.

In this case, we can use the windows’s resize event. The event is triggered both when we simply resize the browser window, and when we enter or exit fullscreen mode.

With the resize event, we can resize the canvas element to fit the whole screen, update the scaling, adjust any other properties we need to change on resize and redraw the whole scene.

window.addEventListener("resize", () => {
  // Resize canvas element
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;

  // Update scaling
  // . . .

  // Adjust size dependent properties
  // . . .

  // Redraw canvas
  draw();
});

If you check the source code of the Gorillas game on CodePen, you'll find similar steps.

How to Exit Fullscreen

Now that we know how to enter full screen, how do we exit from it?

By default, if you press the Escape key, the browser switches back to the normal view. In Google Chrome, you even get a notification at the top of the screen about this when you enter fullscreen mode.

Google Chrome shows a notification on top of the screen once you enter full screen

What if you want to exit fullscreen mode when you click the HTML button? Let’s change our button’s behavior to toggle fullscreen on or off.

function toggleFullscreen() {
  if (!document.fullscreenElement) {
    document.documentElement.requestFullscreen();
  } else {
    document.exitFullscreen();
  }
}

First, we start by checking if we are in fullscreen mode already. We can do this by checking the document’s fullscreenElement property. If it is undefined, then we enter fullscreen mode the same way we did before. And if we are already in fullscreen mode, then we can exit by calling the document’s exitFullscreen method.

It is really that simple. With a few lines of code, we can implement the logic for a fullscreen toggle button.

How to Code a Fullscreen Icon with SVG

If you follow my tutorials, you know I love creative coding, and drawing from code. So let’s update the look of our button, to make it look similar to what we have on YouTube.

Fullscreen icon

Let’s create an SVG image within our button. If you check the source code of YouTube, you will see that they also use an SVG.

Let’s define an SVG element within HTML. We'll set its size to 30 x 30 and define a path element:

. . .

<button onclick="toggleFullscreen()">
  <svg width="30" height="30">
    <path
      stroke="black"
      stroke-width="3"
      fill="none"
      d="
        M 10, 2 L 2,2 L 2, 10
        M 20, 2 L 28,2 L 28, 10
        M 28, 20 L 28,28 L 20, 28
        M 10, 28 L 2,28 L 2, 20"
    />
  </svg>
</button>

. . .

To style the path, we set its color with the stroke property, set its stroke-width, and made sure that we didn't end up with a filled shape. SVG paths by default are filled, so we need to set explicitly that we don’t want to fill this shape.

Using the move-to and line-to commands within an SVG path

Then we defined the path with a few move-to and line-to commands. We can set these commands as a string in the d attribute of the path element.

We started with a move-to command: M 10, 2. The letter M signifies that we have a move-to command, and the 10 and 2 are the x and y coordinates of this command. We moved to the start of one of the four lines.

Then we continued the path with a line-to command that moves to the corner, and then with another line-to command. The line-to command works in a similar way. It starts with the letter L, then we set an x, y coordinates where the line should go to.

Then we did the same with the other corners. We move to the next line segment with another move-to command and draw a line with two more line-to commands.

Drawing a path on a Canvas element with JavaScript has some similarities to defining a path in SVG

Note: If you read my previous tutorial on how to make the gorillas game, then you might have noticed that we had something similar there. We also drew paths with move to and line to. Except that there we were drawn on a canvas element with JavaScript, and now we have the commands as a string within the HTML file.

How to Toggle the Icon's Appearance

Now the SVG is looking great, but what if we want to have a different look when we are in fullscreen mode? On YouTube, when we enter fullscreen mode, the button switches to a different icon.

The two faces of the fullscreen icon

You can do this in different ways. The easiest way is probably to define another path, within the same SVG element with a different look. Then make this path transparent by default. We are going to toggle the visibility of these two paths in JavaScript.

. . .

<button onclick="toggleFullscreen()">
  <svg width="30" height="30">
    <path
      id="enter-fullscreen"
      stroke="black"
      stroke-width="3"
      fill="none"
      d="
        M 10, 2 L 2,2 L 2, 10
        M 20, 2 L 28,2 L 28, 10
        M 28, 20 L 28,28 L 20, 28
        M 10, 28 L 2,28 L 2, 20"
    />
    <path
      id="exit-fullscreen"
      stroke="transparent"
      stroke-width="3"
      fill="none"
      d="
        M 10, 2 L 10,10 L 2, 10
        M 20, 2 L 20,10 L 28, 10
        M 28, 20 L 20,20 L 20, 28
        M 10, 28 L 10,20 L 2, 20"
    />
  </svg>
</button>

. . .

This second path is very similar to the previous one. Except that we used different coordinates for some of the line-to commands.

Then we set unique IDs for both of these paths, and we update our toggle function in JavaScript. In JavaScript, we get a reference to these paths by ID, and then in the toggle button’s event handler, we can switch the visibility of these elements back and forth.

const enterFullscreen = document.getElementById("enter-fullscreen");
const exitFullscreen = document.getElementById("exit-fullscreen");

function toggleFullscreen() {
  if (!document.fullscreenElement) {
    document.documentElement.requestFullscreen();
    enterFullscreen.setAttribute("stroke", "transparent");
    exitFullscreen.setAttribute("stroke", "black");
  } else {
    document.exitFullscreen();
    enterFullscreen.setAttribute("stroke", "black");
    exitFullscreen.setAttribute("stroke", "transparent");
  }
}

Now if you click this button, it toggles the fullscreen mode and changes its own appearance.

Learn More

If you want to learn more about SVGs, check out SVG-Tutorial.com where you can find a lot of examples from the basics to more advanced levels. It’s a free site and you can also find the example that we discussed in this article.

To use the button to run a JavaScript game in full screen, check out the whole JavaScript Game Tutorial on how to remake the classic Gorillas game here on freeCodeCamp or on YouTube. It’s a massive tutorial that covers things from drawing on an HTML Canvas element, to the entire game logic, from event handling, through the animation loop, hit detection, and even AI logic, for the enemy gorilla.

You can subscribe to my channel for more JavaScript game development tutorials:

In my last article, we focused on the basics of drawing. Now, let's see a concrete example and explore how to use JavaScript to draw a Gorilla.

You don't need to have any prerequisites for this tutorial. Even if you missed the basics, you can start right away. We are only going to have some simple HTML and a plain JavaScript file that you can run directly in the browser.

By the end, you'll know how to draw a gorilla with JS.‌

Table of Contents:

1. How to Define a Canvas
2. How to Turn the Coordinate System Upside Down
3. How to Draw the Body of the Gorilla
4. How to Draw the Legs of the gorilla
5. How to Draw the Arms of the Gorilla
6. How to Draw the Face of the Gorilla
7. Next Steps

How to Define a Canvas

To draw our gorilla, first let's define a simple HTML file with a Canvas element. Then we'll see how to access it from JavaScript.

In the HTML file, in the header, we'll add our JavaScript file. Note that I’m using the defer keyword to make sure the script only executes once the rest of the document is parsed.

In the body, we'll add a canvas element. We set its size to 500 x 500 and set an ID.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Gorilla</title>
    <script src="index.js" defer></script>
  </head>
  <body>
    <canvas id="gorilla" width="500" height="500"></canvas>
  </body>
</html>

Then, let's create a JavaScript file. In this file, we'll first get the canvas element by ID. Then, we'll get the rendering context of the canvas element. This is a built-in API with many methods and properties that we can use to draw on the canvas.

// The canvas element and its drawing context 
const canvas = document.getElementById("gorilla"); 
const ctx = canvas.getContext("2d");

. . .

Before we get to drawing, first let's make our life easier by turning the coordinate system upside down.

How to Turn the Coordinate System Upside Down

When we use canvas, we have a coordinate system with the origin at the top-left corner of the canvas that grows to the right and downwards. This is aligned with how websites work in general. Things go from left to right and top to bottom.

This is the default, but we can change it.

The gorilla with and without transforming and scaling the coordinate system

In our case, it is more convenient to go from the bottom to the top. Then the gorilla can stand at the bottom, and we don’t have to figure out where the bottom of the canvas is.

We can use the translate method to shift the entire coordinate system to the bottom-middle of the canvas. We'll move the coordinate system down along the Y-axis by the size of the canvas, and to the right along the X-axis by half the size of the canvas.

Once we do this, the Y-coordinate is still growing downwards. We can flip it using the scale method. Setting a negative number for the vertical direction will flip the entire coordinate system upside down.

// The canvas element and its drawing context 
const canvas = document.getElementById("gorilla"); 
const ctx = canvas.getContext("2d");

ctx.translate(250, 500);
ctx.scale(1, -1);

. . .

‌We have to do this before we paint anything on the canvas because the translate and scale methods do not actually move anything that's already on the canvas. But anything we paint after these method calls will be painted according to this new coordinate system.

How to Draw the Gorilla

Now let's look into drawing the gorilla. We'll break this down into multiple steps. First, we'll draw the body, then the legs, the arms, and finally the face of the gorilla.

We'll draw the gorilla in multiple steps

How to draw the body of the gorilla

We'll draw the body of the gorilla as a path. Paths start with the beginPath method and end with either calling the fill or the stroke method – or both.

In between, we'll build the path by calling path-building methods. In this case, to build up the body of the gorilla we'll use the moveTo and a bunch of lineTo methods.

The body of the gorilla. The image shows the path we're filling.

We'll set the fill style to black, and then we'll begin a path. Move to a starting position and then draw straight lines to draw the silhouette of the gorilla. Once we're finished, we'll fill the shape with the fill method.

. . .

ctx.fillStyle = "black";

// Draw the Body of the Gorilla
ctx.beginPath();
ctx.moveTo(-68, 72);
ctx.lineTo(-80, 176);

ctx.lineTo(-44, 308);
ctx.lineTo(0, 336);
ctx.lineTo(+44, 308);

ctx.lineTo(+80, 176);
ctx.lineTo(+68, 72);
ctx.fill();

. . .

In case you are wondering how I came up with these coordinates, I actually started with an initial sketch with pen and paper. I tried to estimate the coordinates, tried them with code, and then adjusted them until they started getting the right shape. Of course, you might have other methods as well.

How to draw the legs of the gorilla

We'll draw the legs the same way. We could even continue the same path we used before, but it might be easier to see what's happening if we break this down into separate paths.

Drawing the legs as two separate paths

. . .

// Draw the Left Leg
ctx.beginPath();
ctx.moveTo(0, 72);
ctx.lineTo(-28, 0);
ctx.lineTo(-80, 0);
ctx.lineTo(-68, 72);
ctx.fill();

// Draw the Right Leg
ctx.beginPath();
ctx.moveTo(0, 72);
ctx.lineTo(+28, 0);
ctx.lineTo(+80, 0);
ctx.lineTo(+68, 72);
ctx.fill();

. . .

The fill color in this case is also going to be black. Why? Because that's what we set the fillStyle property to, the last time we set its value. Every path that follows this statement will use this color until we change its value.

How to draw the arms of the gorilla

While the body and the legs are relatively simple parts of the gorilla, the arms are a bit more complicated. We'll draw them as a curve.

Drawing the arms as a curve

Let’s start with the left arm. The main part of this is actually only two lines of code. We'll use the moveTo method to move to the shoulder of the gorilla, then from there, we'll draw the arm as a quadratic curve with the quadraticCurveTo method.

A quadratic curve is a simple curve with one control point. As the curve goes from the starting point (which we'll set with moveTo), the curve bends towards this control point (set as the first two arguments of the quadraticCurveTo method) as it reaches its end position (set as the last two arguments).

. . .

ctx.strokeStyle = "black";
ctx.lineWidth = 70;

// Draw the Left Arm
ctx.beginPath();
ctx.moveTo(-56, 200);
ctx.quadraticCurveTo(-176, 180, -112, 48);
ctx.stroke();

// Draw the Right Arm
ctx.beginPath();
ctx.moveTo(+56, 200);
ctx.quadraticCurveTo(+176, 180, +112, 48);
ctx.stroke();

. . .

We'll draw the hands as strokes. Instead of ending the path with the fill method, we'll use the stroke method.

We'll also set up the styling differently. Instead of using the fillStyle property, here we'll set the color with strokeStyle and give thickness to the arms with the lineWidth property.

Drawing the right arm is the same, except the horizontal coordinates are flipped. The negative numbers have a positive sign now.

As a result, our gorillas should start to gain shape. They still don’t have a face, but we have the whole silhouette now.

How to draw the face of the gorilla

The face of the gorilla comes together from multiple different parts. First, we'll draw the facial mask with three circles.

We draw the facial mask as three circles

Unfortunately, we don’t have a simple fill circle method, as we have in the case of rectangles. We have to draw an arc instead.

An arc method can be called as part of a path. We'll start each circle with the beginPath method and end with the fill method.

. . .

ctx.fillStyle = "lightgray";

// Draw the Facial Mask
ctx.beginPath();
ctx.arc(0, 252, 36, 0, 2 * Math.PI);
ctx.fill();

ctx.beginPath();
ctx.arc(-14, 280, 16, 0, 2 * Math.PI);
ctx.fill();

ctx.beginPath();
ctx.arc(+14, 280, 16, 0, 2 * Math.PI);
ctx.fill();

. . .

The arc method has a lot of properties. This might look a bit scary, but we only need to focus on the first 3 when drawing circles:

• The first two arguments are x and y, the center coordinates of the arc.
• The third argument is the radius.
• Then the last two arguments are the startAngle and the endAngle of the arc in radians. Because here we want to have a full circle and not an arc, we'll start with 0 and end at a full circle. A full circle in radians is two times Pi.

If these last two properties are confusing, don't worry about it. What's important is that when we draw circles, they are always 0 and 2 * Math.Pi.

We draw the eyes, the nostrils, and the mouth

Then we draw the eyes of the gorilla as two other circles. Here the center coordinates of the circles are the same as the bigger gray circles around them. Only their radius and their fill color are different.

. . .

ctx.fillStyle = "black";

// Draw the Left Eye
ctx.beginPath();
ctx.arc(-14, 280, 6, 0, 2 * Math.PI);
ctx.fill();

// Draw the Right Eye
ctx.beginPath();
ctx.arc(+14, 280, 6, 0, 2 * Math.PI);
ctx.fill();

. . .

Then for the nose, we'll draw two short lines as nostrils. They are part of the same path, and we'll call the moveTo method in between to get from one side to the other. Before calling stroke at the end of this path, we'll update the lineWidth property.

. . .

ctx.lineWidth = 6;

// Draw the Nostrils
ctx.beginPath();
ctx.moveTo(-14, 266);
ctx.lineTo(-6, 260);

ctx.moveTo(14, 266);
ctx.lineTo(+6, 260);
ctx.stroke();

. . .

And finally, we'll also add a path for the mouth. This could be part of the same path as the nose, because it has the same line width and color, but might be clearer to have them separate.

. . .

// Draw the Mouth
ctx.beginPath();
ctx.moveTo(-20, 230);
ctx.quadraticCurveTo(0, 245, 20, 230);
ctx.stroke();

Let's draw another quadratic curve. This is similar to the one we used for the arms. The start and endpoint of this curve are on the same level, but the control point is a bit higher so the middle of the mouth is higher than the two sides.

Next Steps

Now that we have a basic gorilla, what can we do with it? We can build a whole game around it. In this JavaScript Game Tutorial we rebuild the 1991 classic game, Gorillas.

Screenshot from the JavaScript Game Tutorial

For a deep dive, read the full tutorial where we build up a complete game with plain JavaScript. In this tutorial, we not only cover how to draw the gorillas and the city skyline but also implement the whole game logic. From event handling, through the animation loop, to hit detection.

For even more, you can also watch the extended tutorial on YouTube. In the YouTube version, we also cover how to make the buildings destructible, how to animate the hand of the gorilla to follow the drag movement while aiming, have nicer graphics, and we add AI logic, so you can play against the computer.

Check it out to learn more:

Embedded content

You can subscribe to my channel for more JavaScript game development tutorials:

In many drawing tools (Adobe Photoshop, Sketch, and so on), if we hold the SHIFT button when drawing a line, we can create perfectly straight lines horizontally or vertically.

Recently, I tried implementing this feature in canvas by JavaScript. The process is really interesting. I would like to share the progress of how I approach it.

Demo: To easier understand the idea, you can check a demo version at the demo page.

Requirements

Input

• A base point (B)
• Current mouse position (M)

Output

• Projection of current mouse position on x-axis or y-axis (P)

For convenience, in all graphs, we will mark the base point by a red circle and the current mouse point by a green circle.

Problem: Decide which projection is better

Simple solution

As I tackle the problem, it’s intuitive to see we can calculate the distance between the current mouse position with the horizontal line and vertical line. If the mouse position is nearer the horizontal line than the vertical line, we will take the projection on the horizontal line, and vice versa.

The calculation is quite simple — here is the Javascript code:

Extended Problem

How about if we want to project on the bisector line between the horizontal line and vertical line (similar with Sketch)? That means users can project the mouse position on the horizontal line, vertical line, 45-degree angle line, or 135-degree angle line.

The approach is similar. This time we need to calculate the distance between the mouse position to 4 lines: horizontal line, vertical line, and 2 bisector lines (45-degree line and 135-degree line). But the calculation is more complex.

We still can divide it into 2 steps:

1. Determine which line is nearest with mouse position
2. Calculate the projection of mouse position on the nearest line

Step 1: Determine which line is nearest with mouse position

First, we need to determine line formulation of 4 lines above. Because we already know the base point (x0, y0) and the line angle, it’s easy to figure out the formulation of each line.

Example: To calculate the formula of the 45-degree bisector, we already know that the line will go through the base point (x0, y0) and (x0 + 1, y0 + 1). Using the Find-the-Equation-of-a-Line method, we can figure out the line formula.

Finally, we will have 4 lines’ formulas:

To calculate the distance between the base mouse position to each line, we can use a popular math formula:

Distance from a point to a line

Finding the nearest line

Step 2: Calculate the orthogonal projection of mouse position on the nearest line

Now the problem becomes calculating the orthogonal projection of the mouse position (M) to the nearest line with the formula: ax + by + c = 0 (L)

There are multiple ways to solve this problem. I took a simple way: First, calculate the formula of the line which contains mouse position M and perpendicular to line L, called L'. Then, solve the system of equations to get the intersection point between line L and L', which is the projection point which we are finding.

After some calculation, I figured out the formula of L’, which goes through M (x0, y0) and perpendicular to L (ax + by + c = 0):

Now to find the intersection, we need to solve the system of equations:

Using Cramer’s rule and matrix determinant, we can solve this equation easily:

Solve simultaneous equations

Boundary

There is a situation when we want to limit the boundary of projection.

Example:

The projection point is outside of the boundary

In this case, we want to limit the projection in the white rectangle area, but using the discussed method, the projection point can be outside of the boundary area.

In this situation, we can simply get the intersection point of line L’ to the boundary (called P’).

Support boundary of the projection

Full source code

You can check out the demo and source code on Github.

Happy Coding!