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

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 w/ three.js, or other libraries where explicit context is not necessary.