This library exposes a low level API that mirrors most of the DOM canvas API to be used with Elm in a declarative way.
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
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