Lesson 2 - Canvas graphics [May 8, 2011, 2:44 p.m.]
In this lesson we cover how to draw graphics in the page using the Canvas tag and its API. Also, becuse it's time to start thinking about how your game engine is going to work, we also cover how objects in Javascript differ from objects in other languages, and a little bit about how to think about using objects when creating your game's world model.
Be A Better Javascript Programmer: Objects
- Video 2.1 - Objects, Constructors, and Prototypes
- Video 2.2 - The "Classless" society - duck-typing and polymorphism without classes
- Video 2.3 - How this applies to creating your game engine
Canvas Graphics
-
Canvas Documentation
-
Example 2.4 - Basic Canvas Operations - Strokes, Fills, Colors
- Sample code (HTML)
- Sample code (Javascript)
- Video Explanation
- Example 2.5 - Using Images in Canvas
-
Example 2.6 - More Canvas Functions - Arcs, Transparency, Randomness
-
Sample code (HTML) - Sample code (Javacript)
- Video explanation
-
-
Example 2.7 - Canvas Transformations (scaling, rotating, etc)
- Sample Code (HTML)
- Sample Code (Javascript)
- Video explanation