Instant HTML5 2D Platformer - Instant HTML5 2D Platformer - page 3

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 speciies 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 speciied.
We then move on to drawing a circle to the canvas, which is done by irstly 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 igure is taken directly from the W3C HTML canvas
reference, which you can ind at the following link http://bit.ly/UCVPY1 :
Implementing the game framework
(Should know)
In this recipe, we will focus our attention on the creation of a basic 2D game framework
through means of JavaScript and which will be added to throughout the remainder of the
topic. This framework will be responsible for declaring the size of the canvas as well as
handling the loading, updating, and rendering of game assets.