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. Functions from this module can be used with any MonadCanvasActionM, which is a type class with instances for monads which support canvas actions. Instances are provided for CanvasActionM, Run, and the standard monad transformers.

#SkewTransform Source

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

Type synonym for skew transformations.

#MatrixTransform Source

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

Type synonym for matrix transformations.

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

Instances

#CanvasColorRep Source

class CanvasColorRep rep  where

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

Members

Instances

#createCanvas Source

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

Create a CanvasElement of the given size in any MonadCanvasAction

#createCanvas' Source

createCanvas' :: forall m s. 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 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

#querySelectCanvas Source

#getContext2D Source

#getContext2DById Source

#querySelectContext2D Source

#runActionOffscreen Source

runActionOffscreen :: forall m a s. 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' Source

runActionOffscreen' :: forall m a. 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 Source

asEffect :: forall m f a. 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 Source

withCtx :: forall m a. 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 Source

withCtx1 :: forall m a b. 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 Source

withCtx2 :: forall m a b c. 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 Source

withCtx3 :: forall m a b c d. 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 Source

withCtx4 :: forall m a b c d e. 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 Source

withCtx5 :: forall m a b c d e f. 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 Source

withCtx6 :: forall m a b c d e f g. 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 Source

withCtx7 :: forall m a b c d e f g h. 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 Source

withCtx8 :: forall m a b c d e f g h i. 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 Source

withCtx9 :: forall m a b c d e f g h i j. 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 Source

withFull :: forall m a. 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 Source

withMidPos :: forall m a. 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 Source

getCanvasEffect :: Context2D -> Effect CanvasElement

Get the canvas of a Context2D

#getCanvas Source

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

Get the canvas as a CanvasActionM

#withCanvas Source

withCanvas :: forall m a. 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 Source

withCanvas1 :: forall m a b. 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 Source

withCanvas2 :: forall m a b c. 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 Source

withCanvas3 :: forall m a b c d. 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 Source

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

Fill a rectangular area

#fillRectFull Source

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

Fill a rectangular area that covers the entire canvas

#strokeRect Source

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

Stroke a rectangular area

#strokeRectFull Source

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

Stroke a rectangular area that covers the entire canvas

#clearRect Source

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

Clear a rectangular area

#clearRectFull Source

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

Clear a rectangular area that covers the entire canvas

#setFillStyle Source

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

#setStrokeStyle Source

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

#getFillStyle Source

#getStrokeStyle Source

#filled Source

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

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

#stroked Source

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

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

#setLineWidth Source

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

#setLineDash Source

#setShadowBlur Source

#setShadowOffsetX Source

#setShadowOffsetY Source

#setShadowOffset Source

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

Set x and y shadow offset at the same time

#setShadowColor Source

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

#setMiterLimit Source

#setLineCap Source

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

#setLineJoin Source

#setGlobalCompositeOperation Source

#setGlobalAlpha Source

#getTextAlign Source

#setTextAlign Source

#getTextBaseline Source

#setTextBaseline Source

#getFont Source

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

#setFont Source

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

#fillText Source

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

#strokeText Source

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

#measureText Source

#dimensionsToSize Source

#getDimensions Source

#setDimensions Source

#getHeight Source

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

#setHeight Source

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

#getWidth Source

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

#setWidth Source

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

#toDataUrl Source

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

Create a data URL for the current canvas contents

#getImageData Source

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

#putImageDataFull Source

putImageDataFull :: forall m p r. 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 Source

putImageData :: forall m p. 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 Source

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

#createImageDataCopy Source

#drawImage Source

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

#drawImageScale Source

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

Draw an image, scaled to fit the provided region

#drawImageFull Source

drawImageFull :: forall m r. 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 Source

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

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 Source

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 Source

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

Set the context's imageSmoothingEnabled property

#getImageSmoothing Source

#createPattern Source

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 Source

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

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

#createRadialGradient Source

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

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

#addColorStop Source

addColorStop :: forall m r. 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 Source

#radialGradient Source

#resetTransform_ Source

#setTransform_ Source

#getTransform_ Source

#scale_ Source

#skew_ Source

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

#rotate_ Source

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

#matrixTransform_ Source

#beginPath_ Source

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

#stroke_ Source

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

#fill_ Source

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

#clip_ Source

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

#lineTo_ Source

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

#moveTo_ Source

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

#closePath_ Source

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

#arc_ Source

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

#rect_ Source

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

#quadraticCurveTo_ Source

#bezierCurveTo_ Source

#save Source

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

Saves the context, see save on MDN

#restore Source

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

Restores the context, see restore on MDN

#restoreAfter Source

restoreAfter :: forall m a. MonadCanvasAction m => m a -> m 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

#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

#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

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

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

Re-exports from Graphics.CanvasAction.Class

#MonadCanvasAction Source

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

Instances

Re-exports from Graphics.CanvasAction.Types

#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

#runAction Source

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

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

Re-exports from Web.DOM.ParentNode

#QuerySelector

newtype QuerySelector

Constructors

  • QuerySelector String

Instances

  • Eq QuerySelector
  • Ord QuerySelector
  • Newtype QuerySelector _