Module

Graphics.Canvas

Package
purescript-canvas
Repository
purescript-web/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.

#Context2D Source

data Context2D :: Type

A 2D graphics context.

#ImageData Source

data ImageData :: Type

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

#CanvasImageSource Source

data CanvasImageSource :: Type

Opaque object for drawing elements and things to the canvas.

#Arc Source

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.

#Dimensions Source

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

Canvas dimensions (width and height) in pixels.

#LineCap Source

data LineCap

Enumerates the different types of line cap.

Constructors

Instances

#LineJoin Source

data LineJoin

Enumerates the different types of line join

Constructors

Instances

#Rectangle Source

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.

#ScaleTransform Source

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

An object representing a scaling transform:

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

#TextMetrics Source

type TextMetrics = { width :: Number }

Text metrics:

  • The text width in pixels.

#Transform Source

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

An object representing a general transformation as a homogeneous matrix.

#TranslateTransform Source

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

An object representing a translation:

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

#TextAlign Source

data TextAlign

Enumerates types of text alignment.

Constructors

Instances

#CanvasPattern Source

data CanvasPattern :: Type

Opaque object describing a pattern.

#PatternRepeat Source

data PatternRepeat

Enumerates the different types of pattern repetitions.

Constructors

Instances

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

#RadialGradient Source

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

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

#BezierCurve Source

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

#setLineWidth Source

setLineWidth :: Context2D -> Number -> Effect Unit

Set the current line width.

#setLineDash Source

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

Set the current line dash pattern.

#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.

#setLineCap Source

setLineCap :: Context2D -> LineCap -> Effect Unit

Set the current line cap type.

#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.

#beginPath Source

beginPath :: Context2D -> Effect Unit

Begin a path object.

#stroke Source

stroke :: Context2D -> Effect Unit

Stroke the current object.

#fill Source

fill :: Context2D -> Effect Unit

Fill the current object.

#clip Source

clip :: Context2D -> Effect Unit

Clip to the current object.

#lineTo Source

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

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

#moveTo Source

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

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

#closePath Source

closePath :: Context2D -> Effect Unit

Close the current path.

#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

#fillPath Source

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 Source

arc :: Context2D -> Arc -> Effect Unit

Render an arc object.

#rect Source

rect :: Context2D -> Rectangle -> Effect Unit

Render a rectangle.

#fillRect Source

fillRect :: Context2D -> Rectangle -> Effect Unit

Fill a rectangle.

#strokeRect Source

strokeRect :: Context2D -> Rectangle -> Effect Unit

Stroke a rectangle.

#clearRect Source

clearRect :: Context2D -> Rectangle -> Effect Unit

Clear a rectangle.

#scale Source

scale :: Context2D -> ScaleTransform -> Effect Unit

Apply a scaling transform.

#rotate Source

rotate :: Context2D -> Number -> Effect Unit

Apply a rotation.

#translate Source

translate :: Context2D -> TranslateTransform -> Effect Unit

Apply a translation

#transform Source

transform :: Context2D -> Transform -> Effect Unit

Apply a general transformation to the current transformation matrix

#setTransform Source

setTransform :: Context2D -> Transform -> Effect Unit

Set the transformation matrix

#textAlign Source

textAlign :: Context2D -> Effect TextAlign

Get the current text alignment.

#setTextAlign Source

setTextAlign :: Context2D -> TextAlign -> Effect Unit

Set the current text alignment.

#textBaseline Source

textBaseline :: Context2D -> Effect TextBaseline

Get the current text baseline.

#setTextBaseline Source

setTextBaseline :: Context2D -> TextBaseline -> Effect Unit

Set the current text baseline.

#font Source

font :: Context2D -> Effect String

Get the current font.

#setFont Source

setFont :: Context2D -> String -> Effect Unit

Set the current font.

#fillText Source

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

Fill some text.

#strokeText Source

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

Stroke some text.

#measureText Source

measureText :: Context2D -> String -> Effect TextMetrics

Measure some text.

#save Source

save :: Context2D -> Effect Unit

Save the current context.

#restore Source

restore :: Context2D -> Effect Unit

Restore the previous context.

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

#tryLoadImage Source

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

Asynchronously load an image file by specifying its path.

#getImageData Source

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

Get image data for a portion of the canvas.

#putImageData Source

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

Set image data for a portion of the canvas.

#putImageDataFull Source

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

Set image data for a portion of the canvas.

#createImageData Source

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

Create an image data object.

#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.

#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