Spicy Yoghurt | Last updated: 2 Februari 2019 | HTML5 game

HTML5 page with canvas set-up

In this HTML5 game development tutorial you will learn how to set-up a HTML5 page with a <canvas> element, to be prepared to draw graphics. This page will be used as the base for the upcoming tutorials.

Set-up a basic HTML5 file

Let's create a basic HTML5 file to get started. It will mostly just tell the browser how to interpret the file and what kind of content it contains. Your file will look like this:

                    
                        <!DOCTYPE html>
                        <html lang="en">
                            <head>
                                <meta charset="UTF-8">

                                <title>HTML5 Game Development Tutorial | Spicy Yoghurt</title>
                                <meta name="description" content="HTML5 game development tutorial">
                                <meta name="author" content="Spicy Yoghurt">
                            </head>
                            <body>

                            </body>
                        </html>
                    
                    
The <!DOCTYPE> declaration tells the browsers what HTML version the page is written in. The <meta> tags and the <title> tag describe the actual content of the page. Inside the <body> tag is where all the content of the page will be stored.

You can copy this code and store it in a file named index.html. This file can be run by any browser and will display your newly created web page. Too bad it is still completely empty.

Add a HTML5 canvas

Now directly after the <body> tags, add a <canvas> element. This is the place where the graphics of your game will be drawn later on.

            
                <canvas id="canvas" style="border:1px solid lightgrey;">
                    Your browser does not support the HTML5 canvas tag.
                </canvas>
            
            
When you refresh your page, you should see the border of the canvas. The element has a default width and height, but you can change that by adding width and height attributes, adding CSS, or setting the size programmatically. For these first examples the default size will suffice.

Nothing is drawn on the canvas yet. This will come later, with the use of some JavaScript code.

What is a HTML5 canvas?

The <canvas> tag is new in HTML5. A canvas is a container for graphics. You can draw on it using JavaScript. You can draw paths and shapes, but also text and images. It works like an <img> tag, only you can draw the image yourself instead of loading it from an external source. In fact, in modern browsers, you can right click a canvas element and save the image. It's like a dynamic image.

The canvas will be the core of all the drawing operations later on. It works like a drawing board. You can draw on it, and clear it. Do it quickly enough and you will get the perception of motion. This is the basic principle of animations and games. You will learn more about drawing on the canvas in the upcoming tutorials.

JavaScript placeholder

Now right before the end of the <body> tags, add a <script> tag. Between those tags is where your program is going to start. For now, you can leave it (nearly) empty.

                    
                        <script>
                            "use strict";
                        </script>
                    
                    
"use strict" is telling the browser to run the code in strict mode. This means your code will be validated more strictly. Things like using an undeclared variable are no longer allowed. This will force you to write cleaner code, which will prevent coding errors.

Final code

Your total file will now look something like this. It won't actually do anything when you try to run it in your browser. But you are prepared for the next step now.

                    
                        <!DOCTYPE html>
                        <html lang="en">
                            <head>
                                <meta charset="UTF-8">

                                <title>HTML5 Game Development Tutorial | Spicy Yoghurt</title>
                                <meta name="description" content="HTML5 game development tutorial">
                                <meta name="author" content="Spicy Yoghurt">
                            </head>
                            <body>
                                <canvas id="canvas" style="border:1px solid lightgrey;">
                                    Your browser does not support the HTML5 canvas tag.
                                </canvas>
                                <script>
                                    "use strict";
                                    // Your code comes here

                                </script>
                            </body>
                        </html>
                    
                    
Copy and store this code in a file named index.html, or download the complete file here. This is going to be your base file. From here on out you can follow the rest of the game development tutorials. Feel free to ask questions in the comments.

Let's continue by actually drawing something on the canvas!

Leave a comment