This is an alternative site for discovering Elm packages. You may be looking for the official Elm package site instead.
We were not able to find the expected elm-package.json file at this tag.
Tag 2.1.1
Committed At 2018-08-24 17:38:03 UTC

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 (sources)


    WARNING: This library is in development and right now it only exposes a low-level API that mirrors the DOM API, 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 for now, please familiarize yourself with the MDN Canvas Tutorial. We will be iterating on the design of the library to make it nicer and provide better defaults as time goes by, and make specific tutorials with Elm.

    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 Html exposing (Html)
    import Canvas
    
    view : Html msg
    view =
        let
            width = 500
            height = 300
        in
            Canvas.element
                width
                height
                [ style [ ( "border", "1px solid black" ) ] ]
                ( Canvas.empty
                    |> Canvas.clearRect 0 0 width height
                    |> renderSquare
                )
    
    renderSquare cmds =
        cmds
            |> 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.