Interested in updating the 2DCanvas API

[Lucas Desgouilles]

Greetings,

I've been using evancz/elm-graphics (alongside elm-lang/animation-frame, elm-community/easing-functions, mgold/elm-animation) to develop overlay graphics (in the style of http://nodecg.com / https://www.youtube.com/watch?v=x9PzBHgN29U ), and I've had a lot more fun using it.

But I found some of the canvas APIs are not available, which is why I'm currently interested in creating an alternative to elm-graphics, focusing on implementing a low-level interface to the HTML5 Canvas, which could then be used to recreate the higher-level API elm-graphics offers.

I've come to ask help about API design, I can see a few ways of doing it:

One being somewhat similar to elm-graphics, which would be passing instructions to the render function

view model =

    Html.div []

        [ Canvas.draw2D ( 200, 300 )

            [ Canvas.fillStyleColor <| Color.rgb 0 255 0

            , Canvas.fillRect 10 10 100 100

            ]

        ]

or even pipeline-style

view model =

    Html.div []

        [ Canvas.draw2D ( 200, 300 )

            |> Canvas.fillStyleColor (Color.rgb 0 255 0)

            |> Canvas.fillRect 10 10 100 100

        ]

or instead through Messages and in the style of The Elm Architecture, the Canvas would be its own component

update msg model =

    case msg of

        Alert message color ->

            model

                ! List.map MsgCanvas 

                    [ Canvas.fillStyleColor color

                    , Canvas.fillText 10 10 message

                    ]

        

        MsgCanvas msg ->

            { model | canvas = Canvas.update msg model.canvas } ! []

view model = 

    Html.div [] [ Canvas.draw2D ( 200, 300 ) model.canvas ]

How do you feel about them? What else should I know about canvas, interfacing with JS, etc?

Thanks

[Rex van der Spuy]

This is a great project!

We really need a library with 100% coverage of the Canvas Drawing API.

[Max Goldstein]

About a week ago I had a similar inkling that we'd want a way of accessing as much of the canvas API as possible. Here's what I came up with:

https://gist.github.com/mgold/a7c3c393b90376b780f4948a78649c90

The horrible thing about this proposal is that it uses eval. This means it's hard for the JS runtime to optimize, and presents all kinds of security holes. Worse, if you ere to forgo sensible canvas rendering, you could use this to run arbitrary JS code from Elm strings you pass in. (You'd have to run the task, but still.) Without a lot of validation or type restrictions, it would be hard to prevent this, even if you could avoid calling eval. You'd still need to pass in client-generated strings to the canvas API functions.