Intro Intro words words scroll down until you get to the instructions you’re actually looking for (i know why you’re here :).

As long as you have a web browser like Chrome and a notepad editor, then you’re already setup to use HTML5.

To run things on a html canvas, you need the following:

An index.html file

A Javascript file

You can make these without installing anything.

Open up your notepad editor. I recommend Sublime Text but if you just want to get started, you can use the default text editors.

  • Windows users: Click on the Windows icon and type Notepad
  • Mac users: Open up TextEdit through the Finder

Save the empty text file in the folder where you want your project to be. Click File > Save As and name the file ‘index.html’. Ensure you remove the .txt part

In the new index.html file, copy and paste the text below:

<body>

<canvas></canvas>

<script src=index.js”></script>

</body>

Click the drop down to change it from a ‘Text Document’ to ‘All files’

Save the file.

Next, create a new text file and use Save As to call it ‘index.js’ (again removing the .txt part).

That’s it. That’s everything you need to run your HTML5 program. Now, whenever you want to run your program, you just need to drag and drop the index.html file into your web browser, and it will automatically run (if you do it now, you’ll get a blank screen, because we haven’t added anything yet).

A few extra things worth mentioning

While we’re here, that is.

Troubleshooting

When working on a program, mistakes are basically mandatory. You will always make some. Your web browser has a feature for detecting these and telling you what’s gone wrong. You can access it by right clicking the space where your program runs and selecting ‘Inspect’.

This will bring up the developer console. By default it will bring up the Elements tab, which will show you your code. If you click on the Console tab, it will show any errors that the program is trying to tell you. The most important part of these is usually the line number, telling you on what line of the page you can find the error, allowing for much easier correction.

SublimeText

I recommended it earlier, and i’ll do so again. Using a powered up text editor will allow you to access your code a lot easier. If you’ve downloaded it already, follow the steps below.

With nothing else open but Sublime, click File > Open Folder

Locate the folder where you created your index files earlier and then select Open Folder.

Sublime will open your folders up across tabs, meaning you can easily switch between the two at anytime.

If you need to expand the number of files in the folder, Sublime will update accordingly, so you won’t have to worry about finding them.