Topics

• Getting started with JavaScript
• Arrays
• Arithmetic (Math)
• Comparison Operations
• Generators
• Scope
• Performance Tips
• Creational Design Patterns
• Getting started with html5-canvas
• Method Chaining
• Tail Call Optimization
• Images
• Media types and the canvas
• Animation
• Collisions and Intersections
• Paths
• Text
• Clearing the screen
• Navigating along a Path
• Charts & Diagrams
• Polygons
• Transformations
• Responsive Design
• Compositing

Examples

• Remainder / Modulus (%)
• Exponentiation (Math.pow() or **)
• Generator Functions
• Rounding
• Difference between var and let
• Short-circuiting in boolean operators
• Bitwise operators
• Abstract equality / inequality and type conversion
• Rectangles
• Checking if an object is an Array
• Sorting Arrays
• Array comparison
• How to add the Html5 Canvas Element to a webpage
• Removing all elements
• Canvas size and resolution
• Creating a responsive full page canvas
• Off screen canvas
• Simple animation with 2D context and requestAnimationFrame
• Drawing many translated, scaled, and rotated images quickly
• What is Tail Call Optimization (TCO)
• Recursive loops
• Random with gaussian distribution
• Convert a String to an Array
• Image cropping using canvas
• Math.atan2 to find direction
• Sin & Cos to create a vector given direction & distance
• Math.hypot
• Periodic functions using Math.sin
• The Tained canvas
• Loading and displaying an Image
• Little / Big endian for typed arrays when using bitwise operators
• Reuse objects rather than recreate
• Basic loading and playing a video on the canvas.
• Chainable object design and chaining
• Getting maximum and minimum
• Use requestAnimationFrame() NOT setInterval() for animation loops
• Are 2 line segments intercepting?
• Cubic & Quadratic Bezier curve with arrowheads
• Ellipse
• Line without blurryness
• Bit fields to optimise comparison of multi state data
• Formatting Text
• Complex shapes
• Set frame rate using requestAnimationFrame
• Rendering text along an arc.
• Render a rounded polygon.
• Finding points along a cubic Bezier curve
• Finding points along a quadratic curve
• Finding points along a line
• Finding points along an entire Path containing curves and lines
• Length of a Quadratic Curve
• Split bezier curves at position
• Clear canvas with gradient.
• Trim bezier curve.
• Length of a Cubic Bezier Curve (a close approximation)
• Scaling image to fit or fill.
• Find point on curve
• Text on curve, cubic and quadratic beziers
• Justified text
• Justified paragraphs.
• Capture canvas and Save as webM video
• Invert or Negate image with "difference"
• Black & White with "color"
• Increase the color contrast with "saturation"
• Sepia FX with "luminosity"
• Finding extent of Quadratic Curve
• Responsive canvas animations without resize events.