Module

Graphics.CanvasAction

Package: purescript-canvas-action
Repository: 3ddyy/purescript-canvas-action

This module defines all functions from Graphics.Canvas (and some extra) as functions without the Context2D parameter, and in the CanvasActionM monad instead of the Effect monad. This is to make canvas actions easily composable without having to worry about passing the Context2D to every single function. They can be composed using do notation / bind or applicative composition (<*>, <*, and *>). Semigroup composition (<>) also works if the return types are the same and also a Semigroup (this includes Unit). It also has a MonadRec instance.

#SkewTransform Source

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

Type synonym for skew transformations.

#FullMatrixTransform Source

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

Type synonym for full matrix transformations.

#TextBaseline Source

data TextBaseline

Enumerates types of text baseline

Constructors

Instances

Show TextBaseline

#CanvasStyle Source

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 Source

styleIsString :: CanvasStyle -> Boolean

#styleIsGradient Source

styleIsGradient :: CanvasStyle -> Boolean

#styleIsPattern Source

styleIsPattern :: CanvasStyle -> Boolean

#styleToString Source

styleToString :: CanvasStyle -> Maybe String

#styleToString' Source

styleToString' :: Partial => CanvasStyle -> String

#styleToGradient Source

styleToGradient :: CanvasStyle -> Maybe CanvasGradient

#styleToGradient' Source

styleToGradient' :: Partial => CanvasStyle -> CanvasGradient

#styleToPattern Source

styleToPattern :: CanvasStyle -> Maybe CanvasPattern

#styleToPattern' Source

styleToPattern' :: Partial => CanvasStyle -> CanvasPattern

#CanvasStyleRep Source

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

#CanvasColorRep Source

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 Source

createCanvas :: forall s. ToSize Number s => s -> CanvasActionM CanvasElement

Create a CanvasElement of the given size in the CanvasActionM monad

#createCanvas' Source

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

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

#createCanvasEffect Source

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

Create a CanvasElement of the given size in the Effect monad

#createCanvasEffect' Source

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 Source

getCanvasElementById :: String -> CanvasActionM (Maybe CanvasElement)

#getContext2D Source

getContext2D :: CanvasElement -> CanvasActionM Context2D

#CanvasActionM Source

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.

#CanvasAction Source

type CanvasAction = CanvasActionM Unit

Type synonym for a CanvasActionM without a result, as it's very common

#runAction Source

runAction :: forall a. Context2D -> CanvasActionM a -> Effect a

Run a CanvasActionM in the Effect monad, on the provided Context2D

#runAction' Source

runAction' :: forall a. Context2D -> CanvasActionM a -> CanvasActionM a

Run a CanvasActionM in the CanvasActionM monad, on the provided Context2D. In essence, this allows drawing to a different canvas than the action was run on. This can be useful for caching drawings on offscreen canvases, to later draw them to the "main" canvas.

#runActionOffscreen Source

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

Run a CanvasActionM in the CanvasActionM monad, 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 >>= flip 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' Source

runActionOffscreen' :: forall a. CanvasActionM a -> CanvasActionM a

Run a CanvasActionM in the CanvasActionM monad, 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.

#withCtx Source

withCtx :: forall a. (Context2D -> Effect a) -> CanvasActionM a

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

#withCtx1 Source

withCtx1 :: forall b a. (Context2D -> a -> Effect b) -> (a -> CanvasActionM b)

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

#withCtx2 Source

withCtx2 :: forall c b a. (Context2D -> a -> b -> Effect c) -> (a -> b -> CanvasActionM c)

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

#withCtx3 Source

withCtx3 :: forall d c b a. (Context2D -> a -> b -> c -> Effect d) -> (a -> b -> c -> CanvasActionM d)

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

#withCtx4 Source

withCtx4 :: forall e d c b a. (Context2D -> a -> b -> c -> d -> Effect e) -> (a -> b -> c -> d -> CanvasActionM e)

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

#withCtx5 Source

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

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

#withCtx6 Source

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

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

#withCtx7 Source

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

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

#withCtx8 Source

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

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

#withCtx9 Source

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

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

#withFull Source

withFull :: forall a. (forall r. ToRegion Number r => r -> CanvasActionM a) -> CanvasActionM 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 Source

withMidPos :: forall a. (forall p. ToPos Number p => p -> CanvasActionM a) -> CanvasActionM 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 Source

getCanvasEffect :: Context2D -> Effect CanvasElement

Get the canvas of a Context2D

#getCanvas Source

getCanvas :: CanvasActionM CanvasElement

Get the canvas as a CanvasActionM

#withCanvas Source

withCanvas :: forall a. (CanvasElement -> Effect a) -> CanvasActionM a

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

#withCanvas1 Source

withCanvas1 :: forall b a. (CanvasElement -> a -> Effect b) -> (a -> CanvasActionM b)

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

#withCanvas2 Source

withCanvas2 :: forall c b a. (CanvasElement -> a -> b -> Effect c) -> (a -> b -> CanvasActionM c)

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

#withCanvas3 Source

withCanvas3 :: forall d c b a. (CanvasElement -> a -> b -> c -> Effect d) -> (a -> b -> c -> CanvasActionM d)

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

#fillRect Source

fillRect :: forall r. ToRegion Number r => r -> CanvasAction

Fill a rectangular area

#fillRectFull Source

fillRectFull :: CanvasAction

Fill a rectangular area that covers the entire canvas

#strokeRect Source

strokeRect :: forall r. ToRegion Number r => r -> CanvasAction

Stroke a rectangular area

#strokeRectFull Source

strokeRectFull :: CanvasAction

Stroke a rectangular area that covers the entire canvas

#clearRect Source

clearRect :: forall r. ToRegion Number r => r -> CanvasAction

Clear a rectangular area

#clearRectFull Source

clearRectFull :: CanvasAction

Clear a rectangular area that covers the entire canvas

#setFillStyle Source

setFillStyle :: forall r. CanvasStyleRep r => r -> CanvasAction

#setStrokeStyle Source

setStrokeStyle :: forall r. CanvasStyleRep r => r -> CanvasAction

#getFillStyle Source

getFillStyle :: CanvasActionM CanvasStyle

#getStrokeStyle Source

getStrokeStyle :: CanvasActionM CanvasStyle

#filled Source

filled :: forall r a. CanvasStyleRep r => r -> CanvasActionM a -> CanvasActionM a

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

#stroked Source

stroked :: forall r a. CanvasStyleRep r => r -> CanvasActionM a -> CanvasActionM a

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

#setLineWidth Source

setLineWidth :: Number -> CanvasAction

#setLineDash Source

setLineDash :: Array Number -> CanvasAction

#setShadowBlur Source

setShadowBlur :: Number -> CanvasAction

#setShadowOffsetX Source

setShadowOffsetX :: Number -> CanvasAction

#setShadowOffsetY Source

setShadowOffsetY :: Number -> CanvasAction

#setShadowOffset Source

setShadowOffset :: forall p. ToPos Number p => p -> CanvasAction

Set x and y shadow offset at the same time

#setShadowColor Source

setShadowColor :: forall r. CanvasColorRep r => r -> CanvasAction

#setMiterLimit Source

setMiterLimit :: Number -> CanvasAction

#setLineCap Source

setLineCap :: LineCap -> CanvasAction

#setLineJoin Source

setLineJoin :: LineJoin -> CanvasAction

#setGlobalCompositeOperation Source

setGlobalCompositeOperation :: Composite -> CanvasAction

#setGlobalAlpha Source

setGlobalAlpha :: Number -> CanvasAction

#getTextAlign Source

getTextAlign :: CanvasActionM TextAlign

#setTextAlign Source

setTextAlign :: TextAlign -> CanvasAction

#getTextBaseline Source

getTextBaseline :: CanvasActionM TextBaseline

#setTextBaseline Source

setTextBaseline :: TextBaseline -> CanvasAction

#getFont Source

getFont :: CanvasActionM String

#setFont Source

setFont :: String -> CanvasAction

#fillText Source

fillText :: forall p. ToPos Number p => String -> p -> CanvasAction

#strokeText Source

strokeText :: forall p. ToPos Number p => String -> p -> CanvasAction

#measureText Source

measureText :: String -> CanvasActionM TextMetrics

#dimensionsToSize Source

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

#getDimensions Source

getDimensions :: CanvasActionM Dimensions

#setDimensions Source

setDimensions :: Dimensions -> CanvasAction

#getHeight Source

getHeight :: CanvasActionM Number

#setHeight Source

setHeight :: Number -> CanvasAction

#getWidth Source

getWidth :: CanvasActionM Number

#setWidth Source

setWidth :: Number -> CanvasAction

#toDataUrl Source

toDataUrl :: CanvasActionM String

Create a data URL for the current canvas contents

#getImageData Source

getImageData :: forall r. ToRegion Number r => r -> CanvasActionM ImageData

#putImageDataFull Source

putImageDataFull :: forall r p. ToPos Number p => ToRegion Number r => p -> r -> ImageData -> CanvasAction

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 Source

putImageData :: forall p. ToPos Number p => p -> ImageData -> CanvasAction

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

#createImageData Source

createImageData :: forall s. ToSize Number s => s -> CanvasActionM ImageData

#createImageDataCopy Source

createImageDataCopy :: ImageData -> CanvasActionM ImageData

#imageSource Source

imageSource :: CanvasActionM CanvasImageSource

#drawImage Source

drawImage :: forall p. ToPos Number p => p -> CanvasImageSource -> CanvasAction

#drawImageScale Source

drawImageScale :: forall r. ToRegion Number r => r -> CanvasImageSource -> CanvasAction

Draw an image, scaled to fit the provided region

#drawImageFull Source

drawImageFull :: forall r. ToRegion Number r => r -> r -> CanvasImageSource -> CanvasAction

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.

#setImageSmoothing Source

setImageSmoothing :: Boolean -> CanvasAction

Set the context's imageSmoothingEnabled property

#getImageSmoothing Source

getImageSmoothing :: CanvasActionM Boolean

#createPattern Source

createPattern :: CanvasImageSource -> PatternRepeat -> CanvasActionM CanvasPattern

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

#createLinearGradient Source

createLinearGradient :: LinearGradient -> CanvasActionM CanvasGradient

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

#createRadialGradient Source

createRadialGradient :: RadialGradient -> CanvasActionM CanvasGradient

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

#addColorStop Source

addColorStop :: forall r. CanvasColorRep r => CanvasGradient -> Number -> r -> CanvasAction

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

#linearGradient Source

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

#radialGradient Source

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

#resetTransform Source

resetTransform :: CanvasAction

#setTransform Source

setTransform :: FullMatrixTransform -> CanvasAction

#getTransform Source

getTransform :: CanvasActionM FullMatrixTransform

#translate Source

translate :: TranslateTransform -> CanvasAction

#scale Source

scale :: ScaleTransform -> CanvasAction

#skew Source

skew :: SkewTransform -> CanvasAction

#rotate Source

rotate :: Number -> CanvasAction

#fullMatrix Source

fullMatrix :: FullMatrixTransform -> CanvasAction

#beginPath Source

beginPath :: CanvasAction

#stroke Source

stroke :: CanvasAction

#fill Source

fill :: CanvasAction

#clip Source

clip :: CanvasAction

#lineTo Source

lineTo :: forall p. ToPos Number p => p -> CanvasAction

#moveTo Source

moveTo :: forall p. ToPos Number p => p -> CanvasAction

#closePath Source

closePath :: CanvasAction

#arc Source

arc :: Arc -> CanvasAction

#rect Source

rect :: forall r. ToRegion Number r => r -> CanvasAction

#quadraticCurveTo Source

quadraticCurveTo :: QuadraticCurve -> CanvasAction

#bezierCurveTo Source

bezierCurveTo :: BezierCurve -> CanvasAction

#save Source

save :: CanvasAction

Saves the context, see save on MDN

#restore Source

restore :: CanvasAction

Restores the context, see restore on MDN

#restoreAfter Source

restoreAfter :: forall a. CanvasActionM a -> CanvasActionM a

Runs save, then the provided action, then restore

Re-exports from Graphics.Canvas

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

#TextMetrics Source

type TextMetrics = { width :: Number }

Text metrics:

The text width in pixels.

#TextAlign Source

data TextAlign

Enumerates types of text alignment.

Constructors

Instances

Show TextAlign

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

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

#PatternRepeat Source

data PatternRepeat

Enumerates the different types of pattern repetitions.

Constructors

Instances

Show PatternRepeat

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

#LineJoin Source

data LineJoin

Enumerates the different types of line join

Constructors

#LineCap Source

data LineCap

Enumerates the different types of line cap.

Constructors

Instances

Eq LineCap

#ImageData Source

data ImageData :: Type

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

#Dimensions Source

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

Canvas dimensions (width and height) in pixels.

#Context2D Source

data Context2D :: Type

A 2D graphics context.

#Composite Source

data Composite

Enumerates the different types of composite operations and blend modes.

Constructors

Instances

Show Composite

#CanvasPattern Source

data CanvasPattern :: Type

Opaque object describing a pattern.

#CanvasImageSource Source

data CanvasImageSource :: Type

Opaque object for drawing elements and things to the canvas.

#CanvasGradient Source

data CanvasGradient :: Type

Opaque object describing a gradient.

#CanvasElement Source

data CanvasElement :: Type

A canvas HTML element.

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

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

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

Modules: Graphics.CanvasAction; Graphics.CanvasAction.Path; Graphics.CanvasAction.Transformation