The elm-graphics module is a great way to teach simple graphics programming by offering a clean interface to the HTML5 canvas element. Some of the example code I’ve seen has not been updated to match the changes in recent versions of elm (as the Graphics module was moved into its own package), so this is a brief demonstrator on how I made it work.
Warning: Elm 0.17 is outdated by now. This article is now obsolete: for reference, the
elm-graphics package does not even currently work on Elm 0.19. There is probably a newer reference somewhere out there!
Add elm-graphics package
elm-package install evancz/elm-graphics. At the time of writing, the version I got was 1.0.0
Write your intro program
The differences I’ve seen from the other example code available on the internet was that:
Collagerespectively, same with all other modules from elm-graphics. The change was explained here.
- The main function no longer produces an
Element; the elm compiler expects
Programso I changed it to
Html msgand used
Element.toHtmlto coerce the result of
My final program looked like this:
module Main exposing (..) import Color exposing (..) import Collage exposing (..) import Html exposing (Html) import Element exposing (toHtml) import Transform exposing (rotation) main : Html msg main = collage 300 300 [ groupTransform (rotation 1.7) [makeSquare blue 50] ] |> toHtml makeSquare color size = filled color (square size)
I hope this helps others who are teaching graphics programming using Elm.