Utility to set the origin in the center of the canvas

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 once to register a custom HTML element <paint-canvas>
canvas.define_web_component()
// You can then display your picture by setting the "picture"
// property or attribute on the element.

// In Lustre it would look something like this:
fn canvas(picture: paint.Picture, attributes: List(attribute.Attribute(a))) {
 element.element(
   "paint-canvas",
   [attribute.attribute("picture", encode.to_string(picture)), ..attributes],
   [],
 )
}

A more detailed example for using this API can be found in the demos/with_lustre directory.

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

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

Create a reference to an image using a CSS query selector. For example:

fn kitten() {
 canvas.image_from_query("#kitten")
}
// In the HTML file:
// <img
//  style="display: none"
//  src="https://upload.wikimedia.org/wikipedia/commons/4/4d/Cat_November_2010-1a.jpg"
//  id="kitten"
// />

Important: Make sure the image has loaded before trying to draw a pictures referencing it. You can do this using canvas.wait_until_loaded function.

Create a reference to an image using a source path.

fn my_logo_image() {
  canvas.image_from_src("./priv/static/logo.svg")
}

Important: Make sure the image has loaded before trying to draw a pictures referencing it. You can do this using canvas.wait_until_loaded function.

Animations, interactive applications and tiny games can be built using the interact function. It roughly follows the 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")
}

Wait until a list of images have all been loaded, for example:

fn lucy() {
 canvas.image_from_query("#lucy")
}

fn cat() {
  canvas.image_from_src("./path/to/kitten.png")
}

pub fn main() {
 use <- canvas.wait_until_loaded([lucy(), kitten()])
 // It is now safe to draw Pictures containing the images lucy and kitten :)
}