HTML and CSS Reference
In-Depth Information
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.
