Linear gradient definition.

• x0, y0: top left corner of the gradient
• x1, y1: bottom right corner of the gradient

Radial gradient definition.

• x0, y0: top left corner of the gradient
• x1, y1: bottom right corner of the gradient
• rad0: inner radius of the gradient
• rad1: outer radius of the gradient

Fill with linear gradient.

• x0, y0: top left corner of the gradient
• x1, y1: bottom right corner of the gradient
• stops: ( offset, color )
  • offset is a float number from 0 to 1, so the horizontal position of the stop
  • where color is the Color of given stop (from avh4/elm-color)

Fill with radial gradient.

• x0, y0: top left corner of the gradient
• x1, y1: bottom right corner of the gradient
• rad0: inner radius of the gradient
• rad1: outer radius of the gradient
• stops: ( offset, color )
  • offset is a float number from 0 to 1, so the horizontal position of the stop
  • where color is the Color of given stop (from avh4/elm-color)

Stroke with linear gradient.

• x0, y0: top left corner of the gradient
• x1, y1: bottom right corner of the gradient
• stops: ( offset, color )
  • offset is a float number from 0 to 1, so the horizontal position of the stop
  • where color is the Color of given stop (from avh4/elm-color)

Stroke with radial gradient.

• x0, y0: top left corner of the gradient
• x1, y1: bottom right corner of the gradient
• rad0: inner radius of the gradient
• rad1: outer radius of the gradient
• stops: ( offset, color )
  • offset is a float number from 0 to 1, so the horizontal position of the stop
  • where color is the Color of given stop (from avh4/elm-color)

Specify a shadow to be rendered. See the Shadow type alias to know what parameters to pass.

Record with the settings for a shadow.

• blur: Amount of blur for the shadow
• color: Color of the shadow (from avh4/elm-color)
• offset: ( xOffset, yOffset )

Specify the transform matrix to apply when drawing. You do so by applying transforms in order, like translate, rotate, or scale, but you can also use applyMatrix and set the matrix yourself manually if you know what you are doing.

shapes
    [ transform [ rotate (degrees 50) ] ]
    [ rect ( 40, 40 ) 20 20 ]

Type of transform to apply to the matrix, to be used in transform. See the functions below to learn how to create transforms.

Adds a translation transformation by moving the canvas and its origin x units horizontally and y units vertically on the grid.

More information and examples on the MDN docs

translate x y

Adds a rotation to the transformation matrix. The angle argument represents a clockwise rotation angle and is expressed in radians. Use the core function degrees to make it easier to represent the rotation.

rotate (degrees 90)

The rotation center point is always the canvas origin. To change the center point, we will need to move the canvas by using the translate transform before rotating. For example, a very common use case to rotate from a specific point in the canvas, maybe the center of your renderable, would be done by translating to that point, rotating, and then translating back, if you want to apply more transformations. Like this:

transform
    [ translate x y
    , rotate rotation
    , translate -x -y


    {- Other transforms -}
    ]

See the MDN docs for more information and examples.

Adds a scaling transformation to the canvas units by x horizontally and by y vertically.

By default, one unit on the canvas is exactly one pixel. If we apply, for instance, a scaling factor of 0.5, the resulting unit would become 0.5 pixels and so shapes would be drawn at half size. In a similar way setting the scaling factor to 2.0 would increase the unit size and one unit now becomes two pixels. This results in shapes being drawn twice as large.

scale x y

• x
  • Scaling factor in the horizontal direction.
• y
  • Scaling factor in the vertical direction.

Note: You can use scale -1 1 to flip the context horizontally and scale 1 -1 to flip it vertically.

More information and examples in the MDN docs

Multiplies the current transformation with the matrix described by the arguments of this method. You are able to scale, rotate, move and skew the context.

• m11
  • Horizontal scaling.
• m12
  • Horizontal skewing.
• m21
  • Vertical skewing.
• m22
  • Vertical scaling.
• dx
  • Horizontal moving.
• dy
  • Vertical moving.

Specify a filter applied on the renderable object.

You can use functions like blur, brightness, contrast and so on to apply the filters.

The property is a string, so you can choose your filters like this:

"<filter-function1> [<filter-function2] [<filter-functionN]"

See the MDN docs for more information and examples.

Specifies the alpha value that is applied before renderables are drawn onto the canvas. The value is in the range from 0.0 (fully transparent) to 1.0 (fully opaque). The default value is 1.0. Values outside the range, including Infinity and NaN will not be set and alpha will remain default.

Specify if scaled images are smoothed (default) or not.

This property is useful for games and other apps that use pixel art. When enlarging images, the default resizing algorithm will blur the pixels. Set this property to false to retain the pixels' sharpness.

Specify the type of compositing operation to apply when drawing new entities, where type is a GlobalCompositeOperationMode identifying which of the compositing or blending mode operations to use.

See GlobalCompositeOperationMode below for more information.

compositeOperationMode Screen

Type of compositing operation, identifying which of the compositing or blending mode operations to use. See the chapter Compositing from the Canvas Tutorial.

For more information and pictures of what each mode does, see the MDN docs.