Safe Haskell | None |
---|
Provides bindings to the Javascript API of the HTML5 canvas element.
- data JSCanvas
- getContext :: JSString -> JSObject -> JS t JSCanvas
- arc :: (JSNumber, JSNumber) -> JSNumber -> (JSNumber, JSNumber) -> JSCanvas -> JS t ()
- arc' :: (JSNumber, JSNumber) -> JSNumber -> (JSNumber, JSNumber) -> JSBool -> JSCanvas -> JS t ()
- arcTo :: (JSNumber, JSNumber) -> (JSNumber, JSNumber) -> JSNumber -> JSCanvas -> JS t ()
- beginPath :: JSCanvas -> JS t ()
- bezierCurveTo :: (JSNumber, JSNumber) -> (JSNumber, JSNumber) -> (JSNumber, JSNumber) -> JSCanvas -> JS t ()
- clearRect :: (JSNumber, JSNumber) -> (JSNumber, JSNumber) -> JSCanvas -> JS t ()
- clip :: JSCanvas -> JS t ()
- closePath :: JSCanvas -> JS t ()
- createImageData :: (JSNumber, JSNumber) -> JSCanvas -> JS t JSObject
- createImageData' :: JSObject -> JSCanvas -> JS t JSObject
- drawImage :: JSObject -> (JSNumber, JSNumber) -> JSCanvas -> JS t ()
- drawImage' :: JSObject -> (JSNumber, JSNumber) -> (JSNumber, JSNumber) -> JSCanvas -> JS t ()
- drawImageClip :: JSObject -> (JSNumber, JSNumber) -> (JSNumber, JSNumber) -> (JSNumber, JSNumber) -> (JSNumber, JSNumber) -> JSCanvas -> JS t ()
- fill :: JSCanvas -> JS t ()
- fillRect :: (JSNumber, JSNumber) -> (JSNumber, JSNumber) -> JSCanvas -> JS t ()
- setFillStyle :: JSString -> JSCanvas -> JS t ()
- fillText :: JSString -> (JSNumber, JSNumber) -> JSCanvas -> JS t ()
- fillText' :: JSString -> (JSNumber, JSNumber) -> JSNumber -> JSCanvas -> JS t ()
- setFont :: JSString -> JSCanvas -> JS t ()
- getImageData :: (JSNumber, JSNumber) -> (JSNumber, JSNumber) -> JSCanvas -> JS t JSObject
- setGlobalAlpha :: JSNumber -> JSCanvas -> JS t ()
- isPointInPath :: (JSNumber, JSNumber) -> JSCanvas -> JS t JSBool
- setLineCap :: JSString -> JSCanvas -> JS t ()
- setLineJoin :: JSString -> JSCanvas -> JS t ()
- lineTo :: (JSNumber, JSNumber) -> JSCanvas -> JS t ()
- setLineWidth :: JSNumber -> JSCanvas -> JS t ()
- miterLimit :: JSSelector JSNumber
- setMiterLimit :: JSNumber -> JSCanvas -> JS t ()
- measureText :: JSString -> JSCanvas -> JS t JSObject
- moveTo :: (JSNumber, JSNumber) -> JSCanvas -> JS t ()
- putImageData :: JSObject -> (JSNumber, JSNumber) -> JSCanvas -> JS t ()
- rect :: (JSNumber, JSNumber) -> (JSNumber, JSNumber) -> JSCanvas -> JS t ()
- restore :: JSCanvas -> JS t ()
- rotate :: JSNumber -> JSCanvas -> JS t ()
- scale :: (JSNumber, JSNumber) -> JSCanvas -> JS t ()
- save :: JSCanvas -> JS t ()
- setTransform :: JSNumber -> JSNumber -> JSNumber -> JSNumber -> JSNumber -> JSNumber -> JSCanvas -> JS t ()
- setShadowColor :: JSString -> JSCanvas -> JS t ()
- setShadowBlur :: JSNumber -> JSCanvas -> JS t ()
- setShadowOffsetX :: JSNumber -> JSCanvas -> JS t ()
- setShadowOffsetY :: JSNumber -> JSCanvas -> JS t ()
- stroke :: JSCanvas -> JS t ()
- strokeRect :: (JSNumber, JSNumber) -> (JSNumber, JSNumber) -> JSCanvas -> JS t ()
- strokeText :: JSString -> (JSNumber, JSNumber) -> JSCanvas -> JS t ()
- setStrokeStyle :: JSString -> JSCanvas -> JS t ()
- setTextAlign :: JSString -> JSCanvas -> JS t ()
- setTextBaseline :: JSString -> JSCanvas -> JS t ()
- transform :: JSNumber -> JSNumber -> JSNumber -> JSNumber -> JSNumber -> JSNumber -> JSCanvas -> JS t ()
- translate :: (JSNumber, JSNumber) -> JSCanvas -> JS t ()
- quadraticCurveTo :: (JSNumber, JSNumber) -> (JSNumber, JSNumber) -> JSCanvas -> JS t ()
- width :: JSSelector JSNumber
- height :: JSSelector JSNumber
- data' :: JSSelector JSObject
- globalAlpha :: JSSelector JSNumber
- shadowColor :: JSSelector JSString
- shadowBlur :: JSSelector JSNumber
- shadowOffsetX :: JSSelector JSNumber
- shadowOffsetY :: JSSelector JSNumber
- strokeStyle :: JSSelector JSString
- textAlign :: JSSelector JSString
- textBaseline :: JSSelector JSString
- lineCap :: JSSelector JSString
- lineJoin :: JSSelector JSString
- lineWidth :: JSSelector JSNumber
- font :: JSSelector JSString
Documentation
The type of the canvas drawing context.
getContext :: JSString -> JSObject -> JS t JSCanvasSource
Returns the canvas drawing context for the canvas element it is called on.
:: (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.
:: (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.
:: (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.
:: (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.
:: (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.
closePath :: JSCanvas -> JS t ()Source
Closes the current path by drawing a straight line back to its beginning.
:: (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.
:: 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.
:: 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.
:: 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.
:: 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.
:: (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
:: 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.
:: 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.
:: (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.
Returns true if the given point is in the path and false otherwise.
setLineCap :: JSString -> JSCanvas -> JS t ()Source
setLineJoin :: JSString -> JSCanvas -> JS t ()Source
Create a straight line path from the current point to the given point.
Sets the line width used when stroking.
miterLimit :: JSSelector JSNumberSource
Returns the miter limit used when drawing a miter line join.
Sets the miter limit used when drawing a miter line join.
Returns an object that contains the width of the specified text is pixels.
See width
selector.
Move the path to the given location.
:: 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.
:: (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.
Rotates the current drawing. The rotation will only affect drawings made after the rotation.
Scales the current drawing.
:: 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.
Sets the shadow color property. The given string has to be a valid CSS color value or a color of the form '#XXXXXX'
Sets the blur level for shadows.
Sets the x offset of a shadow from a shape.
Sets the y offset of a shadow from a shape.
:: (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.
:: 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
setTextAlign :: JSString -> JSCanvas -> JS t ()Source
setTextBaseline :: JSString -> JSCanvas -> JS t ()Source
Sets the baseline to use when drawing text. Possible values are: alphabetic, top, hanging, middle, ideographic, bottom
:: JSNumber | The |
-> JSNumber | The |
-> JSNumber | The |
-> JSNumber | The |
-> JSNumber | The |
-> JSNumber | The |
-> 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 the current drawing.
:: (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.
textBaseline :: JSSelector JSStringSource
Selects the baseline to use when drawing text. Possible values are: alphabetic, top, hanging, middle, ideographic, bottom
lineWidth :: JSSelector JSNumberSource
Selects the line width used when stroking.
font :: JSSelector JSStringSource
Selects the font used by the context.