HTML and CSS Reference
In-Depth Information
This chapter covers
• Canvas basics
• Shape, path, and text creation
• Creating animation
• Overlap detection
• HTML5 Canvas games from scratch
For many years, developers used Adobe's Flash to create highly interactive web applica-
tions. Sadly, Flash wasn't ready when the mobile market explosion for smartphones oc-
curred. Those dark days without an alternative have ended because of HTML5's Canvas
API. It allows you to create 2D shapes in a single DOM element without a plug-in. An
application written with Canvas is distributable to multiple platforms and through frame-
works like PhoneGap.com. Although simple to use, Canvas lets you do complex work,
like emulating medical training procedures, creating interactive lobbying presentations, and
even building education applications.
Can I use Canvas for drawing graphs and infographics?
One common misconception about Canvas is that it's good for creating graphs and in-
fographics. Although you could use it to visualize simple information, the Canvas API is
better for complex animations and interactivity. If you want simple visuals or animation,
check out SVG in
chapter 7
. It's for creating logos, graphs, and infographics, and it comes
with many built-in features Canvas lacks, such as animation, resizability, and CSS support.
In this chapter, you'll explore the Canvas API by implementing a simple engine pattern
to maintain and draw graphics. After that, you'll create and animate unique shapes. When
you've finished, you'll be able to apply both of those exercises to creating full-length an-
imations, interactive data, or drawing applications. Here, though, you'll use the principles
for the true reason of all technology: creating games!
What makes this tutorial special
