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.

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.)

Complete Examples

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

Basic HTML5 Canvas

Optimization of Blank Canvas