Elm canvas api examples

CurrentWithPipes.elm

view ( count, fps ) =
    Canvas.toHtml
        ( w, h )
        [ Attributes.style "border" "2px solid red" ]
        [ shapes [ rect ( 0, 0 ) w h ] |> fill Color.white
        , shapes
            [ rect ( -100, -150 ) 40 50
            , circle ( 100, 100 ) 80
            ]
            |> lineWidth 5
            |> transform [ translate (w / 2) (h / 2), rotate (degrees (sin (count / 100) * 360)) ]
            |> fill Color.red
            |> stroke Color.green
        , text ( w - 50, 50 ) ("fps: " ++ String.fromInt (floor fps))
            |> align Right
            |> size 30
            |> family "sans-serif"
            |> lineWidth 1
            |> stroke Color.blue
            |> fill Color.green
        , shapes
            [ moveTo ( 20, 10 )
            , lineTo ( 10, 30 )
            , lineTo ( 30, 30 )
            , lineTo ( 20, 10 )
            , circle ( 50, 50 ) 10
            ]
        , shapes
            (List.range 0 10
                |> List.map
                    (\i ->
                        (if modBy 2 i == 0 then
                            arc

                         else
                            arcC
                        )
                            ( toFloat i * 40 + 40, 0 )
                            20
                            (degrees -45)
                            (degrees 45)
                    )
            )
            |> fill Color.lightPurple
            |> transform [ translate 10 400 ]
        ]

CurrentWithStyleArray.elm

view ( count, fps ) =
    Canvas.toHtml
        ( w, h )
        [ Attributes.style "border" "2px solid red" ]
        [ shapes [ fill Color.white ] [ rect ( 0, 0 ) w h ]
        , shapes
            [ lineWidth 5
            , transform
                [ translate (w / 2) (h / 2)
                , rotate (degrees (sin (count / 100) * 360)) ]
            , fill Color.red
            , stroke Color.green
            , rect ( -100, -150 ) 40 50
            ]
            [ rect ( -100, -150 ) 40 50
            , circle ( 100, 100 ) 80
            ]
        , text
            [ align Right
            , size 30
            , family "sans-serif"
            , lineWidth 1
            , stroke Color.blue
            , fill Color.green
            ]
            ( w - 50, 50 ) ("fps: " ++ String.fromInt (floor fps))
        , shapes []
            [ moveTo ( 20, 10 )
            , lineTo ( 10, 30 )
            , lineTo ( 30, 30 )
            , lineTo ( 20, 10 )
            , circle ( 50, 50 ) 10
            ]
        , shapes
            [ fill Color.lightPurple
            , transform [ translate 10 400 ]
            ]
            (List.range 0 10
                |> List.map
                    (\i ->
                        (if modBy 2 i == 0 then
                            arc

                         else
                            arcC
                        )
                            ( toFloat i * 40 + 40, 0 )
                            20
                            (degrees -45)
                            (degrees 45)
                    )
            )
        ]

SharingStylesWithArrays.elm

module Main exposing (view, withDefaultStyle, withTextStyle)


defaultStyles =
    [ lineWidth 2
    , fill Color.white
    , stroke Color.black
    ]


textStyle =
    [ align Right
    , size 30
    , family "sans-serif"
    ]


view ( count, fps ) =
    Canvas.toHtml
        ( w, h )
        [ Attributes.style "border" "2px solid red" ]
        [ shapes [ rect ( 0, 0 ) w h ] |> fill Color.white
        , shapes
            (transform [ translate (w / 2) (h / 2), rotate (degrees (sin (count / 100) * 360)) ]
                ++ defaultStyles
            )
            [ rect ( -100, -150 ) 40 50
            , circle ( 100, 100 ) 80
            ]
        , text
            (textStyle
                ++ defaultStyles
            )
            ( w - 50, 50 )
            ("fps: " ++ String.fromInt (floor fps))
        ]

SharingStylesWithPipes.elm

module Main exposing (view, withDefaultStyle, withTextStyle)


withDefaultStyle square =
    square
        |> lineWidth 2
        |> fill Color.white
        |> stroke Color.black


withTextStyle txt =
    txt
        |> align Right
        |> size 30
        |> family "sans-serif"


view ( count, fps ) =
    Canvas.toHtml
        ( w, h )
        [ Attributes.style "border" "2px solid red" ]
        [ shapes [ rect ( 0, 0 ) w h ] |> fill Color.white
        , shapes
            [ rect ( -100, -150 ) 40 50
            , circle ( 100, 100 ) 80
            ]
            |> withDefaultStyle
            |> transform [ translate (w / 2) (h / 2), rotate (degrees (sin (count / 100) * 360)) ]
        , text ( w - 50, 50 ) ("fps: " ++ String.fromInt (floor fps))
            |> withTextStyle
            |> withDefaultStyle
        ]