A canvas drawing library for Elm
Branch: master
Clone or download
Type Name Latest commit message Commit time
Failed to load latest commit information.
elm-canvas bump patch for docs change Dec 16, 2018
examples Add the ellie example to examples/ Dec 25, 2018
public Automatically account for devicePixelRatio Dec 16, 2018
src Clarify where Color comes from in the docs Jan 2, 2019
.gitignore Separate npm package for publishing Jul 29, 2018
.vimrc Change build scripts and add build-example Aug 2, 2018
LICENSE Upgrade library code to 0.19 Aug 24, 2018
Makefile Fix makefile deps for library sources Nov 30, 2018
README.md Fix ellie example Dec 30, 2018
TODO.md Remove some todos that are done Dec 1, 2018
docs.json build docs and examples Nov 30, 2018
elm.json bump Dec 30, 2018
package-lock.json add uglify-js dev-dep used in the makefile to root Nov 29, 2018



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 Color
import Html exposing (Html)
import Html.Attributes exposing (style)

view : Html msg
view =
        width = 500
        height = 300
        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.