Chapter 4. Building the Untangle Game with Canvas and the Drawing API

One new highlighted feature in HTML5 is the canvas element. We can treat it as a dynamic area where we can draw graphics and shapes with scripts.

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 the previous two chapters, we discussed DOM-based game development with CSS3 and a few HTML5 features. In the coming two chapters, we will focus on using new HTML5 features to create games. In this chapter, we will take a look at a core feature, Canvas, and some basic drawing techniques.

In this chapter, 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
• Detecting a line intersection
• Supporting the drag-n-drop feature in touch devices

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 chapter:

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.