Module

Graphics.Canvas

Package: purescript-canvas
Repository: paf31/purescript-canvas

This module defines foreign types and functions for working with the 2D Canvas API.

#CANVAS Source

data CANVAS :: Effect

The Canvas effect denotes computations which read/write from/to the canvas.

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

#CanvasPattern Source

data CanvasPattern :: Type

Opaque object describing a pattern.

#CanvasGradient Source

data CanvasGradient :: Type

Opaque object describing a gradient.

#canvasElementToImageSource Source

canvasElementToImageSource :: CanvasElement -> CanvasImageSource

#tryLoadImage Source

tryLoadImage :: forall eff. String -> (Maybe CanvasImageSource -> Eff (canvas :: CANVAS | eff) Unit) -> Eff (canvas :: CANVAS | eff) Unit

Asynchronously load an image file by specifying its path.

#getCanvasElementById Source

getCanvasElementById :: forall eff. String -> Eff (canvas :: CANVAS | eff) (Maybe CanvasElement)

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

#getContext2D Source

getContext2D :: forall eff. CanvasElement -> Eff (canvas :: CANVAS | eff) Context2D

Get the 2D graphics context for a canvas element.

#getCanvasWidth Source

getCanvasWidth :: forall eff. CanvasElement -> Eff (canvas :: CANVAS | eff) Number

Get the canvas width in pixels.

#getCanvasHeight Source

getCanvasHeight :: forall eff. CanvasElement -> Eff (canvas :: CANVAS | eff) Number

Get the canvas height in pixels.

#setCanvasWidth Source

setCanvasWidth :: forall eff. Number -> CanvasElement -> Eff (canvas :: CANVAS | eff) CanvasElement

Set the canvas width in pixels.

#setCanvasHeight Source

setCanvasHeight :: forall eff. Number -> CanvasElement -> Eff (canvas :: CANVAS | eff) CanvasElement

Set the canvas height in pixels.

#Dimensions Source

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

Canvas dimensions (width and height) in pixels.

#getCanvasDimensions Source

getCanvasDimensions :: forall eff. CanvasElement -> Eff (canvas :: CANVAS | eff) Dimensions

Get the canvas dimensions in pixels.

#setCanvasDimensions Source

setCanvasDimensions :: forall eff. Dimensions -> CanvasElement -> Eff (canvas :: CANVAS | eff) CanvasElement

Set the canvas dimensions in pixels.

#canvasToDataURL Source

canvasToDataURL :: forall eff. CanvasElement -> Eff (canvas :: CANVAS | eff) String

Create a data URL for the current canvas contents

#setLineWidth Source

setLineWidth :: forall eff. Number -> Context2D -> Eff (canvas :: CANVAS | eff) Context2D

Set the current line width.

#setFillStyle Source

setFillStyle :: forall eff. String -> Context2D -> Eff (canvas :: CANVAS | eff) Context2D

Set the current fill style/color.

#setStrokeStyle Source

setStrokeStyle :: forall eff. String -> Context2D -> Eff (canvas :: CANVAS | eff) Context2D

Set the current stroke style/color.

#setShadowColor Source

setShadowColor :: forall eff. String -> Context2D -> Eff (canvas :: CANVAS | eff) Context2D

Set the current shadow color.

#setShadowBlur Source

setShadowBlur :: forall eff. Number -> Context2D -> Eff (canvas :: CANVAS | eff) Context2D

Set the current shadow blur radius.

#setShadowOffsetX Source

setShadowOffsetX :: forall eff. Number -> Context2D -> Eff (canvas :: CANVAS | eff) Context2D

Set the current shadow x-offset.

#setShadowOffsetY Source

setShadowOffsetY :: forall eff. Number -> Context2D -> Eff (canvas :: CANVAS | eff) Context2D

Set the current shadow y-offset.

#setMiterLimit Source

setMiterLimit :: forall eff. Number -> Context2D -> Eff (canvas :: CANVAS | eff) Context2D

Set the current miter limit.

#LineCap Source

data LineCap

Enumerates the different types of line cap.

Constructors

#setLineCap Source

setLineCap :: forall eff. LineCap -> Context2D -> Eff (canvas :: CANVAS | eff) Context2D

Set the current line cap type.

#LineJoin Source

data LineJoin

Enumerates the different types of line join

Constructors

#setLineJoin Source

setLineJoin :: forall eff. LineJoin -> Context2D -> Eff (canvas :: CANVAS | eff) Context2D

Set the current line join type.

#Composite Source

data Composite

Enumerates the different types of composite operations and blend modes.

Constructors

Instances

Show Composite

#setGlobalCompositeOperation Source

setGlobalCompositeOperation :: forall eff. Context2D -> Composite -> Eff (canvas :: CANVAS | eff) Context2D

Set the current composite operation.

#setGlobalAlpha Source

setGlobalAlpha :: forall eff. Context2D -> Number -> Eff (canvas :: CANVAS | eff) Context2D

Set the current global alpha level.

#beginPath Source

beginPath :: forall eff. Context2D -> Eff (canvas :: CANVAS | eff) Context2D

Begin a path object.

#stroke Source

stroke :: forall eff. Context2D -> Eff (canvas :: CANVAS | eff) Context2D

Stroke the current object.

#fill Source

fill :: forall eff. Context2D -> Eff (canvas :: CANVAS | eff) Context2D

Fill the current object.

#clip Source

clip :: forall eff. Context2D -> Eff (canvas :: CANVAS | eff) Context2D

Clip to the current object.

#lineTo Source

lineTo :: forall eff. Context2D -> Number -> Number -> Eff (canvas :: CANVAS | eff) Context2D

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

#moveTo Source

moveTo :: forall eff. Context2D -> Number -> Number -> Eff (canvas :: CANVAS | eff) Context2D

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

#closePath Source

closePath :: forall eff. Context2D -> Eff (canvas :: CANVAS | eff) Context2D

Close the current path.

#strokePath Source

strokePath :: forall a eff. Context2D -> Eff (canvas :: CANVAS | eff) a -> Eff (canvas :: CANVAS | eff) 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 eff. Context2D -> Eff (canvas :: CANVAS | eff) a -> Eff (canvas :: CANVAS | eff) 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

type Arc = { end :: Number, r :: 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.

#arc Source

arc :: forall eff. Context2D -> Arc -> Eff (canvas :: CANVAS | eff) Context2D

Render an arc object.

#Rectangle Source

type Rectangle = { h :: Number, w :: 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.

#rect Source

rect :: forall eff. Context2D -> Rectangle -> Eff (canvas :: CANVAS | eff) Context2D

Render a rectangle.

#fillRect Source

fillRect :: forall eff. Context2D -> Rectangle -> Eff (canvas :: CANVAS | eff) Context2D

Fill a rectangle.

#strokeRect Source

strokeRect :: forall eff. Context2D -> Rectangle -> Eff (canvas :: CANVAS | eff) Context2D

Stroke a rectangle.

#clearRect Source

clearRect :: forall eff. Context2D -> Rectangle -> Eff (canvas :: CANVAS | eff) Context2D

Clear a rectangle.

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

#scale Source

scale :: forall eff. ScaleTransform -> Context2D -> Eff (canvas :: CANVAS | eff) Context2D

Apply a scaling transform.

#rotate Source

rotate :: forall eff. Number -> Context2D -> Eff (canvas :: CANVAS | eff) Context2D

Apply a rotation.

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

#translate Source

translate :: forall eff. TranslateTransform -> Context2D -> Eff (canvas :: CANVAS | eff) Context2D

Apply a translation

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

#transform Source

transform :: forall eff. Transform -> Context2D -> Eff (canvas :: CANVAS | eff) Context2D

Apply a general transformation.

#TextAlign Source

data TextAlign

Enumerates types of text alignment.

Constructors

Instances

Show TextAlign

#textAlign Source

textAlign :: forall eff. Context2D -> Eff (canvas :: CANVAS | eff) TextAlign

Get the current text alignment.

#setTextAlign Source

setTextAlign :: forall eff. Context2D -> TextAlign -> Eff (canvas :: CANVAS | eff) Context2D

Set the current text alignment.

#TextMetrics Source

type TextMetrics = { width :: Number }

Text metrics:

The text width in pixels.

#font Source

font :: forall eff. Context2D -> Eff (canvas :: CANVAS | eff) String

Get the current font.

#setFont Source

setFont :: forall eff. String -> Context2D -> Eff (canvas :: CANVAS | eff) Context2D

Set the current font.

#fillText Source

fillText :: forall eff. Context2D -> String -> Number -> Number -> Eff (canvas :: CANVAS | eff) Context2D

Fill some text.

#strokeText Source

strokeText :: forall eff. Context2D -> String -> Number -> Number -> Eff (canvas :: CANVAS | eff) Context2D

Stroke some text.

#measureText Source

measureText :: forall eff. Context2D -> String -> Eff (canvas :: CANVAS | eff) TextMetrics

Measure some text.

#save Source

save :: forall eff. Context2D -> Eff (canvas :: CANVAS | eff) Context2D

Save the current context.

#restore Source

restore :: forall eff. Context2D -> Eff (canvas :: CANVAS | eff) Context2D

Restore the previous context.

#withContext Source

withContext :: forall a eff. Context2D -> Eff (canvas :: CANVAS | eff) a -> Eff (canvas :: CANVAS | eff) 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
  ...

#getImageData Source

getImageData :: forall eff. Context2D -> Number -> Number -> Number -> Number -> Eff (canvas :: CANVAS | eff) ImageData

Get image data for a portion of the canvas.

#putImageDataFull Source

putImageDataFull :: forall eff. Context2D -> ImageData -> Number -> Number -> Number -> Number -> Number -> Number -> Eff (canvas :: CANVAS | eff) Context2D

Set image data for a portion of the canvas.

#putImageData Source

putImageData :: forall eff. Context2D -> ImageData -> Number -> Number -> Eff (canvas :: CANVAS | eff) Context2D

Set image data for a portion of the canvas.

#createImageData Source

createImageData :: forall eff. Context2D -> Number -> Number -> Eff (canvas :: CANVAS | eff) ImageData

Create an image data object.

#createImageDataCopy Source

createImageDataCopy :: forall eff. Context2D -> ImageData -> Eff (canvas :: CANVAS | eff) 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.

#drawImage Source

drawImage :: forall eff. Context2D -> CanvasImageSource -> Number -> Number -> Eff (canvas :: CANVAS | eff) Context2D

#drawImageScale Source

drawImageScale :: forall eff. Context2D -> CanvasImageSource -> Number -> Number -> Number -> Number -> Eff (canvas :: CANVAS | eff) Context2D

#drawImageFull Source

drawImageFull :: forall eff. Context2D -> CanvasImageSource -> Number -> Number -> Number -> Number -> Number -> Number -> Number -> Number -> Eff (canvas :: CANVAS | eff) Context2D

#PatternRepeat Source

data PatternRepeat

Enumerates the different types of pattern repetitions.

Constructors

Instances

Show PatternRepeat

#createPattern Source

createPattern :: forall eff. CanvasImageSource -> PatternRepeat -> Context2D -> Eff (canvas :: CANVAS | eff) CanvasPattern

Create a new canvas pattern (repeatable image).

#setPatternFillStyle Source

setPatternFillStyle :: forall eff. CanvasPattern -> Context2D -> Eff (canvas :: CANVAS | eff) Context2D

Set the Context2D fillstyle to the CanvasPattern.

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

#createLinearGradient Source

createLinearGradient :: forall eff. LinearGradient -> Context2D -> Eff (canvas :: CANVAS | eff) CanvasGradient

Create a linear CanvasGradient.

#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

#createRadialGradient Source

createRadialGradient :: forall eff. RadialGradient -> Context2D -> Eff (canvas :: CANVAS | eff) CanvasGradient

Create a radial CanvasGradient.

#addColorStop Source

addColorStop :: forall eff. Number -> String -> CanvasGradient -> Eff (canvas :: CANVAS | eff) CanvasGradient

Add a single color stop to a CanvasGradient.

#setGradientFillStyle Source

setGradientFillStyle :: forall eff. CanvasGradient -> Context2D -> Eff (canvas :: CANVAS | eff) Context2D

Set the Context2D fillstyle to the CanvasGradient.

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

#quadraticCurveTo Source

quadraticCurveTo :: forall eff. QuadraticCurve -> Context2D -> Eff (canvas :: CANVAS | eff) Context2D

Draw a quadratic Bézier curve.

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

#bezierCurveTo Source

bezierCurveTo :: forall eff. BezierCurve -> Context2D -> Eff (canvas :: CANVAS | eff) Context2D

Draw a cubic Bézier curve.

Modules: Graphics.Canvas