paint
Types
An angle in clock-wise direction.
See: angle_rad
and angle_deg
.
pub opaque type Angle
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_rgb
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
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
pub type Key {
LeftArrow
RightArrow
UpArrow
DownArrow
Space
}
Constructors
-
LeftArrow
-
RightArrow
-
UpArrow
-
DownArrow
-
Space
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)
Functions
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
pub fn center(picture: Picture) -> fn(CanvasConfig) -> Picture
Utility to set the origin in the center of the canvas
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.
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.
pub fn concat(
picture: Picture,
another_picture: Picture,
) -> Picture
Concatenate two pictures
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.
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.
pub fn fill(picture: Picture, colour: Colour) -> Picture
Fill a picture with some given colour, see Colour
.
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.
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")
pub fn lines(points: List(#(Float, Float))) -> Picture
Lines (same as a polygon but not a closed shape)
pub fn polygon(points: List(#(Float, Float))) -> Picture
A polygon consisting of a list of 2d points
pub fn rectangle(width: Float, height: Float) -> Picture
A rectangle with some given width and height
pub fn rotate(picture: Picture, angle: Angle) -> Picture
Rotate the picture in a clock-wise direction
pub fn scale_uniform(picture: Picture, factor: Float) -> Picture
Scale the picture uniformly in horizontal and vertical direction
pub fn scale_x(picture: Picture, factor: Float) -> Picture
Scale the picture in the horizontal direction
pub fn scale_y(picture: Picture, factor: Float) -> Picture
Scale the picture in the vertical direction
pub fn stroke(
picture: Picture,
stroke_properties: StrokeProperties,
) -> Picture
Set properties for the stroke. See StrokeProperties
pub fn translate_x(picture: Picture, x: Float) -> Picture
Translate a picture in the horizontal direction
pub fn translate_xy(
picture: Picture,
x: Float,
y: Float,
) -> Picture
Translate a picture in horizontal and vertical direction
pub fn translate_y(picture: Picture, y: Float) -> Picture
Translate a picture in the vertical direction