Skip to content

joakin/elm-canvas

Repository files navigation

joakin/elm-canvas

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

Live examples (example 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.

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

Examples

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.