paint

Types

Angle

opaque </>

An angle in clock-wise direction. See: angle_rad and angle_deg.

pub opaque type Angle

CanvasConfig

</>

The configuration of the “canvas”

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

Constructors

CanvasConfig(width: Float, height: Float)

A rexport of the Colour type from gleam_community/colour. Paint also includes the functions colour_hex and colour_rgba to easily construct Colours, but feel free to import the gleam_community/colour module and use the many utility that are provided from there.

pub type Colour =
  colour.Colour

Event

</>

A list of events

pub type Event {
  Tick(Float)
  KeyDown(Key)
  KeyUp(Key)
}

Constructors

```
Tick(Float)
```
Triggered before drawing. Contains the number of milliseconds elapsed.
```
KeyDown(Key)
```
Triggered when a key is pressed
```
KeyUp(Key)
```
Triggered when a key is released

Key

</>

pub type Key {
  LeftArrow
  RightArrow
  UpArrow
  DownArrow
  Space
}

Constructors

```
LeftArrow
```
```
RightArrow
```
```
UpArrow
```
```
DownArrow
```
```
Space
```

Picture

opaque </>

A 2D picture

pub opaque type Picture

StrokeProperties

</>

Options for strokes. Either no stroke or a stroke with some given colour and line width.

pub type StrokeProperties {
  NoStroke
  SolidStroke(Colour, Float)
}

Constructors

```
NoStroke
```
```
SolidStroke(Colour, Float)
```

Vec2

</>

pub type Vec2 =
  #(Float, Float)

Functions

angle_deg

</>

pub fn angle_deg(degrees: Float) -> Angle

Create an angle expressed in degrees

angle_rad

</>

pub fn angle_rad(radians: Float) -> Angle

Create an angle expressed in radians

arc

</>

pub fn arc(radius: Float, start: Angle, end: Angle) -> Picture

An arc with some radius going from some starting angle to some other angle in clock-wise direction

blank

</>

pub fn blank() -> Picture

A blank image

center

</>

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

Utility to set the origin in the center of the canvas

circle

</>

pub fn circle(radius: Float) -> Picture

A circle with some given radius

colour_hex

</>

pub fn colour_hex(string: String) -> Colour

A utility around colour.from_rgb_hex_string (from gleam_community/colour) that panics on an invalid hex code.

colour_rgb

</>

pub fn colour_rgb(red: Int, green: Int, blue: Int) -> Colour

A utility around colour.from_rgb255 (from gleam_community/colour) that panics if the values are outside of the allowed range.

combine

</>

pub fn combine(pictures: List(Picture)) -> Picture

Combine multiple pictures into one

concat

</>

pub fn concat(
  picture: Picture,
  another_picture: Picture,
) -> Picture

Concatenate two pictures

define_web_component

</>

pub fn define_web_component() -> Nil

As an alternative to display_on_canvas you can use this web components API to display your pictures. This may be especially convenient when using a front-end framework such as Lustre.

After calling this function you will be able to use the element paint-canvas:

<paint-canvas></paint-canvas>
<script>
  const myCanvas = document.querySelector("paint-canvas");
  // When the `picture` property is set to a `Picture` object that picture
  // will be displayed on the canvas.
  myCanvas.picture = ...;
</script>

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

display_on_canvas

</>

pub fn display_on_canvas(
  init: fn(CanvasConfig) -> Picture,
  selector: String,
) -> Nil

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

Note: this function may only be called once the page has loaded and the document objects is available.

fill

</>

pub fn fill(picture: Picture, colour: Colour) -> Picture

Fill a picture with some given colour, see Colour.

interact_on_canvas

</>

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

Make animations and games and display them on the given HTML canvas (specified by some CSS Selector).

Follows the same architecture as Elm/Lustre. The type variable “state” can be anything you want. If you are only making a stateless animation, use Nil. Note: this function may only be called once the page has loaded and the document and window objects are available.

just

</>

pub fn just(picture: Picture) -> fn(a) -> Picture

Utility function that is useful for cases where you are no interested in the canvas configuration. For example,

display_on_canvas(just(circle(30.0)), "#my_canvas")
// instead of...
display_on_canvas(fn(_config) { circle(30.0) }, "#my_canvas")

lines

</>

pub fn lines(points: List(#(Float, Float))) -> Picture

Lines (same as a polygon but not a closed shape)

polygon

</>

pub fn polygon(points: List(#(Float, Float))) -> Picture

A polygon consisting of a list of 2d points

rectangle

</>

pub fn rectangle(width: Float, height: Float) -> Picture

A rectangle with some given width and height

rotate

</>

pub fn rotate(picture: Picture, angle: Angle) -> Picture

Rotate the picture in a clock-wise direction

scale_uniform

</>

pub fn scale_uniform(picture: Picture, factor: Float) -> Picture

Scale the picture uniformly in horizontal and vertical direction

scale_x

</>

pub fn scale_x(picture: Picture, factor: Float) -> Picture

Scale the picture in the horizontal direction

scale_y

</>

pub fn scale_y(picture: Picture, factor: Float) -> Picture

Scale the picture in the vertical direction

square

</>

pub fn square(length: Float) -> Picture

A square

stroke

</>

pub fn stroke(
  picture: Picture,
  stroke_properties: StrokeProperties,
) -> Picture

Set properties for the stroke. See StrokeProperties

text

</>

pub fn text(text: String, font_size_px: Int) -> Picture

Text with some given font size

translate_x

</>

pub fn translate_x(picture: Picture, x: Float) -> Picture

Translate a picture in the horizontal direction

translate_xy

</>

pub fn translate_xy(
  picture: Picture,
  x: Float,
  y: Float,
) -> Picture

Translate a picture in horizontal and vertical direction

translate_y

</>

pub fn translate_y(picture: Picture, y: Float) -> Picture

Translate a picture in the vertical direction