paint/canvas

A HTML canvas backend that can be used for displaying your Pictures. There are three different ways of doing so:

display (provide a picture and a CSS selector to some canvas element)
define_web_component (an alternative to display using custom web components, useful if you are using a web framework like Lustre)
interact (allows you to make animations and interactive programs)

Types

Config

The configuration of the “canvas”

pub type Config {
  Config(width: Float, height: Float)
}

Constructors

```
Config(width: Float, height: Float)
```

Functions

center

</>

pub fn center(picture: Picture) -> fn(Config) -> Picture

Utility to set the origin in the center of the canvas

define_web_component

</>

pub fn define_web_component() -> Nil

If you are using Lustre or some other framework to build your web application you may prefer to use the web components API and the define_web_component function.

// Call this function to register a custom HTML element <paint-canvas>
canvas.define_web_component()
// You can then display your picture by setting the "picture"
// property on the element.

// In Lustre it would look something like this:
let my_picture = circle(50.0)
element(
  "paint-canvas",
   [
       attribute.property("picture", my_picture),
       attribute.width(500),
       attribute.height(300),
       attribute.style([#("background", "#eee")]),
    ],
    [],
)

A more detailed example for using this API together with Lustre can be found in this GitHub Gist.

display

</>

pub fn display(
  init: fn(Config) -> Picture,
  selector: String,
) -> Nil

Display a picture on a HTML canvas element (specified by some CSS Selector).

canvas.display(fn (_: canvas.Config) { circle(50.0) }, "#mycanvas")

interact

</>

pub fn interact(
  init: fn(Config) -> a,
  update: fn(a, Event) -> a,
  view: fn(a) -> Picture,
  selector: String,
) -> Nil

Animations, interactive applications and tiny games can be built using the interact function. It roughly follows the so-called Elm architecture. Here is a short example:

type State =
  Int

fn init(_: canvas.Config) -> State {
  0
}

fn update(state: State, event: event.Event) -> State {
  case event {
    event.Tick(_) -> state + 1
    _ -> state
  }
}

fn view(state: State) -> Picture {
  paint.circle(int.to_float(state))
}

fn main() {
  interact(init, update, view, "#mycanvas")
}