6.1. Solution 6-1: How to draw with HTML5 using the canvas element's drawing API6.1.1. What's involved6.1.2. How to build it6.1.3. Expert tips6.2. Solution 6-2: Using paths and coordinates6.2.1. What's involved6.2.1.1. The canvas coordinates system6.2.1.2. Drawing paths6.2.1.3. Setting styles for your shapes6.2.1.3.1. Line properties and styles6.2.2. How to build it6.2.3. Expert tips6.3. Solution 6-3: Drawing shapes: rectangles and circles6.3.1. What's involved6.3.1.1. Drawing rectangles6.3.1.2. Drawing circles6.3.2. How to build it6.3.3. Expert tips6.4. Solution 6-4: Filling shapes with solid colors6.4.1. What s involved6.4.1.1. Setting the fillStyle property6.4.1.2. Blending colors6.4.1.3. Filling strokes6.4.2. How to build it6.4.3. Expert tips6.5. Solution 6-5: Using gradients to fill shapes6.5.1. What's involved6.5.1.1. Using a linear gradient6.5.1.2. Using a radial gradient6.5.1.3. Filling strokes with gradient6.5.2. How to build it6.6. Solution 6-6: Drawing texts in a canvas6.6.1. What's involved6.6.1.1. Font attributes6.6.1.2. Aligning text attributes6.6.1.3. The text baseline attributes6.6.2. How to build it6.6.3. Expert tips6.7. Solution 6-7: Working with relative font sizes to draw text on a canvas6.7.1. What's involved6.7.1.1. Font-size, em, and relative text content6.7.2. How to build it6.7.3. Expert tips6.8. Solution 6-8: Saving a shape as a PNG file6.8.1. What's involved6.8.2. How to build it6.8.3. Expert tips6.9. Summary