sneathlane-haste-2: A compositional web UI library, which draws to a Canvas element

Safe HaskellNone





data Graphic Source

The Graphic type


QuadraticPath PathStyle Point [(Point, Point)]

A path made up of quadratic Bezier curves, start point + (control point, end point) list.

Text TextStyle Point JSString

Text string, point indicates top left of text bounding box

BlankGraphic Rect

Invisible graphic which takes up space. Useful for e.g. a spacer.


drawGraphic :: Graphic -> Point -> Picture () Source

Draw a graphic to a canvas, with the given point as the top left

graphicBounds :: Graphic -> Rect Source

Find a rectangle that contains the entire graphic

inGraphic :: Point -> Graphic -> Bool Source

Determine if a point is inside a graphic.

A point is considered inside a text string if it is within the rectangle defined by the line height and width of the text.

A point is considered inside a path if a ray from the point directly to the left crosses the path an odd number of times. This works as expected for closed non-intersecting paths.

Auxiliary Types

type Point = (Double, Double) Source

A point, represented as (x,y); following browser convention, positive x points right and positive y points downward.

data Rect Source

A rectangle, stored as left, top, width, height

data Color Source

An RGBA color, each number should be between 0 and 1. Future version will include gradients.

data PathStyle Source

Determines how a path is drawn. Stroke includes width as well as color.



data TextStyle Source

Determines how a text string is drawn to the canvas.


data Canvas :: *

A canvas; a viewport into which a picture can be rendered. The origin of the coordinate system used by the canvas is the top left corner of the canvas element. JS representation is a reference to the backing canvas element.

data Picture a :: * -> *

A picture that can be drawn onto a canvas.

render :: MonadIO m => Canvas -> Picture a -> m a

Clear a canvas, then draw a picture onto it.

getCanvas :: MonadIO m => Elem -> m (Maybe Canvas)

Create a 2D drawing context from a DOM element.