Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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
- Host: GitHub
- URL: https://github.com/joakin/elm-canvas
- Owner: joakin
- License: bsd-3-clause
- Created: 2018-07-30T17:12:58.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2022-11-21T14:49:58.000Z (about 2 years ago)
- Last Synced: 2025-01-16T21:08:30.449Z (9 days ago)
- Topics: canvas, custom-elements, elm, elm-lang, generative-art, web-components
- Language: Elm
- Homepage: https://package.elm-lang.org/packages/joakin/elm-canvas/latest/
- Size: 2.04 MB
- Stars: 163
- Watchers: 5
- Forks: 30
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-ccamel - joakin/elm-canvas - A canvas drawing library for Elm (Elm)
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).