diagrams-html5: HTML5 canvas backend for diagrams drawing EDSL

[ bsd3, graphics, library ] [ Propose Tags ]

This package provides a modular backend for rendering diagrams created with the diagrams EDSL using an HTML5 canvas.

[Skip to Readme]


Note: This package has metadata revisions in the cabal description newer than included in the tarball. To unpack the package including the revisions, use 'cabal get'.

Maintainer's Corner

Package maintainers

For package maintainers and hackage trustees


  • No Candidates
Versions [RSS] 1.3,,,,,,,, 1.4, 1.4.1, 1.4.2
Change log CHANGELOG.md
Dependencies base (>=4.7 && <4.19), cmdargs (>=0.6 && <0.11), containers (>=0.3 && <0.7), data-default-class (>=0.0.1 && <0.2), diagrams-core (>=1.3 && <1.6), diagrams-lib (>=1.3 && <1.6), lens (>=4.0 && <5.3), mtl (>=2.0 && <2.4), NumInstances (>=1.0 && <1.5), optparse-applicative (>=0.10 && <0.19), split (>=0.2 && <0.3), statestack (>=0.2 && <0.4), static-canvas (>=0.2 && <0.3), text (>=1.0 && <1.3 || >=2.0 && <2.1) [details]
License BSD-3-Clause
Author Jeffrey Rosenbluth
Maintainer diagrams-discuss@googlegroups.com
Revised Revision 1 made by BrentYorgey at 2023-06-22T18:38:56Z
Category Graphics
Home page http://projects.haskell.org/diagrams/
Bug tracker http://github.com/diagrams/diagrams-html5/issues
Source repo head: git clone https://github.com/diagrams/diagrams-html5.git
Uploaded by BrentYorgey at 2023-04-18T02:37:28Z
Distributions LTSHaskell:1.4.2, NixOS:1.4.2
Reverse Dependencies 1 direct, 0 indirect [details]
Downloads 7527 total (24 in the last 30 days)
Rating (no votes yet) [estimated by Bayesian average]
Your Rating
  • λ
  • λ
  • λ
Status Docs available [build log]
Last success reported on 2023-04-18 [all 1 reports]

Readme for diagrams-html5-1.4.2

[back to package description]


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.