blank-canvas

HTML5 Canvas Graphics Library

https://github.com/ku-fpg/blank-canvas/wiki

Version on this page:	0.6.2@rev:1
LTS Haskell 24.26:	0.7.4@rev:7
Stackage Nightly 2025-12-28:	0.7.4@rev:7
Latest on Hackage:	0.7.4@rev:7

See all snapshots blank-canvas appears in

BSD-3-Clause licensed by Andy Gill and Ryan Scott

Maintained by [email protected]

This version can be pinned in stack with:blank-canvas-0.6.2@sha256:fa927c4f9533600e468a50f4211db5a6799e3728c9edadb6be5dac9ae525887d,7478

Module documentation for 0.6.2

Graphics
- Graphics.Blank

Depends on 21 packages(full list with versions):

Used by 1 package in nightly-2018-03-05(full list with versions):

diagrams-canvas

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

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 http://www.html5canvastutorials.com/ into Haskell and blank-canvas, with kind permission of Eric Rowell, author of the JavaScript HTML5 Canvas Tutorial.
FAQ	F.A.Q.

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.

Changes

0.6.2

Additions

Add Semigroup instance for Canvas

0.6.1

Fix building with aeson-1.2.2.0.

0.6

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