static-canvas

DSL to generate HTML5 Canvas javascript.

https://github.com/jeffreyrosenbluth/static-canvas

Version on this page:0.2.0.3@rev:1
LTS Haskell 22.44:0.2.0.3@rev:2
Stackage Nightly 2023-12-26:0.2.0.3@rev:2
Latest on Hackage:0.2.0.3@rev:2

See all snapshots static-canvas appears in

BSD-3-Clause licensed by Jeffrey Rosenbluth
Maintained by [email protected]
This version can be pinned in stack with:static-canvas-0.2.0.3@sha256:876ae56659dd863acd9c59a8cdebe639a7e12aa3bebbd26eacbd83547e8975fc,1706

Module documentation for 0.2.0.3

Used by 1 package in lts-12.14(full list with versions):
diagrams-html5

static-canvas Hackage

A simple DSL for writing HTML5 Canvas in haskell and converting it to Javascript. By static we mean non-interactive, so the parts of the Canvas API that need to query the browser for run time information like isPointInPath(x, y) are not included. This turns out to be a surprisingly small part of HTML5 Canvas.

Here is Hello static-canvas with fancy text.

Text

{-# LANGUAGE OverloadedStrings #-}

module Main where

import Graphics.Static
import Graphics.Static.ColorNames

text :: CanvasFree ()
text = do
  font "italic 60pt Calibri"
  lineWidth 6
  strokeStyle blue
  fillStyle goldenrod
  textBaseline TextBaselineMiddle
  strokeText "Hello" 150 100 
  fillText "Hello World!" 150 100

main :: IO ()
main = writeCanvasDoc "Text.html" 600 400 text

There are plenty of examples in Examples. Here is one more showing how to use pattern to fill a rectangle.

line

{-# LANGUAGE OverloadedStrings #-}

module Main where

import Graphics.Static

pattern :: CanvasFree ()
pattern = do
  img <- newImage "tile.png"
  onImageLoad img $ do
    ptn <- createPattern img Repeat
    rect 0 0 400 400
    fillStyle ptn
    fill

main :: IO ()
main = writeCanvasDoc "Pattern.html" 400 400 pattern