6

Canvas Basics – 01 Hello World

This is the first of several posts looking at the <canvas> element in HTML5.

I have been using the canvas element to create games and over the next few posts will look at some of the Canvas basics.

This is a follow on from the posts looking at maths in games (click here to read the first post).

If you are not already familiar with HTML, you can read through the posts starting here (click to read).

 

What you’ll need

For these posts you will need a text editor (Notepad on Windows for example) and a relatively up to date browser (Google Chrome is my preference).

In the screenshots you are about to see, you will see that I am not using Notepad for coding, this is because I am using a different package which allows you to see line numbers, this will make it easier for me to comment on particular lines.

 

Instructions

If you plan on following all steps in these posts, at this point I would advise setting up a folder to store all the files you will create.

Initially, all files will be saved as “.html” files which by default will open in a web browser.

You will be editing these files in your text editor (for example, right-click the .html file in your folder and choose to open with Notepad) and viewing them in your web browser.

After each step, you might have to save the text editor file and then refresh your web browser to view the changes.

During instructions, I might tell you to save the file and refresh the browser, I will be referring to the line above.

 

Skeleton

Start with a skeleton file, enter the following code in your text editor and save it as “skeleton.html”.

For future files, I may instruct you to open this skeleton and save it as the name instructed and then amend it.

This will be like a template for the basic layout.

The script for Canvas will be entered from line 6 and the Canvas element itself will be entered from line 10, which is the body of the web page you are going to create.

 

Canvas Basics – Hello World

I have read tutorials in several programming languages over the years and have found that most of them start with how to show “Hello World” on screen, this post will not break tradition.

• Open your skeleton.html file in a text editor
• Save it as “helloworld.html”
• Open helloworld.html in a web browser (at the minute you won’t see much)

 

Edit the code as follows:

• Line 3 – Change the title to “Hello World”, this is what appears at the top of your webpage, on the tab.
• Line 6 – var canvas; add a variable “canvas”, this will be used later in the code to point to the canvas
• Line 7 – var ctx; add a variable “ctx”, this will be used later when we set the context of our canvas to 2d (not 3d)
• Line 9 – window.addEventListener(‘load’, init, false); this adds a listener to our window, when the page has loaded it will then call a function called “init” (I’m using init as a short version of initiate, the function name is whatever name I give it, but I try to ensure they make sense).  Function init starts on line 10
• Line 10 – function init() { This is the start of our init function.  There are opening curly brackets, the function also ends with closing curly brackts.
• Line 11 – canvas=document.getElementById(“canvas”); this finds the canvas tag later in the html file and sets the canvas variable to reference that tag
• Line 12 – ctx=canvas.getContext(“2d”); this sets the context variable from line 7 to reference the 2d drawing context of the canvas
• Line 13 – ctx.font = “16px Arial”; this sets the font type and size
• Line 14 – ctx.fillStyle – “rgb(255,255,255)”; the fill style, or font color in this case will be set as white (255 for red, green and blue).  Changing the values in the brackets changes the color of the font.  See earlier HTML posts which briefly cover colors.
• Line 15 – ctx.fillText(“Hello World”, 50, 50); the fillText is made up of the text to display, the position on the X and Y axes.  We want to display Hello World at position 50 on both X and Y.  Change the x and y values, save the text file and refresh your browser to see the position of the text change.
• Line 17 – } This is the closing curly bracket for our init function
• Line 22 – <canvas id=”canvas” height=”200″ width=”300″ style=”background-color:green”> this is where we place our canvas on the html document.  This tag is in the body of the page.  You can change the height, width and background color of the canvas.  Save the text file and refresh your browser to see the changes.
• Line 23 – This browser doesnt support canvas technology, try another or update a user will only see this message if their browser doesn’t support canvas technology.
• Line 24 – </canvas> this is the closing canvas tag.

This is how the finished code looks in a browser.

Review

I’m hoping that this post has given you enough of an introduction to Canvas Basics to get you interested in more.

I have deliberately avoided going into too much detail on what each line means, there are plenty of sites out there that will explain in much more detail.

These are relatively high-level posts, you will see a lot of the code repeated in future posts and that will increase your knowledge of them.

This is also a companion post to the Maths In Games post which covered X and Y positions.

The final code is

Try It Yourself

Recreate this file yourself and then change some of the variables like position, text, font size and type.

After making changes to the text editor, save it and then refresh your browser.

When it comes to games displaying text would probably apply to most games at some point, whether that is displaying number of lives left, score, player names, etc.

In the next post we will take it a step further and display text showing the X and Y positions of your mouse pointer over the canvas.

 

Disclaimer

I am not claiming that the code that I use in these examples is the best, most efficient and up to date code.  

Code gets updated and improved over time, what is best practice today may not be tomorrow.