Chapter 6. 2D Canvas: low-level, 2D graphics rendering

 

Chapter 6 at a glance

Topic

Description, methods, and so on

Page
API overview Fundamentals for drawing with the Canvas API  
 
  • Canvas context and origins
  • getContext()
166 169
Drawing assets Creating static Canvas objects with visual output  
 
  • App’s general structure
  • requestAnimationFrame()
  • ctx.drawImage()
  • ctx.fillRect()
  • ctx.createLinearGradient()
  • ctx.arc() for circles
  • Paths via moveTo() and lineTo()
  • ctx.arcTo() for round corners
170 173 174 175 177 178 179 179
Animate/overlap Making assets interactive and detecting overlap  
 
  • Moving your visual assets
  • Overlap detection
  • Keyboard and mouse input
  • Touch input
182 183 185 187
Game mechanics Game features such as counters and screens  
 
  • Score and level output
  • Progressive level enhancement
  • Welcome and Game Over screens
  • HTML5 game libraries
190 191 193 195

Look for this icon throughout the chapter to quickly locate the topics outlined in this table.

This chapter covers

  • Canvas basics
  • Shape, path, and text creation
  • Creating animation
  • Overlap detection
  • HTML5 Canvas games from scratch

6.1. Canvas basics

6.2. Creating a Canvas game

6.3. Breathing life into Canvas elements

6.4. Polishing Canvas games

6.5. Summary