In this article by Makzan, the author of HTML5 Game Development by Example: Beginner's Guide - Second Edition has discussed the new highlighted feature in HTML5—the canvas element. We can treat it as a dynamic area where we can draw graphics and shapes with scripts.

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

Images in websites have been static for years. There are animated GIFs, but they cannot interact with visitors. Canvas is dynamic. We draw and modify the context in the Canvas, dynamically through the JavaScript drawing API. We can also add interaction to the Canvas and thus make games.

In this article, we will focus on using new HTML5 features to create games. Also, we will take a look at a core feature, Canvas, and some basic drawing techniques.

We will cover the following topics:

Introducing the HTML5 canvas element

Drawing a circle in Canvas

Drawing lines in the canvas element

Interacting with drawn objects in Canvas with mouse events

The Untangle puzzle game is a game where players are given circles with some lines connecting them. The lines may intersect the others and the players need to drag the circles so that no line intersects anymore.

The following screenshot previews the game that we are going to achieve through this article:

You can also try the game at the following URL:

http://makzan.net/html5-games/untangle-wip-dragging/

So let's start making our Canvas game from scratch.

Drawing a circle in the Canvas

Let's start our drawing in the Canvas from the basic shape—circle.

Time for action – drawing color circles in the Canvas

First, let's set up the new environment for the example. That is, an HTML file that will contain the canvas element, a jQuery library to help us in JavaScript, a JavaScript file containing the actual drawing logic, and a style sheet:
```
index.html
js/
js/jquery-2.1.3.js
js/untangle.js
js/untangle.drawing.js
js/untangle.data.js
js/untangle.input.js
css/
css/untangle.css
images/
```

Put the following HTML code into the index.html file. It is a basic HTML document containing the canvas element:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Drawing Circles in Canvas</title>
<link rel="stylesheet" href="css/untangle.css">
</head>
<body>
<header>
   <h1>Drawing in Canvas</h1>
</header>
<canvas id="game" width="768" height="400">

This is an interactive game with circles and lines connecting them.

</canvas>
<script src="js/jquery-2.1.3.min.js"></script>
<script src="js/untangle.data.js"></script>
<script src="js/untangle.drawing.js"></script>
<script src="js/untangle.input.js"></script>
<script src="js/untangle.js"></script>
</body>
</html>

Use CSS to set the background color of the Canvas inside untangle.css:
```
canvas {
background: grey;
}
```

In the untangle.js JavaScript file, we put a jQuery document ready function and draw a color circle inside it:

$(document).ready(function(){
var canvas = document.getElementById("game");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "GOLD";
ctx.beginPath();
ctx.arc(100, 100, 50, 0, Math.PI*2, true);
ctx.closePath();
ctx.fill();
});

Open the index.html file in a web browser and we will get the following screenshot:

What just happened?

We have just created a simple Canvas context with circles on it. There are not many settings for the canvas element itself. We set the width and height of the Canvas, the same as we have fixed the dimensions of real drawing paper. Also, we assign an ID attribute to the Canvas for an easier reference in JavaScript:

<canvas id="game" width="768" height="400">
This is an interactive game with circles and lines connecting them.
</canvas>

Putting in fallback content when the web browser does not support the Canvas

Not every web browser supports the canvas element. The canvas element provides an easy way to provide fallback content if the canvas element is not supported. The content also provides meaningful information for any screen reader too. Anything inside the open and close tags of the canvas element is the fallback content. This content is hidden if the web browser supports the element. Browsers that don't support canvas will instead display that fallback content. It is good practice to provide useful information in the fallback content. For instance, if the canvas tag's purpose is a dynamic picture, we may consider placing an <img> alternative there. Or we may also provide some links to modern web browsers for the visitor to upgrade their browser easily.

The Canvas context

When we draw in the Canvas, we actually call the drawing API of the canvas rendering context. You can think of the relationship of the Canvas and context as Canvas being the frame and context the real drawing surface. Currently, we have 2d, webgl, and webgl2 as the context options. In our example, we'll use the 2D drawing API by calling getContext("2d").

var canvas = document.getElementById("game");
var ctx = canvas.getContext("2d");

Drawing circles and shapes with the Canvas arc function

There is no circle function to draw a circle. The Canvas drawing API provides a function to draw different arcs, including the circle. The arc function accepts the following arguments:

Arguments	Discussion
X	The center point of the arc in the x axis.
Y	The center point of the arc in the y axis.
radius	The radius is the distance between the center point and the arc's perimeter. When drawing a circle, a larger radius means a larger circle.
startAngle	The starting point is an angle in radians. It defines where to start drawing the arc on the perimeter.
endAngle	The ending point is an angle in radians. The arc is drawn from the position of the starting angle, to this end angle.
counter-clockwise	This is a Boolean indicating the arc from startingAngle to endingAngle drawn in a clockwise or counter-clockwise direction. This is an optional argument with the default value false.

Converting degrees to radians

The angle arguments used in the arc function are in radians instead of degrees. If you are familiar with the degrees angle, you may need to convert the degrees into radians before putting the value into the arc function. We can convert the angle unit using the following formula:

radians = p/180 x degrees

Executing the path drawing in the Canvas

When we are calling the arc function or other path drawing functions, we are not drawing the path immediately in the Canvas. Instead, we are adding it into a list of the paths. These paths will not be drawn until we execute the drawing command.

There are two drawing executing commands: one command to fill the paths and the other to draw the stroke.

We fill the paths by calling the fill function and draw the stroke of the paths by calling the stroke function, which we will use later when drawing lines:

ctx.fill();

Beginning a path for each style

The fill and stroke functions fill and draw the paths in the Canvas but do not clear the list of paths. Take the following code snippet as an example. After filling our circle with the color red, we add other circles and fill them with green. What happens to the code is both the circles are filled with green, instead of only the new circle being filled by green:

var canvas = document.getElementById('game');
var ctx = canvas.getContext('2d');
ctx.fillStyle = "red";
ctx.arc(100, 100, 50, 0, Math.PI*2, true);
ctx.fill();
 
ctx.arc(210, 100, 50, 0, Math.PI*2, true);
ctx.fillStyle = "green";
ctx.fill();

This is because, when calling the second fill command, the list of paths in the Canvas contains both circles. Therefore, the fill command fills both circles with green and overrides the red color circle.

In order to fix this issue, we want to ensure we call beginPath before drawing a new shape every time.

The beginPath function empties the list of paths, so the next time we call the fill and stroke commands, they will only apply to all paths after the last beginPath.

Have a go hero

We have just discussed a code snippet where we intended to draw two circles: one in red and the other in green. The code ends up drawing both circles in green. How can we add a beginPath command to the code so that it draws one red circle and one green circle correctly?

Closing a path

The closePath function will draw a straight line from the last point of the latest path to the first point of the path. This is called closing the path. If we are only going to fill the path and are not going to draw the stroke outline, the closePath function does not affect the result. The following screenshot compares the results on a half circle with one calling closePath and the other not calling closePath:

building-untangle-game-canvas-and-drawing-api-img-1

Pop quiz

Q1. Do we need to use the closePath function on the shape we are drawing if we just want to fill the color and not draw the outline stroke?

Yes, we need to use the closePath function.

No, it does not matter whether we use the closePath function.

Wrapping the circle drawing in a function

Drawing a circle is a common function that we will use a lot. It is better to create a function to draw a circle now instead of entering several code lines.

Time for action – putting the circle drawing code into a function

Let's make a function to draw the circle and then draw some circles in the Canvas. We are going to put code in different files to make the code simpler:

Open the untangle.drawing.js file in our code editor and put in the following code:

if (untangleGame === undefined) {
var untangleGame = {};
}
 
untangleGame.drawCircle = function(x, y, radius) {
var ctx = untangleGame.ctx;
ctx.fillStyle = "GOLD";
ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI*2, true);
ctx.closePath();
ctx.fill();
};

Open the untangle.data.js file and put the following code into it:

if (untangleGame === undefined) {
var untangleGame = {};
}
 
untangleGame.createRandomCircles = function(width, height) {
// randomly draw 5 circles
var circlesCount = 5;
var circleRadius = 10;
for (var i=0;i<circlesCount;i++) {
   var x = Math.random()*width;
   var y = Math.random()*height;
   untangleGame.drawCircle(x, y, circleRadius);
}
};

Then open the untangle.js file. Replace the original code in the JavaScript file with the following code:

if (untangleGame === undefined) {
var untangleGame = {};
}
 
// Entry point
$(document).ready(function(){
var canvas = document.getElementById("game");
untangleGame.ctx = canvas.getContext("2d");
 
var width = canvas.width;
var height = canvas.height;
 
untangleGame.createRandomCircles(width, height);
 
});

Open the HTML file in the web browser to see the result:

What just happened?

The code of drawing circles is executed after the page is loaded and ready. We used a loop to draw several circles in random places in the Canvas.

Dividing code into files

We are putting the code into different files. Currently, there are the untangle.js, untangle.drawing.js, and untangle.data.js files. The untangle.js is the entry point of the game. Then we put logic that is related to the context drawing into untangle.drawing.js and logic that's related to data manipulation into the untangle.data.js file.

We use the untangleGame object as the global object that's being accessed across all the files. At the beginning of each JavaScript file, we have the following code to create this object if it does not exist:

if (untangleGame === undefined) {
var untangleGame = {};
}

Generating random numbers in JavaScript

In game development, we often use random functions. We may want to randomly summon a monster for the player to fight, we may want to randomly drop a reward when the player makes progress, and we may want a random number to be the result of rolling a dice. In this code, we place the circles randomly in the Canvas.

To generate a random number in JavaScript, we use the Math.random() function. There is no argument in the random function. It always returns a floating number between 0 and 1. The number is equal or bigger than 0 and smaller than 1. There are two common ways to use the random function. One way is to generate random numbers within a given range. The other way is generating a true or false value.

Usage	Code	Discussion
Getting a random integer between A and B	Math.floor(Math.random()B)+A*	Math.floor() function cuts the decimal point of the given number. Take Math.floor(Math.random()10)+5* as an example. Math.random() returns a decimal number between 0 to 0.9999…. Math.random()10* is a decimal number between 0 to 9.9999…. Math.floor(Math.random()10)* is an integer between 0 to 9. Finally, Math.floor(Math.random()10)* + 5 is an integer between 5 to 14.
Getting a random Boolean	(Math.random() > 0.495)	(Math.random() > 0.495) means 50 percent false and 50 percent true. We can further adjust the true/false ratio. (Math.random() > 0.7) means almost 70 percent false and 30 percent true.

Saving the circle position

When we are developing a DOM-based game, we often put the game objects into DIV elements and accessed them later in code logic. It is a different story in the Canvas-based game development.

In order to access our game objects after they are drawn in the Canvas, we need to remember their states ourselves. Let's say now we want to know how many circles are drawn and where they are, and we will need an array to store their position.

Time for action – saving the circle position

Open the untangle.data.js file in the text editor.

Add the following circle object definition code in the JavaScript file:

untangleGame.Circle = function(x,y,radius){
this.x = x;
this.y = y;
this.radius = radius;
}

Now we need an array to store the circles' positions. Add a new array to the untangleGame object:
```
untangleGame.circles = [];
```

While drawing every circle in the Canvas, we save the position of the circle in the circles array. Add the following line before calling the drawCircle function, inside the createRandomCircles function:
```
untangleGame.circles.push(new untangleGame.Circle(x,y,circleRadius));
```

After the steps, we should have the following code in the untangle.data.js file:

if (untangleGame === undefined) {
var untangleGame = {};
}
 
untangleGame.circles = [];
 
untangleGame.Circle = function(x,y,radius){
this.x = x;
this.y = y;
this.radius = radius;
};
 
untangleGame.createRandomCircles = function(width, height) {
// randomly draw 5 circles
var circlesCount = 5;
var circleRadius = 10;
for (var i=0;i<circlesCount;i++) {
   var x = Math.random()*width;
   var y = Math.random()*height;
   untangleGame.circles.push(new 
      untangleGame.Circle(x,y,circleRadius));
   untangleGame.drawCircle(x, y, circleRadius);
}
};

Now we can test the code in the web browser. There is no visual difference between this code and the last example when drawing random circles in the Canvas. This is because we are saving the circles but have not changed any code that affects the appearance. We just make sure it looks the same and there are no new errors.

What just happened?

We saved the position and radius of each circle. This is because Canvas drawing is an immediate mode. We cannot directly access the object drawn in the Canvas because there is no such information. All lines and shapes are drawn on the Canvas as pixels and we cannot access the lines or shapes as individual objects. Imagine that we are drawing on a real canvas. We cannot just move a house in an oil painting, and in the same way we cannot directly manipulate any drawn items in the canvas element.

Defining a basic class definition in JavaScript

We can use object-oriented programming in JavaScript. We can define some object structures for our use. The Circle object provides a data structure for us to easily store a collection of x and y positions and the radii.

After defining the Circle object, we can create a new Circle instance with an x, y, and radius value using the following code:

var circle1 = new Circle(100, 200, 10);

For more detailed usage on object-oriented programming in JavaScript, please check out the Mozilla Developer Center at the following link:

https://developer.mozilla.org/en/Introduction_to_Object-Oriented_JavaScript

Have a go hero

We have drawn several circles randomly on the Canvas. They are in the same style and of the same size. How about we randomly draw the size of the circles? And fill the circles with different colors? Try modifying the code and then play with the drawing API.

Drawing lines in the Canvas

Now we have several circles here, so how about connecting them with lines? Let's draw a straight line between each circle.

Time for action – drawing straight lines between each circle

Open the index.html file we just used in the circle-drawing example.

Change the wording in h1 from drawing circles in Canvas to drawing lines in Canvas.

Open the untangle.data.js JavaScript file.

We define a Line class to store the information that we need for each line:

untangleGame.Line = function(startPoint, endPoint, thickness) {
this.startPoint = startPoint;
this.endPoint = endPoint;
this.thickness = thickness;
}

Save the file and switch to the untangle.drawing.js file.

We need two more variables. Add the following lines into the JavaScript file:
```
untangleGame.thinLineThickness = 1;
untangleGame.lines = [];
```

We add the following drawLine function into our code, after the existing drawCircle function in the untangle.drawing.js file.

untangleGame.drawLine = function(ctx, x1, y1, x2, y2, thickness) {
ctx.beginPath();
ctx.moveTo(x1,y1);
ctx.lineTo(x2,y2);
ctx.lineWidth = thickness;
ctx.strokeStyle = "#cfc";
ctx.stroke();
}

Then we define a new function that iterates the circle list and draws a line between each pair of circles. Append the following code in the JavaScript file:

untangleGame.connectCircles = function() {
// connect the circles to each other with lines
untangleGame.lines.length = 0;
for (var i=0;i< untangleGame.circles.length;i++) {
   var startPoint = untangleGame.circles[i];
   for(var j=0;j<i;j++) {
     var endPoint = untangleGame.circles[j];
     untangleGame.drawLine(startPoint.x, startPoint.y, 
        endPoint.x,
     endPoint.y, 1);
     untangleGame.lines.push(new untangleGame.Line(startPoint, 
        endPoint,
     untangleGame.thinLineThickness));
   }
}
};

Finally, we open the untangle.js file, and add the following code before the end of the jQuery document ready function, after we have called the untangleGame.createRandomCircles function:
```
untangleGame.connectCircles();
```

Test the code in the web browser. We should see there are lines connected to each randomly placed circle:

What just happened?

We have enhanced our code with lines connecting each generated circle. You may find a working example at the following URL:

http://makzan.net/html5-games/untangle-wip-connect-lines/

Similar to the way we saved the circle position, we have an array to save every line segment we draw. We declare a line class definition to store some essential information of a line segment. That is, we save the start and end point and the thickness of the line.

Introducing the line drawing API

There are some drawing APIs for us to draw and style the line stroke:

Line drawing functions	Discussion
moveTo	The moveTo function is like holding a pen in our hand and moving it on top of the paper without touching it with the pen.
lineTo	This function is like putting the pen down on the paper and drawing a straight line to the destination point.
lineWidth	The lineWidth function sets the thickness of the strokes we draw afterwards.
stroke	The stroke function is used to execute the drawing. We set up a collection of moveTo, lineTo, or styling functions and finally call the stroke function to execute it on the Canvas.

We usually draw lines by using the moveTo and lineTo pairs. Just like in the real world, we move our pen on top of the paper to the starting point of a line and put down the pen to draw a line. Then, keep on drawing another line or move to the other position before drawing. This is exactly the flow in which we draw lines on the Canvas.

We just demonstrated how to draw a simple line. We can set different line styles to lines in the Canvas. For more details on line styling, please read the styling guide in W3C at http://www.w3.org/TR/2dcontext/#line-styles and the Mozilla Developer Center at https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors.

Using mouse events to interact with objects drawn in the Canvas

So far, we have shown that we can draw shapes in the Canvas dynamically based on our logic. There is one part missing in the game development, that is, the input.

Now, imagine that we can drag the circles around on the Canvas, and the connected lines will follow the circles. In this section, we will add mouse events to the canvas to make our circles draggable.

Time for action – dragging the circles in the Canvas

Let's continue with our previous code. Open the html5games.untangle.js file.

We need a function to clear all the drawings in the Canvas. Add the following function to the end of the untangle.drawing.js file:
```
untangleGame.clear = function() {
var ctx = untangleGame.ctx;
ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);
};
```

We also need two more functions that draw all known circles and lines. Append the following code to the untangle.drawing.js file:

untangleGame.drawAllLines = function(){
// draw all remembered lines
for(var i=0;i<untangleGame.lines.length;i++) {
   var line = untangleGame.lines[i];
   var startPoint = line.startPoint;
   var endPoint = line.endPoint;
   var thickness = line.thickness;
   untangleGame.drawLine(startPoint.x, startPoint.y, 
      endPoint.x,
   endPoint.y, thickness);
}
};
 
untangleGame.drawAllCircles = function() {
// draw all remembered circles
for(var i=0;i<untangleGame.circles.length;i++) {
   var circle = untangleGame.circles[i];
   untangleGame.drawCircle(circle.x, circle.y, circle.radius);
}
};

We are done with the untangle.drawing.js file. Let's switch to the untangle.js file. Inside the jQuery document-ready function, before the ending of the function, we add the following code, which creates a game loop to keep drawing the circles and lines:
```
// set up an interval to loop the game loop
setInterval(gameloop, 30);
 
function gameloop() {
// clear the Canvas before re-drawing.
untangleGame.clear();
untangleGame.drawAllLines();
untangleGame.drawAllCircles();
}
```

Before moving on to the input handling code implementation, let's add the following code to the jQuery document ready function in the untangle.js file, which calls the handleInput function that we will define:
```
untangleGame.handleInput();
```

It's time to implement our input handling logic. Switch to the untangle.input.js file and add the following code to the file:

if (untangleGame === undefined) {
var untangleGame = {};
}
 
untangleGame.handleInput = function(){
// Add Mouse Event Listener to canvas
// we find if the mouse down position is on any circle
// and set that circle as target dragging circle.
$("#game").bind("mousedown", function(e) {
   var canvasPosition = $(this).offset();
   var mouseX = e.pageX - canvasPosition.left;
   var mouseY = e.pageY - canvasPosition.top;
 
   for(var i=0;i<untangleGame.circles.length;i++) {
     var circleX = untangleGame.circles[i].x;
     var circleY = untangleGame.circles[i].y;
     var radius = untangleGame.circles[i].radius;
     if (Math.pow(mouseX-circleX,2) + Math.pow(
        mouseY-circleY,2) < Math.pow(radius,2)) {
       untangleGame.targetCircleIndex = i;
       break;
     }
   }
});
 
// we move the target dragging circle
// when the mouse is moving
$("#game").bind("mousemove", function(e) {
   if (untangleGame.targetCircleIndex !== undefined) {
     var canvasPosition = $(this).offset();
     var mouseX = e.pageX - canvasPosition.left;
     var mouseY = e.pageY - canvasPosition.top;
     var circle = untangleGame.circles[
        untangleGame.targetCircleIndex];
     circle.x = mouseX;
     circle.y = mouseY;
   }
   untangleGame.connectCircles();
});
 
// We clear the dragging circle data when mouse is up
$("#game").bind("mouseup", function(e) {
   untangleGame.targetCircleIndex = undefined;
});
};

Open index.html in a web browser. There should be five circles with lines connecting them. Try dragging the circles. The dragged circle will follow the mouse cursor and the connected lines will follow too.

What just happened?

We have set up three mouse event listeners. They are the mouse down, move, and up events. We also created the game loop, which updates the Canvas drawing based on the new position of the circles. You can view the example's current progress at: http://makzan.net/html5-games/untangle-wip-dragging-basic/.

Detecting mouse events in circles in the Canvas

After discussing the difference between DOM-based development and Canvas-based development, we cannot directly listen to the mouse events of any shapes drawn in the Canvas. There is no such thing. We cannot monitor the event in any shapes drawn in the Canvas. We can only get the mouse event of the canvas element and calculate the relative position of the Canvas. Then we change the states of the game objects according to the mouse's position and finally redraw it on the Canvas.

How do we know we are clicking on a circle? We can use the point-in-circle formula. This is to check the distance between the center point of the circle and the mouse position. The mouse clicks on the circle when the distance is less than the circle's radius. We use this formula to get the distance between two points: Distance = (x2-x1)2 + (y2-y1)2.

The following graph shows that when the distance between the center point and the mouse cursor is smaller than the radius, the cursor is in the circle:

building-untangle-game-canvas-and-drawing-api-img-5

The following code we used explains how we can apply distance checking to know whether the mouse cursor is inside the circle in the mouse down event handler:

if (Math.pow(mouseX-circleX,2) + Math.pow(mouseY-circleY,2) < Math.pow(radius,2)) {
untangleGame.targetCircleIndex = i;
break;
}

Please note that Math.pow is an expensive function that may hurt performance in some scenarios. If performance is a concern, we may use the bounding box collision checking.

When we know that the mouse cursor is pressing the circle in the Canvas, we mark it as the targeted circle to be dragged on the mouse move event. During the mouse move event handler, we update the target dragged circle's position to the latest cursor position. When the mouse is up, we clear the target circle's reference.

Pop quiz

Q1. Can we directly access an already drawn shape in the Canvas?

Q2. Which method can we use to check whether a point is inside a circle?

The coordinate of the point is smaller than the coordinate of the center of the circle.

The distance between the point and the center of the circle is smaller than the circle's radius.

The x coordinate of the point is smaller than the circle's radius.

The distance between the point and the center of the circle is bigger than the circle's radius.

Game loop

The game loop is used to redraw the Canvas to present the later game states. If we do not redraw the Canvas after changing the states, say the position of the circles, we will not see it.

Clearing the Canvas

When we drag the circle, we redraw the Canvas. The problem is the already drawn shapes on the Canvas won't disappear automatically. We will keep adding new paths to the Canvas and finally mess up everything in the Canvas. The following screenshot is what will happen if we keep dragging the circles without clearing the Canvas on every redraw:

building-untangle-game-canvas-and-drawing-api-img-6

Since we have saved all game statuses in JavaScript, we can safely clear the entire Canvas and draw the updated lines and circles with the latest game status. To clear the Canvas, we use the clearRect function provided by Canvas drawing API. The clearRect function clears a rectangle area by providing a rectangle clipping region. It accepts the following arguments as the clipping region:

context.clearRect(x, y, width, height)

Argument	Definition
x	The top left point of the rectangular clipping region, on the x axis.
y	The top left point of the rectangular clipping region, on the y axis.
width	The width of the rectangular region.
height	The height of the rectangular region.

The x and y values set the top left position of the region to be cleared. The width and height values define how much area is to be cleared. To clear the entire Canvas, we can provide (0,0) as the top left position and the width and height of the Canvas to the clearRect function. The following code clears all things drawn on the entire Canvas:

ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

Pop quiz

Q1. Can we clear a portion of the Canvas by using the clearRect function?

Q2. Does the following code clear things on the drawn Canvas?

ctx.clearRect(0, 0, ctx.canvas.width, 0);

Summary

You learned a lot in this article about drawing shapes and creating interaction with the new HTML5 canvas element and the drawing API.

Specifically, you learned to draw circles and lines in the Canvas. We added mouse events and touch dragging interaction with the paths drawn in the Canvas. Finally, we succeeded in developing the Untangle puzzle game.