joakin/elm-canvas

This module exposes a nice drawing API that works on top of the the DOM canvas.

Live examples (sources)

Usage

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.

• Ellie basic example (Outdated)
  • Good starting point to play with the library. (Old version 2)
• Basic template to get started:
  • Template.elm
  • template.html
    • Remember to use the CDN version of elm-canvas.js, see 👇
• http://unpkg.com/elm-canvas/elm-canvas.js
  • CDN link. Visit it and copy the redirected URL with the version number into your HTML.
• http://npmjs.com/package/elm-canvas
  • If you use a bundler like parcel or webpack, you can use the npm package
• See npm docs for version compatibility, in general, latest npm package/CDN link should work fine with the latest elm package.

Then, you can add your HTML element like this:

module Main exposing (main)

import Canvas exposing (..)
import 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

Examples

You can see many examples in the examples/ folder, and experience them live.