Blank Canvas Tutorial

blank-canvas is a set of bindings to the HTML5 Canvas API. This tutorial is in the form of executable examples of blank-canvas in use.

Complete Examples

• Simple Red Line
• Rotating Square
• Tic Tac Toe Game

Basic HTML5 Canvas

The HTML5 Canvas operations are transliterations of the JavaScript API. A good starting point is a HTML5 Canvas Cheat Sheet, the HTML5 tutorials, or the Mozilla Canvas tutorial.

The Canvas monad forms a JavaScript/Canvas DSL, and we, where possible, stick to the JavaScript idioms. So a method call with no arguments takes a unit, a method call that takes 3 JavaScript numbers will take a 3-tuple of Floats, etc. When there is a var-args JavaScript function, we use lists, as needed (it turns out that all var-args functions take a variable number of JavaScript numbers.)

This part of the tutorial follows the HTML5 tutorials, with kind permission of Eric Rowell. The examples from Eric's tutorial have been transliterated into Haskell, and links to the original tutorial are provided.

Lines

• Line

Curves

Paths

Shapes

Fill Style

Images

Text

Transformations

Composites

Image Data & URLs

Optimization of Blank Canvas