Language.Sunroof.JS.Canvas

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

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

Documentation

data JSCanvas

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 JSCanvas

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

arc

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'

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.

arcTo

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

Begins drawing a path or resets the current path

bezierCurveTo

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.

clearRect

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

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

closePath :: JSCanvas -> JS t ()

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

createImageData

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'

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.

drawImage

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'

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.

drawImageClip

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

Fills the current path with the current fill style.

fillRect

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

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

fillText

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'

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

Sets the font used by the context.

getImageData

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

Sets the global alpha value.

isPointInPath

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

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

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

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

lineTo

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.

setLineWidth

Arguments

:: JSNumber

The line new line width in pixels.

-> JSCanvas

-> JS t ()

Sets the line width used when stroking.

miterLimit :: JSSelector JSNumber

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

setMiterLimit

Arguments

:: JSNumber

The new miter limit.

-> JSCanvas

-> JS t ()

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

measureText

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.

moveTo

Arguments

:: (JSNumber, JSNumber)

The new x and y location of the path.

-> JSCanvas

-> JS t ()

Move the path to the given location.

putImageData

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.

rect

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

Restores the last saved paths and state of the context.

rotate

Arguments

:: JSNumber

The rotation angle in radians.

-> JSCanvas

-> JS t ()

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

scale

Arguments

:: (JSNumber, JSNumber)

The factors to scale the width and the height with.

-> JSCanvas

-> JS t ()

Scales the current drawing.

save :: JSCanvas -> JS t ()

Saves the state of the current context.

setTransform

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.

setShadowColor

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'

setShadowBlur

Arguments

:: JSNumber

The blur level for the shadow in pixels.

-> JSCanvas

-> JS t ()

Sets the blur level for shadows.

setShadowOffsetX

Arguments

:: JSNumber

The x offset of the shadow in pixels.

-> JSCanvas

-> JS t ()

Sets the x offset of a shadow from a shape.

setShadowOffsetY

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

Draws the current path using the current stroke style.

strokeRect

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.

strokeText

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

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

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

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

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

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

transform

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

translate

Arguments

:: (JSNumber, JSNumber)

The x and y values to translate by.

-> JSCanvas

-> JS t ()

Translate the current drawing.

quadraticCurveTo

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 JSNumber

Selects the width attribute.

height :: JSSelector JSNumber

Selects the height attribute.

data' :: JSSelector JSObject

Selects the data attribute.

globalAlpha :: JSSelector JSNumber

Selects the global alpha attribute.

shadowColor :: JSSelector JSString

Selects the shadow color attribute.

shadowBlur :: JSSelector JSNumber

Selects the blur level for shadows.

shadowOffsetX :: JSSelector JSNumber

Selects the x offset of a shadow from a shape.

shadowOffsetY :: JSSelector JSNumber

Selects the y offset of a shadow from a shape.

strokeStyle :: JSSelector JSString

Selects the stroke style of the context.

textAlign :: JSSelector JSString

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

textBaseline :: JSSelector JSString

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

lineCap :: JSSelector JSString

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

lineJoin :: JSSelector JSString

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

lineWidth :: JSSelector JSNumber

Selects the line width used when stroking.

font :: JSSelector JSString

Selects the font used by the context.