Styling the Canvas for Your HTML5 Browser Game

Styling the Canvas for Your HTML5 Browser Game

by James R. Pierce

An important part of any game is how it is presented. Creating games is part of the entertainment industry and consumers want to have a great experience playing your games. A good game can lack success if its presentation doesn't convince the players to try it or doesn't motivate them to play more. Now keep in mind that presentation doesn't necessarily mean high-end graphics. There are some things that we can do using CSS.

The Browser as a Gaming Console

One thing I like to imagine when creating HTML5 games is the browser as a gaming console. When using this approach there are two things that immediately come to mind: a frame and a centered screen. With the help of a little CSS we can give our canvas a border and center it in the middle of the browser window. Moreover, if we would set a dark background color for the white space around the canvas we could have a nice looking game screen that will make a new visitor start playing.

Giving the Canvas a Border

The first thing we want to do is give our canvas a dashed border. You could also use a solid or dotted border, of course. However, I prefer a dashed one especially while developing the game. When you add the canvas tag to your webpage set the id to canvas, too. Now we can give it a border by writing the following CSS code: 1px dashed black. If you refresh your webpage now, you will see the canvas as a small rectangle in the top-left corner of your browser window.

Centering the Canvas

As you can imagine, even a great game isn't appealing if you have to play it in the top-left corner of your browser window. That's why we want to move the canvas to the center of our browser window. Again, we can do this using CSS code. The first thing we need to do is add a div tag around the canvas tag. We will give this div tag an id of "wrapper". Wrapper is a generic id name that is used a lot in web design to properly arrange elements on the website. Inside the wrapper is the main content which - in our case - is the canvas for our HTML5 game. Now we can center the wrapper and the game canvas inside of it. We do this by setting the width of the wrapper to 800 pixels and setting its margins to auto. It's important to give the wrapper a width else the auto margins won't center it.