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 JSM 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 -> JSM canvasState) -> (canvasState -> JSM ()) -> View model action
set :: MakeArgs 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 :: (Gradient, Double, Color) -> 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 JSM 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 -> JSM (Maybe Pattern) Source # fromJSValUnchecked :: JSVal -> JSM Pattern Source # fromJSValListOf :: JSVal -> JSM (Maybe [Pattern]) Source # fromJSValUncheckedListOf :: JSVal -> JSM [Pattern] Source #
ToJSVal Pattern Source #
Instance details Defined in Miso.Canvas Methods toJSVal :: Pattern -> JSM JSVal Source # toJSValListOf :: [Pattern] -> JSM 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 -> JSM (Maybe Gradient) Source # fromJSValUnchecked :: JSVal -> JSM Gradient Source # fromJSValListOf :: JSVal -> JSM (Maybe [Gradient]) Source # fromJSValUncheckedListOf :: JSVal -> JSM [Gradient] Source #
ToJSVal Gradient Source #
Instance details Defined in Miso.Canvas Methods toJSVal :: Gradient -> JSM JSVal Source # toJSValListOf :: [Gradient] -> JSM JSVal Source #
MakeArgs Gradient Source #
Instance details Defined in Miso.Canvas Methods makeArgs :: Gradient -> JSM [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 -> JSM (Maybe ImageData) Source # fromJSValUnchecked :: JSVal -> JSM ImageData Source # fromJSValListOf :: JSVal -> JSM (Maybe [ImageData]) Source # fromJSValUncheckedListOf :: JSVal -> JSM [ImageData] Source #
ToJSVal ImageData Source #
Instance details Defined in Miso.Canvas Methods toJSVal :: ImageData -> JSM JSVal Source # toJSValListOf :: [ImageData] -> JSM JSVal Source #
MakeArgs ImageData Source #
Instance details Defined in Miso.Canvas Methods makeArgs :: ImageData -> JSM [JSVal] Source #
MakeObject ImageData Source #
Instance details Defined in Miso.Canvas Methods makeObject :: ImageData -> JSM 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 #
ToJSVal LineCapType Source #
Instance details Defined in Miso.Canvas Methods toJSVal :: LineCapType -> JSM JSVal Source # toJSValListOf :: [LineCapType] -> JSM JSVal Source #
MakeArgs LineCapType Source #
Instance details Defined in Miso.Canvas Methods makeArgs :: LineCapType -> JSM [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 -> JSM (Maybe PatternType) Source # fromJSValUnchecked :: JSVal -> JSM PatternType Source # fromJSValListOf :: JSVal -> JSM (Maybe [PatternType]) Source # fromJSValUncheckedListOf :: JSVal -> JSM [PatternType] Source #
ToJSVal PatternType Source #
Instance details Defined in Miso.Canvas Methods toJSVal :: PatternType -> JSM JSVal Source # toJSValListOf :: [PatternType] -> JSM 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 #
ToJSVal LineJoinType Source #
Instance details Defined in Miso.Canvas Methods toJSVal :: LineJoinType -> JSM JSVal Source # toJSValListOf :: [LineJoinType] -> JSM JSVal Source #
MakeArgs LineJoinType Source #
Instance details Defined in Miso.Canvas Methods makeArgs :: LineJoinType -> JSM [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 #
ToJSVal DirectionType Source #
Instance details Defined in Miso.Canvas Methods toJSVal :: DirectionType -> JSM JSVal Source # toJSValListOf :: [DirectionType] -> JSM JSVal Source #
MakeArgs DirectionType Source #
Instance details Defined in Miso.Canvas Methods makeArgs :: DirectionType -> JSM [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 #
ToJSVal TextAlignType Source #
Instance details Defined in Miso.Canvas Methods toJSVal :: TextAlignType -> JSM JSVal Source # toJSValListOf :: [TextAlignType] -> JSM JSVal Source #
MakeArgs TextAlignType Source #
Instance details Defined in Miso.Canvas Methods makeArgs :: TextAlignType -> JSM [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 #
ToJSVal TextBaselineType Source #
Instance details Defined in Miso.Canvas Methods toJSVal :: TextBaselineType -> JSM JSVal Source # toJSValListOf :: [TextBaselineType] -> JSM JSVal Source #
MakeArgs TextBaselineType Source #
Instance details Defined in Miso.Canvas Methods makeArgs :: TextBaselineType -> JSM [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 #
ToJSVal CompositeOperation Source #
Instance details Defined in Miso.Canvas Methods toJSVal :: CompositeOperation -> JSM JSVal Source # toJSValListOf :: [CompositeOperation] -> JSM JSVal Source #
MakeArgs CompositeOperation Source #
Instance details Defined in Miso.Canvas Methods makeArgs :: CompositeOperation -> JSM [JSVal] Source #

data StyleArg Source #

Color, Gradient or Pattern styling

Constructors

ColorArg Color
GradientArg Gradient
PatternArg Pattern

Instances

Instances details

ToJSVal StyleArg Source #
Instance details Defined in Miso.Canvas Methods toJSVal :: StyleArg -> JSM JSVal Source # toJSValListOf :: [StyleArg] -> JSM JSVal Source #
MakeArgs StyleArg Source #
Instance details Defined in Miso.Canvas Methods makeArgs :: StyleArg -> JSM [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 -> JSM canvasState)	Init function, takes `DOMRef` as arg, returns canvas init. state.
-> (canvasState -> JSM ())	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 :: MakeArgs 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 :: (Gradient, Double, Color) -> 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