Canvas Examples

Unless otherwise indicated, this part of the tutorial follows the HTML5 tutorials, with kind permission of Eric Rowell, with the examples from Eric's tutorial transliterated into Haskell.

Lines

• Line
• Line Width
• Line Color
• Line Cap
• Miter Limit (from mozilla tutorial, licensed under CC-BY-SA 2.5, transliterated into Haskell).

Curves

• Arc (updated to use 2 arcs, to illustrate the final boolean argument)
• Quadratic Curve
• Bezier Curve

Paths

• Path
• Line Join
• Rounded Corners
• Is Point In Path (our own example)

Shapes

• Custom Shape
• Rectangle
• Circle
• Semicircle

Fill Style

• Color Fill
• Linear Gradient
• Radial Gradient
• Pattern

Images

• Draw Image
• Image Size
• Image Crop
• Image Loader
• Draw Canvas (our own example)
• Draw Device (our own example)

Text

• Font Size and Style
• Text Color
• Text Stroke
• Text Align
• Text Baseline
• Text Metrics
• Text Wrap (updated to handle high-res via devicePixelRatio)

Transformations

• Translate Transform
• Scale Transform
• Rotate Transform
• Custom Transform

Composites

• Global Composite Operations

Image Data & URLs

• Grayscale
• Get Image Data URL
• Load Image Data URL
• Load Image Data URL 2