HTML5 canvas backend for diagrams drawing EDSL


Version on this page:1.4.1
LTS Haskell 22.29:1.4.2@rev:1
Stackage Nightly 2023-12-26:1.4.2@rev:1
Latest on Hackage:1.4.2@rev:1

See all snapshots diagrams-html5 appears in

BSD-3-Clause licensed by Jeffrey Rosenbluth
Maintained by [email protected]
This version can be pinned in stack with:diagrams-html5-1.4.1@sha256:25ca082e810809300df9f9143b42b06f3c9d3c98f65abd4d870def5495bcf779,1828

Module documentation for 1.4.1


diagrams-html5 is an HTML5 Canvas backend for diagrams based on the static-canvas https://github.com/jeffreyrosenbluth/static-canvas package.

diagrams is a powerful, flexible, declarative domain-specific language for creating vector graphics, using the Haskell programming language.


cabal update && cabal install diagrams-html5


A simple example that uses diagrams-html5 to draw a the Sierpinski triangle.


import Diagrams.Prelude
import Diagrams.Backend.Html5.CmdLine

sierpinski 1 = eqTriangle 1
sierpinski n =     s
               (s ||| s) # centerX
  where s = sierpinski (n-1)

example :: Diagram B
example = sierpinski 7 # center # lw none # fc black

main = mainWith $ example # frame 0.1

Save this to file named Sierpinski.hs and compile this program:

ghc Sierpinski.hs

This will generate an executable which, when run creates an html file containing the HTML5 Canvas code to generate the diagram.

$ ./Sierpinski -o sierpinski.html -w 400

You must pass an output file name with a .html extension.

Usage: ./Sierpinksi [-w|--width WIDTH] [-h|--height HEIGHT] [-o|--output OUTPUT] [--loop] [-s|--src ARG] [-i|--interval INTERVAL]
  Command-line diagram generation.

Available options:
  -?,--help                Show this help text
  -w,--width WIDTH         Desired WIDTH of the output image
  -h,--height HEIGHT       Desired HEIGHT of the output image
  -o,--output OUTPUT       OUTPUT file
  -l,--loop                Run in a self-recompiling loop
  -s,--src ARG             Source file to watch
  -i,--interval INTERVAL   When running in a loop, check for changes every INTERVAL seconds.


v1.4.1 (2018-05-30)

  • test on GHC 8.4
  • allow optparse-applicative-0.14
  • allow lens-4.16
  • allow base-4.11
  • add Semigroup (Render Html5 V2 Double) instance

v1.4 (2016-10-26)

  • allow lens-4.15
  • allow diagrams-core-1.4
  • allow diagrams-lib-1.4

v1.3.0.7 (2016-08-16)

  • allow optparse-applicative-0.13

v1.3.0.6 (2016-06-17)

  • allow base-4.9
  • allow data-default-class-0.1

Full Changelog

v1.3.0.5 (2016-05-01)

  • allow lens-4.14

Full Changelog

v1.3.0.4 (2015-09-29)

  • Allow optparse-applicative-0.12

Full Changelog

v1.3.0.3 (2015-09-22)

  • Allow lens-4.13

Full Changelog

v1.3.0.2 (2015-07-19)

Full Changelog

v1.3.0.1 (2015-05-26)

Full Changelog

1.3 (19 April 2015)

  • initial release