BSD3 licensed by Andy Gill and Ryan Scott


blank-canvas is a Haskell binding to the complete HTML5 Canvas API. blank-canvas allows Haskell users to write, in Haskell, interactive images onto their web browsers. blank-canvas gives the user a single full-window canvas, and provides many well-documented functions for rendering images.

First Example

Haskell {-# LANGUAGE OverloadedStrings #-} module Main where

import Graphics.Blank -- import the blank canvas

main = blankCanvas 3000 $ \ context -> do -- start blank canvas on port 3000 send context $ do -- send commands to this specific context moveTo(50,50) lineTo(200,100) lineWidth 10 strokeStyle "red" stroke() -- this draws the ink into the canvas

Running this program, and going to http://localhost:3000/ gives


For more details about this example, see Red Line.


| Link | Notes | |-------|-------| | Examples | Various complete examples of using blank-canvas | | Installation | How to install blank-canvas | | Hackage | Current release is 0.5 | | API | Discussion of API, compared with the original JavaScript API | | Canvas Examples | Transliterated from into Haskell and blank-canvas, with kind permission of Eric Rowell, author of the JavaScript HTML5 Canvas Tutorial. | | FAQ | F.A.Q. |


Thank you to Eric Rowell, for allowing blank-canvas to base our Canvas examples on his JavaScript Canvas examples.

The "Haskell" picture is taken by Mandy Lackey, from link <> This picture allows sharing, under the creative commons license.



  • Use base-compat-batteries.


Additions * Add Semigroup instance for Canvas


  • Fix building with aeson-


API changes The (#) function had its type generalized from a -> (a -> Canvas b) -> Canvas b to a -> (a -> b) -> b. This allows it to be used with font length units. Added more type synonyms (Interval, Degrees, Radians, etc.) to more clearly indicate what functions expect constrained values. * showbJS (formerly showJS) and jsStyle now return a text Builder instead of a String. This change was introduced as part of a larger blank-canvas refactoring to increase performance. See the Data.Text.Lazy.Builder module from the text package for more details on how to use Builders.

API additions A new ADT for Fonts has been added in Graphics.Blank.Font that can be used in place of Text. For example, "30pt Calibri" is equivalent to (defFont "Calibri") { fontSize = 30 # pt }. A generalized font function of type CanvasFont canvasFont => canvasFont -> Canvas () was added to Graphics.Blank.Font that can accept a Text or Font argument. The font function in Graphics.Blank remains of type Text -> Canvas (). Added a cursor function to change the browser cursor. Also added the Graphics.Blank.Cursor module containing a generalized cursor function that uses a Cursor ADT instead of Text. Added Bounded, Enum, Eq, Ix, Ord, and Show instances for more data types * Added support for more MIME types via the mime-types library

Additions * Allowed building with base-

Other * Require scotty >= 0.10 and kansas-comet >= 0.4


API changes Using Double rather than Float Generalized saveRestore to be polymorphic

API additions Added sync for forcing synchronization between the server and client Added argument specific variants of drawImage and putImageData. Added ADTs for RepeatDirection, Alignment, Baseline, LineEnds, Corner (previous used Text) Use of the colour(sic) package (Text is still allowed)

Bug fixes: * Fixed unicode escapes in strings

Additions: * Allow Images to access client-side filesystem

comments powered byDisqus