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

Run 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:

• Graphics.Element, Graphics.Collage simply become Element and Collage respectively, 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 Html, Svg or Program so I changed it to Html msg and used Element.toHtml to coerce the result of collage into HTML.

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.