Adding the Canvas Tag to Your Webpage
In case you are not too familiar with HTML, I first summarize what it means to write HTML and add the canvas tag: The very first thing we need to do is open a simple text editor (not a word processor) like Notepad. I prefer working with Notepad ++ but any text editor will work. Then we need to define the document as HTML by adding the <! DOCTYPE HTML> </ HTML> tags. Now you should save this document as game.HTML for example. What you call the file is up to you. However, what matters is the HTML extension. Without this it will not work. Next we need to define what the body, in other words the content, of our webpage will be. We do this by adding the body tags. Finally, inside these body tags we can write the important canvas tag: <canvas> </ canvas>.
Identifying the Canvas
So that we can work with the canvas and start animating our game inside of it, we need a simple way to identify it. The best way to do this is by giving it an id. To keep things simple and clear we give it an id of "canvas". So all you need to write now is <canvas id = "canvas"> </ canvas>. Keep in mind that we are certainly preparing the canvas for our game. The canvas itself is only a platform that we can use to run our game inside.