Safe Haskell	Safe-Inferred
Language	Haskell2010

Graphics.UI.Threepenny.Canvas

Contents

Synopsis
Documentation

Synopsis

type Canvas = Element
type Vector = Point
type Point = (Double, Double)
data Color
- = RGB {
  - red :: Int
  - green :: Int
  - blue :: Int
  }
- | RGBA {
  - red :: Int
  - green :: Int
  - blue :: Int
  - alpha :: Double
  }
type ColorStop = (Double, Color)
data Gradient
data FillStyle
drawImage :: Element -> Vector -> Canvas -> UI ()
clearCanvas :: Canvas -> UI ()
solidColor :: Color -> FillStyle
htmlColor :: String -> FillStyle
linearGradient :: Point -> Double -> Double -> [ColorStop] -> FillStyle
horizontalLinearGradient :: Point -> Double -> Color -> Color -> FillStyle
verticalLinearGradient :: Point -> Double -> Color -> Color -> FillStyle
fillRect :: Point -> Double -> Double -> Canvas -> UI ()
fillStyle :: WriteAttr Canvas FillStyle
strokeStyle :: Attr Canvas String
lineWidth :: Attr Canvas Double
textFont :: Attr Canvas String
data TextAlign
- = Start
- | End
- | LeftAligned
- | RightAligned
- | Center
textAlign :: Attr Canvas TextAlign
beginPath :: Canvas -> UI ()
moveTo :: Point -> Canvas -> UI ()
lineTo :: Point -> Canvas -> UI ()
closePath :: Canvas -> UI ()
arc :: Point -> Double -> Double -> Double -> Canvas -> UI ()
arc' :: Point -> Double -> Double -> Double -> Bool -> Canvas -> UI ()
fill :: Canvas -> UI ()
stroke :: Canvas -> UI ()
fillText :: String -> Point -> Canvas -> UI ()
strokeText :: String -> Point -> Canvas -> UI ()

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

Instances details

Show Color Source #
Instance details Defined in Graphics.UI.Threepenny.Canvas Methods showsPrec :: Int -> Color -> ShowS # show :: Color -> String # showList :: [Color] -> ShowS #
Eq Color Source #
Instance details Defined in Graphics.UI.Threepenny.Canvas Methods (==) :: Color -> Color -> Bool # (/=) :: Color -> Color -> Bool #

type ColorStop = (Double, Color) Source #

data Gradient Source #

Instances

Instances details

Show Gradient Source #
Instance details Defined in Graphics.UI.Threepenny.Canvas Methods showsPrec :: Int -> Gradient -> ShowS # show :: Gradient -> String # showList :: [Gradient] -> ShowS #
Eq Gradient Source #
Instance details Defined in Graphics.UI.Threepenny.Canvas Methods (==) :: Gradient -> Gradient -> Bool # (/=) :: Gradient -> Gradient -> Bool #

data FillStyle Source #

Instances

Instances details

Show FillStyle Source #
Instance details Defined in Graphics.UI.Threepenny.Canvas Methods showsPrec :: Int -> FillStyle -> ShowS # show :: FillStyle -> String # showList :: [FillStyle] -> ShowS #
Eq FillStyle Source #
Instance details Defined in Graphics.UI.Threepenny.Canvas Methods (==) :: FillStyle -> FillStyle -> Bool # (/=) :: FillStyle -> FillStyle -> Bool #

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

Instances details

Read TextAlign Source #
Instance details Defined in Graphics.UI.Threepenny.Canvas Methods readsPrec :: Int -> ReadS TextAlign # readList :: ReadS [TextAlign] # readPrec :: ReadPrec TextAlign # readListPrec :: ReadPrec [TextAlign] #
Show TextAlign Source #
Instance details Defined in Graphics.UI.Threepenny.Canvas Methods showsPrec :: Int -> TextAlign -> ShowS # show :: TextAlign -> String # showList :: [TextAlign] -> ShowS #
Eq TextAlign Source #
Instance details Defined in Graphics.UI.Threepenny.Canvas Methods (==) :: TextAlign -> TextAlign -> Bool # (/=) :: TextAlign -> TextAlign -> Bool #

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.