Safe Haskell	None
Language	Haskell98

Graphics.UI.Threepenny.Canvas

Contents

Synopsis
Documentation

Synopsis

Partial binding to the HTML5 canvas API.

Documentation

type Canvas = Element Source

type Vector = Point Source

type Point = (Double, Double) Source

data Color Source

Constructors

RGB
Fields red :: Int green :: Int blue :: Int
RGBA
Fields red :: Int green :: Int blue :: Int alpha :: Double

Instances

Eq Color
Show Color

type ColorStop = (Double, Color) Source

data Gradient Source

Instances

Eq Gradient
Show Gradient

data FillStyle Source

Instances

Eq FillStyle
Show FillStyle

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

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

clearCanvas :: Canvas -> UI () Source

Clear the canvas

solidColor :: Color -> FillStyle Source

creates a solid-color fillstyle

htmlColor :: String -> FillStyle Source

Solid color represented as a HTML string.

linearGradient Source

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 Source

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 Source

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 Source

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 Source

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

strokeStyle :: Attr Canvas String Source

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

lineWidth :: Attr Canvas Double Source

The width of lines. Default is 1.

textFont :: Attr Canvas String Source

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

data TextAlign Source

Constructors

Start
End
LeftAligned
RightAligned
Center

Instances

Eq TextAlign
Read TextAlign
Show TextAlign

textAlign :: Attr Canvas TextAlign Source

The alignment for fillText and strokeText. Default is Start.

beginPath :: Canvas -> UI () Source

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 () Source

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

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

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

closePath :: Canvas -> UI () Source

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 Source

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 () Source

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

fill :: Canvas -> UI () Source

Fills the subpaths with the current fill style.

stroke :: Canvas -> UI () Source

Strokes the subpaths with the current stroke style.

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

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 () Source

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.