linsyking/elm-canvas/2.0.0

NOTE: the latest version is 4.4.0

Rerouted (regenerated, verified). Same repository and tag, but GitHub now builds the zip with different bytes, so it no longer matches the SHA-1 package.elm-lang.org recorded. The Lamdera package server serves a copy recovered from https://github.com/linsyking/elm-canvas.

What we checked: Rebuilt with git archive from commit 8a2e082db001 of https://github.com/linsyking/elm-canvas (zip prefix linsyking-elm-canvas-8a2e082/, America/Los_Angeles times): the zip is byte-identical to the one package.elm-lang.org recorded, SHA-1 161e76f3d17c5bd6e93cefb51e57639cdb8559da.

The Lamdera compiler uses this copy and prints a one-line notice saying so. elm itself fails to download this version.

Details · package.elm-lang.org's zip: https://github.com/linsyking/elm-canvas/zipball/2.0.0/

Canvas.Settings

type alias Setting =
Setting

Similar to Html.Attribute, settings control the presentation and other style options for the Renderables.

Styling the things you draw

The two main style settings are fill color and stroke color, which are documented here.

fill : Color -> Setting

By default, renderables are drawn with black color. If you want to specify a different color to draw, use this Setting on your renderable.

The type Color comes from the package avh4/elm-color. To use it explicitly, run:

-- elm install avh4/elm-color

and then import it in.

import Color
-- ...
shapes
    [ fill Color.green ]
    [ rect ( 10, 30 ) 50 50 ]
stroke : Color -> Setting

By default, renderables are drawn with no visible stroke. If you want to specify a stroke color to draw an outline over your renderable, use this Setting on it.

The type Color comes from the package avh4/elm-color. To use it explicitly, run:

-- elm install avh4/elm-color

and then import it in.

import Color
-- ...
shapes
    [ stroke Color.red ]
    [ rect ( 10, 30 ) 50 50 ]

If you want to modify the appearance of the stroke line, you can use other Settings from the Canvas.Settings.Line module.

Other frequently used settings

There are other style settings in the documentation (if you search for things that return a Setting you can see). More specifically:

  • There are some style settings that only apply when drawing text, and you can find them in the Canvas.Settings.Text module.
  • Line settings that apply to paths, shapes and text with stroke. Learn about them on the Canvas.Settings.Line.
  • There are other more advanced rendering settings that you can read about on the Canvas.Settings.Advanced. They cover things like:
    • Shadows.
    • Matrix transforms.
    • And other more advanced topics like compositing mode.