A primitive template representing the eventual Shape you wish to draw. This must be turned into a Shape before being drawn to the screen with collage.

A filled object that can be drawn to the screen using collage.

Creates a blank canvas on which you can draw shapes. Takes a width, height and a list of Shape. Use this in your "view" functions in the three types of Apps above.

view = collage 500 500
    [ circle 10 |> filled red
    ]

The simplest way to render graphics to the screen. These graphics will be static (they don't move) and you can't interact with them. Great for beginners or for when you just need basic graphics. Note that your view function is bare, with no parameters:

view = collage 500 500
    [ circle 10 |> filled red
    ]

graphicsApp takes a parameter like this: { view = view }

Like graphicsApp, but you can add interactivity to your graphics by using the "notify" functions. This allows you to learn Elm's architecture in a fun way with graphics. Note that your view function needs a parameter now:

view model = collage 500 500
    [ circle 10 |> filled red
    ]

notificationApp takes a parameter like: { model = model , view = view , update = update }

GetKeyState returns a triple where the first argument is of type (Keys -> KeyState) so you can ask if a certain key is presses. The other two are tuples of arrow keys and WASD keys, respectively. They're in the form (x,y) which represents the key presses of each player.

Automatically maps time and keyboard presses to your program. This should be all you need for making complex interactive games and animations.

gameApp takes two parameters: one is your own type of the form (GetKeyState -> Float -> CustomMsg) and the other is { model = model , view = view , update = update }

Create a line from a point to a point. Use "outlined" to convert to a viewable Shape.

Create a closed shape given a list of points. Can use "outlined" or "filled" to convert to a Shape.

Create an open shape given a list of points. Unlike with polygon, the first and last points will not join up automatically. Can use "outlined" or "filled" to convert to a Shape.

Create a regular polygon with a given number of sides and radius. Examples:

ngon 3 50 - triangle
ngon 5 50 - pentagon
ngon 8 50 - octogon

Synonym for "ngon 3". Creates a triangle with a given size.

Creates a square with a given side length. (Synonym for rect s s)

Creates a rectangle with a given width and height.

Synonym for rect.

Creates a rectangle with a given width, height, and circular rounded corners with the given radius.

Creates a circle with a given radius.

Creates an oval with a given width and height.

Creates a wedge with a given radius, and a given fraction of a circle.

wedge 50 0.5 - semi-circle
wedge 50 0.25 - quarter-circle
wedge 50 0.75 - three-quarter circle

Creates a graph paper with squares of a given size.

Fill a Stencil with a Color, creating a Shape.

circle 10
    |> filled red

Outline a Stencil with a Linetype and Color, creating a Shape.

circle 10
    |> outlined (solid 5) red

Add an outline to an already-filled Shape.

circle 10
    |> filled red
    |> addOutline (solid 5) white

Create a custom colour given its red, green and blue components.

Create a custom colour given its red, green, blue and alpha components. Alpha is a Float from 0-1 representing the Shape's level of transparency.

Create a custom colour given its hue, saturation and light components.

Create a custom colour given its hue, saturation, light and alpha components. Alpha is a Float from 0-1 representing the Shape's level of transparency. lp

Combine n number of Shape types into one Shape that can be transformed as one.

Creates a curve starting at a point, pulled towards a point, ending at a third point.

curve (0,0) [Pull (0,10) (0,20)] - a curve starting at (0,0), pulled towards (0,10), ending at (0,20)

Think about curves as what you get when you take a bunch of bendy sticks with their ends glued down to a board, and then pulling each stick towards another point.

You always need an initial point and at least one Pull, but you can add as many Pulls as you want to add additional curve segments, but each curve segment can only bend one way, since it is pulled in one direction.

To make it easier to read the code defining a curve, and to make sure we always use the right number of curve points and pull points (which is one more curve point than pull points), we define a special Pull type, whose first point is the point we pull towards, and second point is the end point for this curve segmentsment.

Define a solid line type with the given width.

Define a dotted line type with the given width.

Define a dashed line type with the given width. Dashes are short line segments, versus dots which are theoretically points, but may be drawn with very sort line segments.

Define a dashed line type with the given width, where the dashes are longer than normal.

Define a line type with the given width, including alternating dots and dashes.

A line of increasing spaces from start to end with a given thickness.

increasing 1 10 5 -- increases from 1 to 10 with a thickness of 5.

A custom line defined by a list of (on,off).

custom [(10,5)] 5 -- a line that with dashes 10 long and spaces 5 long
custom [(10,5),(20,5)] -- on for 10, off 5, on 20, off 5

Creates a text stencil. You can change this stencil using the text helper functions. Note that "filled" or "outlined" must go at the end of the infixes (ie note that all these functions are Stencil -> Stencil).

text "Hello World"
    |> bold
    |> size 14
    |> filled black

Apply to a Stencil to render any text in the Stencil in the size given (in points), which depends on the size and type of screen used, but try 12 to start.

Apply to a Stencil to make any text in the Stencil bold.

Apply to a Stencil to make any text in the Stencil italic (ie slanted).

Apply to a Stencil to underline any text in the Stencil.

Apply to a Stencil to draw a line through any text in the Stencil.

Apply to a Stencil to centre any text in the Stencil.

Apply to a Stencil to render any text in the Stencil with a Sans Serif font (ie one without thinner and thicker bits).

Apply to a Stencil to render any text in the Stencil with a Serif font (ie one with thinner and thicker bits).

Apply to a Stencil to render any text in the Stencil with a font in which every character has the same width so that that letters line up from line to line which is important in programming languages like Elm.

Use a font of your choosing by specifying its string name. Use this sparingly as support for each font will vary accross browsers and devices.

Move a Shape by a number of units in x and y.

Rotate a Shape by the specified degrees (in radians). Use the "degrees" function to convert from degrees into radians.

Scale a Shape by a given factor.

Scale a Shape in the x-axis by a given factor.

Scale a Shape in the y-axis by a given factor.

Flip a Shape along the x-axis.

Flip a shape along the y-axis.

Receive a notification when a Shape is tapped or clicked.

Receive a notification with a tuple of position when the screen is tapped / clicked.

Receive a notification when the mouse enters a Shape.

Receive a notification with a tuple of position when mouse enters a Shape.

Receive a notification when the mouse leaves a Shape.

Receive a notification with a tuple of position when the mouse leaves a Shape.

Receive a notification with a tuple of position when the mouse is moved accross a Shape.

Receive a notification when the mouse button is down over a Shape.

Receive a notification with a tuple of position when the mouse button is down over a Shape.

Receive a notification when the mouse button goes up over a Shape.

Receive a notification with a tuple of position when the mouse goes up over a Shape.

Receive a notification when the user begins touching a Shape.

Receive a notification with a tuple of position when the user begins touching a Shape.

Receive a notification when the user stops touching a Shape.

Receive a notification with a tuple of position when the user stops touching a Shape.

Receive a notification with a tuple of position when the moves their finger over a Shape.

Make a Shape transparent by the fraction given. Multiplies on top of other transparencies:

circle 10
    |> filled red
    |> makeTransparent 0.5
--results in a transparency of 0.5 (half vislible)


circle 10
    |> filled red
    |> makeTransparent 0.5
    |> makeTransparent 0.5
--results in a transparency of 0.25 (a quarter visible)

Add a hyperlink to any Shape.

circle 10
    |> filled red
    |> addHyperLink "www.redcircle.com"