Graphics.CanvasAction

type SkewTransform = { skewX :: Number, skewY :: Number }

Type synonym for skew transformations.

type MatrixTransform = { a :: Number, b :: Number, c :: Number, d :: Number, e :: Number, f :: Number }

Type synonym for matrix transformations.

data TextBaseline

Enumerates types of text baseline

Constructors

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

Instances

• Show TextBaseline

data CanvasStyle :: Type

A value that can be passed to setFillStyle and similar functions. Runtime representation should be either a String, a CanvasGradient or a CanvasPattern.

Instances

• CanvasStyleRep CanvasStyle

styleIsString :: CanvasStyle -> Boolean

styleIsGradient :: CanvasStyle -> Boolean

styleIsPattern :: CanvasStyle -> Boolean

styleToString :: CanvasStyle -> Maybe String

styleToString' :: Partial => CanvasStyle -> String

styleToGradient :: CanvasStyle -> Maybe CanvasGradient

styleToGradient' :: Partial => CanvasStyle -> CanvasGradient

styleToPattern :: CanvasStyle -> Maybe CanvasPattern

styleToPattern' :: Partial => CanvasStyle -> CanvasPattern

class CanvasStyleRep rep  where

Class describing types that can be turned into a valid CanvasStyle for use with setFillStyle and similar functions. This way, there is no need for functions like setPatternFillStyle, and values of types like Color can easily used as a fillStyle without problem.

Members

• toStyle :: rep -> CanvasStyle

Instances

• CanvasStyleRep CanvasStyle
• CanvasStyleRep String
• CanvasStyleRep Color
• CanvasStyleRep CanvasGradient
• CanvasStyleRep CanvasPattern

class CanvasColorRep rep  where

Class describing types that can be turned into a string representing a canvas color.

Members

• toColor :: rep -> String

Instances

• CanvasColorRep String
• CanvasColorRep Color

createCanvas :: forall s m. MonadEffect m => ToSize Number s => s -> m CanvasElement

Create a CanvasElement of the given size in any MonadCanvasAction

createCanvas' :: forall s m. MonadEffect m => ToSize Number s => Document -> s -> m CanvasElement

Same as createCanvas, but allows for specifying the Document object to create the canvas with

createCanvasEffect :: forall s. ToSize Number s => s -> Effect CanvasElement

Create a CanvasElement of the given size in the Effect monad

createCanvasEffect' :: forall s. ToSize Number s => Document -> s -> Effect CanvasElement

Same as createCanvasEffect, but allows for specifying the Document object to create the canvas with

getCanvasElementById :: forall m. MonadEffect m => String -> m (Maybe CanvasElement)

querySelectCanvas :: forall m. MonadEffect m => QuerySelector -> m (Maybe CanvasElement)

getContext2D :: forall m. MonadEffect m => CanvasElement -> m Context2D

getContext2DById :: forall m. MonadEffect m => String -> m (Maybe Context2D)

querySelectContext2D :: forall m. MonadEffect m => QuerySelector -> m (Maybe Context2D)

runActionOffscreen :: forall s a m. MonadEffect m => ToSize Number s => s -> CanvasActionM a -> m a

Run a CanvasActionM in a MonadEffect, on a created canvas with the provided size. This can be useful for creating patterns for use as a fillStyle or strokeStyle.

For example:

action ∷ CanvasAction
action = do
  pattern ← runActionOffscreen (20.0 >< 20.0) do
    filled "#aaf" fillRectFull
    filled "#afa" $ fillRect (makeRect 0.0 10.0 10.0 10.0)
    filled "#faa" $ fillRect (makeRect 10.0 0.0 10.0 10.0)
    imageSource >>= (_ `createPattern` Repeat)
  fillPathWith pattern do
    circle (200.0 >< 200.0) 175.0
    circle ( 50.0 ><  50.0)  50.0
    circle ( 50.0 >< 350.0)  50.0
    circle (350.0 ><  50.0)  50.0
    circle (350.0 >< 350.0)  50.0

runActionOffscreen' :: forall a m. MonadCanvasAction m => CanvasActionM a -> m a

Run a CanvasActionM in a MonadCanvasAction, on a created canvas with the same size as the "main" canvas. This can be useful for creating patterns for use as a fillStyle or strokeStyle. See runActionOffscreen for an example.

asEffect :: forall a f m. Functor f => MonadEffect m => Context2D -> f (CanvasActionM a) -> f (m a)

Runs a CanvasActionM in a MonadEffect inside a functor context. Useful for turning a function that returns a CanvasActionM into a function that returns an Effect.

withCtx :: forall a m. MonadCanvasAction m => (Context2D -> Effect a) -> m a

Convenience function for constructing MonadCanvasActions from Graphics.Canvas-style functions with no arguments apart from the Context2D.

withCtx1 :: forall b a m. MonadCanvasAction m => (Context2D -> a -> Effect b) -> (a -> m b)

Convenience function for constructing MonadCanvasActions from Graphics.Canvas-style functions with one argument apart from the Context2D.

withCtx2 :: forall c b a m. MonadCanvasAction m => (Context2D -> a -> b -> Effect c) -> (a -> b -> m c)

Convenience function for constructing MonadCanvasActions from Graphics.Canvas-style functions with two arguments apart from the Context2D.

withCtx3 :: forall d c b a m. MonadCanvasAction m => (Context2D -> a -> b -> c -> Effect d) -> (a -> b -> c -> m d)

Convenience function for constructing MonadCanvasActions from Graphics.Canvas-style functions with three arguments apart from the Context2D.

withCtx4 :: forall e d c b a m. MonadCanvasAction m => (Context2D -> a -> b -> c -> d -> Effect e) -> (a -> b -> c -> d -> m e)

Convenience function for constructing MonadCanvasActions from Graphics.Canvas-style functions with four arguments apart from the Context2D.

withCtx5 :: forall f e d c b a m. MonadCanvasAction m => (Context2D -> a -> b -> c -> d -> e -> Effect f) -> (a -> b -> c -> d -> e -> m f)

Convenience function for constructing MonadCanvasActions from Graphics.Canvas-style functions with five arguments apart from the Context2D.

withCtx6 :: forall g f e d c b a m. MonadCanvasAction m => (Context2D -> a -> b -> c -> d -> e -> f -> Effect g) -> (a -> b -> c -> d -> e -> f -> m g)

Convenience function for constructing MonadCanvasActions from Graphics.Canvas-style functions with six arguments apart from the Context2D.

withCtx7 :: forall h g f e d c b a m. MonadCanvasAction m => (Context2D -> a -> b -> c -> d -> e -> f -> g -> Effect h) -> (a -> b -> c -> d -> e -> f -> g -> m h)

Convenience function for constructing MonadCanvasActions from Graphics.Canvas-style functions with seven arguments apart from the Context2D.

withCtx8 :: forall i h g f e d c b a m. MonadCanvasAction m => (Context2D -> a -> b -> c -> d -> e -> f -> g -> h -> Effect i) -> (a -> b -> c -> d -> e -> f -> g -> h -> m i)

Convenience function for constructing MonadCanvasActions from Graphics.Canvas-style functions with eight arguments apart from the Context2D.

withCtx9 :: forall j i h g f e d c b a m. MonadCanvasAction m => (Context2D -> a -> b -> c -> d -> e -> f -> g -> h -> i -> Effect j) -> (a -> b -> c -> d -> e -> f -> g -> h -> i -> m j)

Convenience function for constructing MonadCanvasActions from Graphics.Canvas-style functions with nine arguments apart from the Context2D.

withFull :: forall a m. MonadCanvasAction m => (forall r. ToRegion Number r => r -> m a) -> m a

From a function taking some region and returning a CanvasActionM, make a CanvasActionM that calls the original function with the whole canvas as the region. This can for example be used to draw an image scaled to fill the entire canvas: withFull \r → drawImageScale r image

withMidPos :: forall a m. MonadCanvasAction m => (forall p. ToPos Number p => p -> m a) -> m a

From a function taking some position and returning a CanvasActionM, make a CanvasActionM that calls the original function with the center of the canvas as a position.

getCanvasEffect :: Context2D -> Effect CanvasElement

Get the canvas of a Context2D

getCanvas :: forall m. MonadCanvasAction m => m CanvasElement

Get the canvas as a CanvasActionM

withCanvas :: forall a m. MonadCanvasAction m => (CanvasElement -> Effect a) -> m a

Convenience function for constructing CanvasActionMs from Graphics.Canvas-style functions with no arguments apart from the CanvasElement.

withCanvas1 :: forall b a m. MonadCanvasAction m => (CanvasElement -> a -> Effect b) -> (a -> m b)

Convenience function for constructing MonadCanvasActions from Graphics.Canvas-style functions with one argument apart from the CanvasElement.

withCanvas2 :: forall c b a m. MonadCanvasAction m => (CanvasElement -> a -> b -> Effect c) -> (a -> b -> m c)

Convenience function for constructing MonadCanvasActions from Graphics.Canvas-style functions with two arguments apart from the CanvasElement.

withCanvas3 :: forall d c b a m. MonadCanvasAction m => (CanvasElement -> a -> b -> c -> Effect d) -> (a -> b -> c -> m d)

Convenience function for constructing MonadCanvasActions from Graphics.Canvas-style functions with three arguments apart from the CanvasElement.

fillRect :: forall r m. MonadCanvasAction m => ToRegion Number r => r -> m Unit

Fill a rectangular area

fillRectFull :: forall m. MonadCanvasAction m => m Unit

Fill a rectangular area that covers the entire canvas

strokeRect :: forall r m. MonadCanvasAction m => ToRegion Number r => r -> m Unit

Stroke a rectangular area

strokeRectFull :: forall m. MonadCanvasAction m => m Unit

Stroke a rectangular area that covers the entire canvas

clearRect :: forall r m. MonadCanvasAction m => ToRegion Number r => r -> m Unit

Clear a rectangular area

clearRectFull :: forall m. MonadCanvasAction m => m Unit

Clear a rectangular area that covers the entire canvas

setFillStyle :: forall r m. MonadCanvasAction m => CanvasStyleRep r => r -> m Unit

setStrokeStyle :: forall r m. MonadCanvasAction m => CanvasStyleRep r => r -> m Unit

getFillStyle :: forall m. MonadCanvasAction m => m CanvasStyle

getStrokeStyle :: forall m. MonadCanvasAction m => m CanvasStyle

filled :: forall r a m. MonadCanvasAction m => CanvasStyleRep r => r -> m a -> m a

Run a CanvasActionM with the given fillStyle, resetting it to the previous value after

stroked :: forall r a m. MonadCanvasAction m => CanvasStyleRep r => r -> m a -> m a

Run a CanvasActionM with the given strokeStyle, resetting it to the previous value after

setLineWidth :: forall m. MonadCanvasAction m => Number -> m Unit

setLineDash :: forall m. MonadCanvasAction m => Array Number -> m Unit

setShadowBlur :: forall m. MonadCanvasAction m => Number -> m Unit

setShadowOffsetX :: forall m. MonadCanvasAction m => Number -> m Unit

setShadowOffsetY :: forall m. MonadCanvasAction m => Number -> m Unit

setShadowOffset :: forall p m. MonadCanvasAction m => ToPos Number p => p -> m Unit

Set x and y shadow offset at the same time

setShadowColor :: forall r m. MonadCanvasAction m => CanvasColorRep r => r -> m Unit

setMiterLimit :: forall m. MonadCanvasAction m => Number -> m Unit

setLineCap :: forall m. MonadCanvasAction m => LineCap -> m Unit

setLineJoin :: forall m. MonadCanvasAction m => LineJoin -> m Unit

setGlobalCompositeOperation :: forall m. MonadCanvasAction m => Composite -> m Unit

setGlobalAlpha :: forall m. MonadCanvasAction m => Number -> m Unit

getTextAlign :: forall m. MonadCanvasAction m => m TextAlign

setTextAlign :: forall m. MonadCanvasAction m => TextAlign -> m Unit

getTextBaseline :: forall m. MonadCanvasAction m => m TextBaseline

setTextBaseline :: forall m. MonadCanvasAction m => TextBaseline -> m Unit

getFont :: forall m. MonadCanvasAction m => m String

setFont :: forall m. MonadCanvasAction m => String -> m Unit

fillText :: forall p m. MonadCanvasAction m => ToPos Number p => String -> p -> m Unit

strokeText :: forall p m. MonadCanvasAction m => ToPos Number p => String -> p -> m Unit

measureText :: forall m. MonadCanvasAction m => String -> m TextMetrics

dimensionsToSize :: forall s. FromSize Number s => Dimensions -> s

getDimensions :: forall m. MonadCanvasAction m => m Dimensions

setDimensions :: forall m. MonadCanvasAction m => Dimensions -> m Unit

getHeight :: forall m. MonadCanvasAction m => m Number

setHeight :: forall m. MonadCanvasAction m => Number -> m Unit

getWidth :: forall m. MonadCanvasAction m => m Number

setWidth :: forall m. MonadCanvasAction m => Number -> m Unit

toDataUrl :: forall m. MonadCanvasAction m => m String

Create a data URL for the current canvas contents

getImageData :: forall r m. MonadCanvasAction m => ToRegion Number r => r -> m ImageData

putImageDataFull :: forall r p m. MonadCanvasAction m => ToPos Number p => ToRegion Number r => p -> r -> ImageData -> m Unit

Render image data on the canvas. The first argument (p) is the point on the canvas to place the topleft of the data. The second argument (r) is the region of the ImageData to render.

putImageData :: forall p m. MonadCanvasAction m => ToPos Number p => p -> ImageData -> m Unit

Render image data on the canvas. The first argument (p) is the point on the canvas to place the topleft of the data.

createImageData :: forall s m. MonadCanvasAction m => ToSize Number s => s -> m ImageData

createImageDataCopy :: forall m. MonadCanvasAction m => ImageData -> m ImageData

imageSource :: forall m. MonadCanvasAction m => m CanvasImageSource

drawImage :: forall p m. MonadCanvasAction m => ToPos Number p => p -> CanvasImageSource -> m Unit

drawImageScale :: forall r m. MonadCanvasAction m => ToRegion Number r => r -> CanvasImageSource -> m Unit

Draw an image, scaled to fit the provided region

drawImageFull :: forall r m. MonadCanvasAction m => ToRegion Number r => r -> r -> CanvasImageSource -> m Unit

Draw an image on the canvas. The first arugment is the region of the image to draw, and the second argument is the region to draw it in.

tryLoadImage :: forall m. MonadCanvasAction m => String -> (Maybe CanvasImageSource -> CanvasAction) -> m Unit

Asynchronously load an image file by specifying its path and a callback CanvasAction.

tryLoadImage' :: forall m. MonadEffect m => String -> (Maybe CanvasImageSource -> Effect Unit) -> m Unit

Asynchronously load an image file by specifying its path and a callback Effect Unit.

loadImageAff :: String -> Aff CanvasImageSource

Asynchrounously load an image file by specifying its path. The returned Aff will throw an error if the image wasn't found.

setImageSmoothing :: forall m. MonadCanvasAction m => Boolean -> m Unit

Set the context's imageSmoothingEnabled property

getImageSmoothing :: forall m. MonadCanvasAction m => m Boolean

createPattern :: forall m. MonadCanvasAction m => CanvasImageSource -> PatternRepeat -> m CanvasPattern

Create a canvas pattern from an image, which can be used as a fill- or strokeStyle

createLinearGradient :: forall m. MonadCanvasAction m => LinearGradient -> m CanvasGradient

Constructs a blank linear CanvasGradient that can be modified with addColorStop.

createRadialGradient :: forall m. MonadCanvasAction m => RadialGradient -> m CanvasGradient

Constructs a blank radial CanvasGradient that can be modified with addColorStop.

addColorStop :: forall r m. MonadEffect m => CanvasColorRep r => CanvasGradient -> Number -> r -> m Unit

Note: Mutates the original CanvasGradient and returns Unit. It is recommended to construct gradients with linearGradient and radialGradient instead.

linearGradient :: forall f r m. MonadCanvasAction m => CanvasColorRep r => Foldable f => LinearGradient -> f (Tuple Number r) -> m CanvasGradient

radialGradient :: forall f r m. MonadCanvasAction m => CanvasColorRep r => Foldable f => RadialGradient -> f (Tuple Number r) -> m CanvasGradient

resetTransform_ :: forall m. MonadCanvasAction m => m Unit

setTransform_ :: forall m. MonadCanvasAction m => MatrixTransform -> m Unit

getTransform_ :: forall m. MonadCanvasAction m => m MatrixTransform

translate_ :: forall m. MonadCanvasAction m => TranslateTransform -> m Unit

scale_ :: forall m. MonadCanvasAction m => ScaleTransform -> m Unit

skew_ :: forall m. MonadCanvasAction m => SkewTransform -> m Unit

rotate_ :: forall m. MonadCanvasAction m => Number -> m Unit

matrixTransform_ :: forall m. MonadCanvasAction m => MatrixTransform -> m Unit

beginPath_ :: forall m. MonadCanvasAction m => m Unit

stroke_ :: forall m. MonadCanvasAction m => m Unit

fill_ :: forall m. MonadCanvasAction m => m Unit

clip_ :: forall m. MonadCanvasAction m => m Unit

lineTo_ :: forall p m. MonadCanvasAction m => ToPos Number p => p -> m Unit

moveTo_ :: forall p m. MonadCanvasAction m => ToPos Number p => p -> m Unit

closePath_ :: forall m. MonadCanvasAction m => m Unit

arc_ :: forall m. MonadCanvasAction m => Arc -> m Unit

rect_ :: forall r m. MonadCanvasAction m => ToRegion Number r => r -> m Unit

quadraticCurveTo_ :: forall m. MonadCanvasAction m => QuadraticCurve -> m Unit

bezierCurveTo_ :: forall m. MonadCanvasAction m => BezierCurve -> m Unit

save :: forall m. MonadCanvasAction m => m Unit

Saves the context, see save on MDN

restore :: forall m. MonadCanvasAction m => m Unit

Restores the context, see restore on MDN

restoreAfter :: forall a m. MonadCanvasAction m => m a -> m a

Runs save, then the provided action, then restore

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

An object representing a translation:

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

type TextMetrics = { width :: Number }

Text metrics:

• The text width in pixels.

data TextAlign

Enumerates types of text alignment.

Constructors

• AlignLeft
• AlignRight
• AlignCenter
• AlignStart
• AlignEnd

Instances

• Show TextAlign

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

data PatternRepeat

Enumerates the different types of pattern repetitions.

Constructors

• Repeat
• RepeatX
• RepeatY
• NoRepeat

Instances

• Show PatternRepeat

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)

data LineJoin

Enumerates the different types of line join

Constructors

• BevelJoin
• RoundJoin
• MiterJoin

data LineCap

Enumerates the different types of line cap.

Constructors

• Round
• Square
• Butt

Instances

• Eq LineCap

data ImageData :: Type

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

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

Canvas dimensions (width and height) in pixels.

data Context2D :: Type

A 2D graphics context.

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

• Show Composite

data CanvasPattern :: Type

Opaque object describing a pattern.

data CanvasImageSource :: Type

Opaque object for drawing elements and things to the canvas.

data CanvasGradient :: Type

Opaque object describing a gradient.

data CanvasElement :: Type

A canvas HTML element.

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)

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.

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.

class (MonadEffect m) <= MonadCanvasAction m  where

The MonadCanvasAction class captures those monads which support canvas actions.

Instances are provided for CanvasActionM itself, and the standard monad transformers.

liftCanvasAction can be used in any appropriate monad transformer stack to lift an action of type CanvasActionM a into the monad.

Members

• liftCanvasAction :: CanvasActionM ~> m

Instances

• MonadCanvasAction (ReaderT Context2D Effect)
• (MonadCanvasAction m) => MonadCanvasAction (ReaderT r m)
• (TypeEquals (RProxy r1) (RProxy (canvas :: CANVAS, effect :: EFFECT | r2))) => MonadCanvasAction (Run r1)
• (MonadCanvasAction m) => MonadCanvasAction (ContT r m)
• (MonadCanvasAction m) => MonadCanvasAction (ExceptT e m)
• (MonadCanvasAction m) => MonadCanvasAction (ListT m)
• (MonadCanvasAction m) => MonadCanvasAction (MaybeT m)
• (Monoid w, MonadCanvasAction m) => MonadCanvasAction (RWST r w s m)
• (MonadCanvasAction m) => MonadCanvasAction (StateT s m)
• (Monoid w, MonadCanvasAction m) => MonadCanvasAction (WriterT w m)

type CanvasActionM = ReaderT Context2D Effect

The CanvasActionM monad is a monad transformer stack, more specifically the ReaderT monad transformer applied to the Effect monad, reading a value of type Context2D.

type CanvasAction = CanvasActionM Unit

Type synonym for a CanvasActionM without a result

runAction :: forall a m. MonadEffect m => Context2D -> CanvasActionM a -> m a

Run a CanvasActionM in a MonadEffect, on the provided Context2D.

newtype QuerySelector

Constructors

• QuerySelector String

Instances

• Eq QuerySelector
• Ord QuerySelector
• Newtype QuerySelector _