Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/joakin/elm-canvas

A canvas drawing library for Elm
https://github.com/joakin/elm-canvas

canvas custom-elements elm elm-lang generative-art web-components

Last synced: 2 days ago
JSON representation

A canvas drawing library for Elm

Awesome Lists containing this project

README

        

# joakin/elm-canvas

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

[Live examples](https://joakin.github.io/elm-canvas)
([example sources](https://github.com/joakin/elm-canvas/tree/master/examples))

![](https://joakin.github.io/elm-canvas/animated-grid.png)
![](https://joakin.github.io/elm-canvas/dynamic-particles.png)
![](https://joakin.github.io/elm-canvas/circle-packing.png)
![](https://joakin.github.io/elm-canvas/trees.png)

## 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.

- [Ellie basic example](https://ellie-app.com/62Dy7vxsBHZa1)
- Good starting point to play with the library without installing anything.
- Basic project template to get started:
[joakin/elm-canvas-sketch](https://github.com/joakin/elm-canvas-sketch)
-
- CDN link. Visit it and copy the redirected URL with the version number into
your HTML.
-
- If you use a bundler like parcel or webpack, you can use the npm package
- See npm docs for version compatibility, in general, latest npm package/CDN
link should work fine with the latest elm package.

Then, you can add your HTML element like this:

```elm
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/](https://github.com/joakin/elm-canvas/tree/master/examples) folder,
and experience them [live](https://joakin.github.io/elm-canvas).

Additionally, some of the [p5js.org examples](https://p5js.org/examples/) were
adapted to Elm using this package. They can be found
[in the Elm discourse thread](https://discourse.elm-lang.org/t/some-p5js-org-examples-in-elm/3781).