Graphics.CanvasAction

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

Create an HTMLCanvasElement of the given size in any MonadCanvasAction

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

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

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

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

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

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

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

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

Run a CanvasAction 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 ∷ ∀ m. MonadCanvasAction m ⇒ m Unit
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)
  (fillWith pattern Nonzero <=< runPath) 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 m a. MonadCanvasAction m => CanvasAction a -> m a

Run a CanvasAction 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 m f a. Functor f => MonadEffect m => Context2D -> f (CanvasAction a) -> f (m a)

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

launchCanvasAff :: forall a. Context2D -> CanvasAff a -> Effect (Fiber a)

launchCanvasAff_ :: forall a. Context2D -> CanvasAff a -> Effect Unit

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

From a function taking some region and returning a MonadCanvasAction, make a MonadCanvasAction 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 m a. MonadCanvasAction m => (Vector2 Number -> m a) -> m a

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

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

Get the canvas in a MonadCanvasAction

getCtx :: forall m. MonadCanvasAction m => m Context2D

Get the canvas rendering context in a MonadCanvasAction

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

data CanvasStyleRep :: 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

• CanvasStyle CanvasStyleRep

styleIsString :: CanvasStyleRep -> Boolean

styleIsGradient :: CanvasStyleRep -> Boolean

styleIsPattern :: CanvasStyleRep -> Boolean

styleToString :: CanvasStyleRep -> Maybe String

styleToGradient :: CanvasStyleRep -> Maybe CanvasGradient

styleToPattern :: CanvasStyleRep -> Maybe CanvasPattern

class CanvasStyle style  where

Class describing types that can be turned into a valid CanvasStyleRep

Members

• toStyleRep :: style -> CanvasStyleRep

Instances

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

class CanvasColor color  where

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

Members

• toColorRep :: color -> String

Instances

• CanvasColor String
• CanvasColor Color

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

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

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

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

filled :: forall m a style. MonadCanvasAction m => CanvasStyle style => style -> m a -> m a

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

stroked :: forall m a style. MonadCanvasAction m => CanvasStyle style => style -> m a -> m a

Run a MonadCanvasAction 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 m p. MonadCanvasAction m => ToPos Number p => p -> m Unit

Set x and y shadow offset at the same time

setShadowColor :: forall m color. MonadCanvasAction m => CanvasColor color => color -> 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 m p. MonadCanvasAction m => ToPos Number p => String -> p -> m Unit

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

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

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 m r. MonadCanvasAction m => ToRegion Number r => r -> m ImageData

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 :: 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 :: forall m s. 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 m p. MonadCanvasAction m => ToPos Number p => p -> CanvasImageSource -> m Unit

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

Draw an image, scaled to fit the provided region

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 source image to draw, and the second argument is the region on the canvas to draw it in.

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

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

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 :: forall m. MonadAff m => String -> m CanvasImageSource

Asynchrounously load an image file by specifying its path. The returned MonadAff 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

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

Create a linear gradient from a start point, end point, and a foldable of color stops.

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

Create a radial gradient from a starting circle, ending circle, and a foldable of color stops.

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 m color. MonadEffect m => CanvasColor color => CanvasGradient -> Number -> color -> m Unit

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

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

Runs save, then the provided action, then restore

type TextMetrics = { width :: Number }

Text metrics:

• The text width in pixels.

data TextBaseline

Enumerates types of text baseline.

Constructors

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

Instances

• Show TextBaseline

data TextAlign

Enumerates types of text alignment.

Constructors

• AlignLeft
• AlignRight
• AlignCenter
• AlignStart
• AlignEnd

Instances

• Eq TextAlign
• Show TextAlign

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

data PatternRepeat

Enumerates the different types of pattern repetitions.

Constructors

• Repeat
• RepeatX
• RepeatY
• NoRepeat

Instances

• Eq PatternRepeat
• 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

Instances

• Eq LineJoin

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

• Eq Composite
• 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.

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 CanvasAction, CanvasAff, and the standard monad transformers.

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

Members

• liftCanvasAction :: CanvasAction ~> m

Instances

• MonadCanvasAction CanvasAction
• MonadCanvasAction CanvasAff
• (MonadCanvasAction m) => MonadCanvasAction (ReaderT r m)
• (TypeEquals (Proxy r1) (Proxy (RowApply CTX (RowApply 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)

class (MonadAff m, MonadCanvasAction m) <= MonadCanvasAff m  where

The MonadCanvasAff class captures those monads which support canvas actions and Affs.

Instances are provided for CanvasAff and the standard monad transformers.

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

Members

• liftCanvasAff :: CanvasAff ~> m

Instances

• MonadCanvasAff CanvasAff
• (MonadCanvasAff m) => MonadCanvasAff (ReaderT r m)
• (TypeEquals (Proxy r1) (Proxy (RowApply CTX (RowApply AFF (RowApply EFFECT r2))))) => MonadCanvasAff (Run r1)
• (MonadCanvasAff m) => MonadCanvasAff (ContT r m)
• (MonadCanvasAff m) => MonadCanvasAff (ExceptT e m)
• (MonadCanvasAff m) => MonadCanvasAff (ListT m)
• (MonadCanvasAff m) => MonadCanvasAff (MaybeT m)
• (Monoid w, MonadCanvasAff m) => MonadCanvasAff (RWST r w s m)
• (MonadCanvasAff m) => MonadCanvasAff (StateT s m)
• (Monoid w, MonadCanvasAff m) => MonadCanvasAff (WriterT w m)

type CanvasAff = ReaderT Context2D Aff

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

type CanvasAction = ReaderT Context2D Effect

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

runCanvasAff :: forall m a. MonadAff m => Context2D -> CanvasAff a -> m a

Run a CanvasAff in a MonadAff, on the provided Context2D.

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

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

newtype QuerySelector

Constructors

• QuerySelector String

Instances

• Eq QuerySelector
• Ord QuerySelector
• Newtype QuerySelector _