Javascript Canvas Set-up

by Erik Wiessmann

html

This page has a css page and a javascript page linked to it. You will need to change webpage.js and webpage.css to the file names of your own javascript and css files. You may have multiple css and multiple javascript files by simple duplicating your lines. These do not need to be in the html head and in some instances must be placed elsewhere. For this example they are just fine in the head.

javascript

Our javascript will use a function called main. Our web page will only call main when it loads. the main function will set up everything for our program to run. Since the canvas name in the html was "myCanvas" we will refer to "myCanvas" any time we need to access the screen.

css

We then add a little to our css page so that we can literally see where our canvas exists on the webpage. Notice that our white canvas is a rectangle box occupying a small part of the webpage.

If you would like to prevent the webpage from scrolling you may use this css instead.

javascript

We should make sure that our javascript is connected to our web page by doing something simple. We will have the main function tell our debug console to say hello world.

You must open your javascript console to see the words printed. I recommend that you keep the console open when coding. It gives us great information at times.