376 - Web App Dev: SVG & Canvas

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)
   1. Using <circle> and <path> to make pie slices (from this post on Stack Overflow)
   2. Clipping and masking to make a semi-circle
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
   • index.html
   • scripts.js
   • styles.css
2. Stage 2: rolling two dice
   • index.html
   • scripts.js
   • styles.css
3. Stage 3: game play (win/lose scenarios)
   • index.html
   • scripts.js
   • styles.css
4. Stage 4: betting
   • index.html
   • scripts.js
   • styles.css