threepenny-gui-0.9.4.1: GUI framework that uses the web browser as a display.
Safe HaskellSafe-Inferred
LanguageHaskell2010

Graphics.UI.Threepenny.Canvas

Synopsis

Synopsis

Partial binding to the HTML5 canvas API.

Documentation

data Color Source #

Constructors

RGB 

Fields

RGBA 

Fields

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 #

data Gradient Source #

Instances

Instances details
Show Gradient Source # 
Instance details

Defined in Graphics.UI.Threepenny.Canvas

Eq Gradient Source # 
Instance details

Defined in Graphics.UI.Threepenny.Canvas

data FillStyle Source #

Instances

Instances details
Show FillStyle Source # 
Instance details

Defined in Graphics.UI.Threepenny.Canvas

Eq FillStyle Source # 
Instance details

Defined in Graphics.UI.Threepenny.Canvas

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.

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.