Graphics.Static

A small DSL for creating HTML5 Canvas with haskell.

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" 25 100 
  fillText "Hello static-canvas!" 25 100

main :: IO ()
main = writeCanvasDoc "example.html" 650 300 text

The static-canvas API shadows the actual Javascript API, and thus the best place to look for a more detailed definition of the canvas functions including the definitions of it's aruments see http://www.w3.org/TR/2dcontext/.

Building and Writing

evalScript :: Text -> CanvasFree a -> Builder

Evaluate a static-canvas program and return the javascript code in a Builder. The first parameter should be a unique identifier to avoid name clashes with other canvas elements in the html document.

buildScript :: Int -> Int -> CanvasFree () -> Builder

Create a Builder representing a canvas script.

buildScript' :: Int -> Int -> Text -> CanvasFree () -> Builder

More general version of buildScript, that takes a unique identifier as an additional parameter so that multiple canvas elements can be included in the same html document.

buildDoc :: Int -> Int -> CanvasFree () -> Builder

Create a Builder representing a canvas document.

writeCanvasScript :: FilePath -> Int -> Int -> CanvasFree () -> IO ()

Write a canvas script element to a file.

writeCanvasScript' :: FilePath -> Int -> Int -> Text -> CanvasFree () -> IO ()

More general version of writeCanvasScript, that takes a unique identifier as an additional parameter so that multiple canvas elements can be included in the same html document.

writeCanvasDoc :: FilePath -> Int -> Int -> CanvasFree () -> IO ()

Write a canvas document to a file.

HTML5 Canvas API

type CanvasFree = F Canvas

Paths

beginPath :: CanvasFree ()

closePath :: CanvasFree ()

fill :: CanvasFree ()

stroke :: CanvasFree ()

clip :: CanvasFree ()

moveTo :: Double -> Double -> CanvasFree ()

lineTo :: Double -> Double -> CanvasFree ()

quadraticCurveTo :: Double -> Double -> Double -> Double -> CanvasFree ()

A quadratic bezier curve.

bezierCurveTo :: Double -> Double -> Double -> Double -> Double -> Double -> CanvasFree ()

Cubic Bezier curve.

arcTo :: Double -> Double -> Double -> Double -> Double -> CanvasFree ()

arc :: Double -> Double -> Double -> Double -> Double -> Bool -> CanvasFree ()

rect :: Double -> Double -> Double -> Double -> CanvasFree ()

Line styles

lineWidth :: Double -> CanvasFree ()

Set the line width.

lineCap :: LineCapStyle -> CanvasFree ()

lineJoin :: LineJoinStyle -> CanvasFree ()

miterLimit :: Double -> CanvasFree ()

data LineCapStyle

Constructors

LineCapButt

LineCapRound

LineCapSquare

data LineJoinStyle

Constructors

LineJoinMiter

LineJoinRound

LineJoinBevel

Colors, styles and shadows

strokeStyle :: Style -> CanvasFree ()

fillStyle :: Style -> CanvasFree ()

shadowOffsetX :: Double -> CanvasFree ()

shadowOffsetY :: Double -> CanvasFree ()

shadowBlur :: Double -> CanvasFree ()

shadowColor :: Color -> CanvasFree ()

createLinearGradient :: Double -> Double -> Double -> Double -> CanvasFree Style

createRadialGradient :: Double -> Double -> Double -> Double -> Double -> Double -> CanvasFree Style

addColorStop :: Double -> Color -> Style -> CanvasFree ()

data Gradient

Constructors

LG !Int

RG !Int

createPattern :: Int -> RepeatStyle -> CanvasFree Style

data RepeatStyle

For use with createPattern

Constructors

Repeat

RepeatX

RepeatY

NoRepeat

data Color

Constructors

Hex Text

RGB !Int !Int !Int

RGBA !Int !Int !Int !Double

data Style

Constructors

ColorStyle Color

GradientStyle Gradient

PatternStyle !Int

Color utilities

rgb :: Int -> Int -> Int -> Style

rgba :: Int -> Int -> Int -> Double -> Style

Text

font :: Text -> CanvasFree ()

textAlign :: TextAlignStyle -> CanvasFree ()

textBaseline :: TextBaselineStyle -> CanvasFree ()

fillText :: Text -> Double -> Double -> CanvasFree ()

strokeText :: Text -> Double -> Double -> CanvasFree ()

data TextAlignStyle

Constructors

TextAlignStart

TextAlignEnd

TextAlignCenter

TextAlignLeft

TextAlignRight

data TextBaselineStyle

Constructors

TextBaselineTop

TextBaselineHanging

TextBaselineMiddle

TextBaselineIdeographic

TextBaselineBottom

Rectangles

clearRect :: Double -> Double -> Double -> Double -> CanvasFree ()

fillRect :: Double -> Double -> Double -> Double -> CanvasFree ()

strokeRect :: Double -> Double -> Double -> Double -> CanvasFree ()

Context

save :: CanvasFree ()

Push the current state onto the stack.

restore :: CanvasFree ()

Pop the top state of the stack.

Transformations

scale :: Double -> Double -> CanvasFree ()

rotate :: Double -> CanvasFree ()

translate :: Double -> Double -> CanvasFree ()

transform :: Double -> Double -> Double -> Double -> Double -> Double -> CanvasFree ()

setTransform :: Double -> Double -> Double -> Double -> Double -> Double -> CanvasFree ()

Images

drawImageAt :: Int -> Double -> Double -> CanvasFree ()

drawImageSize :: Int -> Double -> Double -> Double -> Double -> CanvasFree ()

drawImageCrop :: Int -> Double -> Double -> Double -> Double -> Double -> Double -> Double -> Double -> CanvasFree ()

newImage :: Text -> CanvasFree Int

onImageLoad :: Int -> CanvasFree () -> CanvasFree ()

Useful for commands that need to wait for an image to load before being called. For example

image = do
img <- newImage "http://www.staticcanvas.com/picture.png"
onImageLoad img (drawImageAt img 0 0)

Compositing

globalAlpha :: Double -> CanvasFree ()

globalCompositeOperation :: CompositeOperation -> CanvasFree ()

data CompositeOperation

Constructors

SourceAtop

SourceIn

SourceOut

SourceOver

DestinationAtop

DestinationIn

DestinationOut

DestinationOver

Darker

Xor

Copy