This module exposes a nice drawing API that works on top of the the DOM canvas.
Live examples (example sources)
To use it, read the docs on the Canvas
module, and remember to include the
elm-canvas
custom element script in your page before you initialize your Elm
application.
Then, you can add your HTML element like this:
module Main exposing (main)
import Canvas exposing (..)
import Canvas.Settings exposing (..)
import Color -- elm install avh4/elm-color
import Html exposing (Html)
import Html.Attributes exposing (style)
view : Html msg
view =
let
width = 500
height = 300
in
Canvas.toHtml (width, height)
[ style "border" "1px solid black" ]
[ shapes [ fill Color.white ] [ rect (0, 0) width height ]
, renderSquare
]
renderSquare =
shapes [ fill (Color.rgba 0 0 0 1) ]
[ rect (0, 0) 100 50 ]
main = view
You can see many examples in the examples/ folder, and experience them live.
Additionally, some of the p5js.org examples were adapted to Elm using this package. They can be found in the Elm discourse thread.