joakin/elm-canvas

This library exposes a low level API that mirrors most of the DOM canvas API to be used with Elm in a declarative way.

Live examples

WARNING: This library is intended as a very low-level API that mirrors the DOM API almost exactly, while providing a bit of extra type safety where it makes sense. The DOM API is highly stateful and side-effectful, so be careful. To understand how to use this library properly, please read the MDN docs: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D and all the nested pages

Usage

To use it, remember to include the elm-canvas custom element script in your page before you initialize your Elm application.

• http://unpkg.com/elm-canvas/elm-canvas.js
• http://npmjs.com/package/elm-canvas

Then, you can add your HTML element like this:

module Main exposing (main)

import Canvas

view : Html Msg
view =
    let
        width = 500
        height = 300
    in
        Canvas.element
            width
            height
            [ style [ ( "border", "1px solid black" ) ] ]
            [ Canvas.clearRect 0 0 width height
            , renderSquare
            ]

renderSquare =
    batch
        [ Canvas.fillStyle (Color.rgba 0 0 0 1)
        , Canvas.fillRect 0 0 100 50
        ]

main = view

Examples

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