Preview your Docs

Ctx

These are all the methods of the ctx api, that you get from canvas.getContext('2d'). You can look at them all here. TheseCtxproperties and methods can be grouped together withbatchand then applied to aCanvasusingCtx.draw. For example, you could draw a line like this..

drawLine : Point -> Point -> Canvas -> Canvas
drawLine p0 p1 canvas =
    [ Ctx.beginPath
    , Ctx.lineWidth 2
    , Ctx.moveTo p0
    , Ctx.lineTo p1
    , Ctx.stroke
    ]
        |> Ctx.draw canvas

..or invert the color of a canvas like this

invert : Canvas -> Canvas
invert canvas =
    [ Ctx.globalCompositionOp "difference"
    , Ctx.fillStyle Color.white
    , Ctx.fillRect
        { x = 0, y = 0 }
        (Canvas.getSize canvas)
    ]
        |> Ctx.draw canvas

Draw

draw : Canvas -> List Ctx -> Canvas

This is our primary way of drawing onto canvases. Give draw a drawOp and apply it to a canvas.

drawLine : Point -> Point -> Canvas -> Canvas
drawLine p0 p1 canvas =
    [ Ctx.beginPath
    , Ctx.lineWidth 2
    , Ctx.moveTo p0
    , Ctx.lineTo p1
    , Ctx.stroke
    ]
        |> Ctx.draw canvas

batch : List Ctx -> Ctx

You dont want to apply Ctx one at a time, its inefficient. Bundle many Ctx together in one batch, using batch.

line : Point -> Point -> Ctx
line p0 p1 =
    [ Ctx.beginPath
    , Ctx.lineWidth 2
    , Ctx.moveTo p0
    , Ctx.lineTo p1
    , Ctx.stroke
    ]
        |> Ctx.batch

none : Ctx

Short for batch []. This is useful when you need to keep a Ctx somewhere, like in your model, but want to include the possibility of doing nothing.

Ctx

type Ctx

Ctx represent all the methods of the ctx api. If you are familiar with JavaScript, its what comes from canvas.getContext('2d'). You can look at them all here.

arc : Point -> Float -> Float -> Float -> Ctx

arcTo : Point -> Point -> Float -> Ctx

beginPath : Ctx

bezierCurveTo : Point -> Point -> Point -> Ctx

clearRect : Point -> Size -> Ctx

clip : Ctx

closePath : Ctx

fill : Ctx

fillRect : Point -> Size -> Ctx

fillStyle : Style -> Ctx

fillText : String -> Point -> Ctx

font : String -> Ctx

Set the font before you draw text with fillText or strokeText Ctx.font "48px sans-serif"

globalAlpha : Float -> Ctx

globalCompositionOp : String -> Ctx

lineCap : String -> Ctx

lineDashOffset : Float -> Ctx

lineJoin : String -> Ctx

lineTo : Point -> Ctx

lineWidth : Float -> Ctx

miterLimit : Float -> Ctx

moveTo : Point -> Ctx

putImageData : List Int -> Size -> Point -> Ctx

quadraticCurveTo : Point -> Point -> Ctx

rect : Point -> Size -> Ctx

rotate : Float -> Ctx

scale : Float -> Float -> Ctx

setLineDash : List Int -> Ctx

setTransform : Float -> Float -> Float -> Float -> Float -> Float -> Ctx

shadowBlur : Float -> Ctx

shadowColor : Color -> Ctx

shadowOffsetX : Float -> Ctx

stroke : Ctx

strokeRect : Point -> Size -> Ctx

strokeStyle : Style -> Ctx

strokeText : String -> Point -> Ctx

textAlign : String -> Ctx

textBaseline : String -> Ctx

transform : Float -> Float -> Float -> Float -> Float -> Float -> Ctx

draw : Canvas -> List Ctx -> Canvas

This is our primary way of drawing onto canvases. Give draw a drawOp and apply it to a canvas.

drawLine : Point -> Point -> Canvas -> Canvas
drawLine p0 p1 canvas =
    [ Ctx.beginPath
    , Ctx.lineWidth 2
    , Ctx.moveTo p0
    , Ctx.lineTo p1
    , Ctx.stroke
    ]
        |> Ctx.draw canvas

Draw Image

For the drawImage method, we made three different functions. This is becaus there are three different sets of parameters you can give the native javascript ctx.drawImage(). See here for more info

drawImage : Canvas -> Point -> Ctx

Just draw the canvas at a point

drawImageScaled : Canvas -> Point -> Size -> Ctx

Draw a canvas at a point with a certain size

drawImageCropScaled : Canvas -> Point -> Size -> Point -> Size -> Ctx

Take a canvas and crop a square out of it at a point and to a size, and draw the cropping at a point scaled to a certain size

Params

type Repeat = Repeat | RepeatX | RepeatY | NoRepeat

Specifies the axis/axes along which to replicate a pattern. For use with the Pattern Style.

type Style = Color Color | Pattern Canvas Repeat | Gradient Gradient

Style specifies the style to apply as a FillStyle or a StrokeStyle.

elmpackageshelp

Preview your Docs

Ctx

Draw

Ctx

Draw Image

Params

elm
packages
help