blank-canvas-0.4.0: HTML5 Canvas Graphics Library

Safe HaskellNone




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 users a single full-window canvas, and provides many well-documented functions for rendering images.


Starting blank-canvas

blankCanvas :: Options -> (DeviceContext -> IO ()) -> IO ()Source

blankCanvas is the main entry point into blank-canvas. A typical invocation would be

{-# LANGUAGE OverloadedStrings #-}
module Main where

import Graphics.Blank

main = blankCanvas 3000 $ \ context -> do
        send context $ do
                lineWidth 10
                strokeStyle "red"

data Options Source




port :: Int

which port do we issue the blank canvas using

events :: [EventName]

which events does the canvas listen to

debug :: Bool

turn on debugging (default False)

static :: [String]

path to images, and other static artifacts

root :: String

location of the static files (default .)

middleware :: [Middleware]

extra middleware(s) to be executed. (default [local_only])


sending to the Graphics DeviceContext

data DeviceContext Source

Context is our abstact handle into a specific 2d-context inside a browser. Note that the JavaScript API concepts of 2D-Context and Canvas are conflated in blank-canvas. Therefore, there is no getContext method, rather getContext is implied (when using send).


send :: DeviceContext -> Canvas a -> IO aSource

Sends a set of Canvas commands to the canvas. Attempts to common up as many commands as possible. Should not crash.

HTML5 Canvas API

Canvas element

height :: (Image image, Num a) => image -> aSource

width :: (Image image, Num a) => image -> aSource

toDataURL :: () -> Canvas TextSource

Turn the canvas into a png data stream / data URL.


2D Context

save :: () -> Canvas ()Source

restore :: () -> Canvas ()Source


Image drawing

drawImage :: Image image => (image, [Float]) -> Canvas ()Source

drawImage takes 2, 4 or 8 floats arguments


Line styles

Colors, styles and shadows

addColorStop :: (Float, Text) -> CanvasGradient -> Canvas ()Source

add a Color stop to a Canvas Gradient.

data CanvasGradient Source

A handle to the CanvasGradient. CanvasGradients can not be destroyed.

data CanvasPattern Source

A handle to the CanvasPattern. CanvasPatterns can not be destroyed.


fill :: () -> Canvas ()Source

stroke :: () -> Canvas ()Source

clip :: () -> Canvas ()Source


data TextMetrics Source

The width argument of TextMetrics can trivially be projected out.


TextMetrics Float 



Pixel manipulation

getImageData :: (Float, Float, Float, Float) -> Canvas ImageDataSource

Capture ImageDate from the Canvas.

data ImageData Source

ImageData is a transliteration of the JavaScript ImageData, There are two Ints, and one (unboxed) Vector of Word8s. width, height, data can be projected from ImageData, length can be used to find the length.

Note: ImageData lives on the server, not the client.


ImageData !Int !Int !(Vector Word8) 

blank-canvas Extensions

Reading from Canvas

newImage :: Text -> Canvas CanvasImageSource

image takes a URL (perhaps a data URL), and returns the CanvasImage handle, _after_ loading. The assumption is you are using local images, so loading should be near instant.

data CanvasImage Source

A handle to the Image. CanvasImages can not be destroyed.

DeviceContext attributes

CanvasContext, and off-screen Canvas.

data CanvasContext Source

A handle to an offscreen canvas. CanvasContext can not be destroyed.

newCanvas :: (Int, Int) -> Canvas CanvasContextSource

Create a new, off-screen canvas buffer. Takes width and height.

with :: CanvasContext -> Canvas a -> Canvas aSource

with runs a set of canvas commands in the context of a specific canvas buffer.

myCanvasContext :: Canvas CanvasContextSource

myCanvasContext returns the current CanvasContent.


console_log :: JSArg msg => msg -> Canvas ()Source

console_log aids debugging by sending the argument to the browser console.log.

eval :: Text -> Canvas ()Source

eval executes the argument in JavaScript directly.

Drawing Utilities

clearCanvas :: Canvas ()Source

Clear the screen. Restores the default transformation matrix.

saveRestore :: Canvas () -> Canvas ()Source

Wrap a canvas computation in save / restore.

(#) :: a -> (a -> Canvas b) -> Canvas bSource

The #-operator is the Haskell analog to the .-operator in Javascript. Example:

 grd # addColorStop(0, "#8ED6FF");

This can be seen as equivalent of document.addColorStop(0, ).


trigger :: Event -> Canvas ()Source

trigger a specific named event, please.

eventQueue :: DeviceContext -> EventQueueSource

A single (typed) event queue

wait :: DeviceContext -> IO EventSource

wait for any event. blocks.

flush :: DeviceContext -> IO [Event]Source

flush all the current events, returning them all to the user. Never blocks.

data Event Source

Basic Event from Browser; see for details.



type EventName = TextSource

EventName mirrors event names from jquery, and use lower case. Possible named events

  • keypress, keydown, keyup * mouseDown, mouseenter, mousemove, mouseout, mouseover, mouseup

type EventQueue = TChan EventSource

EventQueue is a STM channel (TChan) of Events. Intentionally, EventQueue is not abstract.