376 - Web App Dev: SVG & Canvas

These are the resources for the lessons in the SVG & Canvas unit.

Home W3 Schools

For this unit we will create graphics first using SVG markup and then using the Canvas object in JavaScript.

The lessons for this unit are based on the content provided by W3 Schools and the Mozilla Developer Network (MDN).

Lessons

SVG
  1. Introduction
  2. Basic elements
    1. Rectangle
    2. Circle
    3. Ellipse
    4. Line
    5. Polygon
    6. Polyline
    7. Text
  3. Transforms
  4. Grouping and reusing
    1. Group
    2. Use
  5. Paths (complete reference for path commands)
  6. "Nights Lights" puzzle
  7. Advanced effects
    1. Stroke
    2. Filters
    3. Blur
    4. Drop Shadow
    5. Linear Gradient
    6. Radial Gradient
  8. Complete reference
    1. Elements
    2. Attributes
Canvas
  1. Introduction
  2. Drawing
  3. Coordinates
  4. Gradients
  5. Text
  6. Images
Craps Dice Game
  1. Stage 1: rolling one die
  2. Stage 2: rolling two dice
  3. Stage 3: game play (win/lose scenarios)
  4. Stage 4: betting