Module

Graphics.CanvasAction

Package
purescript-canvas-action
Repository
artemisSystem/purescript-canvas-action

This module defines functions for working with the HTML5 Canvas in a MonadCanvasAction (e.g. CanvasAction). This is to make canvas actions composable without having to worry about passing a Context2D argument to every function.

#createCanvas Source

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

Create an HTMLCanvasElement of the given size in any MonadEffect

#createCanvas' Source

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 Source

#querySelectCanvas Source

#getContext2D Source

#getContext2DById Source

#querySelectContext2D Source

#runActionOffscreen Source

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

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 Source

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 Source

#launchCanvasAff_ Source

#withFull Source

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 Source

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 Source

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

Get the canvas in a MonadCanvasAction

#getCtx Source

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

Get the canvas rendering context in a MonadCanvasAction

#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

#CanvasStyleRep Source

data CanvasStyleRep

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 Source

class CanvasStyle style  where

Class describing types that can be turned into a valid CanvasStyleRep

Members

Instances

#CanvasColor Source

class (CanvasStyle color) <= CanvasColor color  where

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

Members

Instances

#toStyleRepDefault Source

toStyleRepDefault :: forall color. CanvasColor color => color -> CanvasStyleRep

A default implementation of toStyleRep using toColorRep.

#setFillStyle Source

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

#setStrokeStyle Source

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

#getFillStyle Source

#getStrokeStyle Source

#filled Source

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 Source

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

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

#tryLoadImage Source

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

#linearGradient Source

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 Source

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

#TextMetrics Source

type TextMetrics = { width :: Number }

Text metrics:

  • The text width in pixels.

#TextAlign Source

data TextAlign

Enumerates types of text alignment.

Constructors

Instances

#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

#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

Instances

#LineCap Source

data LineCap

Enumerates the different types of line cap.

Constructors

Instances

#ImageData Source

data ImageData

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

A 2D graphics context.

#CanvasPattern Source

data CanvasPattern

Opaque object describing a pattern.

#CanvasImageSource Source

data CanvasImageSource

Opaque object for drawing elements and things to the canvas.

#CanvasGradient Source

data CanvasGradient

Opaque object describing a gradient.

#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 MonadCanvasAction :: (Type -> Type) -> Constraintclass (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

Instances

#MonadCanvasAff Source

class MonadCanvasAff :: (Type -> Type) -> Constraintclass (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

Instances

Re-exports from Graphics.CanvasAction.Types

#CanvasAff Source

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.

#CanvasAction Source

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 Source

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

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

#runAction Source

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

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

Re-exports from Web.DOM.ParentNode