Graphics.Canvas
- Package
- purescript-canvas
- Repository
- paf31/purescript-canvas
This module defines foreign types and functions for working with the 2D Canvas API.
#CanvasElement Source
data CanvasElement :: Type
A canvas HTML element.
#CanvasImageSource Source
data CanvasImageSource :: Type
Opaque object for drawing elements and things to the canvas.
#Composite Source
data Composite
Enumerates the different types of composite operations and blend modes.
Constructors
SourceOver
SourceIn
SourceOut
SourceAtop
DestinationOver
DestinationIn
DestinationOut
DestinationAtop
Lighter
Copy
Xor
Multiply
Screen
Overlay
Darken
Lighten
ColorDodge
ColorBurn
HardLight
SoftLight
Difference
Exclusion
Hue
Saturation
Color
Luminosity
Instances
#Dimensions Source
type Dimensions = { height :: Number, width :: Number }
Canvas dimensions (width and height) in pixels.
#ScaleTransform Source
type ScaleTransform = { scaleX :: Number, scaleY :: Number }
An object representing a scaling transform:
- The scale factors in the
x
andy
directions,scaleX
andscaleY
.
#TranslateTransform Source
type TranslateTransform = { translateX :: Number, translateY :: Number }
An object representing a translation:
- The translation amounts in the
x
andy
directions,translateX
andtranslateY
.
#CanvasPattern Source
data CanvasPattern :: Type
Opaque object describing a pattern.
#PatternRepeat Source
#CanvasGradient Source
data CanvasGradient :: Type
Opaque object describing a gradient.
#LinearGradient Source
type LinearGradient = { x0 :: Number, x1 :: Number, y0 :: Number, y1 :: Number }
A type representing a linear gradient.
- Starting point coordinates: (
x0
,y0
) - Ending point coordinates: (
x1
,y1
)
#QuadraticCurve Source
type QuadraticCurve = { cpx :: Number, cpy :: Number, x :: Number, y :: Number }
A type representing a quadratic Bézier curve.
- Bézier control point: (
cpx
,cpy
) - Ending point coordinates: (
x
,y
)
#getCanvasElementById Source
getCanvasElementById :: String -> Effect (Maybe CanvasElement)
Get a canvas element by ID, or Nothing
if the element does not exist.
#getContext2D Source
getContext2D :: CanvasElement -> Effect Context2D
Get the 2D graphics context for a canvas element.
#getCanvasWidth Source
getCanvasWidth :: CanvasElement -> Effect Number
Get the canvas width in pixels.
#setCanvasWidth Source
setCanvasWidth :: CanvasElement -> Number -> Effect Unit
Set the canvas width in pixels.
#getCanvasHeight Source
getCanvasHeight :: CanvasElement -> Effect Number
Get the canvas height in pixels.
#setCanvasHeight Source
setCanvasHeight :: CanvasElement -> Number -> Effect Unit
Set the canvas height in pixels.
#getCanvasDimensions Source
getCanvasDimensions :: CanvasElement -> Effect Dimensions
Get the canvas dimensions in pixels.
#setCanvasDimensions Source
setCanvasDimensions :: CanvasElement -> Dimensions -> Effect Unit
Set the canvas dimensions in pixels.
#canvasToDataURL Source
canvasToDataURL :: CanvasElement -> Effect String
Create a data URL for the current canvas contents
#setFillStyle Source
setFillStyle :: Context2D -> String -> Effect Unit
Set the current fill style/color.
#setStrokeStyle Source
setStrokeStyle :: Context2D -> String -> Effect Unit
Set the current stroke style/color.
#setShadowBlur Source
setShadowBlur :: Context2D -> Number -> Effect Unit
Set the current shadow blur radius.
#setShadowOffsetX Source
setShadowOffsetX :: Context2D -> Number -> Effect Unit
Set the current shadow x-offset.
#setShadowOffsetY Source
setShadowOffsetY :: Context2D -> Number -> Effect Unit
Set the current shadow y-offset.
#setShadowColor Source
setShadowColor :: Context2D -> String -> Effect Unit
Set the current shadow color.
#setMiterLimit Source
setMiterLimit :: Context2D -> Number -> Effect Unit
Set the current miter limit.
#setLineJoin Source
setLineJoin :: Context2D -> LineJoin -> Effect Unit
Set the current line join type.
#setGlobalCompositeOperation Source
setGlobalCompositeOperation :: Context2D -> Composite -> Effect Unit
Set the current composite operation.
#setGlobalAlpha Source
setGlobalAlpha :: Context2D -> Number -> Effect Unit
Set the current global alpha level.
#strokePath Source
strokePath :: forall a. Context2D -> Effect a -> Effect a
A convenience function for drawing a stroked path.
For example:
strokePath ctx $ do
moveTo ctx 10.0 10.0
lineTo ctx 20.0 20.0
lineTo ctx 10.0 20.0
closePath ctx
#setTransform Source
setTransform :: Context2D -> Transform -> Effect Unit
Set the transformation matrix
#setTextAlign Source
setTextAlign :: Context2D -> TextAlign -> Effect Unit
Set the current text alignment.
#measureText Source
measureText :: Context2D -> String -> Effect TextMetrics
Measure some text.
#withContext Source
withContext :: forall a. Context2D -> Effect a -> Effect a
A convenience function: run the action, preserving the existing context.
For example, outside this block, the fill style is preseved:
withContext ctx $ do
setFillStyle "red" ctx
...
#tryLoadImage Source
tryLoadImage :: String -> (Maybe CanvasImageSource -> Effect Unit) -> Effect Unit
Asynchronously load an image file by specifying its path.
#createImageDataCopy Source
createImageDataCopy :: Context2D -> ImageData -> Effect ImageData
Create a copy of an image data object.
#imageDataWidth Source
imageDataWidth :: ImageData -> Int
Get the width of an ImageData
object.
#imageDataHeight Source
imageDataHeight :: ImageData -> Int
Get the height of an ImageData
object.
#imageDataBuffer Source
imageDataBuffer :: ImageData -> Uint8ClampedArray
Get the underlying buffer from an ImageData
object.
#drawImageScale Source
drawImageScale :: Context2D -> CanvasImageSource -> Number -> Number -> Number -> Number -> Effect Unit
#createPattern Source
createPattern :: Context2D -> CanvasImageSource -> PatternRepeat -> Effect CanvasPattern
Create a new canvas pattern (repeatable image).
#setPatternFillStyle Source
setPatternFillStyle :: Context2D -> CanvasPattern -> Effect Unit
Set the Context2D fillstyle to the CanvasPattern.
#createLinearGradient Source
createLinearGradient :: Context2D -> LinearGradient -> Effect CanvasGradient
Create a linear CanvasGradient.
#createRadialGradient Source
createRadialGradient :: Context2D -> RadialGradient -> Effect CanvasGradient
Create a radial CanvasGradient.
#addColorStop Source
addColorStop :: CanvasGradient -> Number -> String -> Effect Unit
Add a single color stop to a CanvasGradient.
#setGradientFillStyle Source
setGradientFillStyle :: Context2D -> CanvasGradient -> Effect Unit
Set the Context2D fillstyle to the CanvasGradient.
#quadraticCurveTo Source
quadraticCurveTo :: Context2D -> QuadraticCurve -> Effect Unit
Draw a quadratic Bézier curve.
#bezierCurveTo Source
bezierCurveTo :: Context2D -> BezierCurve -> Effect Unit
Draw a cubic Bézier curve.
- Modules
- Graphics.
Canvas