Graphics.UI.Threepenny.Canvas

Synopsis

Partial binding to the HTML5 canvas API.

Documentation

type Canvas = Element

type Vector = Point

type Point = (Double, Double)

data Color

Constructors

RGB

Fields

• red :: Int
• green :: Int
• blue :: Int

RGBA

Fields

• red :: Int
• green :: Int
• blue :: Int
• alpha :: Double

Instances

Eq Color

Methods

(==) :: Color -> Color -> Bool

(/=) :: Color -> Color -> Bool

Show Color

Methods

showsPrec :: Int -> Color -> ShowS

show :: Color -> String

showList :: [Color] -> ShowS

type ColorStop = (Double, Color)

data Gradient

Instances

Eq Gradient

Methods

(==) :: Gradient -> Gradient -> Bool

(/=) :: Gradient -> Gradient -> Bool

Show Gradient

Methods

showsPrec :: Int -> Gradient -> ShowS

show :: Gradient -> String

showList :: [Gradient] -> ShowS

data FillStyle

Instances

Eq FillStyle

Methods

(==) :: FillStyle -> FillStyle -> Bool

(/=) :: FillStyle -> FillStyle -> Bool

Show FillStyle

Methods

showsPrec :: Int -> FillStyle -> ShowS

show :: FillStyle -> String

showList :: [FillStyle] -> ShowS

drawImage :: Element -> Vector -> Canvas -> UI ()

Draw the image of an image element onto the canvas at a specified position.

clearCanvas :: Canvas -> UI ()

Clear the canvas

solidColor :: Color -> FillStyle

creates a solid-color fillstyle

htmlColor :: String -> FillStyle

Solid color represented as a HTML string.

linearGradient

Arguments

:: Point

The upper-left coordinate of the gradient

-> Double

The width of the gradient

-> Double

The height of the gradient

-> [ColorStop]

the color-stops for the gradient

-> FillStyle

creates a linear gradient fill style

horizontalLinearGradient

Arguments

:: Point

The upper-left coordinate of the gradient

-> Double

The width of the gradient

-> Color

The starting color of the gradient

-> Color

The ending color of the gradient

-> FillStyle

creates a simple horizontal gradient

verticalLinearGradient

Arguments

:: Point

The upper-left coordinate of the gradient

-> Double

The height of the gradient

-> Color

The starting color of the gradient

-> Color

The ending color of the gradient

-> FillStyle

creates a simple vertical gradient

fillRect

Arguments

:: Point

upper left corner

-> Double

width in pixels

-> Double

height in pixels

-> Canvas

-> UI ()

Draw a filled rectangle.

The fillStyle attribute determines the color.

fillStyle :: WriteAttr Canvas FillStyle

The Fillstyle to use inside shapes. write-only as I could not find how to consistently read the fillstyle

strokeStyle :: Attr Canvas String

The color or style to use for the lines around shapes. Default is #000 (black).

lineWidth :: Attr Canvas Double

The width of lines. Default is 1.

textFont :: Attr Canvas String

The font used for fillText and strokeText. Default is 10px sans-serif.

data TextAlign

Constructors

Start

End

LeftAligned

RightAligned

Center

Instances

Eq TextAlign

Methods

(==) :: TextAlign -> TextAlign -> Bool

(/=) :: TextAlign -> TextAlign -> Bool

Read TextAlign

Methods

readsPrec :: Int -> ReadS TextAlign

readList :: ReadS [TextAlign]

readPrec :: ReadPrec TextAlign

readListPrec :: ReadPrec [TextAlign]

Show TextAlign

Methods

showsPrec :: Int -> TextAlign -> ShowS

show :: TextAlign -> String

showList :: [TextAlign] -> ShowS

textAlign :: Attr Canvas TextAlign

The alignment for fillText and strokeText. Default is Start.

beginPath :: Canvas -> UI ()

Starts a new path by resetting the list of sub-paths. Call this function when you want to create a new path.

moveTo :: Point -> Canvas -> UI ()

Moves the starting point of a new subpath to the (x,y) coordinate.

lineTo :: Point -> Canvas -> UI ()

Connects the last point in the subpath to the (x,y) coordinates with a straight line.

closePath :: Canvas -> UI ()

Draw a straight line from the current point to the start of the path. If the shape has already been closed or has only one point, this function does nothing.

arc

Arguments

:: Point

Center of the circle of which the arc is a part.

-> Double

Radius of the circle of which the arc is a part.

-> Double

Starting angle, in radians.

-> Double

Ending angle, in radians.

-> Canvas

-> UI ()

Add a circular arc to the current path.

arc' :: Point -> Double -> Double -> Double -> Bool -> Canvas -> UI ()

Like arc, but with an extra argument that indicates whether we go in counter-clockwise (True) or clockwise (False) direction.

fill :: Canvas -> UI ()

Fills the subpaths with the current fill style.

stroke :: Canvas -> UI ()

Strokes the subpaths with the current stroke style.

fillText :: String -> Point -> Canvas -> UI ()

Render a text in solid color at a certain point on the canvas.

The fillStyle attribute determines the color. The textFont attribute determines the font used. The textAlign attributes determines the position of the text relative to the point.

strokeText :: String -> Point -> Canvas -> UI ()

Render the outline of a text at a certain point on the canvas.

The strokeStyle attribute determines the color of the outline. The textFont attribute determines the font used. The textAlign attributes determines the position of the text relative to the point.