Graphics.Canvas

data CanvasElement :: Type

A canvas HTML element.

data Context2D :: Type

A 2D graphics context.

data ImageData :: Type

An image data object, used to store raster data outside the canvas.

data CanvasImageSource :: Type

Opaque object for drawing elements and things to the canvas.

type Arc = { end :: Number, radius :: Number, start :: Number, x :: Number, y :: Number }

A type representing an arc object:

• The center coordinates x and y,
• The radius r,
• The starting and ending angles, start and end.

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

• Eq Composite
• Show Composite

type Dimensions = { height :: Number, width :: Number }

Canvas dimensions (width and height) in pixels.

data LineCap

Enumerates the different types of line cap.

Constructors

• Round
• Square
• Butt

Instances

• Eq LineCap

data LineJoin

Enumerates the different types of line join

Constructors

• BevelJoin
• RoundJoin
• MiterJoin

Instances

• Eq LineJoin

type Rectangle = { height :: Number, width :: Number, x :: Number, y :: Number }

A type representing a rectangle object:

• The top-left corner coordinates x and y,
• The width and height w and h.

type ScaleTransform = { scaleX :: Number, scaleY :: Number }

An object representing a scaling transform:

• The scale factors in the x and y directions, scaleX and scaleY.

type TextMetrics = { width :: Number }

Text metrics:

• The text width in pixels.

type Transform = { m11 :: Number, m12 :: Number, m21 :: Number, m22 :: Number, m31 :: Number, m32 :: Number }

An object representing a general transformation as a homogeneous matrix.

type TranslateTransform = { translateX :: Number, translateY :: Number }

An object representing a translation:

• The translation amounts in the x and y directions, translateX and translateY.

data TextAlign

Enumerates types of text alignment.

Constructors

• AlignLeft
• AlignRight
• AlignCenter
• AlignStart
• AlignEnd

Instances

• Eq TextAlign
• Show TextAlign

data TextBaseline

Enumerates types of text baseline.

Constructors

• BaselineTop
• BaselineHanging
• BaselineMiddle
• BaselineAlphabetic
• BaselineIdeographic
• BaselineBottom

Instances

• Show TextBaseline

data CanvasPattern :: Type

Opaque object describing a pattern.

data PatternRepeat

Enumerates the different types of pattern repetitions.

Constructors

• Repeat
• RepeatX
• RepeatY
• NoRepeat

Instances

• Eq PatternRepeat
• Show PatternRepeat

data CanvasGradient :: Type

Opaque object describing a gradient.

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)

type RadialGradient = { r0 :: Number, r1 :: Number, x0 :: Number, x1 :: Number, y0 :: Number, y1 :: Number }

A type representing a radial gradient.

• Starting circle center coordinates: (x0, y0)
• Starting circle radius: r0
• Ending circle center coordinates: (x1, y1)
• Ending circle radius: r1

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)

type BezierCurve = { cp1x :: Number, cp1y :: Number, cp2x :: Number, cp2y :: Number, x :: Number, y :: Number }

A type representing a cubic Bézier curve.

• First Bézier control point: (cp1x, cp1y)
• Second Bézier control point: (cp2x, cp2y)
• Ending point: (x, y)

getCanvasElementById :: String -> Effect (Maybe CanvasElement)

Get a canvas element by ID, or Nothing if the element does not exist.

getContext2D :: CanvasElement -> Effect Context2D

Get the 2D graphics context for a canvas element.

getCanvasWidth :: CanvasElement -> Effect Number

Get the canvas width in pixels.

setCanvasWidth :: CanvasElement -> Number -> Effect Unit

Set the canvas width in pixels.

getCanvasHeight :: CanvasElement -> Effect Number

Get the canvas height in pixels.

setCanvasHeight :: CanvasElement -> Number -> Effect Unit

Set the canvas height in pixels.

getCanvasDimensions :: CanvasElement -> Effect Dimensions

Get the canvas dimensions in pixels.

setCanvasDimensions :: CanvasElement -> Dimensions -> Effect Unit

Set the canvas dimensions in pixels.

canvasToDataURL :: CanvasElement -> Effect String

Create a data URL for the current canvas contents

setLineWidth :: Context2D -> Number -> Effect Unit

Set the current line width.

setLineDash :: Context2D -> Array Number -> Effect Unit

Set the current line dash pattern.

setFillStyle :: Context2D -> String -> Effect Unit

Set the current fill style/color.

setStrokeStyle :: Context2D -> String -> Effect Unit

Set the current stroke style/color.

setShadowBlur :: Context2D -> Number -> Effect Unit

Set the current shadow blur radius.

setShadowOffsetX :: Context2D -> Number -> Effect Unit

Set the current shadow x-offset.

setShadowOffsetY :: Context2D -> Number -> Effect Unit

Set the current shadow y-offset.

setShadowColor :: Context2D -> String -> Effect Unit

Set the current shadow color.

setMiterLimit :: Context2D -> Number -> Effect Unit

Set the current miter limit.

setLineCap :: Context2D -> LineCap -> Effect Unit

Set the current line cap type.

setLineJoin :: Context2D -> LineJoin -> Effect Unit

Set the current line join type.

setGlobalCompositeOperation :: Context2D -> Composite -> Effect Unit

Set the current composite operation.

setGlobalAlpha :: Context2D -> Number -> Effect Unit

Set the current global alpha level.

beginPath :: Context2D -> Effect Unit

Begin a path object.

stroke :: Context2D -> Effect Unit

Stroke the current object.

fill :: Context2D -> Effect Unit

Fill the current object.

clip :: Context2D -> Effect Unit

Clip to the current object.

lineTo :: Context2D -> Number -> Number -> Effect Unit

Move the path to the specified coordinates, drawing a line segment.

moveTo :: Context2D -> Number -> Number -> Effect Unit

Move the path to the specified coordinates, without drawing a line segment.

closePath :: Context2D -> Effect Unit

Close the current path.

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

fillPath :: forall a. Context2D -> Effect a -> Effect a

A convenience function for drawing a filled path.

For example:

fillPath ctx $ do
  moveTo ctx 10.0 10.0
  lineTo ctx 20.0 20.0
  lineTo ctx 10.0 20.0
  closePath ctx

arc :: Context2D -> Arc -> Effect Unit

Render an arc object.

rect :: Context2D -> Rectangle -> Effect Unit

Render a rectangle.

fillRect :: Context2D -> Rectangle -> Effect Unit

Fill a rectangle.

strokeRect :: Context2D -> Rectangle -> Effect Unit

Stroke a rectangle.

clearRect :: Context2D -> Rectangle -> Effect Unit

Clear a rectangle.

scale :: Context2D -> ScaleTransform -> Effect Unit

Apply a scaling transform.

rotate :: Context2D -> Number -> Effect Unit

Apply a rotation.

translate :: Context2D -> TranslateTransform -> Effect Unit

Apply a translation

transform :: Context2D -> Transform -> Effect Unit

Apply a general transformation to the current transformation matrix

setTransform :: Context2D -> Transform -> Effect Unit

Set the transformation matrix

textAlign :: Context2D -> Effect TextAlign

Get the current text alignment.

setTextAlign :: Context2D -> TextAlign -> Effect Unit

Set the current text alignment.

textBaseline :: Context2D -> Effect TextBaseline

Get the current text baseline.

setTextBaseline :: Context2D -> TextBaseline -> Effect Unit

Set the current text baseline.

font :: Context2D -> Effect String

Get the current font.

setFont :: Context2D -> String -> Effect Unit

Set the current font.

fillText :: Context2D -> String -> Number -> Number -> Effect Unit

Fill some text.

strokeText :: Context2D -> String -> Number -> Number -> Effect Unit

Stroke some text.

measureText :: Context2D -> String -> Effect TextMetrics

Measure some text.

save :: Context2D -> Effect Unit

Save the current context.

restore :: Context2D -> Effect Unit

Restore the previous context.

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 ctx "red"
  ...

tryLoadImage :: String -> (Maybe CanvasImageSource -> Effect Unit) -> Effect Unit

Asynchronously load an image file by specifying its path.

getImageData :: Context2D -> Number -> Number -> Number -> Number -> Effect ImageData

Get image data for a portion of the canvas.

putImageData :: Context2D -> ImageData -> Number -> Number -> Effect Unit

Set image data for a portion of the canvas.

putImageDataFull :: Context2D -> ImageData -> Number -> Number -> Number -> Number -> Number -> Number -> Effect Unit

Set image data for a portion of the canvas.

createImageData :: Context2D -> Number -> Number -> Effect ImageData

Create an image data object.

createImageDataCopy :: Context2D -> ImageData -> Effect ImageData

Create a copy of an image data object.

imageDataWidth :: ImageData -> Int

Get the width of an ImageData object.

imageDataHeight :: ImageData -> Int

Get the height of an ImageData object.

imageDataBuffer :: ImageData -> Uint8ClampedArray

Get the underlying buffer from an ImageData object.

canvasElementToImageSource :: CanvasElement -> CanvasImageSource

drawImage :: Context2D -> CanvasImageSource -> Number -> Number -> Effect Unit

drawImageScale :: Context2D -> CanvasImageSource -> Number -> Number -> Number -> Number -> Effect Unit

drawImageFull :: Context2D -> CanvasImageSource -> Number -> Number -> Number -> Number -> Number -> Number -> Number -> Number -> Effect Unit

createPattern :: Context2D -> CanvasImageSource -> PatternRepeat -> Effect CanvasPattern

Create a new canvas pattern (repeatable image).

setPatternFillStyle :: Context2D -> CanvasPattern -> Effect Unit

Set the Context2D fillstyle to the CanvasPattern.

createLinearGradient :: Context2D -> LinearGradient -> Effect CanvasGradient

Create a linear CanvasGradient.

createRadialGradient :: Context2D -> RadialGradient -> Effect CanvasGradient

Create a radial CanvasGradient.

addColorStop :: CanvasGradient -> Number -> String -> Effect Unit

Add a single color stop to a CanvasGradient.

setGradientFillStyle :: Context2D -> CanvasGradient -> Effect Unit

Set the Context2D fillstyle to the CanvasGradient.

quadraticCurveTo :: Context2D -> QuadraticCurve -> Effect Unit

Draw a quadratic Bézier curve.

bezierCurveTo :: Context2D -> BezierCurve -> Effect Unit

Draw a cubic Bézier curve.