sunroof-compiler-0.2: Monadic Javascript Compiler

Safe HaskellNone

Language.Sunroof.JS.Canvas

Description

Provides bindings to the Javascript API of the HTML5 canvas element.

See http://www.w3schools.com/tags/ref_canvas.asp.

Synopsis

Documentation

data JSCanvas Source

The type of the canvas drawing context.

Instances

Show JSCanvas

Show the Javascript.

IfB JSCanvas

Can be returned in branches.

EqB JSCanvas

Reference equality, not value equality.

Sunroof JSCanvas

First-class values in Javascript.

getContext :: JSString -> JSObject -> JS t JSCanvasSource

Returns the canvas drawing context for the canvas element it is called on.

arcSource

Arguments

:: (JSNumber, JSNumber)

The x and y component of the center point.

-> JSNumber

The radius.

-> (JSNumber, JSNumber)

The angle to start and the angle to stop drawing.

-> JSCanvas 
-> JS t () 

Draws a circular arc.

arc'Source

Arguments

:: (JSNumber, JSNumber)

The x and y component of the center point.

-> JSNumber

The radius.

-> (JSNumber, JSNumber)

The angle to start and the angle to stop drawing.

-> JSBool

If the arc shall be drawn counterclockwise.

-> JSCanvas 
-> JS t () 

Draws a circular arc.

arcToSource

Arguments

:: (JSNumber, JSNumber)

The x and y coordinate of the beginning of the arc.

-> (JSNumber, JSNumber)

The x and y coordinate of the end of the arc.

-> JSNumber

The radius of the arc.

-> JSCanvas 
-> JS t () 

Creates an arc between two tangents on the canvas.

beginPath :: JSCanvas -> JS t ()Source

Begins drawing a path or resets the current path

bezierCurveToSource

Arguments

:: (JSNumber, JSNumber)

The first control point.

-> (JSNumber, JSNumber)

The second control point.

-> (JSNumber, JSNumber)

The endpoint of the curve.

-> JSCanvas 
-> JS t () 

Draws a bezier curve beginning at the current position of the context.

clearRectSource

Arguments

:: (JSNumber, JSNumber)

The top left corner of the rectanlge to clear.

-> (JSNumber, JSNumber)

The width and height of the rectangle to clear.

-> JSCanvas 
-> JS t () 

Clears the rectangle given by its location and size.

clip :: JSCanvas -> JS t ()Source

Clips a region of any shape and size from the context.

closePath :: JSCanvas -> JS t ()Source

Closes the current path by drawing a straight line back to its beginning.

createImageDataSource

Arguments

:: (JSNumber, JSNumber)

The width and hight of the new object.

-> JSCanvas 
-> JS t JSObject

Returns the new image data object.

Create a new image data object with the given size.

createImageData'Source

Arguments

:: JSObject

The other image data object.

-> JSCanvas 
-> JS t JSObject

Returns the new image data object.

Creates a new image data object with the same dimension as the given image data object. This does not copy the contents of the other object.

drawImageSource

Arguments

:: JSObject

The graphical object to draw.

-> (JSNumber, JSNumber)

The x and y coordinate of the top left corner.

-> JSCanvas 
-> JS t () 

Draws an image, video or canvas to the canvas.

drawImage'Source

Arguments

:: JSObject

The graphical object to draw.

-> (JSNumber, JSNumber)

The x and y coordinate of the top left corner.

-> (JSNumber, JSNumber)

The width and height to scale the image to.

-> JSCanvas 
-> JS t () 

Draws an image, video or canvas to the canvas.

drawImageClipSource

Arguments

:: JSObject

The graphical object to draw.

-> (JSNumber, JSNumber)

The x and y coordinate of the top left corner of the clippng area.

-> (JSNumber, JSNumber)

The width and height of the clipping area

-> (JSNumber, JSNumber)

The x and y coordinate of the top left corner.

-> (JSNumber, JSNumber)

The width and height to scale the image to.

-> JSCanvas 
-> JS t () 

Draws an image, video or canvas to the canvas. Clips the drawn object.

fill :: JSCanvas -> JS t ()Source

Fills the current path with the current fill style.

fillRectSource

Arguments

:: (JSNumber, JSNumber)

The top left corner of the rectangle.

-> (JSNumber, JSNumber)

The width and height of the rectangle.

-> JSCanvas 
-> JS t () 

Draws a filled rectangle given by its top left corner and size with the current fill style.

setFillStyle :: JSString -> JSCanvas -> JS t ()Source

Sets the fill style of the context. A color value of the form is expected.

fillTextSource

Arguments

:: JSString

The text to fill.

-> (JSNumber, JSNumber)

The x and y position of the bottom left corner of the text.

-> JSCanvas 
-> JS t () 

Fills a text with the current fill style.

fillText'Source

Arguments

:: JSString

The text to fill.

-> (JSNumber, JSNumber)

The x and y position of the bottom left corner of the text.

-> JSNumber

The maximum allowed width of the text.

-> JSCanvas 
-> JS t () 

Fills a text with the current fill style.

setFont :: JSString -> JSCanvas -> JS t ()Source

Sets the font used by the context.

getImageDataSource

Arguments

:: (JSNumber, JSNumber)

The x and y coordinate of the top left corner of the rectangle to extract.

-> (JSNumber, JSNumber)

The width and height of the rectangle.

-> JSCanvas 
-> JS t JSObject

Returns the image data object with the extracted information.

Get the image data of the specified rectanlge of the canvas.

setGlobalAlpha :: JSNumber -> JSCanvas -> JS t ()Source

Sets the global alpha value.

isPointInPathSource

Arguments

:: (JSNumber, JSNumber)

The x and y coordinate of the point to check

-> JSCanvas 
-> JS t JSBool 

Returns true if the given point is in the path and false otherwise.

setLineCap :: JSString -> JSCanvas -> JS t ()Source

Sets the line cap style to use. Possible values are: butt, round, square;

setLineJoin :: JSString -> JSCanvas -> JS t ()Source

Sets the line join style to use. Possible values are: bevel, round, meter;

lineToSource

Arguments

:: (JSNumber, JSNumber)

The x and y location the line is drawn to.

-> JSCanvas 
-> JS t () 

Create a straight line path from the current point to the given point.

setLineWidthSource

Arguments

:: JSNumber

The line new line width in pixels.

-> JSCanvas 
-> JS t () 

Sets the line width used when stroking.

miterLimit :: JSSelector JSNumberSource

Returns the miter limit used when drawing a miter line join.

setMiterLimitSource

Arguments

:: JSNumber

The new miter limit.

-> JSCanvas 
-> JS t () 

Sets the miter limit used when drawing a miter line join.

measureTextSource

Arguments

:: JSString

The text to be measured.

-> JSCanvas 
-> JS t JSObject 

Returns an object that contains the width of the specified text is pixels. See width selector.

moveToSource

Arguments

:: (JSNumber, JSNumber)

The new x and y location of the path.

-> JSCanvas 
-> JS t () 

Move the path to the given location.

putImageDataSource

Arguments

:: JSObject

The new image data.

-> (JSNumber, JSNumber)

The x and y coordinate of the top left corner.

-> JSCanvas 
-> JS t () 

Uses the given image data to replace the rectangle of the canvas at the given position.

rectSource

Arguments

:: (JSNumber, JSNumber)

The top left corner of the rectangle.

-> (JSNumber, JSNumber)

The width and height of the rectangle.

-> JSCanvas 
-> JS t () 

Creates a rectangle in the current context.

restore :: JSCanvas -> JS t ()Source

Restores the last saved paths and state of the context.

rotateSource

Arguments

:: JSNumber

The rotation angle in radians.

-> JSCanvas 
-> JS t () 

Rotates the current drawing. The rotation will only affect drawings made after the rotation.

scaleSource

Arguments

:: (JSNumber, JSNumber)

The factors to scale the width and the height with.

-> JSCanvas 
-> JS t () 

Scales the current drawing.

save :: JSCanvas -> JS t ()Source

Saves the state of the current context.

setTransformSource

Arguments

:: JSNumber

Scales the drawings horizontally.

-> JSNumber

Skew the drawings horizontally.

-> JSNumber

Skew the drawings vertically.

-> JSNumber

Scales the drawings vertically.

-> JSNumber

Moves the drawings horizontally.

-> JSNumber

Moves the drawings vertically.

-> JSCanvas 
-> JS t () 

Resets the transformation matrix to identity and then applies transform with the given paramters to it.

setShadowColorSource

Arguments

:: JSString

The color to use as shadow color.

-> JSCanvas 
-> JS t () 

Sets the shadow color property. The given string has to be a valid CSS color value or a color of the form '#XXXXXX'

setShadowBlurSource

Arguments

:: JSNumber

The blur level for the shadow in pixels.

-> JSCanvas 
-> JS t () 

Sets the blur level for shadows.

setShadowOffsetXSource

Arguments

:: JSNumber

The x offset of the shadow in pixels.

-> JSCanvas 
-> JS t () 

Sets the x offset of a shadow from a shape.

setShadowOffsetYSource

Arguments

:: JSNumber

The y offset of the shadow in pixels.

-> JSCanvas 
-> JS t () 

Sets the y offset of a shadow from a shape.

stroke :: JSCanvas -> JS t ()Source

Draws the current path using the current stroke style.

strokeRectSource

Arguments

:: (JSNumber, JSNumber)

The x and y coordinate of the top left corner.

-> (JSNumber, JSNumber)

The width and height of the rectangle.

-> JSCanvas 
-> JS t () 

Strokes a rectanlge using the current stroke style.

strokeTextSource

Arguments

:: JSString

The text to stroke.

-> (JSNumber, JSNumber)

The x and y coordinate to stroke the text at.

-> JSCanvas 
-> JS t () 

Strokes a text using the current stroke style.

setStrokeStyle :: JSString -> JSCanvas -> JS t ()Source

Sets the stroke style of the context. A color value of the form is expected.

setTextAlign :: JSString -> JSCanvas -> JS t ()Source

Sets the text alignment to be used when drawing text. Possible values are: center, end, left, right, start

setTextBaseline :: JSString -> JSCanvas -> JS t ()Source

Sets the baseline to use when drawing text. Possible values are: alphabetic, top, hanging, middle, ideographic, bottom

transformSource

Arguments

:: JSNumber

The a value.

-> JSNumber

The b value.

-> JSNumber

The c value.

-> JSNumber

The d value.

-> JSNumber

The e value.

-> JSNumber

The f value.

-> JSCanvas 
-> JS t () 

Alters the current transformation matrix. The current one is multiplied with one of the form: a b c d e f 0 0 1

translateSource

Arguments

:: (JSNumber, JSNumber)

The x and y values to translate by.

-> JSCanvas 
-> JS t () 

Translate the current drawing.

quadraticCurveToSource

Arguments

:: (JSNumber, JSNumber)

The control point of the curve.

-> (JSNumber, JSNumber)

The endpoint of the curve.

-> JSCanvas 
-> JS t () 

Create a quadratic curve to extend the current path.

width :: JSSelector JSNumberSource

Selects the width attribute.

height :: JSSelector JSNumberSource

Selects the height attribute.

data' :: JSSelector JSObjectSource

Selects the data attribute.

globalAlpha :: JSSelector JSNumberSource

Selects the global alpha attribute.

shadowColor :: JSSelector JSStringSource

Selects the shadow color attribute.

shadowBlur :: JSSelector JSNumberSource

Selects the blur level for shadows.

shadowOffsetX :: JSSelector JSNumberSource

Selects the x offset of a shadow from a shape.

shadowOffsetY :: JSSelector JSNumberSource

Selects the y offset of a shadow from a shape.

strokeStyle :: JSSelector JSStringSource

Selects the stroke style of the context.

textAlign :: JSSelector JSStringSource

Selects the text alignment to be used when drawing text. Possible values are: center, end, left, right, start

textBaseline :: JSSelector JSStringSource

Selects the baseline to use when drawing text. Possible values are: alphabetic, top, hanging, middle, ideographic, bottom

lineCap :: JSSelector JSStringSource

Sets the line cap style to use. Possible values are: butt, round, square;

lineJoin :: JSSelector JSStringSource

Selects the line join style to use. Possible values are: bevel, round, meter;

lineWidth :: JSSelector JSNumberSource

Selects the line width used when stroking.

font :: JSSelector JSStringSource

Selects the font used by the context.