canvas_examples.js

/**
  HTML5 Canvas examples
*/

/* Part I - Basic shapes */

// 1. Get the canvas

// 2. Get the context

// 3. Create a rectangle

    // 3.1. fillRect

    // 3.2. strokeRect

    // 3.3. clearRect

    // 3.4. rect

// 4. Create a circle

    // 4.1. Full circle

    // 4.2. Half circle

    // 4.3. Quarter circle

// 5. Create a simple bar chart

// 6. Use the moveTo(), lineTo() to create a triangle

// 7. Experiment with different stroke and fill styles as well as lineWidth etc.

// 8. Use the arcTo method to create a rounded square

// 9. Create ripple effect with globalAlpha

// 10. Create a curved line using quadratic curve

// 11. Create a ripple curve using bezier curve

// 12. Create both filled text and stroked