docs.json

[{"name":"Canvas","comment":" This module exposes a nice drawing API that works on top of the the DOM\ncanvas.\n\nSee instructions in the main page of the package for installation, as it\nrequires the `elm-canvas` web component to work.\n\n\n# Usage in HTML\n\n@docs toHtml, toHtmlWith\n\n\n# Drawing things\n\n@docs Renderable, Point\n\n@docs clear, shapes, text, texture, group, video\n\n\n# Drawing shapes\n\nShapes can be rectangles, circles, and different types of lines. By composing\nshapes, you can draw complex figures! There are many functions that produce\na `Shape`, which you can feed to `shapes` to get something on the screen.\n\n@docs Shape\n\nHere are the different functions that produce shapes that we can draw.\n\n@docs rect, roundRect, circle, arc, path\n\n\n## Paths\n\nIn order to make a complex path, we need to put together a list of `PathSegment`\n\n@docs PathSegment, arcTo, bezierCurveTo, lineTo, moveTo, quadraticCurveTo\n\n","unions":[],"aliases":[{"name":"PathSegment","comment":" In order to draw a path, you need to give the function `path` a list of\n`PathSegment`\n","args":[],"type":"Canvas.Internal.Canvas.PathSegment"},{"name":"Point","comment":" A small alias to reference points on some of the functions on the package.\n\nThe first argument of the tuple is the `x` position, and the second is the `y`\nposition.\n\n    -- Making a point with x = 15 and y = 55\n    point : Point\n    point =\n        ( 15, 55 )\n\n","args":[],"type":"( Basics.Float, Basics.Float )"},{"name":"Renderable","comment":" A `Renderable` is a thing that the canvas knows how to render, similar to\n`Html` elements.\n\nWe can make `Renderable`s to use with `Canvas.toHtml` with functions like\n`shapes` and `text`.\n\n","args":[],"type":"Canvas.Internal.Canvas.Renderable"},{"name":"Shape","comment":" A `Shape` represents a shape or lines to be drawn. Giving them to `shapes`\nwe get a `Renderable` for the canvas.\n\n    shapes []\n        [ path ( 20, 10 )\n            [ lineTo ( 10, 30 )\n            , lineTo ( 30, 30 )\n            , lineTo ( 20, 10 )\n            ]\n        , circle ( 50, 50 ) 10\n        , rect ( 100, 150 ) 40 50\n        , circle ( 100, 100 ) 80\n        ]\n\n","args":[],"type":"Canvas.Internal.Canvas.Shape"}],"values":[{"name":"arc","comment":" Creates an arc, a partial circle. It takes:\n\n  - The position of the center of the circle\n  - The radius of the circle\n  - The start angle (in radians) where the arc will start\n      - 0 is center right, 90 is bottom center\n  - The end angle (in radians) where the arc will end\n  - If it should draw in clockwise or anti-clockwise direction\n\n**Note**: If you want to give the angles in degrees, you can use the `degrees`\nfunction from elm/core.\n\n    arc ( 10, 10 ) 40 { startAngle = degrees 15, endAngle = degrees 85, clockwise = True }\n\n**Note**: If you want to make a partial circle (like a pizza slice), combine\nwith `path` to make a triangle, and then the arc. See the pie chart example.\n\n","type":"Canvas.Point -> Basics.Float -> { startAngle : Basics.Float, endAngle : Basics.Float, clockwise : Basics.Bool } -> Canvas.Shape"},{"name":"arcTo","comment":" Adds an arc to the path with the given control points and radius.\n\nThe arc drawn will be a part of a circle, never elliptical. Typical use could be\nmaking a rounded corner.\n\nOne way to think about the arc drawn is to imagine two straight segments, from\nthe starting point (latest point in current path) to the first control point,\nand then from the first control point to the second control point. These two\nsegments form a sharp corner with the first control point being in the corner.\nUsing `arcTo`, the corner will instead be an arc with the given radius.\n\nThe arc is tangential to both segments, which can sometimes produce surprising\nresults, e.g. if the radius given is larger than the distance between the\nstarting point and the first control point.\n\nIf the radius specified doesn't make the arc meet the starting point (latest\npoint in the current path), the starting point is connected to the arc with\na straight line segment.\n\n    arcTo ( x1, y1 ) ( x2, y2 ) radius\n\nYou can see more examples and docs in [this page](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/arcTo)\n\n","type":"Canvas.Point -> Canvas.Point -> Basics.Float -> Canvas.PathSegment"},{"name":"bezierCurveTo","comment":" Adds a cubic Bézier curve to the path. It requires three points. The first\ntwo points are control points and the third one is the end point. The starting\npoint is the last point in the current path, which can be changed using `moveTo`\nbefore creating the Bézier curve. You can learn more about this curve in the\n[MDN docs](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/bezierCurveTo).\n\n    bezierCurveTo controlPoint1 controlPoint2 point\n\n    bezierCurveTo ( cp1x, cp1y ) ( cp2x, cp2y ) ( x, y )\n\n  - `cp1x`\n      - The x axis of the coordinate for the first control point.\n  - `cp1y`\n      - The y axis of the coordinate for the first control point.\n  - `cp2x`\n      - The x axis of the coordinate for the second control point.\n  - `cp2y`\n      - The y axis of the coordinate for the second control point.\n  - `x`\n      - The x axis of the coordinate for the end point.\n  - `y`\n      - The y axis of the coordinate for the end point.\n\n","type":"Canvas.Point -> Canvas.Point -> Canvas.Point -> Canvas.PathSegment"},{"name":"circle","comment":" Creates a circle. It takes the position of the center of the circle, and the\nradius of it.\n\n    circle pos radius\n\n","type":"Canvas.Point -> Basics.Float -> Canvas.Shape"},{"name":"clear","comment":" We use `clear` to remove the contents of a rectangle in the screen and make\nthem transparent.\n\n    import Canvas exposing (..)\n\n    Canvas.toHtml ( width, height )\n        []\n        [ clear ( 0, 0 ) width height\n        , shapes [ fill Color.red ] [ rect ( 10, 10 ) 20 20 ]\n        ]\n\n","type":"Canvas.Point -> Basics.Float -> Basics.Float -> Canvas.Renderable"},{"name":"group","comment":" Groups many renderables into one, and provides the opportunity to apply\nsettings for the whole group.\n\n    Canvas.toHtml ( width, height )\n        []\n        [ group [ fill Color.red ]\n            [ shapes [] [ rect ( 0, 0 ) w h ]\n            , text\n                [ font { size = 48, family = \"sans-serif\" }, align Center ]\n                ( 50, 50 )\n                \"Hello world\"\n            ]\n        ]\n\n","type":"List.List Canvas.Internal.Canvas.Setting -> List.List Canvas.Renderable -> Canvas.Renderable"},{"name":"lineTo","comment":" Connects the last point in the previous shape to the x, y coordinates with a\nstraight line.\n\n    lineTo ( x, y )\n\nIf you want to make a line independently of where the previous shape ended, you\ncan use `moveTo` before using lineTo.\n\n","type":"Canvas.Point -> Canvas.PathSegment"},{"name":"moveTo","comment":" `moveTo` doesn't necessarily produce any shape, but it moves the starting\npoint somewhere so that you can use this with other lines.\n\n    moveTo point\n\n","type":"Canvas.Point -> Canvas.PathSegment"},{"name":"path","comment":" Creates a complex path as a shape from a list of `PathSegment` instructions.\n\nIt is mandatory to pass in the starting point for the path, since the path\nstarts with an implicit `moveTo` the starting point to avoid undesirable\nbehavior and implicit state.\n\n    path startingPoint segments\n\n","type":"Canvas.Point -> List.List Canvas.PathSegment -> Canvas.Shape"},{"name":"quadraticCurveTo","comment":" Adds a quadratic Bézier curve to the path. It requires two points. The\nfirst point is a control point and the second one is the end point. The starting\npoint is the last point in the current path, which can be changed using `moveTo`\nbefore creating the quadratic Bézier curve. Learn more about quadratic bezier\ncurves in the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/quadraticCurveTo)\n\n    quadraticCurveTo controlPoint point\n\n    quadraticCurveTo ( cpx, cpy ) ( x, y )\n\n  - `cpx`\n      - The x axis of the coordinate for the control point.\n  - `cpy`\n      - The y axis of the coordinate for the control point.\n  - `x`\n      - The x axis of the coordinate for the end point.\n  - `y`\n      - The y axis of the coordinate for the end point.\n\n","type":"Canvas.Point -> Canvas.Point -> Canvas.PathSegment"},{"name":"rect","comment":" Creates the shape of a rectangle. It needs the position of the top left\ncorner, the width, and the height.\n\n    rect pos width height\n\n","type":"Canvas.Point -> Basics.Float -> Basics.Float -> Canvas.Shape"},{"name":"roundRect","comment":" Creates the shape of a rounded rectangle.\nIt takes the position of the top left corner, the width, the height and a list specifying\nthe radii of the circular arc to be used for the corners of the rectangle. The list must\ncontain between 1 and 4 positive numbers.\nYou can find more info on this [page](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/roundRect).\n","type":"Canvas.Point -> Basics.Float -> Basics.Float -> List.List Basics.Float -> Canvas.Shape"},{"name":"shapes","comment":" We use `shapes` to render different shapes like rectangles, circles, and\nlines of different kinds that we can connect together.\n\nYou can draw many shapes with the same `Setting`s, which makes for very\nefficient rendering.\n\n    import Canvas exposing (..)\n    import Color -- elm install avh4/elm-color\n\n    Canvas.toHtml ( width, height )\n        []\n        [ shapes [ fill Color.white ] [ rect ( 0, 0 ) width height ] ]\n\nYou can read more about the different kinds of `Shape` in the **Drawing shapes**\nsection.\n\n","type":"List.List Canvas.Internal.Canvas.Setting -> List.List Canvas.Shape -> Canvas.Renderable"},{"name":"text","comment":" We use `text` to render text on the canvas. We need to pass the list of\nsettings to style it, the point with the coordinates where we want to render,\nand the text to render.\n\nKeep in mind that `align` and other settings can change where the text is\npositioned with regards to the coordinates provided.\n\n    Canvas.toHtml ( width, height )\n        []\n        [ text\n            [ font { size = 48, family = \"sans-serif\" }, align Center ]\n            ( 50, 50 )\n            \"Hello world\"\n        ]\n\nYou can learn more about drawing text and its settings in the **Drawing text**\nsection.\n\n","type":"List.List Canvas.Internal.Canvas.Setting -> Canvas.Point -> String.String -> Canvas.Renderable"},{"name":"texture","comment":" Draw a texture into your canvas.\n\nTextures can be loaded by using `toHtmlWith` and passing in a `Texture.Source`.\nOnce the texture is loaded, and you have an actual `Texture`, you can use it\nwith this method to draw it.\n\nYou can also make different types of textures from the same texture, in case you\nhave a big sprite sheet and want to create smaller textures that are\na _viewport_ into a bigger sheet.\n\nSee the `Canvas.Texture` module and the `sprite` function in it.\n\n","type":"List.List Canvas.Internal.Canvas.Setting -> Canvas.Point -> Canvas.Texture.Texture -> Canvas.Renderable"},{"name":"toHtml","comment":" Create a Html element that you can use in your view.\n\n    Canvas.toHtml ( width, height )\n        [ style \"display\" \"block\", onClick CanvasClick ]\n        [ shapes [ fill Color.white ] [ rect ( 0, 0 ) w h ]\n        , text\n            [ font { size = 48, family = \"sans-serif\" }, align Center ]\n            ( 50, 50 )\n            \"Hello world\"\n        ]\n\n`toHtml` is almost like creating other Html elements. We need to pass `(width,\nheight)` in pixels, a list of `Html.Attribute`, and finally _instead_ of a list\nof html elements, we pass a `List Renderable`. A `Renderable` is a thing that\nthe canvas knows how to render. Read on for more information 👇.\n\n**Note**: Remember to include the `elm-canvas` web component from npm in your page for\nthis to work!\n\n**Note**: This element has `display: inline` by default, so their width or\nheight will have no effect. You can change it to `block` for example. See [MDN:\ndisplay](https://developer.mozilla.org/es/docs/Web/CSS/display) for possible\ndisplay values.\n\n","type":"( Basics.Int, Basics.Int ) -> List.List (Html.Attribute msg) -> List.List Canvas.Renderable -> Html.Html msg"},{"name":"toHtmlWith","comment":" Similar to `toHtml` but with more explicit options and the ability to load\ntextures.\n\n    Canvas.toHtmlWith\n        { width = 500\n        , height = 500\n        , textures = [ Texture.loadImageUrl \"./assets/sprite.png\" TextureLoaded ]\n        }\n        [ style \"display\" \"block\", onClick CanvasClick ]\n        [ shapes [ fill Color.white ] [ rect ( 0, 0 ) w h ]\n        , text\n            [ font { size = 48, family = \"sans-serif\" }, align Center ]\n            ( 50, 50 )\n            \"Hello world\"\n        ]\n\n**Note**: Remember to include the `elm-canvas` web component from npm in your page for\nthis to work!\n\n**Note**: This element has `display: inline` by default, so their width or\nheight will have no effect. You can change it to `block` for example. See [MDN:\ndisplay](https://developer.mozilla.org/es/docs/Web/CSS/display) for possible\ndisplay values.\n\nSee `toHtml` above and the `Canvas.Texture` module for more details.\n\n","type":"{ width : Basics.Int, height : Basics.Int, textures : List.List (Canvas.Texture.Source msg), videos : List.List (Canvas.Video.Source msg) } -> List.List (Html.Attribute msg) -> List.List Canvas.Renderable -> Html.Html msg"},{"name":"video","comment":" Rendering video\n","type":"List.List Canvas.Internal.Canvas.Setting -> Canvas.Point -> Canvas.Video.Video -> Canvas.Renderable"}],"binops":[]},{"name":"Canvas.Settings","comment":"\n\n@docs Setting\n\n\n# Styling the things you draw\n\nThe two main style settings are fill color and stroke color, which are\ndocumented here.\n\n@docs fill, stroke\n\n\n## Other frequently used settings\n\nThere are other style settings in the documentation (if you search for things\nthat return a `Setting` you can see). More specifically:\n\n  - There are some style settings that only apply when drawing text, and you can\n    find them in the `Canvas.Settings.Text` module.\n  - Line settings that apply to paths, shapes and text with stroke. Learn about\n    them on the `Canvas.Settings.Line`.\n  - There are other more advanced rendering settings that you can read about\n    on the `Canvas.Settings.Advanced`. They cover things like:\n      - Shadows.\n      - Matrix transforms.\n      - And other more advanced topics like compositing mode.\n\n","unions":[],"aliases":[{"name":"Setting","comment":" Similar to `Html.Attribute`, settings control the presentation and other\nstyle options for the `Renderable`s.\n","args":[],"type":"Canvas.Internal.Canvas.Setting"}],"values":[{"name":"fill","comment":" By default, renderables are drawn with black color. If you want to specify\na different color to draw, use this `Setting` on your renderable.\n\nThe type `Color` comes from the package `avh4/elm-color`. To use it explicitly,\nrun:\n\n    -- elm install avh4/elm-color\n\n\n\nand then import it in.\n\n    import Color\n    -- ...\n    shapes\n        [ fill Color.green ]\n        [ rect ( 10, 30 ) 50 50 ]\n\n","type":"Color.Color -> Canvas.Settings.Setting"},{"name":"stroke","comment":" By default, renderables are drawn with no visible stroke. If you want to\nspecify a stroke color to draw an outline over your renderable, use this\n`Setting` on it.\n\nThe type `Color` comes from the package `avh4/elm-color`. To use it explicitly,\nrun:\n\n    -- elm install avh4/elm-color\n\n\n\nand then import it in.\n\n    import Color\n    -- ...\n    shapes\n        [ stroke Color.red ]\n        [ rect ( 10, 30 ) 50 50 ]\n\nIf you want to modify the appearance of the stroke line, you can use other\n`Setting`s from the `Canvas.Settings.Line` module.\n\n","type":"Color.Color -> Canvas.Settings.Setting"}],"binops":[]},{"name":"Canvas.Settings.Advanced","comment":"\n\n\n# Advanced rendering settings\n\nThe following are settings that you can apply, to create very specific and\ncustom effects.\n\n\n## Gradient\n\nThe gradient setting allows you to use linear or radial gradients for fill or stroke.\n\n@docs LinearGradient, RadialGradient, fillLinear, fillRadial, strokeLinear, strokeRadial\n\n\n## Shadows\n\nThe shadow setting allows you to create a shadow for a renderable, similar to\nwhat the `box-shadow` CSS does to HTML elements.\n\nA word of caution, shadows have a non-trivial performance cost, so use them\nwisely.\n\n@docs shadow, Shadow\n\n\n## Transforms: scaling, rotating, translating, and matrix transformations\n\nTransforms are very useful as they allow you to manipulate the rendering via\na transformation matrix, allowing you to translate, scale, rotate and skew the\nrendering context easily. They can be a bit of an advanced topic, but they are\npowerful and can be very useful.\n\nWhen using transforms, keep in mind you are working on the global coordinate\nsystem, since it very hard to know what the center of your shape is to give\nsensible defaults.\n\n@docs transform, Transform, translate, rotate, scale, applyMatrix\n\n\n## Filter\n\nFilters are powerful when you want to add visual effects to your renderable objects.\n\n@docs filter\n\n\n## Alpha, image smoothing and global composite mode\n\nFinally, there are a couple of other settings that you can use to create\ninteresting visual effects:\n\n@docs alpha, imageSmoothing, compositeOperationMode, GlobalCompositeOperationMode\n\n","unions":[{"name":"GlobalCompositeOperationMode","comment":" Type of compositing operation, identifying which of the compositing or\nblending mode operations to use. See the chapter\n[Compositing](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing)\nfrom the Canvas Tutorial.\n\nFor more information and pictures of what each mode does, see the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation).\n\n","args":[],"cases":[["SourceOver",[]],["SourceIn",[]],["SourceOut",[]],["SourceAtop",[]],["DestinationOver",[]],["DestinationIn",[]],["DestinationOut",[]],["DestinationAtop",[]],["Lighter",[]],["Copy",[]],["Xor",[]],["Multiply",[]],["Screen",[]],["Overlay",[]],["Darken",[]],["Lighten",[]],["ColorDodge",[]],["ColorBurn",[]],["HardLight",[]],["SoftLight",[]],["Difference",[]],["Exclusion",[]],["Hue",[]],["Saturation",[]],["Color",[]],["Luminosity",[]]]},{"name":"Transform","comment":" Type of transform to apply to the matrix, to be used in `transform`. See the\nfunctions below to learn how to create transforms.\n","args":[],"cases":[["Rotate",["Basics.Float"]],["Scale",["Basics.Float","Basics.Float"]],["Translate",["Basics.Float","Basics.Float"]],["ApplyMatrix",["{ m11 : Basics.Float, m12 : Basics.Float, m21 : Basics.Float, m22 : Basics.Float, dx : Basics.Float, dy : Basics.Float }"]]]}],"aliases":[{"name":"LinearGradient","comment":" Linear gradient definition.\n\n  - `x0`, `y0`: top left corner of the gradient\n  - `x1`, `y1`: bottom right corner of the gradient\n\n","args":[],"type":"{ x0 : Basics.Float, y0 : Basics.Float, x1 : Basics.Float, y1 : Basics.Float }"},{"name":"RadialGradient","comment":" Radial gradient definition.\n\n  - `x0`, `y0`: top left corner of the gradient\n  - `x1`, `y1`: bottom right corner of the gradient\n  - `rad0`: inner radius of the gradient\n  - `rad1`: outer radius of the gradient\n\n","args":[],"type":"{ x0 : Basics.Float, y0 : Basics.Float, rad0 : Basics.Float, x1 : Basics.Float, y1 : Basics.Float, rad1 : Basics.Float }"},{"name":"Shadow","comment":" Record with the settings for a shadow.\n\n  - `blur`: Amount of blur for the shadow\n  - `color`: `Color` of the shadow (from avh4/elm-color)\n  - `offset`: `( xOffset, yOffset )`\n\n","args":[],"type":"{ blur : Basics.Float, color : Color.Color, offset : ( Basics.Float, Basics.Float ) }"}],"values":[{"name":"alpha","comment":" Specifies the alpha value that is applied before renderables are drawn onto\nthe canvas. The value is in the range from 0.0 (fully transparent) to 1.0 (fully\nopaque). The default value is 1.0. Values outside the range, including\n`Infinity` and `NaN` will not be set and alpha will remain default.\n","type":"Basics.Float -> Canvas.Internal.Canvas.Setting"},{"name":"applyMatrix","comment":" Multiplies the current transformation with the matrix described by the\narguments of this method. You are able to scale, rotate, move and skew the\ncontext.\n\n  - `m11`\n      - Horizontal scaling.\n  - `m12`\n      - Horizontal skewing.\n  - `m21`\n      - Vertical skewing.\n  - `m22`\n      - Vertical scaling.\n  - `dx`\n      - Horizontal moving.\n  - `dy`\n      - Vertical moving.\n\n","type":"{ m11 : Basics.Float, m12 : Basics.Float, m21 : Basics.Float, m22 : Basics.Float, dx : Basics.Float, dy : Basics.Float } -> Canvas.Settings.Advanced.Transform"},{"name":"compositeOperationMode","comment":" Specify the type of compositing operation to apply when drawing new\nentities, where type is a `GlobalCompositeOperationMode` identifying which of\nthe compositing or blending mode operations to use.\n\nSee `GlobalCompositeOperationMode` below for more information.\n\n    compositeOperationMode Screen\n\n","type":"Canvas.Settings.Advanced.GlobalCompositeOperationMode -> Canvas.Internal.Canvas.Setting"},{"name":"fillLinear","comment":" Fill with linear gradient.\n\n  - `x0`, `y0`: top left corner of the gradient\n  - `x1`, `y1`: bottom right corner of the gradient\n  - `stops`: `( offset, color )`\n      - offset is a float number from 0 to 1, so the horizontal position of the stop\n      - where color is the `Color` of given stop (from avh4/elm-color)\n\n","type":"Canvas.Settings.Advanced.LinearGradient -> List.List ( Basics.Float, Color.Color ) -> Canvas.Internal.Canvas.Setting"},{"name":"fillRadial","comment":" Fill with radial gradient.\n\n  - `x0`, `y0`: top left corner of the gradient\n  - `x1`, `y1`: bottom right corner of the gradient\n  - `rad0`: inner radius of the gradient\n  - `rad1`: outer radius of the gradient\n  - `stops`: `( offset, color )`\n      - offset is a float number from 0 to 1, so the horizontal position of the stop\n      - where color is the `Color` of given stop (from avh4/elm-color)\n\n","type":"Canvas.Settings.Advanced.RadialGradient -> List.List ( Basics.Float, Color.Color ) -> Canvas.Internal.Canvas.Setting"},{"name":"filter","comment":" Specify a filter applied on the renderable object.\n\nYou can use functions like `blur`, `brightness`, `contrast` and so on to apply the filters.\n\nThe property is a string, so you can choose your filters like this:\n\n`\"<filter-function1> [<filter-function2] [<filter-functionN]\"`\n\nSee the [MDN docs](https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/filter)\nfor more information and examples.\n\n","type":"String.String -> Canvas.Internal.Canvas.Setting"},{"name":"imageSmoothing","comment":" Specify if scaled images are smoothed (default) or not.\n\nThis property is useful for games and other apps that use pixel art. When\nenlarging images, the default resizing algorithm will blur the pixels. Set this\nproperty to false to retain the pixels' sharpness.\n\n","type":"Basics.Bool -> Canvas.Internal.Canvas.Setting"},{"name":"rotate","comment":" Adds a rotation to the transformation matrix. The `angle` argument\nrepresents a clockwise rotation angle and is expressed in radians. Use the core\nfunction `degrees` to make it easier to represent the rotation.\n\n    rotate (degrees 90)\n\nThe rotation center point is always the canvas origin. To change the center\npoint, we will need to move the canvas by using the `translate` transform before\nrotating. For example, a very common use case to rotate from a specific point in\nthe canvas, maybe the center of your renderable, would be done by translating to\nthat point, rotating, and then translating back, if you want to apply more\ntransformations. Like this:\n\n    transform\n        [ translate x y\n        , rotate rotation\n        , translate -x -y\n\n        {- Other transforms -}\n        ]\n\nSee the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/rotate)\nfor more information and examples.\n\n","type":"Basics.Float -> Canvas.Settings.Advanced.Transform"},{"name":"scale","comment":" Adds a scaling transformation to the canvas units by `x` horizontally and by\n`y` vertically.\n\nBy default, one unit on the canvas is exactly one pixel. If we apply, for\ninstance, a scaling factor of 0.5, the resulting unit would become 0.5 pixels\nand so shapes would be drawn at half size. In a similar way setting the scaling\nfactor to 2.0 would increase the unit size and one unit now becomes two pixels.\nThis results in shapes being drawn twice as large.\n\n    scale x y\n\n  - `x`\n      - Scaling factor in the horizontal direction.\n  - `y`\n      - Scaling factor in the vertical direction.\n\n**Note**: You can use `scale -1 1` to flip the context horizontally and `scale 1\n-1` to flip it vertically.\n\nMore information and examples in the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/scale)\n\n","type":"Basics.Float -> Basics.Float -> Canvas.Settings.Advanced.Transform"},{"name":"shadow","comment":" Specify a shadow to be rendered. See the `Shadow` type alias to know what\nparameters to pass.\n","type":"Canvas.Settings.Advanced.Shadow -> Canvas.Internal.Canvas.Setting"},{"name":"strokeLinear","comment":" Stroke with linear gradient.\n\n  - `x0`, `y0`: top left corner of the gradient\n  - `x1`, `y1`: bottom right corner of the gradient\n  - `stops`: `( offset, color )`\n      - offset is a float number from 0 to 1, so the horizontal position of the stop\n      - where color is the `Color` of given stop (from avh4/elm-color)\n\n","type":"Canvas.Settings.Advanced.LinearGradient -> List.List ( Basics.Float, Color.Color ) -> Canvas.Internal.Canvas.Setting"},{"name":"strokeRadial","comment":" Stroke with radial gradient.\n\n  - `x0`, `y0`: top left corner of the gradient\n  - `x1`, `y1`: bottom right corner of the gradient\n  - `rad0`: inner radius of the gradient\n  - `rad1`: outer radius of the gradient\n  - `stops`: `( offset, color )`\n      - offset is a float number from 0 to 1, so the horizontal position of the stop\n      - where color is the `Color` of given stop (from avh4/elm-color)\n\n","type":"Canvas.Settings.Advanced.RadialGradient -> List.List ( Basics.Float, Color.Color ) -> Canvas.Internal.Canvas.Setting"},{"name":"transform","comment":" Specify the transform matrix to apply when drawing. You do so by applying\ntransforms in order, like `translate`, `rotate`, or `scale`, but you can also\nuse `applyMatrix` and set the matrix yourself manually if you know what you are\ndoing.\n\n    shapes\n        [ transform [ rotate (degrees 50) ] ]\n        [ rect ( 40, 40 ) 20 20 ]\n\n","type":"List.List Canvas.Settings.Advanced.Transform -> Canvas.Internal.Canvas.Setting"},{"name":"translate","comment":" Adds a translation transformation by moving the canvas and its origin `x`\nunits horizontally and `y` units vertically on the grid.\n\nMore information and examples on the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/translate)\n\n    translate x y\n\n","type":"Basics.Float -> Basics.Float -> Canvas.Settings.Advanced.Transform"}],"binops":[]},{"name":"Canvas.Settings.Line","comment":"\n\n\n# Styling lines\n\nLine style settings apply to paths, and the stroke of shapes and text.\n\n@docs lineWidth, lineCap, LineCap, lineJoin, LineJoin, lineDash, lineDashOffset, miterLimit\n\n","unions":[{"name":"LineCap","comment":" Type of end points for line drawn.\n\n  - `ButtCap`\n      - The ends of lines are squared off at the endpoints.\n  - `RoundCap`\n      - The ends of lines are rounded.\n  - `SquareCap`\n      - The ends of lines are squared off by adding a box with an equal width\n        and half the height of the line's thickness.\n\n","args":[],"cases":[["ButtCap",[]],["RoundCap",[]],["SquareCap",[]]]},{"name":"LineJoin","comment":" Determines how two connecting segments with non-zero lengths in a shape are\njoined together.\n\n  - `Round`\n      - Rounds off the corners of a shape by filling an additional sector of disc\n        centered at the common endpoint of connected segments. The radius for these\n        rounded corners is equal to the line width.\n  - `Bevel`\n      - Fills an additional triangular area between the common endpoint of\n        connected segments, and the separate outside rectangular corners of each segment.\n  - `Miter`\n      - Connected segments are joined by extending their outside edges to connect\n        at a single point, with the effect of filling an additional lozenge-shaped\n        area. This setting is affected by the miterLimit property.\n\nYou can see examples and pictures on the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin)\n\n","args":[],"cases":[["BevelJoin",[]],["RoundJoin",[]],["MiterJoin",[]]]}],"aliases":[],"values":[{"name":"lineCap","comment":" Determines how the end points of every line are drawn. See `LineCap` for the\npossible types. By default `ButtCap` is used. See the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineCap)\nfor examples.\n","type":"Canvas.Settings.Line.LineCap -> Canvas.Settings.Setting"},{"name":"lineDash","comment":" Specify the line dash pattern used when stroking lines, using a list of\nvalues which specify alternating lengths of lines and gaps which describe the\npattern.\n\n    lineDash segments\n\n  - `segments`\n      - A list of numbers which specify distances to alternately draw a line\n        and a gap (in coordinate space units). If the number of elements in the list\n        is odd, the elements of the list get copied and concatenated. For example, `[5,\n        15, 25]` will become `[5, 15, 25, 5, 15, 25]`. If the list is empty, the line\n        dash list is clear and line strokes are solid.\n\nYou can see examples and more information in the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash)\n\n","type":"List.List Basics.Float -> Canvas.Settings.Setting"},{"name":"lineDashOffset","comment":" Specify the line dash pattern offset or \"phase\".\n\nThere are visual examples and more information in the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset)\n\n","type":"Basics.Float -> Canvas.Settings.Setting"},{"name":"lineJoin","comment":" Specify how two connecting segments (of lines, arcs or curves) with\nnon-zero lengths in a shape are joined together (degenerate segments with zero\nlengths, whose specified endpoints and control points are exactly at the same\nposition, are skipped). See the type `LineJoin`.\n\nBy default this property is set to `MiterJoin`. Note that the `lineJoin` setting\nhas no effect if the two connected segments have the same direction, because no\njoining area will be added in this case.\n\nMore information and examples in the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin)\n\n","type":"Canvas.Settings.Line.LineJoin -> Canvas.Settings.Setting"},{"name":"lineWidth","comment":" Specify the thickness of lines in space units. When passing zero, negative,\nInfinity and NaN values are ignored. More information and examples in the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineWidth)\n","type":"Basics.Float -> Canvas.Settings.Setting"},{"name":"miterLimit","comment":" Specify the miter limit ratio in space units. When passing zero, negative,\nInfinity and NaN values are ignored. It defaults to 10.\n\nMore information and live example in the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/miterLimit)\n\n","type":"Basics.Float -> Canvas.Settings.Setting"}],"binops":[]},{"name":"Canvas.Settings.Text","comment":"\n\n\n# Styling text\n\nTo draw text we use the function `text`:\n\n    text\n        [ font { size = 48, family = \"serif\" }\n        , align Center\n        ]\n        ( 50, 50 )\n        \"Hello world\"\n\nYou can apply the following styling settings to text specifically. They will do\nnothing if you apply them to other renderables, like `shapes`.\n\n@docs font, align, TextAlign, baseLine, TextBaseLine, maxWidth\n\n","unions":[{"name":"TextAlign","comment":" Type of text alignment\n\n  - `Left`\n      - The text is left-aligned.\n  - `Right`\n      - The text is right-aligned.\n  - `Center`\n      - The text is centered.\n  - `Start`\n      - The text is aligned at the normal start of the line (left-aligned for\n        left-to-right locales, right-aligned for right-to-left locales).\n  - `End`\n      - The text is aligned at the normal end of the line (right-aligned for\n        left-to-right locales, left-aligned for right-to-left locales).\n\n","args":[],"cases":[["Left",[]],["Right",[]],["Center",[]],["Start",[]],["End",[]]]},{"name":"TextBaseLine","comment":" Type of text baseline.\n\n  - `Top`\n      - The text baseline is the top of the em square.\n  - `Hanging`\n      - The text baseline is the hanging baseline. (Used by Tibetan and other Indic scripts.)\n  - `Middle`\n      - The text baseline is the middle of the em square.\n  - `Alphabetic`\n      - The text baseline is the normal alphabetic baseline.\n  - `Ideographic`\n      - The text baseline is the ideographic baseline; this is the bottom of the body of the characters, if the main body of characters protrudes beneath the alphabetic baseline. (Used by Chinese, Japanese and Korean scripts.)\n  - `Bottom`\n      - The text baseline is the bottom of the bounding box. This differs from the ideographic baseline in that the ideographic baseline doesn't consider descenders.\n\n","args":[],"cases":[["Top",[]],["Hanging",[]],["Middle",[]],["Alphabetic",[]],["Ideographic",[]],["Bottom",[]]]}],"aliases":[],"values":[{"name":"align","comment":" Specifies the text alignment to use when drawing text. Beware\nthat the alignment is based on the x value of position passed to `text`. So if\n`textAlign` is `Center`, then the text would be drawn at `x - (width / 2)`.\n\nThe default value is `Start`. [MDN docs](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/textAlign)\n\n","type":"Canvas.Settings.Text.TextAlign -> Canvas.Settings.Setting"},{"name":"baseLine","comment":" Specifies the current text baseline being used when drawing text.\n\nThe default value is `Alphabetic`.\n\nSee [MDN docs](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/textBaseline)\nfor examples and rendering of the different modes.\n\n","type":"Canvas.Settings.Text.TextBaseLine -> Canvas.Settings.Setting"},{"name":"font","comment":" Specify the font size and family to use when rendering text.\n\n  - `size`: What is the size of the text in pixels. Similar to the `font-size`\n    property in CSS.\n  - `family`: Font family name to use when drawing the text. For example, you can\n    use `\"monospace\"`, `\"serif\"` or `\"sans-serif\"` to use the user configured\n    default fonts in the browser. You can also specify other font names like\n    `\"Consolas\"`.\n\n","type":"{ size : Basics.Int, family : String.String } -> Canvas.Settings.Setting"},{"name":"maxWidth","comment":" Specify a maximum width. The text is scaled to fit that width.\n\nNote: max-width must be directly applied to the text renderable, if applied to\na group it will have no effect.\n\n","type":"Basics.Float -> Canvas.Settings.Setting"}],"binops":[]},{"name":"Canvas.Texture","comment":" This module exposes the types and functions to load and work with textures.\n\nYou can load textures by using `toHtmlWith`, and use them to draw with\n`Canvas.texture`.\n\n\n# Loading Textures\n\n\n## From an external source\n\n@docs Source, loadFromImageUrl\n\n\n## From existing sources\n\n@docs fromDomImage\n\n\n# Texture types\n\n@docs Texture\n\nOnce you have a texture, you can get a new texture with a viewport into an\nexisting one. This is very useful for when you have a sprite sheet with many\nimages in one, but want to have individual sprites to draw.\n\n@docs sprite\n\n\n# Texture information\n\nYou can get some information from the texture, like its dimensions:\n\n@docs dimensions\n\n","unions":[],"aliases":[{"name":"Source","comment":" Origin of a texture to load. Passing a `List Source` to `Canvas.toHtmlWith`\nwill try to load the textures and send you events with the actual `Texture` when\nit is loaded.\n","args":["msg"],"type":"Canvas.Internal.Texture.Source msg"},{"name":"Texture","comment":" The `Texture` type. You can use this type with `Canvas.texture` to get\na `Renderable` into the screen.\n","args":[],"type":"Canvas.Internal.Texture.Texture"}],"values":[{"name":"dimensions","comment":" Get the width and height of a texture\n","type":"Canvas.Texture.Texture -> { width : Basics.Float, height : Basics.Float }"},{"name":"fromDomImage","comment":" Make a `Texture` from a DOM image.\n\nFor example, if you want to make textures out of images you loaded yourself in\nJS and passed to Elm via ports or flags, you would use this method.\n\nIt will make a `Texture` validating that the `Json.Decode.Value` is an image\nthat can be drawn. If it isn't, you will get a `Nothing` back.\n\n","type":"Json.Decode.Value -> Maybe.Maybe Canvas.Texture.Texture"},{"name":"loadFromImageUrl","comment":" Make a `Texture.Source` from an image URL. When passing this Source to\n`toHtmlWith` the image will try to be loaded and stored as a `Texture` ready to be drawn.\n","type":"String.String -> (Maybe.Maybe Canvas.Texture.Texture -> msg) -> Canvas.Texture.Source msg"},{"name":"sprite","comment":" Make a sprite from a texture. A sprite is like a window into a bigger\ntexture. By passing the inner coordinates and width and height of the window,\nyou will get a new texture back that is only that selected viewport into the\nbigger texture.\n\nVery useful for using sprite sheet textures.\n\n","type":"{ x : Basics.Float, y : Basics.Float, width : Basics.Float, height : Basics.Float } -> Canvas.Texture.Texture -> Canvas.Texture.Texture"}],"binops":[]},{"name":"Canvas.Video","comment":" This module exposes the types and functions to load and work with textures.\n\nYou can load textures by using `toHtmlWith`, and use them to draw with\n`Canvas.texture`.\n\n\n# Loading Textures\n\n\n## From an external source\n\n@docs Source, loadFromVideoUrl\n\n\n# Texture types\n\n@docs Video\n\nOnce you have a texture, you can get a new texture with a viewport into an\nexisting one. This is very useful for when you have a sprite sheet with many\nimages in one, but want to have individual sprites to draw.\n\n@docs sprite\n\n\n# Texture information\n\nYou can get some information from the texture, like its dimensions:\n\n@docs dimensions\n\n","unions":[],"aliases":[{"name":"Source","comment":" Origin of a texture to load. Passing a `List Source` to `Canvas.toHtmlWith`\nwill try to load the textures and send you events with the actual `Texture` when\nit is loaded.\n","args":["msg"],"type":"Canvas.Internal.Video.Source msg"},{"name":"Video","comment":" The `Texture` type. You can use this type with `Canvas.texture` to get\na `Renderable` into the screen.\n","args":[],"type":"Canvas.Internal.Video.Video"}],"values":[{"name":"dimensions","comment":" Get the width and height of a texture\n","type":"Canvas.Video.Video -> { width : Basics.Float, height : Basics.Float }"},{"name":"loadFromVideoUrl","comment":" Make a `Texture.Source` from an image URL. When passing this Source to\n`toHtmlWith` the image will try to be loaded and stored as a `Texture` ready to be drawn.\n","type":"String.String -> (Maybe.Maybe Canvas.Video.Video -> msg) -> Canvas.Video.Source msg"},{"name":"sprite","comment":" Make a sprite from a texture. A sprite is like a window into a bigger\ntexture. By passing the inner coordinates and width and height of the window,\nyou will get a new texture back that is only that selected viewport into the\nbigger texture.\n\nVery useful for using sprite sheet textures.\n\n","type":"{ x : Basics.Float, y : Basics.Float, width : Basics.Float, height : Basics.Float } -> Canvas.Video.Video -> Canvas.Video.Video"}],"binops":[]}]