I regularly publish Javascript Code Along videos to help beginners practice their coding skills. A little each day goes a long way after all!

Each of my videos starts with a small piece of code. This post explains what that code is, how it works, and how you can use it yourself to set up a quick and fun project.

As always you can find the full code on GitHub:

https://github.com/nilsm/code-along

Here is the full code to get you started:

<body>
  <canvas id="cv"></canvas>
  <script>
    const el = document.getElementById("cv");

    const w = 600;
    const h = 300;

    /** @type {CanvasRenderingContext2D} */
    const ctx = el.getContext("2d");
    ctx.canvas.width = w;
    ctx.canvas.height = h;

    ctx.beginPath();
    ctx.fillStyle = "#000000";
    ctx.fillRect(0, 0, w, h);
  </script>
</body>

You can copy-paste this into a new file and save it as index.html

When you open it up in the browser it doesn’t look like much. However this simple piece of code provides a great starting point for many fun Javascript adventures.

Let’s walk through the code bit by bit:

The outer body tags

Around the main content you can see the opening/closing <body> tags.

<body>  <----- this is the opening tag
</body> <----- this is the closing tag, with a leading /

These enclose the content of your web page.

The canvas tag

The next element you see is a canvas tag. This is an HTML tag that provides a graphical surface that you can draw on.

I give this canvas tag an id value so that I can access it using Javascript.

The canvas tag also has a corresponding closing tag, just like the body tag before it.

<body>
   <canvas id="cv"></canvas>
</body>

You can find out more about the canvas tag on MDN’s page

The script tag

HTML pages only understand text and images. You will need to tell it when you include Javascript code. You do this using the script tag. Once again it has a corresponding closing tag as well.

<body>
   <canvas id="cv"></canvas>
   <script>
   </script>
</body>

Everything placed inside the script tag must be valid Javascript.

Let’s go through the Javascript code one line at a time.

Using getElementById

The first line uses the built in Javascript method getElementById to get a reference to the canvas tag. It uses the id we gave it earlier on.

A reference is necessary so that you can start to draw on the canvas using Javascript.

const el = document.getElementById("cv");

The variable is called el (short for element) and is declared as a const since it will never change.

Declaring the width and height

The next part of the code stores the width and height of the canvas in two variables:

 const w = 600;
 const h = 300;

This allows us to use the same values in the rest of the code whenever we need them.

By storing the values in variables you make the code easier to maintain. For example it’s easy to change the height of the canvas element by changing the value of h in this single line. The rest of your code will still continue to work.

These are defined as const since their values will never change while the program is running.

Getting the drawing context

In order to draw on the canvas with Javascript you need something called the ‘drawing context’. All the code I write to make animations or draw shapes uses this drawing context. It’s the key method to control the canvas using Javascript.

/** @type {CanvasRenderingContext2D} */
const ctx = el.getContext("2d");

Again it’s a const since it won’t change while the program is running.

The first line looks a bit strange:

/** @type {CanvasRenderingContext2D} */

It’s actually just there to help the code editor I use (Visual Studio Code) to give code completion help for the ctx variable. So it’s useful but you can leave it out if you don’t need it or use a different editor.

You can find out more about the drawing context by watching some of my Javascript Code Along videos on YouTube.

Setting canvas width and height

By default the canvas element has a width of 300 pixels and a height of 150 pixels. I want to control the dimensions with Javascript so that the program knows the exact dimensions.

The width to use is already stored in the variable w and the height in the variable h.

The next two lines set the canvas element on the page to those dimensions.

ctx.canvas.width = w;
ctx.canvas.height = h;

Drawing a background

By default the canvas element has a transparent background. It’s invisible unless you add styling to it, or draw images on it.

To start things off I like to apply a solid background fill using code like this:

ctx.beginPath();
ctx.fillStyle = "#000000";
ctx.fillRect(0, 0, w, h);

Let’s look at it in more detail.

ctx.beginPath() tells Javascript that we will start a new drawing on the canvas.

ctx.fillStyle sets the colour to use for the rectangle we’re about to draw. It uses the hexadecimal colour code “#000000” which is black.

ctx.fillRect() draws a rectangle. It goes from coordinate 0, 0 (top left) to the coordinate w, h (full width and height of the canvas, ie. bottom right).

The result is a single black rectangle covering the entire area of the canvas element.

Video

Prefer to watch a video? I go through the code in detail in this clip:

Conclusion

Hopefully that will give you a better understanding of the code I use to start many of my Javascript Code Along videos.

Any questions feel free to ask!

Now it’s time for you to start your own Javascript adventures!