This is an alternative site for discovering Elm packages. You may be looking for the official Elm package site instead.
Canvas API with custom elements for low level drawing primitives
version 1.0.0
license BSD3
native-modules False
elm-version 0.18.0 <= v < 0.19.0
Tag 1.0.0
Committed At 2018-07-30 17:45:41 UTC
elm-lang/html 2.0.0 <= v < 3.0.0 2.0.0
elm-lang/core 5.1.1 <= v < 6.0.0 5.1.1

Modules

README

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.

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.