Introduction
- Setting up the working environment
- What is Canvas?
- Hello World!
Drawing Lines and Paths on Canvas
- Draw Lines
- Drawing Complex Lines
- Line Caps
- Line Joins
- Shadows
- Lab Session: Drawing Complex Shapes
- Drawing Curves
- Drawing Quadratic Curves
- Drawing Bezier Curves
- Lab Session: Drawing a Heart
Drawing Shapes on Canvas
- Drawing Rectangles
- Lab Session: Drawing a Chessboard
- Drawing Circles
- Lab Session: Drawing a Pac-Man
- Lab Session: Drawing Polygons
- Shadows on Shapes
Drawing Texts on Canvas
- Drawing Basic Texts
- Styling Texts
- Lab Session: Drawing 3D Texts
- Positioning Texts
- Shadows on Texts
Project : Building a Open Source Bar Chart Library
- Creating Project Structure
- Creating the Chart Configurations
- Creating the Canvas and Performing the Pre-Operations
- Drawing Axes
- Drawing Labels
- Drawing Guidelines
- Drawing Bars
- Pushing to GitHub
- Readme.md
Drawing Images on Canvas
- Drawing Images
- Lab Session: Drawing Pokemon Characters From A Tile
- Lab Session: Filtering Images
Canvas Advanced Topics
- save() and restore() the canvas state
- Save Canvas as an Image
- Patterns
- Gradients
Animations
- Animation Basics
- Lab Session: Bouncing Ball
- Sprite Animation
- Lab Session: Running A Game Character
Transformations on Canvas
- Scale
- Rotate
- Translate
- Transform
Making Physics with Animations on Canvas
- Introduction
- Velocity
- Acceleration
- Vertical Projection
- Horizontal Projection and Angular Projection
- Momentum on One Axis
- Momentum on Two Axes
User Interactions on Canvas
- Handling Key Events
- Handling Mouse Events
- Lab Session: Juggling a Ball with Mouse
- Lab Session: Dragging and Dropping Canvas Objects
Project : Building a Flappy Monster Game
- Creating Project Structure
- Creating the Game Class Part 1
- Creating the Game Class Part 2
- Creating the Background
- Creating the Score Board
- Creating the Walls
- Creating the Monster
- Collision Detection and Final Touches
- Fix: Walls Overlap Issue Fixed
Project : Building Paint Application
- Project Design Overview
- Handling Color and Brush
- Drawing on Canvas
- Clear and Download Drawings
End of Journey
- What's next?
