blank-canvas

HTML5 Canvas Graphics Library.

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.

{-# 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

For more details, read the blank-canvas wiki.

Background

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

{-# 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.

Documentation

Other Links

• http://www.html5canvastutorials.com/
• http://www.webcodeapp.com/

Credits

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 <http://www.flickr.com/photos/77649176@N00/3776224595/>. This picture allows sharing, under the creative commons license.