miso
Copyright(C) 2016-2025 David M. Johnson
LicenseBSD3-style (see the file LICENSE)
MaintainerDavid M. Johnson <code@dmj.io>
Stabilityexperimental
Portabilitynon-portable
Safe HaskellNone
LanguageHaskell2010

Miso.Canvas

Description

Canvas Example Canvas Source

Synopsis

Types

data Canvas a where Source #

DSL for expressing operations on canvas_

Constructors

Bind :: forall a1 a. Canvas a1 -> (a1 -> Canvas a) -> Canvas a 
Pure :: forall a. a -> Canvas a 
LiftIO :: forall a. IO a -> Canvas a 
LiftJSM :: forall a. JSM a -> Canvas a 
IsPointInPath :: Coord -> Canvas Bool 
MeasureText :: MisoString -> Canvas Double 
ClearRect :: (Double, Double, Double, Double) -> Canvas () 
FillRect :: (Double, Double, Double, Double) -> Canvas () 
StrokeRect :: (Double, Double, Double, Double) -> Canvas () 
BeginPath :: Canvas () 
ClosePath :: Canvas () 
MoveTo :: (Double, Double) -> Canvas () 
LineTo :: (Double, Double) -> 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 () 
ImageDataHeight :: ImageData -> Canvas Double 
ImageDataWidth :: ImageData -> Canvas Double 
PutImageData :: (ImageData, Double, Double) -> Canvas () 
GlobalAlpha :: Double -> Canvas () 
GlobalCompositeOperation :: CompositeOperation -> Canvas () 
Clip :: Canvas () 
Save :: Canvas () 
Restore :: Canvas () 

Instances

Instances details
Applicative Canvas Source # 
Instance details

Defined in Miso.Canvas

Methods

pure :: a -> Canvas a #

(<*>) :: Canvas (a -> b) -> Canvas a -> Canvas b #

liftA2 :: (a -> b -> c) -> Canvas a -> Canvas b -> Canvas c #

(*>) :: Canvas a -> Canvas b -> Canvas b #

(<*) :: Canvas a -> Canvas b -> Canvas a #

Functor Canvas Source # 
Instance details

Defined in Miso.Canvas

Methods

fmap :: (a -> b) -> Canvas a -> Canvas b #

(<$) :: a -> Canvas b -> Canvas a #

Monad Canvas Source # 
Instance details

Defined in Miso.Canvas

Methods

(>>=) :: Canvas a -> (a -> Canvas b) -> Canvas b #

(>>) :: Canvas a -> Canvas b -> Canvas b #

return :: a -> Canvas a #

MonadIO Canvas Source # 
Instance details

Defined in Miso.Canvas

Methods

liftIO :: IO a -> Canvas a #

MonadJSM Canvas Source # 
Instance details

Defined in Miso.Canvas

Methods

liftJSM' :: JSM a -> Canvas a Source #

Monoid a => Monoid (Canvas a) Source # 
Instance details

Defined in Miso.Canvas

Methods

mempty :: Canvas a #

mappend :: Canvas a -> Canvas a -> Canvas a #

mconcat :: [Canvas a] -> Canvas a #

Semigroup a => Semigroup (Canvas a) Source # 
Instance details

Defined in Miso.Canvas

Methods

(<>) :: Canvas a -> Canvas a -> Canvas a #

sconcat :: NonEmpty (Canvas a) -> Canvas a #

stimes :: Integral b => b -> Canvas a -> Canvas a #

newtype Pattern Source #

Constructors

Pattern JSVal 

Instances

Instances details
ToJSVal Pattern Source # 
Instance details

Defined in Miso.Canvas

Methods

toJSVal :: Pattern -> JSM JSVal Source #

toJSValListOf :: [Pattern] -> JSM JSVal Source #

newtype Gradient Source #

Constructors

Gradient JSVal 

Instances

Instances details
ToJSVal Gradient Source # 
Instance details

Defined in Miso.Canvas

Methods

toJSVal :: Gradient -> JSM JSVal Source #

toJSValListOf :: [Gradient] -> JSM JSVal Source #

newtype ImageData Source #

Constructors

ImageData JSVal 

Instances

Instances details
ToJSVal ImageData Source # 
Instance details

Defined in Miso.Canvas

Methods

toJSVal :: ImageData -> JSM JSVal Source #

toJSValListOf :: [ImageData] -> JSM JSVal Source #

MakeObject ImageData Source # 
Instance details

Defined in Miso.Canvas

Methods

makeObject :: ImageData -> JSM Object Source #

data LineCapType Source #

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 #

data PatternType Source #

Constructors

Repeat 
RepeatX 
RepeatY 
NoRepeat 

data LineJoinType Source #

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 #

data DirectionType Source #

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 #

data TextAlignType Source #

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 #

data TextBaselineType Source #

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 #

data CompositeOperation Source #

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 #

data StyleArg Source #

Constructors

ColorArg Color 
GradientArg Gradient 
PatternArg Pattern 

type Coord = (Double, Double) Source #

Property

canvas Source #

Arguments

:: [Attribute action] 
-> JSM Function

Callback to render graphics using this canvas' context

-> View action 

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

canvas_ :: [Attribute action] -> Canvas a -> View action Source #

Element for drawing on a <canvas>, includes a Canvas DSL. Specialized to "2d" canvas.

API

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](https:/www.w3schools.comtags/canvas_imagedata_data.asp)

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 #

pattern_ :: Pattern -> StyleArg Source #

color :: Color -> StyleArg Source #