Powers of HTML 5

Section 1: Understanding the Canvas

The first step to the creation of our HTML5 game is to understand where its problems lie. It is a client-side graphics <canvas>. The canvas element renders simple graphics, such as line art, graphs, and other custom graphical elements on the client-side.

Introduced in the summer of 2004 by Apple in its Safari Browser, Canvas is now supported by many browsers. While Internet Explorer does not directly support the tag as of yet, there are JavaScript Libraries that emulate <canvas> syntax using Microsoft's Vector Markup Language (VML). From a markup point of view, you simply put the element in the page, name it with an id attribute, and define its dimensions with height and width attributes: After you place a <canvas> tag in a document, your next step is to use JavaScript to access and draw on the element. For example, the following fetch the object by its id value and creates a two-dimensional drawing context: Once we have drawing objects for a game we have various methods used for the Canvas but we are focused on a few methods. For example, the "strokeRect(x,y,width,height)" method takes x and y coordinates and height and width, all specified as numbers representing pixels.

For example:

context.strokeRect(10,10,150,50);

Will draw a simple rectangle of 150 pixels by 50 pixels starting at the coordinates 10,10 from the origin of the placed <canvas> tag.

If you wanted to set a particular color for the stroke then you might set it with the "strokeStyle()" method, like so: You can use the "fillRect(x,y,width,height)" method to make a rectangle, but this time in a solid manner:

context.fillRect(150,30,75,75);

By default, the fill color will be black, but you can define a different fill color using the "fillColor()" method.

For example:

context.fillStyle = "#da0000";

Also, use standard CSS color functions, which may include opacity.

For example, the opacity of the reddish fill is set to 40 percent:

context.fillStyle = "rgba(218,112,214,0.4)"; Now:

Code used

2. Save

3. Run

Section 2: Drawing and Styling Lines and Shapes

HTML5 defines a complete API for drawing on a Canvas element. For example, to do some more complex shapes, the path API must be used. Now the question is, what is the Path API?

What the path API is?

The path API stores a collection of subpaths formed by various shape functions and connects the subpaths via a "fill()" or "stroke()" call. To begin a path, "context.beginPath()" is called to reset the path collection. Then, any variety of shape calls can occur to add a subpath to the collection. Once all subpaths are properly added, "context.closePath()" can optionally be called to close the loop. Then "fill()" or "stroke()" will also display the path as a newly created shape.

For example, the following draws a V shape using "lineTo()": If you were to add a "context.closePath()" before "context.stroke()", the V shape would turn into a triangle, because closePath() would connect the last point and the first point. Also, by calling "fill()" instead of "stroke()", the triangle will be filled in with whatever the fill color is, or black if none is specified. Of course, you can call both "fill()" and "stroke()" on any drawn shape if you want to have a stroke around a filled region. Thus, to style the drawing, you can specify the Fill Style and Stroke Style and maybe even define the width of the line using line width, see the following: You can change the color by setting the fillColor property. In addition to the CSS color values, you can also set the fillColor to a gradient object. A gradient object can be created using "createLinearGradient()" or "createRadialGradient()". The following example creates a simple linear gradient that will be applied to a rectangle using the "createLinearGradient(x1,y1,x2,y2)" method. The gradient is positioned at 10,150 and is set to go 200 pixels in both directions.

var lg = context.createLinearGradient(10,150,200,200);

Next, the gradient colors are added using the "addColorStop()" method. This specifies a color and the offset position in the gradient where the color should occur. The offset must be between 0 and 1. Of course, you could use the rgba CSS function to create a gradient with transparency as well. Finally, the fillColor is set to the gradient. Here is the complete code snippet, followed by a visual example: To create a radial gradient using "createRadialGradient(x1,y1,r1,x2,y2,r2)", you must set the position and radius of two circles to serve as the gradient.

For example: Consider this entire example: