HTML5 Canvas

Exclusive offer: get 50% off this eBook here
Instant HTML5 2D Platformer [Instant]

Instant HTML5 2D Platformer [Instant] — Save 50%

Learn how to develop a 2D HTML5 platformer that is capable of running in modern browsers with this book and ebook

$9.99    $5.00
by Aidan Temple | September 2013 | Games Web Development

In this article by Aidan Temple author of the book Instant HTML5 2D Platformer will gives an overview of how to set up the HTML5 canvas as well as some of the basic functionality the canvas has to offer and how we would go about implementing that functionality.

(For more resources related to this topic, see here.)

Setting up your HTML5 canvas (Should know)

This recipe will show you how to first of all set up your own HTML5 canvas. With the canvas set up, we can then move on to look at some of the basic elements the canvas has to offer and how we would go about implementing them. For this task we will be creating a series of primitives such as circles and rectangles. Modern video games make use of these types of primitives in many different forms. For example, both circles and rectangles are commonly used within collision-detection algorithms such as bounding circles or bounding boxes.

How to do it...

As previously mentioned we will begin by creating our own HTML5 canvas.

  1. We will start by creating a blank HTML file. To do this, you will need some form of text editor such as Microsoft Notepad (available for Windows) or the TextEdit application (available on Mac OS). Once you have a basic webpage set up, all that is left to do in order to create a canvas is to place the following between both body tags:

    <canvas id="canvas" width="800" height="600"></canvas>

  2. As previously mentioned, we will be implementing a number of basic elements within the canvas. In order to do this we must first link the JavaScript file to our webpage. This file will be responsible for the initialization, loading, and drawing of objects to the canvas. In order for our scripts to have any effect on our canvas we must create a separate file called canvas example. Create this new file within your text editor and then insert the following code declarations:

    var canvas = document.getElementById("canvas"), context = canvas.
    getContext("2d");

  3. These declarations are responsible for retrieving both the canvas element and context. Using the canvas context, we can begin to draw primitives, text, and load textures into our canvas. We will begin by drawing a rectangle in the top-left corner of our canvas. In order to do this place the following code below our previous JavaScript declarations:

    context.fillStyle="#FF00FF";
    context.fillRect(15,15,150,75);

  4. If you were to now view the original webpage we created, you would see the rectangle being drawn in the top-left corner at position X: 15, Y: 15. Now that we have a rectangle, we can look at how we would go about drawing a circle onto our canvas. This can be achieved by means of the following code:

    context.beginPath();
    context.arc(350,150,40,0,2 * Math.PI);
    context.stroke();

How it works...

The first code extract represents the basic framework required to produce a blank webpage and is necessary for a browser to read and display the webpage in question. With a basic webpage created, we then declare a new HTML5 canvas. This is done by assigning an id attribute, which we use to refer to the canvas within our scripts. The canvas declaration then takes a width and height attribute, both of which are also necessary to specify the size of the canvas, that is, the number of pixels wide and pixels high.

Before any objects can be drawn to the canvas, we first need to get the canvas element. This is done through means of the getElementById method that you can see in our canvas example. When retrieving the canvas element, we are also required to specify the canvas context by calling a built-in HTML5 method known as getContext. This object gives access to many different properties and methods for drawing edges, circles, rectangles, external images, and so on.

This can be seen when we draw a rectangle to our the canvas. This was done using the fillStyle property, which takes in a hexadecimal value and in return specifies the color of an element. Our next line makes use of the fillRect method, which requires a minimum of four values to be passed to it. These values include the X and Y position of the rectangle, as well as the width and height of the rectangle. As a result, a rectangle is drawn to the canvas with the color, position, width, and height specified.

We then move on to drawing a circle to the canvas, which is done by firstly calling a built-in HTML canvas method known as BeginPath. This method is used to either begin a new path or to reset a current path. With a new path setup, we then take advantage of a method known as Arc that allows for the creation of arcs or curves, which can be used to create circles. This method requires that we pass both an X and Y position, a radius, and a starting angle measured in radians. This angle is between 0 and 2 * Pi where 0 and 2 are located at the 3 o'clock position of the arc's circle. We also must pass an ending angle, which is also measured in radians. The following figure is taken directly from the W3C HTML canvas reference, which you can find at the following link http://bit.ly/UCVPY1:

Summary

In this article we saw how to first of all set up our own HTML5 canvas. With the canvas set up, we can then move on to look at some of the basic elements the canvas has to offer and how we would go about implementing them.

Resources for Article:


Further resources on this subject:


Instant HTML5 2D Platformer [Instant] Learn how to develop a 2D HTML5 platformer that is capable of running in modern browsers with this book and ebook
Published: August 2013
eBook Price: $9.99
See more
Select your format and quantity:

About the Author :


Aidan Temple

Aidan Temple is a software engineer and lead developer at Nanotek, an independent video game studio. He has recently graduated with honors from Glasgow Caledonian University where he studied BSc Computer Games Software Development.

During his time at university Aidan also undertook a research degree which outlined the possible benefits of implementing a GUI-based games framework by means of massively parallel processing through the utilization of Nvidia's CUDA architecture, which in turn successfully demonstrated the benefits of towards games development.. He also received one of the International Game Developers Associations most prestigious awards, an IGDA Scholarship which are awarded to exceptional students within the field of video games development.

Prior to his time at Glasgow Caledonian University, Aidan studied Computer Games Development at James Watt College of Further and Higher Education. Due to excellent understanding and demonstration of games development and design methodologies within a practical manner Aidan graduated from James Watt College with a distinction in his chosen field.

Books From Packt


 HTML5 Canvas Cookbook
HTML5 Canvas Cookbook

HTML5 Data and Services Cookbook
HTML5 Data and Services Cookbook

 HTML5 Boilerplate Web Development
HTML5 Boilerplate Web Development

HTML5 Mobile Development Cookbook
HTML5 Mobile Development Cookbook

 HTML5 Multimedia Development Cookbook
HTML5 Multimedia Development Cookbook

 HTML5 Web Application Development By Example
HTML5 Web Application Development By Example

 HTML5 Enterprise Application Development
HTML5 Enterprise Application Development

 Learn HTML5 by Creating Fun Games
Learn HTML5 by Creating Fun Games


No votes yet

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
V
Q
c
x
z
s
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software