Copyright	(C) 2016-2025 David M. Johnson
License	BSD3-style (see the file LICENSE)
Maintainer	David M. Johnson <code@dmj.io>
Stability	experimental
Portability	non-portable
Safe Haskell	None
Language	Haskell2010

Miso.Canvas

Contents

Types
Property
API
Smart constructors

Description

Canvas Example

Synopsis

type Canvas a = ReaderT CanvasContext2D IO a
type CanvasContext2D = JSVal
newtype Pattern = Pattern JSVal
newtype Gradient = Gradient JSVal
newtype ImageData = ImageData JSVal
data LineCapType
- = LineCapButt
- | LineCapRound
- | LineCapSquare
data PatternType
- = Repeat
- | RepeatX
- | RepeatY
- | NoRepeat
data LineJoinType
- = LineJoinBevel
- | LineJoinRound
- | LineJoinMiter
data DirectionType
- = LTR
- | RTL
- | Inherit
data TextAlignType
- = TextAlignCenter
- | TextAlignEnd
- | TextAlignLeft
- | TextAlignRight
- | TextAlignStart
data TextBaselineType
- = TextBaselineAlphabetic
- | TextBaselineTop
- | TextBaselineHanging
- | TextBaselineMiddle
- | TextBaselineIdeographic
- | TextBaselineBottom
data CompositeOperation
- = SourceOver
- | SourceAtop
- | SourceIn
- | SourceOut
- | DestinationOver
- | DestinationAtop
- | DestinationIn
- | DestinationOut
- | Lighter
- | Copy
- | Xor
data StyleArg
- = ColorArg Color
- | GradientArg Gradient
- | PatternArg Pattern
type Coord = (Double, Double)
canvas :: forall model action canvasState. (FromJSVal canvasState, ToJSVal canvasState) => [Attribute action] -> (DOMRef -> Canvas canvasState) -> (canvasState -> Canvas ()) -> View model action
canvas_ :: forall model action canvasState. (FromJSVal canvasState, ToJSVal canvasState) => [Attribute action] -> (DOMRef -> IO canvasState) -> (canvasState -> IO ()) -> View model action
set :: ToArgs args => MisoString -> args -> Canvas ()
globalCompositeOperation :: CompositeOperation -> Canvas ()
clearRect :: (Double, Double, Double, Double) -> Canvas ()
fillRect :: (Double, Double, Double, Double) -> Canvas ()
strokeRect :: (Double, Double, Double, Double) -> Canvas ()
beginPath :: () -> Canvas ()
closePath :: () -> Canvas ()
moveTo :: Coord -> Canvas ()
lineTo :: Coord -> Canvas ()
fill :: () -> Canvas ()
rect :: (Double, Double, Double, Double) -> Canvas ()
stroke :: () -> Canvas ()
bezierCurveTo :: (Double, Double, Double, Double, Double, Double) -> Canvas ()
arc :: (Double, Double, Double, Double, Double) -> Canvas ()
arcTo :: (Double, Double, Double, Double, Double) -> Canvas ()
quadraticCurveTo :: (Double, Double, Double, Double) -> Canvas ()
direction :: DirectionType -> Canvas ()
fillText :: (MisoString, Double, Double) -> Canvas ()
font :: MisoString -> Canvas ()
strokeText :: (MisoString, Double, Double) -> Canvas ()
textAlign :: TextAlignType -> Canvas ()
textBaseline :: TextBaselineType -> Canvas ()
addColorStop :: (Double, Color) -> Gradient -> Canvas ()
createLinearGradient :: (Double, Double, Double, Double) -> Canvas Gradient
createPattern :: (Image, PatternType) -> Canvas Pattern
createRadialGradient :: (Double, Double, Double, Double, Double, Double) -> Canvas Gradient
fillStyle :: StyleArg -> Canvas ()
lineCap :: LineCapType -> Canvas ()
lineJoin :: LineJoinType -> Canvas ()
lineWidth :: Double -> Canvas ()
miterLimit :: Double -> Canvas ()
shadowBlur :: Double -> Canvas ()
shadowColor :: Color -> Canvas ()
shadowOffsetX :: Double -> Canvas ()
shadowOffsetY :: Double -> Canvas ()
strokeStyle :: StyleArg -> Canvas ()
scale :: (Double, Double) -> Canvas ()
rotate :: Double -> Canvas ()
translate :: Coord -> Canvas ()
transform :: (Double, Double, Double, Double, Double, Double) -> Canvas ()
setTransform :: (Double, Double, Double, Double, Double, Double) -> Canvas ()
drawImage :: (Image, Double, Double) -> Canvas ()
drawImage' :: (Image, Double, Double, Double, Double) -> Canvas ()
createImageData :: (Double, Double) -> Canvas ImageData
getImageData :: (Double, Double, Double, Double) -> Canvas ImageData
setImageData :: (ImageData, Int, Double) -> Canvas ()
height :: ImageData -> Canvas Double
width :: ImageData -> Canvas Double
putImageData :: (ImageData, Double, Double) -> Canvas ()
globalAlpha :: Double -> Canvas ()
clip :: () -> Canvas ()
save :: () -> Canvas ()
restore :: () -> Canvas ()
gradient :: Gradient -> StyleArg
pattern_ :: Pattern -> StyleArg
color :: Color -> StyleArg

Types

type Canvas a = ReaderT CanvasContext2D IO a Source #

DSL for expressing operations on canvas_

type CanvasContext2D = JSVal Source #

The canvas CanvasContext2D

newtype Pattern Source #

Type used to hold a canvas Pattern

Constructors

Pattern JSVal

Instances

Instances details

FromJSVal Pattern Source #
Instance details Defined in Miso.Canvas Methods fromJSVal :: JSVal -> IO (Maybe Pattern) Source # fromJSValUnchecked :: JSVal -> IO Pattern Source #
ToJSVal Pattern Source #
Instance details Defined in Miso.Canvas Methods toJSVal :: Pattern -> IO JSVal Source #

newtype Gradient Source #

Type used to hold a Gradient

Constructors

Gradient JSVal

Instances

Instances details

FromJSVal Gradient Source #
Instance details Defined in Miso.Canvas Methods fromJSVal :: JSVal -> IO (Maybe Gradient) Source # fromJSValUnchecked :: JSVal -> IO Gradient Source #
ToArgs Gradient Source #
Instance details Defined in Miso.Canvas Methods toArgs :: Gradient -> IO [JSVal] Source #
ToJSVal Gradient Source #
Instance details Defined in Miso.Canvas Methods toJSVal :: Gradient -> IO JSVal Source #

newtype ImageData Source #

Type used to hold ImageData

Constructors

ImageData JSVal

Instances

Instances details

FromJSVal ImageData Source #
Instance details Defined in Miso.Canvas Methods fromJSVal :: JSVal -> IO (Maybe ImageData) Source # fromJSValUnchecked :: JSVal -> IO ImageData Source #
ToArgs ImageData Source #
Instance details Defined in Miso.Canvas Methods toArgs :: ImageData -> IO [JSVal] Source #
ToJSVal ImageData Source #
Instance details Defined in Miso.Canvas Methods toJSVal :: ImageData -> IO JSVal Source #
ToObject ImageData Source #
Instance details Defined in Miso.Canvas Methods toObject :: ImageData -> IO Object Source #

data LineCapType Source #

LineCap

Constructors

LineCapButt
LineCapRound
LineCapSquare

Instances

Instances details

Show LineCapType Source #
Instance details Defined in Miso.Canvas Methods showsPrec :: Int -> LineCapType -> ShowS # show :: LineCapType -> String # showList :: [LineCapType] -> ShowS #
Eq LineCapType Source #
Instance details Defined in Miso.Canvas Methods (==) :: LineCapType -> LineCapType -> Bool # (/=) :: LineCapType -> LineCapType -> Bool #
ToArgs LineCapType Source #
Instance details Defined in Miso.Canvas Methods toArgs :: LineCapType -> IO [JSVal] Source #
ToJSVal LineCapType Source #
Instance details Defined in Miso.Canvas Methods toJSVal :: LineCapType -> IO JSVal Source #

data PatternType Source #

Various patterns used in the canvas API

Constructors

Repeat
RepeatX
RepeatY
NoRepeat

Instances

Instances details

FromJSVal PatternType Source #
Instance details Defined in Miso.Canvas Methods fromJSVal :: JSVal -> IO (Maybe PatternType) Source # fromJSValUnchecked :: JSVal -> IO PatternType Source #
ToJSVal PatternType Source #
Instance details Defined in Miso.Canvas Methods toJSVal :: PatternType -> IO JSVal Source #

data LineJoinType Source #

LineJoin

Constructors

LineJoinBevel
LineJoinRound
LineJoinMiter

Instances

Instances details

Show LineJoinType Source #
Instance details Defined in Miso.Canvas Methods showsPrec :: Int -> LineJoinType -> ShowS # show :: LineJoinType -> String # showList :: [LineJoinType] -> ShowS #
Eq LineJoinType Source #
Instance details Defined in Miso.Canvas Methods (==) :: LineJoinType -> LineJoinType -> Bool # (/=) :: LineJoinType -> LineJoinType -> Bool #
ToArgs LineJoinType Source #
Instance details Defined in Miso.Canvas Methods toArgs :: LineJoinType -> IO [JSVal] Source #
ToJSVal LineJoinType Source #
Instance details Defined in Miso.Canvas Methods toJSVal :: LineJoinType -> IO JSVal Source #

data DirectionType Source #

Left-to-right, right-to-left, or inherit direction type.

Constructors

LTR
RTL
Inherit

Instances

Instances details

Show DirectionType Source #
Instance details Defined in Miso.Canvas Methods showsPrec :: Int -> DirectionType -> ShowS # show :: DirectionType -> String # showList :: [DirectionType] -> ShowS #
Eq DirectionType Source #
Instance details Defined in Miso.Canvas Methods (==) :: DirectionType -> DirectionType -> Bool # (/=) :: DirectionType -> DirectionType -> Bool #
ToArgs DirectionType Source #
Instance details Defined in Miso.Canvas Methods toArgs :: DirectionType -> IO [JSVal] Source #
ToJSVal DirectionType Source #
Instance details Defined in Miso.Canvas Methods toJSVal :: DirectionType -> IO JSVal Source #

data TextAlignType Source #

Text alignment type

Constructors

TextAlignCenter
TextAlignEnd
TextAlignLeft
TextAlignRight
TextAlignStart

Instances

Instances details

Show TextAlignType Source #
Instance details Defined in Miso.Canvas Methods showsPrec :: Int -> TextAlignType -> ShowS # show :: TextAlignType -> String # showList :: [TextAlignType] -> ShowS #
Eq TextAlignType Source #
Instance details Defined in Miso.Canvas Methods (==) :: TextAlignType -> TextAlignType -> Bool # (/=) :: TextAlignType -> TextAlignType -> Bool #
ToArgs TextAlignType Source #
Instance details Defined in Miso.Canvas Methods toArgs :: TextAlignType -> IO [JSVal] Source #
ToJSVal TextAlignType Source #
Instance details Defined in Miso.Canvas Methods toJSVal :: TextAlignType -> IO JSVal Source #

data TextBaselineType Source #

TextBaselineType

Constructors

TextBaselineAlphabetic
TextBaselineTop
TextBaselineHanging
TextBaselineMiddle
TextBaselineIdeographic
TextBaselineBottom

Instances

Instances details

Show TextBaselineType Source #
Instance details Defined in Miso.Canvas Methods showsPrec :: Int -> TextBaselineType -> ShowS # show :: TextBaselineType -> String # showList :: [TextBaselineType] -> ShowS #
Eq TextBaselineType Source #
Instance details Defined in Miso.Canvas Methods (==) :: TextBaselineType -> TextBaselineType -> Bool # (/=) :: TextBaselineType -> TextBaselineType -> Bool #
ToArgs TextBaselineType Source #
Instance details Defined in Miso.Canvas Methods toArgs :: TextBaselineType -> IO [JSVal] Source #
ToJSVal TextBaselineType Source #
Instance details Defined in Miso.Canvas Methods toJSVal :: TextBaselineType -> IO JSVal Source #

data CompositeOperation Source #

CompositeOperation

Constructors

SourceOver
SourceAtop
SourceIn
SourceOut
DestinationOver
DestinationAtop
DestinationIn
DestinationOut
Lighter
Copy
Xor

Instances

Instances details

Show CompositeOperation Source #
Instance details Defined in Miso.Canvas Methods showsPrec :: Int -> CompositeOperation -> ShowS # show :: CompositeOperation -> String # showList :: [CompositeOperation] -> ShowS #
Eq CompositeOperation Source #
Instance details Defined in Miso.Canvas Methods (==) :: CompositeOperation -> CompositeOperation -> Bool # (/=) :: CompositeOperation -> CompositeOperation -> Bool #
ToArgs CompositeOperation Source #
Instance details Defined in Miso.Canvas Methods toArgs :: CompositeOperation -> IO [JSVal] Source #
ToJSVal CompositeOperation Source #
Instance details Defined in Miso.Canvas Methods toJSVal :: CompositeOperation -> IO JSVal Source #

data StyleArg Source #

Color, Gradient or Pattern styling

Constructors

ColorArg Color
GradientArg Gradient
PatternArg Pattern

Instances

Instances details

ToArgs StyleArg Source #
Instance details Defined in Miso.Canvas Methods toArgs :: StyleArg -> IO [JSVal] Source #
ToJSVal StyleArg Source #
Instance details Defined in Miso.Canvas Methods toJSVal :: StyleArg -> IO JSVal Source #

type Coord = (Double, Double) Source #

An (x,y) coordinate.

Property

canvas Source #

Arguments

:: forall model action canvasState. (FromJSVal canvasState, ToJSVal canvasState)
=> [Attribute action]
-> (DOMRef -> Canvas canvasState)	Init function, takes `DOMRef` as arg, returns canvas init. state.
-> (canvasState -> Canvas ())	Callback to render graphics using this canvas' context, takes init state as arg.
-> View model action

Element for drawing on a <canvas>. This function abstracts over the context and interpret callback, including dimension ("2d" or "3d") canvas.

canvas_ Source #

Arguments

:: forall model action canvasState. (FromJSVal canvasState, ToJSVal canvasState)
=> [Attribute action]
-> (DOMRef -> IO canvasState)	Init function, takes `DOMRef` as arg, returns canvas init. state.
-> (canvasState -> IO ())	Callback to render graphics using this canvas' context, takes init state as arg.
-> View model action

Another variant of canvas, this is not specialized to ReaderT. This is useful when building applications with three.js, or other libraries where explicit context is not necessary.

API

set :: ToArgs args => MisoString -> args -> Canvas () Source #

Property setter specialized to Canvas.

globalCompositeOperation :: CompositeOperation -> Canvas ()
globalCompositeOperation = set "globalCompositeOperation"

globalCompositeOperation :: CompositeOperation -> Canvas () Source #

ctx.globalCompositeOperation = "source-over"

clearRect :: (Double, Double, Double, Double) -> Canvas () Source #

ctx.clearRect(x,y,width,height)

fillRect :: (Double, Double, Double, Double) -> Canvas () Source #

ctx.fillRect(x,y,width,height)

strokeRect :: (Double, Double, Double, Double) -> Canvas () Source #

ctx.strokeRect(x,y,width,height)

beginPath :: () -> Canvas () Source #

ctx.beginPath()

closePath :: () -> Canvas () Source #

ctx.closePath()

moveTo :: Coord -> Canvas () Source #

ctx.moveTo(x,y)

lineTo :: Coord -> Canvas () Source #

ctx.lineTo(x,y)

fill :: () -> Canvas () Source #

ctx.fill()

rect :: (Double, Double, Double, Double) -> Canvas () Source #

ctx.rect(x,y,width,height)

stroke :: () -> Canvas () Source #

ctx.stroke()

bezierCurveTo :: (Double, Double, Double, Double, Double, Double) -> Canvas () Source #

ctx.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)

arc :: (Double, Double, Double, Double, Double) -> Canvas () Source #

context.arc(x, y, r, sAngle, eAngle, counterclockwise)

arcTo :: (Double, Double, Double, Double, Double) -> Canvas () Source #

context.arcTo(x1, y1, x2, y2, r)

quadraticCurveTo :: (Double, Double, Double, Double) -> Canvas () Source #

context.quadraticCurveTo(cpx,cpy,x,y)

direction :: DirectionType -> Canvas () Source #

context.direction = "ltr"

fillText :: (MisoString, Double, Double) -> Canvas () Source #

context.fillText(text,x,y)

font :: MisoString -> Canvas () Source #

context.font = "italic small-caps bold 12px arial"

strokeText :: (MisoString, Double, Double) -> Canvas () Source #

ctx.strokeText()

textAlign :: TextAlignType -> Canvas () Source #

ctx.textAlign = "start"

textBaseline :: TextBaselineType -> Canvas () Source #

ctx.textBaseline = "top"

addColorStop :: (Double, Color) -> Gradient -> Canvas () Source #

gradient.addColorStop(stop,color)

createLinearGradient :: (Double, Double, Double, Double) -> Canvas Gradient Source #

ctx.createLinearGradient(x0,y0,x1,y1)

createPattern :: (Image, PatternType) -> Canvas Pattern Source #

ctx.createPattern(image, "repeat")

createRadialGradient :: (Double, Double, Double, Double, Double, Double) -> Canvas Gradient Source #

ctx.createRadialGradient(x0,y0,r0,x1,y1,r1)

fillStyle :: StyleArg -> Canvas () Source #

ctx.fillStyle = "red"

lineCap :: LineCapType -> Canvas () Source #

ctx.lineCap = "butt"

lineJoin :: LineJoinType -> Canvas () Source #

ctx.lineJoin = "bevel"

lineWidth :: Double -> Canvas () Source #

ctx.lineWidth = 10

miterLimit :: Double -> Canvas () Source #

ctx.miterLimit = 10

shadowBlur :: Double -> Canvas () Source #

ctx.shadowBlur = 10

shadowColor :: Color -> Canvas () Source #

ctx.shadowColor = "red"

shadowOffsetX :: Double -> Canvas () Source #

ctx.shadowOffsetX = 20

shadowOffsetY :: Double -> Canvas () Source #

ctx.shadowOffsetY = 20

strokeStyle :: StyleArg -> Canvas () Source #

ctx.strokeStyle = "red"

scale :: (Double, Double) -> Canvas () Source #

ctx.scale(width,height)

rotate :: Double -> Canvas () Source #

ctx.rotate(angle)

translate :: Coord -> Canvas () Source #

ctx.translate(angle)

transform :: (Double, Double, Double, Double, Double, Double) -> Canvas () Source #

ctx.transform(a,b,c,d,e,f)

setTransform :: (Double, Double, Double, Double, Double, Double) -> Canvas () Source #

ctx.setTransform(a,b,c,d,e,f)

drawImage :: (Image, Double, Double) -> Canvas () Source #

ctx.drawImage(image,x,y)

drawImage' :: (Image, Double, Double, Double, Double) -> Canvas () Source #

ctx.drawImage(image,x,y)

createImageData :: (Double, Double) -> Canvas ImageData Source #

ctx.createImageData(width,height)

getImageData :: (Double, Double, Double, Double) -> Canvas ImageData Source #

ctx.getImageData(w,x,y,z)

setImageData :: (ImageData, Int, Double) -> Canvas () Source #

imageData.data[index] = 255

height :: ImageData -> Canvas Double Source #

imageData.height

width :: ImageData -> Canvas Double Source #

imageData.width

putImageData :: (ImageData, Double, Double) -> Canvas () Source #

ctx.putImageData(imageData,x,y)

globalAlpha :: Double -> Canvas () Source #

ctx.globalAlpha = 0.2

clip :: () -> Canvas () Source #

ctx.clip()

save :: () -> Canvas () Source #

ctx.save()

restore :: () -> Canvas () Source #

ctx.restore()

Smart constructors

gradient :: Gradient -> StyleArg Source #

Smart constructor for Gradient when using StyleArg

pattern_ :: Pattern -> StyleArg Source #

Smart constructor for Pattern when using StyleArg

color :: Color -> StyleArg Source #

Smart constructor for Color when using StyleArg