-- Hoogle documentation, generated by Haddock
-- See Hoogle, http://www.haskell.org/hoogle/


-- | HTML5 Canvas Graphics Library
--   
--   <tt>blank-canvas</tt> is a Haskell binding to the complete <a>HTML5
--   Canvas API</a>. <tt>blank-canvas</tt> allows Haskell users to write,
--   in Haskell, interactive images onto their web browsers.
--   <tt>blank-canvas</tt> gives the user a single full-window canvas, and
--   provides many well-documented functions for rendering images.
--   
--   <pre>
--   {-# LANGUAGE OverloadedStrings #-}
--   module Main where
--   import Graphics.Blank                     -- import the blank canvas
--   
--   main = blankCanvas 3000 $ \ context -&gt; do -- start blank canvas on port 3000
--     send context $ do                       -- send commands to this specific context
--       moveTo(50,50)
--       lineTo(200,100)
--       lineWidth 10
--       strokeStyle "red"
--       stroke()                              -- this draws the ink into the canvas
--   </pre>
--   
--   
--   For more details, read the <a>blank-canvas wiki</a>.
@package blank-canvas
@version 0.6.2


-- | This module exposes overloaded versions of <tt>blank-canvas</tt>
--   functions that take a style or color as an argument, which may be of
--   interest if you desire stronger type safety than <tt>Text</tt>
--   provides.
--   
--   Note that this module exports function names that conflict with
--   <a>Graphics.Blank</a>. Make sure to hide any functions from
--   <a>Graphics.Blank</a> that you use from this module.
module Graphics.Blank.Style

-- | Sets the color, gradient, or pattern used for strokes.
--   
--   <h4><b>Examples</b></h4>
--   
--   <pre>
--   <a>strokeStyle</a> <tt>red</tt>
--   
--   grd &lt;- <a>createLinearGradient</a>(0, 0, 10, 10)
--   <a>strokeStyle</a> grd
--   
--   img &lt;- <a>newImage</a> "/myImage.jpg"
--   pat &lt;- <a>createPattern</a>(img, <a>Repeat</a>)
--   <a>strokeStyle</a> pat
--   </pre>
strokeStyle :: Style style => style -> Canvas ()

-- | Sets the color, gradient, or pattern used to fill a drawing
--   (<tt>black</tt> by default).
--   
--   <h4><b>Examples</b></h4>
--   
--   <pre>
--   <a>fillStyle</a> <tt>red</tt>
--   
--   grd &lt;- <a>createLinearGradient</a>(0, 0, 10, 10)
--   <a>fillStyle</a> grd
--   
--   img &lt;- <a>newImage</a> "/myImage.jpg"
--   pat &lt;- <a>createPattern</a>(img, <a>Repeat</a>)
--   <a>fillStyle</a> pat
--   </pre>
fillStyle :: Style style => style -> Canvas ()

-- | Sets the color used for shadows.
--   
--   <h4><b>Examples</b></h4>
--   
--   <pre>
--   <a>shadowColor</a> <tt>red</tt>
--   <a>shadowColor</a> $ <tt>rgb</tt> 0 255 0
--   </pre>
shadowColor :: CanvasColor canvasColor => canvasColor -> Canvas ()

-- | Adds a color and stop position in a <a>CanvasGradient</a>. A stop
--   position is a number between 0.0 and 1.0 that represents the position
--   between start and stop in a gradient.
--   
--   <h4><b>Example</b></h4>
--   
--   <pre>
--   grd &lt;- <a>createLinearGradient</a>(0, 0, 10, 10)
--   grd # <a>addColorStop</a>(0, <tt>red</tt>)
--   </pre>
addColorStop :: CanvasColor color => (Interval, color) -> CanvasGradient -> Canvas ()

-- | A data type that can represent a style. That is, something with one or
--   more colors.
class Style a

-- | Convert a value into a JavaScript string representing a style value.
jsStyle :: Style a => a -> Builder

-- | A <a>Style</a> containing exactly one color.
class Style a => CanvasColor a

-- | Specifies a <a>Colour</a> by its red, green, and blue components,
--   where each component is an integer between 0 and 255.
rgb :: Word8 -> Word8 -> Word8 -> Colour Double

-- | Specifies a <a>Colour</a> by its red, green, and blue components,
--   where each component is given by a percentage (which should be between
--   0% to 100%) of 255.
rgbPercent :: Percentage -> Percentage -> Percentage -> Colour Double

-- | Specifies an <a>AlphaColour</a> by its RGB components and an alpha
--   value.
--   
--   <pre>
--   <a>rgba</a> r g b 0.0 = <a>transparent</a>
--   </pre>
rgba :: Word8 -> Word8 -> Word8 -> Alpha -> AlphaColour Double

-- | Specifies an <a>AlphaColour</a> by its RGB component percentages
--   (which should be between 0% and 100%) and an alpha value.
--   
--   <pre>
--   <a>rgbaPercent</a> r g b 0.0 = <a>transparent</a>
--   </pre>
rgbaPercent :: Percentage -> Percentage -> Percentage -> Alpha -> AlphaColour Double

-- | Specifies a <a>Colour</a> by its hue, saturation, and lightness value,
--   where saturation and lightness are percentages between 0% and 100%.
hsl :: Degrees -> Percentage -> Percentage -> Colour Double

-- | Specifies an <a>AlphaColour</a> by its HSL values and an alpha value.
--   
--   <pre>
--   <a>hsla</a> h s v 0.0 = <a>transparent</a>
--   </pre>
hsla :: Degrees -> Percentage -> Percentage -> Alpha -> AlphaColour Double

-- | This type represents the human preception of colour. The <tt>a</tt>
--   parameter is a numeric type used internally for the representation.
--   
--   The <a>Monoid</a> instance allows one to add colours, but beware that
--   adding colours can take you out of gamut. Consider using <a>blend</a>
--   whenever possible.
data Colour a :: * -> *

-- | This type represents a <a>Colour</a> that may be semi-transparent.
--   
--   The <a>Monoid</a> instance allows you to composite colours.
--   
--   <pre>
--   x `mappend` y == x `over` y
--   </pre>
--   
--   To get the (pre-multiplied) colour channel of an <a>AlphaColour</a>
--   <tt>c</tt>, simply composite <tt>c</tt> over black.
--   
--   <pre>
--   c `over` black
--   </pre>
data AlphaColour a :: * -> *

-- | This <a>AlphaColour</a> is entirely transparent and has no associated
--   color channel (i.e., <tt>rgba(0, 0, 0, 0.0)</tt> or <tt>hsla(0, 0%,
--   0%, 0.0)</tt>).
transparent :: AlphaColour Double

-- | Takes a string naming a <a>Colour</a> (must be all lowercase) and
--   returns it. Fails if the name is not recognized.
readColourName :: Monad m => String -> m (Colour Double)

-- | <tt>#00FFFF</tt>, <tt>rgb(0, 255, 255)</tt>, <tt>hsl(180, 100%,
--   50%)</tt>. Same as <a>cyan</a>.
aqua :: Colour Double

-- | <tt>#000000</tt>, <tt>rgb(0, 0, 0)</tt>, <tt>hsl(0, 0%, 0%)</tt>
black :: Colour Double

-- | <tt>#0000FF</tt>, <tt>rgb(0, 0, 255)</tt>, <tt>hsl(240, 100%,
--   50%)</tt>
blue :: Colour Double

-- | <tt>#FF00FF</tt>, <tt>rgb(255, 0, 255)</tt>, <tt>hsl(300, 100%,
--   50%)</tt>. Same as <a>magenta</a>.
fuchsia :: Colour Double

-- | <tt>#808080</tt>, <tt>rgb(128, 128, 128)</tt>, <tt>hsl(0, 0%,
--   50%)</tt>. Same as <a>grey</a>.
gray :: Colour Double

-- | <tt>#008000</tt>, <tt>rgb(0, 128, 0)</tt>, <tt>hsl(120, 100%,
--   25%)</tt>
green :: Colour Double

-- | <tt>#00FF00</tt>, <tt>rgb(0, 255, 0)</tt>, <tt>hsl(120, 100%,
--   50%)</tt>
lime :: Colour Double

-- | <tt>#800000</tt>, <tt>rgb(128, 0, 0)</tt>, <tt>hsl(0, 100%, 25%)</tt>
maroon :: Colour Double

-- | <tt>#000080</tt>, <tt>rgb(0, 0, 128)</tt>, <tt>hsl(240, 100%,
--   25%)</tt>
navy :: Colour Double

-- | <tt>#808000</tt>, <tt>rgb(128, 128, 0)</tt>, <tt>hsl(60, 100%,
--   25%)</tt>
olive :: Colour Double

-- | <tt>#800080</tt>, <tt>rgb(128, 0, 128)</tt>, <tt>hsl(300, 100%,
--   25%)</tt>
purple :: Colour Double

-- | <tt>#FF0000</tt>, <tt>rgb(255, 0, 0)</tt>, <tt>hsl(0, 100%, 50%)</tt>
red :: Colour Double

-- | <tt>#C0C0C0</tt>, <tt>rgb(192, 192, 192)</tt>, <tt>hsl(0, 0%,
--   75%)</tt>
silver :: Colour Double

-- | <tt>#008080</tt>, <tt>rgb(0, 128, 128)</tt>, <tt>hsl(180, 100%,
--   25%)</tt>
teal :: Colour Double

-- | <tt>#FFFFFF</tt>, <tt>rgb(255, 255, 255)</tt>, <tt>hsl(0, 100%,
--   100%)</tt>
white :: Colour Double

-- | <tt>#FFFF00</tt>, <tt>rgb(255, 255, 0)</tt>, <tt>hsl(60, 100%,
--   50%)</tt>
yellow :: Colour Double

-- | <tt>#FFA500</tt>, <tt>rgb(255, 165, 0)</tt>, <tt>hsl(39, 100%,
--   50%)</tt>
orange :: Colour Double

-- | <tt>#F0F8FF</tt>, <tt>rgb(240, 248, 255)</tt>, <tt>hsl(208, 100%,
--   97%)</tt>
aliceblue :: Colour Double

-- | <tt>#FAEBD7</tt>, <tt>rgb(250, 235, 215)</tt>, <tt>hsl(34, 78%,
--   91%)</tt>
antiquewhite :: Colour Double

-- | <tt>#7FFFD4</tt>, <tt>rgb(127, 255, 212)</tt>, <tt>hsl(160, 100%,
--   75%)</tt>
aquamarine :: Colour Double

-- | <tt>#F0FFFF</tt>, <tt>rgb(240, 255, 255)</tt>, <tt>hsl(180, 100%,
--   97%)</tt>
azure :: Colour Double

-- | <tt>#F5F5DC</tt>, <tt>rgb(245, 245, 220)</tt>, <tt>hsl(60, 56%,
--   91%)</tt>
beige :: Colour Double

-- | <tt>#FFE4C4</tt>, <tt>rgb(255, 228, 196)</tt>, <tt>hsl(33, 100%,
--   88%)</tt>
bisque :: Colour Double

-- | <tt>#FFEBCD</tt>, <tt>rgb(255, 235, 205)</tt>, <tt>hsl(36, 100%,
--   90%)</tt>
blanchedalmond :: Colour Double

-- | <tt>#8A2BE2</tt>, <tt>rgb(138, 43, 226)</tt>, <tt>hsl(271, 76%,
--   53%)</tt>
blueviolet :: Colour Double

-- | <tt>#A52A2A</tt>, <tt>rgb(165, 42, 42)</tt>, <tt>hsl(0, 59%, 41%)</tt>
brown :: Colour Double

-- | <tt>#DEB887</tt>, <tt>rgb(222, 184, 135)</tt>, <tt>hsl(34, 57%,
--   70%)</tt>
burlywood :: Colour Double

-- | <tt>#5F9EA0</tt>, <tt>rgb(95, 158, 160)</tt>, <tt>hsl(182, 25%,
--   50%)</tt>
cadetblue :: Colour Double

-- | <tt>#7FFF00</tt>, <tt>rgb(127, 255, 0)</tt>, <tt>hsl(90, 100%,
--   50%)</tt>
chartreuse :: Colour Double

-- | <tt>#D2691E</tt>, <tt>rgb(210, 105, 30)</tt>, <tt>hsl(25, 75%,
--   47%)</tt>
chocolate :: Colour Double

-- | <tt>#FF7F50</tt>, <tt>rgb(255, 127, 80)</tt>, <tt>hsl(16, 100%,
--   66%)</tt>
coral :: Colour Double

-- | <tt>#6495ED</tt>, <tt>rgb(100, 149, 237)</tt>, <tt>hsl(219, 79%,
--   66%)</tt>
cornflowerblue :: Colour Double

-- | <tt>#FFF8DC</tt>, <tt>rgb(255, 248, 220)</tt>, <tt>hsl(48, 100%,
--   93%)</tt>
cornsilk :: Colour Double

-- | <tt>#DC143C</tt>, <tt>rgb(220, 20, 60)</tt>, <tt>hsl(348, 83%,
--   58%)</tt>
crimson :: Colour Double

-- | <tt>#00FFFF</tt>, <tt>rgb(0, 255, 255)</tt>, <tt>hsl(180, 100%,
--   50%)</tt>. Same as <a>aqua</a>.
cyan :: Colour Double

-- | <tt>#00008B</tt>, <tt>rgb(0, 0, 139)</tt>, <tt>hsl(240, 100%,
--   27%)</tt>
darkblue :: Colour Double

-- | <tt>#008B8B</tt>, <tt>rgb(0, 139, 139)</tt>, <tt>hsl(180, 100%,
--   27%)</tt>
darkcyan :: Colour Double

-- | <tt>#B8860B</tt>, <tt>rgb(184, 134, 11)</tt>, <tt>hsl(43, 89%,
--   38%)</tt>
darkgoldenrod :: Colour Double

-- | <tt>#A9A9A9</tt>, <tt>rgb(169, 169, 169)</tt>, <tt>hsl(0, 0%,
--   66%)</tt>. Same as <a>darkgrey</a>.
darkgray :: Colour Double

-- | <tt>#006400</tt>, <tt>rgb(0, 100, 0)</tt>, <tt>hsl(120, 100%,
--   20%)</tt>
darkgreen :: Colour Double

-- | <tt>#A9A9A9</tt>, <tt>rgb(169, 169, 169)</tt>, <tt>hsl(0, 0%,
--   66%)</tt>. Same as <a>darkgray</a>.
darkgrey :: Colour Double

-- | <tt>#BDB76B</tt>, <tt>rgb(189, 183, 107)</tt>, <tt>hsl(56, 38%,
--   58%)</tt>
darkkhaki :: Colour Double

-- | <tt>#8B008B</tt>, <tt>rgb(139, 0, 139)</tt>, <tt>hsl(300, 100%,
--   27%)</tt>
darkmagenta :: Colour Double

-- | <tt>#556B2F</tt>, <tt>rgb(85, 107, 47)</tt>, <tt>hsl(82, 39%,
--   30%)</tt>
darkolivegreen :: Colour Double

-- | <tt>#FF8C00</tt>, <tt>rgb(255, 140, 0)</tt>, <tt>hsl(33, 100%,
--   50%)</tt>
darkorange :: Colour Double

-- | <tt>#9932CC</tt>, <tt>rgb(153, 50, 204)</tt>, <tt>hsl(280, 61%,
--   50%)</tt>
darkorchid :: Colour Double

-- | <tt>#8B0000</tt>, <tt>rgb(139, 0, 0)</tt>, <tt>hsl(0, 100%, 27%)</tt>
darkred :: Colour Double

-- | <tt>#E9967A</tt>, <tt>rgb(233, 150, 122)</tt>, <tt>hsl(15, 72%,
--   70%)</tt>
darksalmon :: Colour Double

-- | <tt>#8FBC8F</tt>, <tt>rgb(143, 188, 143)</tt>, <tt>hsl(120, 25%,
--   65%)</tt>
darkseagreen :: Colour Double

-- | <tt>#483D8B</tt>, <tt>rgb(72, 61, 139)</tt>, <tt>hsl(248, 39%,
--   39%)</tt>
darkslateblue :: Colour Double

-- | <tt>#2F4F4F</tt>, <tt>rgb(47, 79, 79)</tt>, <tt>hsl(180, 25%,
--   25%)</tt>. Same as <a>darkslategrey</a>.
darkslategray :: Colour Double

-- | <tt>#2F4F4F</tt>, <tt>rgb(47, 79, 79)</tt>, <tt>hsl(180, 25%,
--   25%)</tt>. Same as <a>darkslategray</a>.
darkslategrey :: Colour Double

-- | <tt>#00CED1</tt>, <tt>rgb(0, 206, 209)</tt>, <tt>hsl(181, 100%,
--   41%)</tt>
darkturquoise :: Colour Double

-- | <tt>#9400D3</tt>, <tt>rgb(148, 0, 211)</tt>, <tt>hsl(282, 100%,
--   41%)</tt>
darkviolet :: Colour Double

-- | <tt>#FF1493</tt>, <tt>rgb(255, 20, 147)</tt>, <tt>hsl(328, 100%,
--   54%)</tt>
deeppink :: Colour Double

-- | <tt>#00BFFF</tt>, <tt>rgb(0, 191, 255)</tt>, <tt>hsl(195, 100%,
--   50%)</tt>
deepskyblue :: Colour Double

-- | <tt>#696969</tt>, <tt>rgb(105, 105, 105)</tt>, <tt>hsl(0, 0%,
--   41%)</tt>. Same as <a>darkgrey</a>.
dimgray :: Colour Double

-- | <tt>#696969</tt>, <tt>rgb(105, 105, 105)</tt>, <tt>hsl(0, 0%,
--   41%)</tt>. Same as <a>darkgray</a>.
dimgrey :: Colour Double

-- | <tt>#1E90FF</tt>, <tt>rgb(30, 144, 255)</tt>, <tt>hsl(210, 100%,
--   56%)</tt>
dodgerblue :: Colour Double

-- | <tt>#B22222</tt>, <tt>rgb(178, 34, 34)</tt>, <tt>hsl(0, 68%, 42%)</tt>
firebrick :: Colour Double

-- | <tt>#FFFAF0</tt>, <tt>rgb(255, 250, 240)</tt>, <tt>hsl(40, 100%,
--   97%)</tt>
floralwhite :: Colour Double

-- | <tt>#228B22</tt>, <tt>rgb(34, 139, 34)</tt>, <tt>hsl(120, 61%,
--   34%)</tt>
forestgreen :: Colour Double

-- | <tt>#DCDCDC</tt>, <tt>rgb(220, 220, 220)</tt>, <tt>hsl(0, 0%,
--   86%)</tt>
gainsboro :: Colour Double

-- | <tt>#F8F8FF</tt>, <tt>rgb(248, 248, 255)</tt>, <tt>hsl(240, 100%,
--   99%)</tt>
ghostwhite :: Colour Double

-- | <tt>#FFD700</tt>, <tt>rgb(255, 215, 0)</tt>, <tt>hsl(51, 100%,
--   50%)</tt>
gold :: Colour Double

-- | <tt>#DAA520</tt>, <tt>rgb(218, 165, 32)</tt>, <tt>hsl(43, 74%,
--   49%)</tt>
goldenrod :: Colour Double

-- | <tt>#808080</tt>, <tt>rgb(128, 128, 128)</tt>, <tt>hsl(0, 0%,
--   50%)</tt>. Same as <a>gray</a>.
grey :: Colour Double

-- | <tt>#ADFF2F</tt>, <tt>rgb(173, 255, 47)</tt>, <tt>hsl(84, 100%,
--   59%)</tt>
greenyellow :: Colour Double

-- | <tt>#F0FFF0</tt>, <tt>rgb(240, 255, 240)</tt>, <tt>hsl(120, 100%,
--   97%)</tt>
honeydew :: Colour Double

-- | <tt>#FF69B4</tt>, <tt>rgb(255, 105, 180)</tt>, <tt>hsl(330, 100%,
--   71%)</tt>
hotpink :: Colour Double

-- | <tt>#CD5C5C</tt>, <tt>rgb(205, 92, 92)</tt>, <tt>hsl(0, 53%, 58%)</tt>
indianred :: Colour Double

-- | <tt>#4B0082</tt>, <tt>rgb(75, 0, 130)</tt>, <tt>hsl(275, 100%,
--   25%)</tt>
indigo :: Colour Double

-- | <tt>#FFFFF0</tt>, <tt>rgb(255, 255, 240)</tt>, <tt>hsl(60, 100%,
--   97%)</tt>
ivory :: Colour Double

-- | <tt>#F0E68C</tt>, <tt>rgb(240, 230, 140)</tt>, <tt>hsl(54, 77%,
--   75%)</tt>
khaki :: Colour Double

-- | <tt>#E6E6FA</tt>, <tt>rgb(230, 230, 250)</tt>, <tt>hsl(240, 67%,
--   94%)</tt>
lavender :: Colour Double

-- | <tt>#FFF0F5</tt>, <tt>rgb(255, 240, 245)</tt>, <tt>hsl(340, 100%,
--   97%)</tt>
lavenderblush :: Colour Double

-- | <tt>#7CFC00</tt>, <tt>rgb(124, 252, 0)</tt>, <tt>hsl(90, 100%,
--   49%)</tt>
lawngreen :: Colour Double

-- | <tt>#FFFACD</tt>, <tt>rgb(255, 250, 205)</tt>, <tt>hsl(54, 100%,
--   90%)</tt>
lemonchiffon :: Colour Double

-- | <tt>#ADD8E6</tt>, <tt>rgb(173, 216, 230)</tt>, <tt>hsl(195, 53%,
--   79%)</tt>
lightblue :: Colour Double

-- | <tt>#F08080</tt>, <tt>rgb(240, 128, 128)</tt>, <tt>hsl(0, 79%,
--   72%)</tt>
lightcoral :: Colour Double

-- | <tt>#E0FFFF</tt>, <tt>rgb(224, 255, 255)</tt>, <tt>hsl(180, 100%,
--   94%)</tt>
lightcyan :: Colour Double

-- | <tt>#FAFAD2</tt>, <tt>rgb(250, 250, 210)</tt>, <tt>hsl(60, 80%,
--   90%)</tt>
lightgoldenrodyellow :: Colour Double

-- | <tt>#D3D3D3</tt>, <tt>rgb(211, 211, 211)</tt>, <tt>hsl(0, 0%,
--   83%)</tt>. Same as <a>lightgrey</a>.
lightgray :: Colour Double

-- | <tt>#90EE90</tt>, <tt>rgb(144, 238, 144)</tt>, <tt>hsl(120, 73%,
--   75%)</tt>
lightgreen :: Colour Double

-- | <tt>#D3D3D3</tt>, <tt>rgb(211, 211, 211)</tt>, <tt>hsl(0, 0%,
--   83%)</tt>. Same as <a>lightgray</a>.
lightgrey :: Colour Double

-- | <tt>#FFB6C1</tt>, <tt>rgb(255, 182, 193)</tt>, <tt>hsl(351, 100%,
--   86%)</tt>
lightpink :: Colour Double

-- | <tt>#FFA07A</tt>, <tt>rgb(255, 160, 122)</tt>, <tt>hsl(17, 100%,
--   74%)</tt>
lightsalmon :: Colour Double

-- | <tt>#20B2AA</tt>, <tt>rgb(32, 178, 170)</tt>, <tt>hsl(177, 70%,
--   41%)</tt>
lightseagreen :: Colour Double

-- | <tt>#87CEFA</tt>, <tt>rgb(135, 206, 250)</tt>, <tt>hsl(203, 92%,
--   75%)</tt>
lightskyblue :: Colour Double

-- | <tt>#778899</tt>, <tt>rgb(119, 136, 153)</tt>, <tt>hsl(210, 14%,
--   53%)</tt>. Same as <a>lightslategrey</a>.
lightslategray :: Colour Double

-- | <tt>#778899</tt>, <tt>rgb(119, 136, 153)</tt>, <tt>hsl(210, 14%,
--   53%)</tt>. Same as <a>lightslategray</a>.
lightslategrey :: Colour Double

-- | <tt>#B0C4DE</tt>, <tt>rgb(176, 196, 222)</tt>, <tt>hsl(214, 41%,
--   78%)</tt>
lightsteelblue :: Colour Double

-- | <tt>#FFFFE0</tt>, <tt>rgb(255, 255, 224)</tt>, <tt>hsl(60, 100%,
--   94%)</tt>
lightyellow :: Colour Double

-- | <tt>#32CD32</tt>, <tt>rgb(50, 205, 50)</tt>, <tt>hsl(120, 61%,
--   50%)</tt>
limegreen :: Colour Double

-- | <tt>#FAF0E6</tt>, <tt>rgb(250, 240, 230)</tt>, <tt>hsl(30, 67%,
--   94%)</tt>
linen :: Colour Double

-- | <tt>#FF00FF</tt>, <tt>rgb(255, 0, 255)</tt>, <tt>hsl(300, 100%,
--   50%)</tt>. Same as <a>fuchsia</a>.
magenta :: Colour Double

-- | <tt>#66CDAA</tt>, <tt>rgb(102, 205, 170)</tt>, <tt>hsl(160, 51%,
--   60%)</tt>
mediumaquamarine :: Colour Double

-- | <tt>#0000CD</tt>, <tt>rgb(0, 0, 205)</tt>, <tt>hsl(240, 100%,
--   40%)</tt>
mediumblue :: Colour Double

-- | <tt>#BA55D3</tt>, <tt>rgb(186, 85, 211)</tt>, <tt>hsl(288, 59%,
--   58%)</tt>
mediumorchid :: Colour Double

-- | <tt>#9370DB</tt>, <tt>rgb(147, 112, 219)</tt>, <tt>hsl(260, 60%,
--   65%)</tt>
mediumpurple :: Colour Double

-- | <tt>#3CB371</tt>, <tt>rgb(60, 179, 113)</tt>, <tt>hsl(147, 50%,
--   47%)</tt>
mediumseagreen :: Colour Double

-- | <tt>#7B68EE</tt>, <tt>rgb(123, 104, 238)</tt>, <tt>hsl(249, 80%,
--   67%)</tt>
mediumslateblue :: Colour Double

-- | <tt>#00FA9A</tt>, <tt>rgb(0, 250, 154)</tt>, <tt>hsl(157, 100%,
--   49%)</tt>
mediumspringgreen :: Colour Double

-- | <tt>#48D1CC</tt>, <tt>rgb(72, 209, 204)</tt>, <tt>hsl(178, 60%,
--   55%)</tt>
mediumturquoise :: Colour Double

-- | <tt>#C71585</tt>, <tt>rgb(199, 21, 133)</tt>, <tt>hsl(322, 81%,
--   43%)</tt>
mediumvioletred :: Colour Double

-- | <tt>#191970</tt>, <tt>rgb(25, 25, 112)</tt>, <tt>hsl(240, 64%,
--   27%)</tt>
midnightblue :: Colour Double

-- | <tt>#F5FFFA</tt>, <tt>rgb(245, 255, 250)</tt>, <tt>hsl(150, 100%,
--   98%)</tt>
mintcream :: Colour Double

-- | <tt>#FFE4E1</tt>, <tt>rgb(255, 228, 225)</tt>, <tt>hsl(6, 100%,
--   94%)</tt>
mistyrose :: Colour Double

-- | <tt>#FFE4B5</tt>, <tt>rgb(255, 228, 181)</tt>, <tt>hsl(38, 100%,
--   85%)</tt>
moccasin :: Colour Double

-- | <tt>#FFDEAD</tt>, <tt>rgb(255, 222, 173)</tt>, <tt>hsl(36, 100%,
--   84%)</tt>
navajowhite :: Colour Double

-- | <tt>#FDF5E6</tt>, <tt>rgb(253, 245, 230)</tt>, <tt>hsl(39, 85%,
--   95%)</tt>
oldlace :: Colour Double

-- | <tt>#6B8E23</tt>, <tt>rgb(107, 142, 35)</tt>, <tt>hsl(80, 60%,
--   35%)</tt>
olivedrab :: Colour Double

-- | <tt>#FF4500</tt>, <tt>rgb(255, 69, 0)</tt>, <tt>hsl(16, 100%,
--   50%)</tt>
orangered :: Colour Double

-- | <tt>#DA70D6</tt>, <tt>rgb(218, 112, 214)</tt>, <tt>hsl(302, 59%,
--   65%)</tt>
orchid :: Colour Double

-- | <tt>#EEE8AA</tt>, <tt>rgb(238, 232, 170)</tt>, <tt>hsl(55, 67%,
--   80%)</tt>
palegoldenrod :: Colour Double

-- | <tt>#98FB98</tt>, <tt>rgb(152, 251, 152)</tt>, <tt>hsl(120, 93%,
--   79%)</tt>
palegreen :: Colour Double

-- | <tt>#AFEEEE</tt>, <tt>rgb(175, 238, 238)</tt>, <tt>hsl(180, 65%,
--   81%)</tt>
paleturquoise :: Colour Double

-- | <tt>#DB7093</tt>, <tt>rgb(219, 112, 147)</tt>, <tt>hsl(340, 60%,
--   65%)</tt>
palevioletred :: Colour Double

-- | <tt>#FFEFD5</tt>, <tt>rgb(255, 239, 213)</tt>, <tt>hsl(37, 100%,
--   92%)</tt>
papayawhip :: Colour Double

-- | <tt>#FFDAB9</tt>, <tt>rgb(255, 218, 185)</tt>, <tt>hsl(28, 100%,
--   86%)</tt>
peachpuff :: Colour Double

-- | <tt>#CD853F</tt>, <tt>rgb(205, 133, 63)</tt>, <tt>hsl(30, 59%,
--   53%)</tt>
peru :: Colour Double

-- | <tt>#FFC0CB</tt>, <tt>rgb(255, 192, 203)</tt>, <tt>hsl(350, 100%,
--   88%)</tt>
pink :: Colour Double

-- | <tt>#DDA0DD</tt>, <tt>rgb(221, 160, 221)</tt>, <tt>hsl(300, 47%,
--   75%)</tt>
plum :: Colour Double

-- | <tt>#B0E0E6</tt>, <tt>rgb(176, 224, 230)</tt>, <tt>hsl(187, 52%,
--   80%)</tt>
powderblue :: Colour Double

-- | <tt>#BC8F8F</tt>, <tt>rgb(188, 143, 143)</tt>, <tt>hsl(0, 25%,
--   65%)</tt>
rosybrown :: Colour Double

-- | <tt>#4169E1</tt>, <tt>rgb(65, 105, 225)</tt>, <tt>hsl(225, 73%,
--   57%)</tt>
royalblue :: Colour Double

-- | <tt>#8B4513</tt>, <tt>rgb(139, 69, 19)</tt>, <tt>hsl(25, 76%,
--   31%)</tt>
saddlebrown :: Colour Double

-- | <tt>#FA8072</tt>, <tt>rgb(250, 128, 114)</tt>, <tt>hsl(6, 93%,
--   71%)</tt>
salmon :: Colour Double

-- | <tt>#F4A460</tt>, <tt>rgb(244, 164, 96)</tt>, <tt>hsl(28, 87%,
--   67%)</tt>
sandybrown :: Colour Double

-- | <tt>#2E8B57</tt>, <tt>rgb(46, 139, 87)</tt>, <tt>hsl(146, 50%,
--   36%)</tt>
seagreen :: Colour Double

-- | <tt>#FFF5EE</tt>, <tt>rgb(255, 245, 238)</tt>, <tt>hsl(25, 100%,
--   97%)</tt>
seashell :: Colour Double

-- | <tt>#A0522D</tt>, <tt>rgb(160, 82, 45)</tt>, <tt>hsl(19, 56%,
--   40%)</tt>
sienna :: Colour Double

-- | <tt>#87CEEB</tt>, <tt>rgb(135, 206, 235)</tt>, <tt>hsl(197, 71%,
--   73%)</tt>
skyblue :: Colour Double

-- | <tt>#6A5ACD</tt>, <tt>rgb(106, 90, 205)</tt>, <tt>hsl(248, 53%,
--   58%)</tt>
slateblue :: Colour Double

-- | <tt>#708090</tt>, <tt>rgb(112, 128, 144)</tt>, <tt>hsl(210, 13%,
--   50%)</tt>. Same as <a>slategrey</a>.
slategray :: Colour Double

-- | <tt>#708090</tt>, <tt>rgb(112, 128, 144)</tt>, <tt>hsl(210, 13%,
--   50%)</tt>. Same as <a>slategray</a>.
slategrey :: Colour Double

-- | <tt>#FFFAFA</tt>, <tt>rgb(255, 250, 250)</tt>, <tt>hsl(0, 100%,
--   99%)</tt>
snow :: Colour Double

-- | <tt>#00FF7F</tt>, <tt>rgb(0, 255, 127)</tt>, <tt>hsl(150, 100%,
--   50%)</tt>
springgreen :: Colour Double

-- | <tt>#4682B4</tt>, <tt>rgb(70, 130, 180)</tt>, <tt>hsl(207, 44%,
--   49%)</tt>
steelblue :: Colour Double

-- | <tt>#D2B48C</tt>, <tt>rgb(210, 180, 140)</tt>, <tt>hsl(34, 44%,
--   69%)</tt>
tan :: Colour Double

-- | <tt>#D8BFD8</tt>, <tt>rgb(216, 191, 216)</tt>, <tt>hsl(300, 24%,
--   80%)</tt>
thistle :: Colour Double

-- | <tt>#FF6347</tt>, <tt>rgb(255, 99, 71)</tt>, <tt>hsl(9, 100%,
--   64%)</tt>
tomato :: Colour Double

-- | <tt>#40E0D0</tt>, <tt>rgb(64, 224, 208)</tt>, <tt>hsl(174, 72%,
--   56%)</tt>
turquoise :: Colour Double

-- | <tt>#EE82EE</tt>, <tt>rgb(238, 130, 238)</tt>, <tt>hsl(300, 76%,
--   72%)</tt>
violet :: Colour Double

-- | <tt>#F5DEB3</tt>, <tt>rgb(245, 222, 179)</tt>, <tt>hsl(39, 77%,
--   83%)</tt>
wheat :: Colour Double

-- | <tt>#F5F5F5</tt>, <tt>rgb(245, 245, 245)</tt>, <tt>hsl(0, 0%,
--   96%)</tt>
whitesmoke :: Colour Double

-- | <tt>#9ACD32</tt>, <tt>rgb(154, 205, 50)</tt>, <tt>hsl(80, 61%,
--   50%)</tt>
yellowgreen :: Colour Double

-- | <tt>#663399</tt>, <tt>rgb(102, 51, 153)</tt>, <tt>hsl(270, 50%,
--   40%)</tt>
rebeccapurple :: Colour Double


-- | This module exposes an overloaded version of the <a>font</a> function
--   that can accept a <a>Font</a> ADT argument. This may be of interest if
--   you desire stronger type safety than <tt>Text</tt>-based fonts
--   provide.
--   
--   Note that this module's <a>font</a> function conflicts with
--   <tt>font</tt> from <a>Graphics.Blank</a>. Make sure to hide
--   <tt>font</tt> from <a>Graphics.Blank</a> if you use <a>font</a> from
--   this module.
module Graphics.Blank.Font

-- | Sets the text context's font properties.
--   
--   <h4><b>Examples</b></h4>
--   
--   <pre>
--   <a>font</a> (<a>defFont</a> "Gill Sans Extrabold") { <a>fontSize</a> = 40 # <tt>pt</tt> }
--   <a>font</a> (<a>defFont</a> <a>sansSerif</a>) { <a>fontSize</a> = 80 # <tt>percent</tt> }
--   <a>font</a> (<a>defFont</a> <a>serif</a>) {
--       <a>fontWeight</a> = <a>bold</a>
--     , <a>fontStyle</a>  = <a>italic</a>
--     , <a>fontSize</a>   = <a>large</a>
--   }
--   </pre>
font :: CanvasFont canvasFont => canvasFont -> Canvas ()

-- | A data type that can represent a browser font.
class CanvasFont a

-- | Convert a value into a JavaScript string representing a font value.
jsCanvasFont :: CanvasFont a => a -> Builder

-- | A CSS-style font data type.
data Font

-- | A font specified by its individual longhand properties.
FontProperties :: FontStyle -> FontVariant -> FontWeight -> FontSize -> LineHeight -> [FontFamily] -> Font
[fontStyle] :: Font -> FontStyle
[fontVariant] :: Font -> FontVariant
[fontWeight] :: Font -> FontWeight
[fontSize] :: Font -> FontSize
[lineHeight] :: Font -> LineHeight
[fontFamily] :: Font -> [FontFamily]

-- | The font used for captioned controls (e.g., buttons, drop-downs, etc.)
CaptionFont :: Font

-- | The font used to label icons.
IconFont :: Font

-- | The font used in menus (e.g., dropdown menus and menu lists).
MenuFont :: Font

-- | The font used in dialog boxes.
MessageBoxFont :: Font

-- | The font used for labeling small controls.
SmallCaptionFont :: Font

-- | The font used in window status bars.
StatusBarFont :: Font

-- | Creates a new font from the <a>FontFamily</a> list, using the
--   <a>Default</a> instances for the other five longhand properties. If
--   you only wish to change certain properties and leave the others alone,
--   this provides a convenient mechanism for doing so:
--   
--   <pre>
--   (<a>defFont</a> ["Gill Sans Extrabold", <a>sansSerif</a>]) {
--       <a>fontStyle</a>  = <a>italic</a>
--     , <a>fontSize</a>   = 12 # <a>px</a>
--     , <a>lineHeight</a> = 14 # <a>px</a>
--   }
--   </pre>
defFont :: [FontFamily] -> Font

-- | Shorthand for <a>CaptionFont</a>.
caption :: Font

-- | Shorthand for <a>IconFont</a>.
icon :: Font

-- | Shorthand for <a>MenuFont</a>.
menu :: Font

-- | Shorthand for <a>MessageBoxFont</a>.
messageBox :: Font

-- | Shorthand for <a>SmallCaptionFont</a>.
smallCaption :: Font

-- | Shorthand for <a>StatusBarFont</a>.
statusBar :: Font

-- | Specifies if a <a>Font</a> is italic or oblique.
data FontStyle

-- | Selects a font classified as normal (default).
NormalStyle :: FontStyle

-- | Selects a font that is labeled italic, or if one is not available, one
--   labeled oblique.
ItalicStyle :: FontStyle

-- | Selects a font that is labeled oblique.
ObliqueStyle :: FontStyle

-- | Shorthand for <a>ItalicStyle</a>.
italic :: FontStyle

-- | Shorthand for <a>ObliqueStyle</a>.
oblique :: FontStyle

-- | Specifies the face of a <a>Font</a>.
data FontVariant

-- | A normal font face (default).
NormalVariant :: FontVariant

-- | A font face with small capital letters for lowercase characters.
SmallCapsVariant :: FontVariant

-- | Shorthand for <a>SmallCapsVariant</a>.
smallCaps :: FontVariant

-- | Specifies the boldness of a <a>Font</a>. Note that <a>FontWeight</a>
--   is an instance of <a>Num</a> so that the nine numeric weights can be
--   used directly. For example:
--   
--   <pre>
--   (<a>defFont</a> [<a>sansSerif</a>]) { <a>fontWeight</a> = 900 }
--   </pre>
--   
--   Attempting to use a numeric weight other than the nine given will
--   result in a runtime error.
data FontWeight

-- | Default.
NormalWeight :: FontWeight
BoldWeight :: FontWeight
BolderWeight :: FontWeight
LighterWeight :: FontWeight
Weight100 :: FontWeight
Weight200 :: FontWeight
Weight300 :: FontWeight
Weight400 :: FontWeight
Weight500 :: FontWeight
Weight600 :: FontWeight
Weight700 :: FontWeight
Weight800 :: FontWeight
Weight900 :: FontWeight

-- | Shorthand for <a>BoldWeight</a>.
bold :: FontWeight

-- | Shorthand for <a>BolderWeight</a>.
bolder :: FontWeight

-- | Shorthand for <a>LighterWeight</a>.
lighter :: FontWeight

-- | The desired height of <a>Font</a> glyphs.
--   
--   <h4><b>Examples</b></h4>
--   
--   <pre>
--   (<a>defFont</a> [<a>sansSerif</a>]) { <a>fontSize</a> = <a>xxSmall</a> }
--   (<a>defFont</a> [<a>sansSerif</a>]) { <a>fontSize</a> = 30 # <a>pt</a> }
--   (<a>defFont</a> [<a>sansSerif</a>]) { <a>fontSize</a> = 50 # <a>percent</a> }
--   </pre>
data FontSize
XXSmallSize :: FontSize
XSmallSize :: FontSize
SmallSize :: FontSize

-- | Default.
MediumSize :: FontSize
LargeSize :: FontSize
XLargeSize :: FontSize
XXLargeSize :: FontSize
LargerSize :: FontSize
SmallerSize :: FontSize
FontSizeLength :: Length -> FontSize
FontSizePercentage :: Percentage -> FontSize

-- | Shorthand for <a>XXSmallSize</a>.
xxSmall :: FontSize

-- | Shorthand for <a>XSmallSize</a>.
xSmall :: FontSize

-- | Shorthand for <a>SmallSize</a>.
small :: FontSize

-- | Shorthand for <a>MediumSize</a>.
medium :: FontSize

-- | Shorthand for <a>LargeSize</a>.
large :: FontSize

-- | Shorthand for <a>XLargeSize</a>.
xLarge :: FontSize

-- | Shorthand for <a>XXLargeSize</a>.
xxLarge :: FontSize

-- | Shorthand for <a>LargerSize</a>.
larger :: FontSize

-- | Shorthand for <a>SmallerSize</a>.
smaller :: FontSize

-- | The height of the line boxes in a <a>Font</a>.
--   
--   <h4><b>Examples</b></h4>
--   
--   <pre>
--   (<a>defFont</a> [<a>sansSerif</a>]) { <a>lineHeight</a> = <a>normal</a> }
--   (<a>defFont</a> [<a>sansSerif</a>]) { <a>lineHeight</a> = 50 }
--   (<a>defFont</a> [<a>sansSerif</a>]) { <a>lineHeight</a> = 30 # <a>em</a> }
--   (<a>defFont</a> [<a>sansSerif</a>]) { <a>lineHeight</a> = 70 # <a>percent</a> }
--   </pre>
data LineHeight

-- | Default.
NormalLineHeight :: LineHeight
LineHeightNumber :: Double -> LineHeight
LineHeightLength :: Length -> LineHeight
LineHeightPercentage :: Percentage -> LineHeight

-- | The name of a <a>Font</a> family. Note that both <a>FontFamily</a> and
--   <tt>[<a>FontFamily</a>]</tt> are instances of <a>IsString</a>, so it
--   is possible to produce <a>FontFamily</a> values in several different
--   ways. For example, these are all of type <a>FontFamily</a>:
--   
--   <pre>
--   <a>FontFamilyName</a> "Gill Sans Extrabold"
--   "Gill Sans Extrabold" :: <a>FontFamily</a>
--   <a>serif</a>
--   "serif" :: <a>FontFamily</a>
--   </pre>
--   
--   These are all of type <tt>[<a>FontFamily</a>]</tt>:
--   
--   <pre>
--   [<a>FontFamilyName</a> "Helvetica", <a>serif</a>]
--   ["Helvetica", "serif"] :: [<a>FontFamily</a>]
--   "Helvetica, serif" :: [<a>FontFamily</a>]
--   </pre>
data FontFamily

-- | The name of a custom font family.
FontFamilyName :: Text -> FontFamily

-- | A generic font family where glyphs have serifed endings.
SerifFamily :: FontFamily

-- | A generic font family where glyphs do not have serifed endings.
SansSerifFamily :: FontFamily

-- | A generic font family where all glyphs have the same fixed width.
MonospaceFamily :: FontFamily

-- | A generic font family with cursive glyphs.
CursiveFamily :: FontFamily

-- | A generic font family where glyphs have decorative, playful
--   representations.
FantasyFamily :: FontFamily

-- | Shorthand for <a>SerifFamily</a>.
serif :: FontFamily

-- | Shorthand for <a>SansSerifFamily</a>.
sansSerif :: FontFamily

-- | Shorthand for <a>MonospaceFamily</a>.
monospace :: FontFamily

-- | Shorthand for <a>CursiveFamily</a>.
cursive :: FontFamily

-- | Shorthand for <a>FantasyFamily</a>.
fantasy :: FontFamily

-- | A convenient way to use the <a>Default</a> normal value for several
--   <a>Font</a> longhand properties.
class Default a => NormalProperty a

-- | The default value for a CSS property. For example, it can be used like
--   this:
--   
--   <pre>
--   (<a>defFont</a> [<a>sansSerif</a>]) { <a>lineHeight</a> = <a>normal</a> }
--   </pre>
normal :: NormalProperty a => a

-- | Denotes CSS distance measurements, especially in the context of
--   <tt>Font</tt>s.
data Length

-- | The height of the current font.
Em :: Double -> Length
[runLength] :: Length -> Double

-- | The height of the character <tt>x</tt> (x-height) in the current font.
Ex :: Double -> Length
[runLength] :: Length -> Double

-- | The width of the character <tt>0</tt> in the current font.
Ch :: Double -> Length
[runLength] :: Length -> Double

-- | The height of the font relative to the root element.
Rem :: Double -> Length
[runLength] :: Length -> Double

-- | One percent of the height of the viewport.
Vh :: Double -> Length
[runLength] :: Length -> Double

-- | One percent of the width of the viewport.
Vw :: Double -> Length
[runLength] :: Length -> Double

-- | One percent of the minimum of the viewport height and width.
Vmin :: Double -> Length
[runLength] :: Length -> Double

-- | One percent of the maximum of the viewport height and width.
Vmax :: Double -> Length
[runLength] :: Length -> Double

-- | One device pixel (dot) of the display.
Px :: Double -> Length
[runLength] :: Length -> Double

-- | One millimeter.
Mm :: Double -> Length
[runLength] :: Length -> Double

-- | One centimeter (10 millimeters).
Cm :: Double -> Length
[runLength] :: Length -> Double

-- | One inch (~2.54 centimeters).
In :: Double -> Length
[runLength] :: Length -> Double

-- | One point (1/72 inches).
Pt :: Double -> Length
[runLength] :: Length -> Double

-- | One pica (12 points).
Pc :: Double -> Length
[runLength] :: Length -> Double

-- | Designates CSS properties that can consist of a <a>Length</a>.
class LengthProperty a
fromLength :: LengthProperty a => Length -> a

-- | Constructs a <a>LengthProperty</a> value with <a>Em</a> units.
em :: LengthProperty a => Double -> a

-- | Constructs a <a>LengthProperty</a> value with <a>Ex</a> units.
ex :: LengthProperty a => Double -> a

-- | Constructs a <a>LengthProperty</a> value with <a>Ch</a> units.
ch :: LengthProperty a => Double -> a

-- | Constructs a <a>LengthProperty</a> value with <a>Rem</a> units.
--   <a>rem_</a> has an underscore to distinguish it from <a>rem</a>.
rem_ :: LengthProperty a => Double -> a

-- | Constructs a <a>LengthProperty</a> value with <a>Vh</a> units.
vh :: LengthProperty a => Double -> a

-- | Constructs a <a>LengthProperty</a> value with <a>Vw</a> units.
vw :: LengthProperty a => Double -> a

-- | Constructs a <a>LengthProperty</a> value with <a>Em</a> units.
vmin :: LengthProperty a => Double -> a

-- | Constructs a <a>LengthProperty</a> value with <a>Vmax</a> units.
vmax :: LengthProperty a => Double -> a

-- | Constructs a <a>LengthProperty</a> value with <a>Px</a> units.
px :: LengthProperty a => Double -> a

-- | Constructs a <a>LengthProperty</a> value with <a>Mm</a> units.
mm :: LengthProperty a => Double -> a

-- | Constructs a <a>LengthProperty</a> value with <a>Cm</a> units.
cm :: LengthProperty a => Double -> a

-- | Constructs a <a>LengthProperty</a> value with <tt>Im</tt> units. This
--   function has an underscore to distinguish it from the Haskell keyword.
in_ :: LengthProperty a => Double -> a

-- | Constructs a <a>LengthProperty</a> value with <a>Pt</a> units.
pt :: LengthProperty a => Double -> a

-- | Constructs a <a>LengthProperty</a> value with <a>Pc</a> units.
pc :: LengthProperty a => Double -> a

-- | Designates CSS properties that can consist of a <a>Percentage</a>.
class PercentageProperty a

-- | Create a CSS property value from a <a>Percentage</a>.
percent :: PercentageProperty a => Percentage -> a


-- | This module exposes an overloaded version of the <a>cursor</a>
--   function that can accept a <a>Cursor</a> ADT argument. This may be of
--   interest if you desire stronger type safety than <tt>Text</tt>-based
--   cursors provide.
--   
--   Note that this module's <a>cursor</a> function conflicts with
--   <tt>cursor</tt> from <a>Graphics.Blank</a>. Make sure to hide
--   <tt>cursor</tt> from <a>Graphics.Blank</a> if you use <a>cursor</a>
--   from this module.
module Graphics.Blank.Cursor

-- | Change the canvas cursor to the specified URL or keyword.
--   
--   <h4><b>Examples</b></h4>
--   
--   <pre>
--   cursor $ <a>url</a> "image.png" <a>default_</a>
--   cursor <a>crosshair</a>
--   </pre>
cursor :: CanvasCursor cursor => cursor -> Canvas ()

-- | A data type that can represent a browser cursor.
class CanvasCursor a

-- | Convert a value into a JavaScript string representing a cursor value.
jsCanvasCursor :: CanvasCursor a => a -> Builder

-- | Specified the mouse cursor's appearance in a web browser.
--   
--   Images by the Mozilla Developer Network are licensed under <a>CC-BY-SA
--   2.5</a>.
data Cursor

-- | The browser determines the cursor to display based on the current
--   context.
Auto :: Cursor

Default :: Cursor

-- | No cursor is rendered.
None :: Cursor

ContextMenu :: Cursor

Help :: Cursor

Pointer :: Cursor

Progress :: Cursor

Wait :: Cursor

Cell :: Cursor

Crosshair :: Cursor

Text :: Cursor

VerticalText :: Cursor

Alias :: Cursor

Copy :: Cursor

Move :: Cursor

NoDrop :: Cursor

NotAllowed :: Cursor

AllScroll :: Cursor

ColResize :: Cursor

RowResize :: Cursor

NResize :: Cursor

EResize :: Cursor

SResize :: Cursor

WResize :: Cursor

NEResize :: Cursor

NWResize :: Cursor

SEResize :: Cursor

SWResize :: Cursor

EWResize :: Cursor

NSResize :: Cursor

NESWResize :: Cursor

NWSEResize :: Cursor

ZoomIn :: Cursor

ZoomOut :: Cursor

Grab :: Cursor

Grabbing :: Cursor

-- | An image from a URL. Must be followed by another <a>Cursor</a>.
URL :: Text -> Cursor -> Cursor

-- | Shorthand for <a>Auto</a>.
auto :: Cursor

-- | Shorthand for <a>Default</a>, with an underscore to distinguish it
--   from the Haskell keyword <tt>default</tt>.
default_ :: Cursor

-- | Shorthand for <a>None</a>.
none :: Cursor

-- | Shorthand for <a>ContextMenu</a>.
contextMenu :: Cursor

-- | Shorthand for <a>Help</a>.
help :: Cursor

-- | Shorthand for <a>Pointer</a>.
pointer :: Cursor

-- | Shorthand for <a>Progress</a>.
progress :: Cursor

-- | Shorthand for <a>Wait</a>.
wait :: Cursor

-- | Shorthand for <a>Cell</a>.
cell :: Cursor

-- | Shorthand for <a>Crosshair</a>.
crosshair :: Cursor

-- | Shorthand for <a>Text</a>.
text :: Cursor

-- | Shorthand for <a>VerticalText</a>.
verticalText :: Cursor

-- | Shorthand for <a>Alias</a>.
alias :: Cursor

-- | Shorthand for <a>Copy</a>.
copy :: Cursor

-- | Shorthand for <a>Move</a>.
move :: Cursor

-- | Shorthand for <a>NoDrop</a>.
noDrop :: Cursor

-- | Shorthand for <a>NotAllowed</a>.
notAllowed :: Cursor

-- | Shorthand for <a>AllScroll</a>.
allScroll :: Cursor

-- | Shorthand for <a>ColResize</a>.
colResize :: Cursor

-- | Shorthand for <a>RowResize</a>.
rowResize :: Cursor

-- | Shorthand for <a>NResize</a>.
nResize :: Cursor

-- | Shorthand for <a>EResize</a>.
eResize :: Cursor

-- | Shorthand for <a>SResize</a>.
sResize :: Cursor

-- | Shorthand for <a>WResize</a>.
wResize :: Cursor

-- | Shorthand for <a>NEResize</a>.
neResize :: Cursor

-- | Shorthand for <a>NWResize</a>.
nwResize :: Cursor

-- | Shorthand for <a>SEResize</a>.
seResize :: Cursor

-- | Shorthand for <a>SWResize</a>.
swResize :: Cursor

-- | Shorthand for <a>EWResize</a>.
ewResize :: Cursor

-- | Shorthand for <a>NSResize</a>.
nsResize :: Cursor

-- | Shorthand for <a>NESWResize</a>.
neswResize :: Cursor

-- | Shorthand for <a>NWSEResize</a>.
nwseResize :: Cursor

-- | Shorthand for <a>ZoomIn</a>.
zoomIn :: Cursor

-- | Shorthand for <a>ZoomOut</a>.
zoomOut :: Cursor

-- | Shorthand for <a>Grab</a>.
grab :: Cursor

-- | Shorthand for <a>Grabbing</a>.
grabbing :: Cursor

-- | Shorthand for <a>URL</a>.
url :: Text -> Cursor -> Cursor


-- | <tt>blank-canvas</tt> is a Haskell binding to the complete <a>HTML5
--   Canvas API</a>. <tt>blank-canvas</tt> allows Haskell users to write,
--   in Haskell, interactive images onto their web browsers.
--   <tt>blank-canvas</tt> gives the users a single full-window canvas, and
--   provides many well-documented functions for rendering images.
module Graphics.Blank

-- | <a>blankCanvas</a> is the main entry point into <tt>blank-canvas</tt>.
--   A typical invocation would be
--   
--   <pre>
--   {-# LANGUAGE OverloadedStrings #-}
--   module Main where
--   
--   import Graphics.Blank
--   
--   main = blankCanvas 3000 $ \ context -&gt; do
--           send context $ do
--                   moveTo(50,50)
--                   lineTo(200,100)
--                   lineWidth 10
--                   strokeStyle "red"
--                   stroke()
--   </pre>
blankCanvas :: Options -> (DeviceContext -> IO ()) -> IO ()

-- | Additional <tt>blank-canvas</tt> settings. The defaults can be used by
--   creating <a>Options</a> as a <a>Num</a>. For example,
--   <tt><a>blankCanvas</a> 3000</tt> uses the default <a>Options</a> on
--   port 3000.
data Options
Options :: Int -> [EventName] -> Bool -> String -> [Middleware] -> Bool -> Options

-- | On which port do we issue <tt>blank-canvas</tt>?
[port] :: Options -> Int

-- | To which events does the canvas listen? Default: <tt>[]</tt>
[events] :: Options -> [EventName]

-- | Turn on debugging. Default: <tt>False</tt>
[debug] :: Options -> Bool

-- | Location of the static files. Default: <tt>"."</tt>
[root] :: Options -> String

-- | Extra middleware(s) to be executed. Default:
--   <tt>[<a>local_only</a>]</tt>
[middleware] :: Options -> [Middleware]

-- | use a weak monad, which may help debugging (default False)
[weak] :: Options -> Bool

-- | <a>DeviceContext</a> is the abstract handle into a specific 2D context
--   inside a browser. Note that the JavaScript API concepts of
--   <tt><a>CanvasRenderingContext2D</a></tt> and
--   <tt><a>HTMLCanvasElement</a></tt> are conflated in
--   <tt>blank-canvas</tt>. Therefore, there is no
--   <tt><a>getContext()</a></tt> method; rather, <tt>getContext()</tt> is
--   implied (when using <tt>send</tt>).
data DeviceContext

-- | Sends a set of canvas commands to the <a>Canvas</a>. Attempts to
--   common up as many commands as possible. Should not crash.
send :: DeviceContext -> Canvas a -> IO a
data Canvas :: * -> *

-- | The height of an <a>Image</a> in pixels.
height :: (Image image, Num a) => image -> a

-- | The width of an <a>Image</a> in pixels.
width :: (Image image, Num a) => image -> a

-- | Turn the canvas into a PNG data stream / data URL.
--   
--   <pre>
--   "data:image/png;base64,iVBORw0KGgo.."
--   </pre>
toDataURL :: () -> Canvas Text

-- | Saves the entire canvas by pushing the current state onto a stack.
save :: () -> Canvas ()

-- | Restores the most recently saved canvas by popping the top entry off
--   of the drawing state stack. If there is no state, do nothing.
restore :: () -> Canvas ()

-- | Applies a scaling transformation to the canvas units, where the first
--   argument is the percent to scale horizontally, and the second argument
--   is the percent to scale vertically. By default, one canvas unit is one
--   pixel.
--   
--   <h4><b>Examples</b></h4>
--   
--   <pre>
--   <a>scale</a>(0.5, 0.5)        -- Halve the canvas units
--   <a>fillRect</a>(0, 0, 20, 20) -- Draw a 10x10 square
--   <a>scale</a>(-1, 1)           -- Flip the context horizontally
--   </pre>
scale :: (Interval, Interval) -> Canvas ()

-- | Applies a rotation transformation to the canvas. When you call
--   functions such as <a>fillRect</a> after <a>rotate</a>, the drawings
--   will be rotated clockwise by the angle given to <a>rotate</a> (in
--   radians).
--   
--   <h4><b>Example</b></h4>
--   
--   <pre>
--   <a>rotate</a> (<a>pi</a>/2)        -- Rotate the canvas 90°
--   <a>fillRect</a>(0, 0, 20, 10) -- Draw a 10x20 rectangle
--   </pre>
rotate :: Radians -> Canvas ()

-- | Applies a translation transformation by remapping the origin (i.e.,
--   the (0,0) position) on the canvas. When you call functions such as
--   <a>fillRect</a> after <a>translate</a>, the values passed to
--   <a>translate</a> are added to the x- and y-coordinate values.
--   
--   <h4><b>Example</b></h4>
--   
--   <pre>
--   <a>translate</a>(20, 20)
--   <a>fillRect</a>(0, 0, 40, 40) -- Draw a 40x40 square, starting in position (20, 20)
--   </pre>
translate :: (Double, Double) -> Canvas ()

-- | Applies a transformation by multiplying a matrix to the canvas's
--   current transformation. If <tt><a>transform</a>(a, b, c, d, e, f)</tt>
--   is called, the matrix
--   
--   <pre>
--   ( a c e )
--   ( b d f )
--   ( 0 0 1 )
--   </pre>
--   
--   is multiplied by the current transformation. The parameters are:
--   
--   <ul>
--   <li><tt>a</tt> is the horizontal scaling</li>
--   <li><tt>b</tt> is the horizontal skewing</li>
--   <li><tt>c</tt> is the vertical skewing</li>
--   <li><tt>d</tt> is the vertical scaling</li>
--   <li><tt>e</tt> is the horizontal movement</li>
--   <li><tt>f</tt> is the vertical movement</li>
--   </ul>
transform :: (Double, Double, Double, Double, Double, Double) -> Canvas ()

-- | Resets the canvas's transformation matrix to the identity matrix, then
--   calls <a>transform</a> with the given arguments.
setTransform :: (Double, Double, Double, Double, Double, Double) -> Canvas ()

-- | Class for JavaScript objects that represent images (including the
--   canvas itself).
class Image a

-- | drawImage' takes 2, 4, or 8 <a>Double</a> arguments. See
--   <tt>drawImageAt</tt>, <tt>drawImageSize</tt>, and
--   <tt>drawImageCrop</tt> for variants with exact numbers of arguments.
drawImage :: Image image => (image, [Double]) -> Canvas ()

-- | Set the alpha value that is applied to shapes before they are drawn
--   onto the canvas.
globalAlpha :: Alpha -> Canvas ()

-- | Sets how new shapes should be drawn over existing shapes.
--   
--   <h4><b>Examples</b></h4>
--   
--   <pre>
--   <a>globalCompositeOperation</a> "source-over"
--   <a>globalCompositeOperation</a> "destination-atop"
--   </pre>
globalCompositeOperation :: Text -> Canvas ()

-- | Sets the thickness of lines in pixels (<tt>1.0</tt> by default).
lineWidth :: Double -> Canvas ()

-- | Sets the <a>LineEndCap</a> to use when drawing the endpoints of lines.
lineCap :: LineEndCap -> Canvas ()

-- | Sets the <a>LineJoinCorner</a> to use when drawing two connected
--   lines.
lineJoin :: LineJoinCorner -> Canvas ()

-- | Sets the maximum miter length (<tt>10.0</tt> by default) to use when
--   the <a>lineWidth</a> is <a>miter</a>.
miterLimit :: Double -> Canvas ()

-- | The style of the caps on the endpoints of a line.
data LineEndCap

-- | Flat edges (default).
ButtCap :: LineEndCap

-- | Semicircular end caps
RoundCap :: LineEndCap

-- | Square end caps
SquareCap :: LineEndCap

-- | Shorthand for <a>ButtCap</a>.
butt :: LineEndCap

-- | Shorthand for <a>SquareCap</a>.
square :: LineEndCap

-- | The style of corner that is created when two lines join.
data LineJoinCorner

-- | A filled triangle with a beveled edge connects two lines.
BevelCorner :: LineJoinCorner

-- | A filled arc connects two lines.
RoundCorner :: LineJoinCorner

-- | A filled triangle with a sharp edge connects two lines (default).
MiterCorner :: LineJoinCorner

-- | Shorthand for <a>BevelCorner</a>.
bevel :: LineJoinCorner

-- | Shorthand for <a>MiterCorner</a>.
miter :: LineJoinCorner

-- | Sets the color used for strokes (<tt>"black"</tt> by default).
--   
--   <h4><b>Examples</b></h4>
--   
--   <pre>
--   <a>strokeStyle</a> "red"
--   <a>strokeStyle</a> "#00FF00"
--   </pre>
strokeStyle :: Text -> Canvas ()

-- | Sets the color used to fill a drawing (<tt>"black"</tt> by default).
--   
--   <h4><b>Examples</b></h4>
--   
--   <pre>
--   <a>fillStyle</a> "red"
--   <a>fillStyle</a> "#00FF00"
--   </pre>
fillStyle :: Text -> Canvas ()

-- | Sets the horizontal distance that a shadow will be offset
--   (<tt>0.0</tt> by default).
shadowOffsetX :: Double -> Canvas ()

-- | Sets the vertical distance that a shadow will be offset (<tt>0.0</tt>
--   by default).
shadowOffsetY :: Double -> Canvas ()

-- | Sets the blur level for shadows (<tt>0.0</tt> by default).
shadowBlur :: Double -> Canvas ()

-- | Sets the color used for shadows.
--   
--   <h4><b>Examples</b></h4>
--   
--   <pre>
--   <a>shadowColor</a> "red"
--   <a>shadowColor</a> "#00FF00"
--   </pre>
shadowColor :: Text -> Canvas ()

-- | <tt><a>createLinearGradient</a>(x0, y0, x1, y1)</tt> creates a linear
--   gradient along a line, which can be used to fill other shapes.
--   
--   <ul>
--   <li><tt>x0</tt> is the starting x-coordinate of the gradient</li>
--   <li><tt>y0</tt> is the starting y-coordinate of the gradient</li>
--   <li><tt>x1</tt> is the ending y-coordinate of the gradient</li>
--   <li><tt>y1</tt> is the ending y-coordinate of the gradient</li>
--   </ul>
--   
--   <h4><b>Example</b></h4>
--   
--   <pre>
--   grd &lt;- <a>createLinearGradient</a>(0, 0, 10, 10)
--   grd # <a>addColorStop</a>(0, "blue")
--   grd # <a>addColorStop</a>(1, "red")
--   <tt>fillStyle</tt> grd
--   </pre>
createLinearGradient :: (Double, Double, Double, Double) -> Canvas CanvasGradient

-- | <tt><a>createRadialGradient</a>(x0, y0, r0, x1, y1, r1)</tt> creates a
--   radial gradient given by the coordinates of two circles, which can be
--   used to fill other shapes.
--   
--   <ul>
--   <li><tt>x0</tt> is the x-axis of the coordinate of the start
--   circle</li>
--   <li><tt>y0</tt> is the y-axis of the coordinate of the start
--   circle</li>
--   <li><tt>r0</tt> is the radius of the start circle</li>
--   <li><tt>x1</tt> is the x-axis of the coordinate of the end circle</li>
--   <li><tt>y1</tt> is the y-axis of the coordinate of the end circle</li>
--   <li><tt>r1</tt> is the radius of the end circle</li>
--   </ul>
--   
--   <h4><b>Example</b></h4>
--   
--   <pre>
--   grd &lt;- <a>createRadialGradient</a>(100,100,100,100,100,0)
--   grd # <a>addColorStop</a>(0, "blue")
--   grd # <a>addColorStop</a>(1, "red")
--   <tt>fillStyle</tt> grd
--   </pre>
createRadialGradient :: (Double, Double, Double, Double, Double, Double) -> Canvas CanvasGradient

-- | Creates a pattern using a <a>CanvasImage</a> and a
--   <a>RepeatDirection</a>.
--   
--   <h4><b>Example</b></h4>
--   
--   <pre>
--   img &lt;- newImage "cat.jpg"
--   pat &lt;- <a>createPattern</a>(img, <a>repeatX</a>)
--   <tt>fillStyle</tt> pat
--   </pre>
createPattern :: (CanvasImage, RepeatDirection) -> Canvas CanvasPattern

-- | Adds a color and stop position in a <a>CanvasGradient</a>. A stop
--   position is a number between 0.0 and 1.0 that represents the position
--   between start and stop in a gradient.
--   
--   <h4><b>Example</b></h4>
--   
--   <pre>
--   grd &lt;- <a>createLinearGradient</a>(0, 0, 10, 10)
--   grd # <a>addColorStop</a>(0, "red")
--   </pre>
addColorStop :: (Interval, Text) -> CanvasGradient -> Canvas ()

-- | The direction in which a <a>CanvasPattern</a> repeats.
data RepeatDirection

-- | The pattern repeats both horizontally and vertically (default).
Repeat :: RepeatDirection

-- | The pattern repeats only horizontally.
RepeatX :: RepeatDirection

-- | The pattern repeats only vertically.
RepeatY :: RepeatDirection

-- | The pattern displays only once and does not repeat.
NoRepeat :: RepeatDirection

-- | Shorthand for <a>Repeat</a>, with an underscore to distinguish it from
--   <a>repeat</a>.
repeat_ :: RepeatDirection

-- | Shorthand for <a>RepeatX</a>.
repeatX :: RepeatDirection

-- | Shorthand for <a>RepeatY</a>.
repeatY :: RepeatDirection

-- | Shorthand for <a>NoRepeat</a>.
noRepeat :: RepeatDirection

-- | A handle to the a canvas gradient. <a>CanvasGradient</a>s cannot be
--   destroyed.
data CanvasGradient

-- | A handle to a canvas pattern. <a>CanvasPattern</a>s cannot be
--   destroyed.
data CanvasPattern

-- | Begins drawing a new path. This will empty the current list of
--   subpaths.
--   
--   <h4><b>Example</b></h4>
--   
--   <pre>
--   <a>beginPath</a>()
--   <a>moveTo</a>(20, 20)
--   <a>lineTo</a>(200, 20)
--   <a>stroke</a>()
--   </pre>
beginPath :: () -> Canvas ()

-- | Creates a path from the current point back to the start, to close it.
--   
--   <h4><b>Example</b></h4>
--   
--   <pre>
--   <a>beginPath</a>()
--   <a>moveTo</a>(20, 20)
--   <a>lineTo</a>(200, 20)
--   <a>lineTo</a>(120, 120)
--   <a>closePath</a>()
--   <a>stroke</a>()
--   </pre>
closePath :: () -> Canvas ()

-- | Fills the current path with the current <a>fillStyle</a>.
--   
--   <h4><b>Example</b></h4>
--   
--   <pre>
--   <a>rect</a>(10, 10, 100, 100)
--   <a>fill</a>()
--   </pre>
fill :: () -> Canvas ()

-- | Draws the current path's strokes with the current <a>strokeStyle</a>
--   (<tt>black</tt> by default).
--   
--   <h4><b>Example</b></h4>
--   
--   <pre>
--   <a>rect</a>(10, 10, 100, 100)
--   <a>stroke</a>()
--   </pre>
stroke :: () -> Canvas ()

-- | Turns the path currently being built into the current clipping path.
--   Anything drawn after <a>clip</a> is called will only be visible if
--   inside the new clipping path.
--   
--   <h4><b>Example</b></h4>
--   
--   <pre>
--   <a>rect</a>(50, 20, 200, 120)
--   <a>stroke</a>()
--   <a>clip</a>()
--   <a>fillStyle</a> "red"
--   <a>fillRect</a>(0, 0, 150, 100)
--   </pre>
clip :: () -> Canvas ()

-- | <tt><a>moveTo</a>(x, y)</tt> moves the starting point of a new subpath
--   to the given <tt>(x, y)</tt> coordinates.
--   
--   <h4><b>Example</b></h4>
--   
--   <pre>
--   <a>beginPath</a>()
--   <a>moveTo</a>(50, 50)
--   <a>lineTo</a>(200, 50)
--   <a>stroke</a>()
--   </pre>
moveTo :: (Double, Double) -> Canvas ()

-- | <tt><a>lineTo</a>(x, y)</tt> connects the last point in the subpath to
--   the given <tt>(x, y)</tt> coordinates (without actually drawing it).
--   
--   <h4><b>Example</b></h4>
--   
--   <pre>
--   <a>beginPath</a>()
--   <a>moveTo</a>(50, 50)
--   <a>lineTo</a>(200, 50)
--   <a>stroke</a>()
--   </pre>
lineTo :: (Double, Double) -> Canvas ()

-- | <tt><a>quadraticCurveTo</a>(cpx, cpy, x, y)</tt> adds a quadratic
--   Bézier curve to the path (whereas <a>bezierCurveTo</a> adds a cubic
--   Bézier curve).
--   
--   <ul>
--   <li><tt>cpx</tt> is the x-coordinate of the control point</li>
--   <li><tt>cpy</tt> is the y-coordinate of the control point</li>
--   <li><tt>x</tt> is the x-coordinate of the end point</li>
--   <li><tt>y</tt> is the y-coordinate of the end point</li>
--   </ul>
quadraticCurveTo :: (Double, Double, Double, Double) -> Canvas ()

-- | <tt><a>bezierCurveTo</a>(cp1x, cp1y, cp2x, cp2y x, y)</tt> adds a
--   cubic Bézier curve to the path (whereas <a>quadraticCurveTo</a> adds a
--   quadratic Bézier curve).
--   
--   <ul>
--   <li><tt>cp1x</tt> is the x-coordinate of the first control point</li>
--   <li><tt>cp1y</tt> is the y-coordinate of the first control point</li>
--   <li><tt>cp2x</tt> is the x-coordinate of the second control point</li>
--   <li><tt>cp2y</tt> is the y-coordinate of the second control point</li>
--   <li><tt>x</tt> is the x-coordinate of the end point</li>
--   <li><tt>y</tt> is the y-coordinate of the end point</li>
--   </ul>
bezierCurveTo :: (Double, Double, Double, Double, Double, Double) -> Canvas ()

-- | <tt><a>arcTo</a>(x1, y1, x2, y2, r)</tt> creates an arc between two
--   tangents, specified by two control points and a radius.
--   
--   <ul>
--   <li><tt>x1</tt> is the x-coordinate of the first control point</li>
--   <li><tt>y1</tt> is the y-coordinate of the first control point</li>
--   <li><tt>x2</tt> is the x-coordinate of the second control point</li>
--   <li><tt>y2</tt> is the y-coordinate of the second control point</li>
--   <li><tt>r</tt> is the arc's radius</li>
--   </ul>
arcTo :: (Double, Double, Double, Double, Double) -> Canvas ()

-- | <tt><a>arc</a>(x, y, r, sAngle, eAngle, cc)</tt> creates a circular
--   arc, where
--   
--   <ul>
--   <li><tt>x</tt> is the x-coordinate of the center of the circle</li>
--   <li><tt>y</tt> is the y-coordinate of the center of the circle</li>
--   <li><tt>r</tt> is the radius of the circle on which the arc is
--   drawn</li>
--   <li><tt>sAngle</tt> is the starting angle (where <tt>0</tt> at the 3
--   o'clock position of the circle)</li>
--   <li><tt>eAngle</tt> is the ending angle</li>
--   <li><tt>cc</tt> is the arc direction, where <tt>True</tt> indicates
--   counterclockwise and <tt>False</tt> indicates clockwise.</li>
--   </ul>
arc :: (Double, Double, Double, Radians, Radians, Bool) -> Canvas ()

-- | <tt><a>rect</a>(x, y, w, h)</tt> creates a rectangle with an
--   upper-left corner at position <tt>(x, y)</tt>, width <tt>w</tt>, and
--   height <tt>h</tt> (where width and height are in pixels).
--   
--   <h4><b>Example</b></h4>
--   
--   <pre>
--   <a>rect</a>(10, 10, 100, 100)
--   <a>fill</a>()
--   </pre>
rect :: (Double, Double, Double, Double) -> Canvas ()

-- | <tt><a>isPointInPath</a>(x, y)</tt> queries whether point <tt>(x,
--   y)</tt> is within the current path.
--   
--   <h4><b>Example</b></h4>
--   
--   <pre>
--   <tt>rect</tt>(10, 10, 100, 100)
--   <tt>stroke</tt>()
--   b &lt;- <a>isPointInPath</a>(10, 10) -- b == True
--   </pre>
isPointInPath :: (Double, Double) -> Canvas Bool

-- | Sets the text context's font properties.
--   
--   <h4><b>Examples</b></h4>
--   
--   <pre>
--   <a>font</a> "40pt 'Gill Sans Extrabold'"
--   <a>font</a> "80% sans-serif"
--   <a>font</a> "bold italic large serif"
--   </pre>
font :: Text -> Canvas ()

-- | Sets the <a>TextAnchorAlignment</a> to use when drawing text.
textAlign :: TextAnchorAlignment -> Canvas ()

-- | Sets the <a>TextBaselineAlignment</a> to use when drawing text.
textBaseline :: TextBaselineAlignment -> Canvas ()

-- | <tt><a>fillText</a>(t, x, y)</tt> fills the text <tt>t</tt> at
--   position <tt>(x, y)</tt> using the current <a>fillStyle</a>.
--   
--   <h4><b>Example</b></h4>
--   
--   <pre>
--   <a>font</a> "48px serif"
--   <a>fillText</a>("Hello, World!", 50, 100)
--   </pre>
fillText :: (Text, Double, Double) -> Canvas ()

-- | <tt><a>strokeText</a>(t, x, y)</tt> draws text <tt>t</tt> (with no
--   fill) at position <tt>(x, y)</tt> using the current
--   <a>strokeStyle</a>.
--   
--   <h4><b>Example</b></h4>
--   
--   <pre>
--   <a>font</a> "48px serif"
--   <a>strokeText</a>("Hello, World!", 50, 100)
--   </pre>
strokeText :: (Text, Double, Double) -> Canvas ()

-- | Queries the measured width of the text argument.
--   
--   <h4><b>Example</b></h4>
--   
--   <pre>
--   <a>TextMetrics</a> w &lt;- <a>measureText</a> "Hello, World!"
--   </pre>
measureText :: Text -> Canvas TextMetrics

-- | The anchor point for text in the current <tt>DeviceContext</tt>.
data TextAnchorAlignment

-- | The text is anchored at either its left edge (if the canvas is
--   left-to-right) or its right edge (if the canvas is right-to-left).
StartAnchor :: TextAnchorAlignment

-- | The text is anchored at either its right edge (if the canvas is
--   left-to-right) or its left edge (if the canvas is right-to-left).
EndAnchor :: TextAnchorAlignment

-- | The text is anchored in its center.
CenterAnchor :: TextAnchorAlignment

-- | The text is anchored at its left edge.
LeftAnchor :: TextAnchorAlignment

-- | the text is anchored at its right edge.
RightAnchor :: TextAnchorAlignment

-- | Shorthand for <a>StartAnchor</a>.
start :: TextAnchorAlignment

-- | Shorthand for <a>EndAnchor</a>.
end :: TextAnchorAlignment

-- | Shorthand for <a>CenterAnchor</a>.
center :: TextAnchorAlignment

-- | Shorthand for <a>LeftAnchor</a>.
left :: TextAnchorAlignment

-- | Shorthand for <a>RightAnchor</a>.
right :: TextAnchorAlignment

-- | The baseline alignment used when drawing text in the current
--   <tt>DeviceContext</tt>. The baselines are ordered from highest
--   (<tt>Top</tt>) to lowest (<tt>Bottom</tt>).
data TextBaselineAlignment
TopBaseline :: TextBaselineAlignment
HangingBaseline :: TextBaselineAlignment
MiddleBaseline :: TextBaselineAlignment
AlphabeticBaseline :: TextBaselineAlignment
IdeographicBaseline :: TextBaselineAlignment
BottomBaseline :: TextBaselineAlignment

-- | Shorthand for <a>TopBaseline</a>.
top :: TextBaselineAlignment

-- | Shorthand for <a>HangingBaseline</a>.
hanging :: TextBaselineAlignment

-- | Shorthand for <a>MiddleBaseline</a>.
middle :: TextBaselineAlignment

-- | Shorthand for <a>AlphabeticBaseline</a>.
alphabetic :: TextBaselineAlignment

-- | Shorthand for <a>IdeographicBaseline</a>.
ideographic :: TextBaselineAlignment

-- | Shorthand for <a>BottomBaseline</a>.
bottom :: TextBaselineAlignment

-- | The <a>width</a> argument of <a>TextMetrics</a> can trivially be
--   projected out.
data TextMetrics
TextMetrics :: Double -> TextMetrics

-- | <tt><a>clearRect</a>(x, y, w, h)</tt> clears all pixels within the
--   rectangle with upper-left corner <tt>(x, y)</tt>, width <tt>w</tt>,
--   and height <tt>h</tt> (i.e., sets the pixels to transparent black).
--   
--   <h4><b>Example</b></h4>
--   
--   <pre>
--   <a>fillStyle</a> "red"
--   <a>fillRect</a>(0, 0, 300, 150)
--   <a>clearRect</a>(20, 20, 100, 50)
--   </pre>
clearRect :: (Double, Double, Double, Double) -> Canvas ()

-- | <tt><a>fillRect</a>(x, y, w, h)</tt> draws a filled rectangle with
--   upper-left corner <tt>(x, y)</tt>, width <tt>w</tt>, and height
--   <tt>h</tt> using the current <a>fillStyle</a>.
--   
--   <h4><b>Example</b></h4>
--   
--   <pre>
--   <a>fillStyle</a> "red"
--   <a>fillRect</a>(0, 0, 300, 150)
--   </pre>
fillRect :: (Double, Double, Double, Double) -> Canvas ()

-- | <tt><a>strokeRect</a>(x, y, w, h)</tt> draws a rectangle (no fill)
--   with upper-left corner <tt>(x, y)</tt>, width <tt>w</tt>, and height
--   <tt>h</tt> using the current <a>strokeStyle</a>.
--   
--   <h4><b>Example</b></h4>
--   
--   <pre>
--   <a>strokeStyle</a> "red"
--   <a>strokeRect</a>(0, 0, 300, 150)
--   </pre>
strokeRect :: (Double, Double, Double, Double) -> Canvas ()

-- | <tt><a>getImageData</a>(x, y, w, h)</tt> capture <a>ImageData</a> from
--   the rectangle with upper-left corner <tt>(x, y)</tt>, width
--   <tt>w</tt>, and height <tt>h</tt>.
getImageData :: (Double, Double, Double, Double) -> Canvas ImageData

-- | <a>putImageData</a> takes 2 or 6 <a>Double</a> arguments. See
--   <tt>putImageDataAt</tt> and <tt>putImageDataDirty</tt> for variants
--   with exact numbers of arguments.
putImageData :: (ImageData, [Double]) -> Canvas ()

-- | <a>ImageData</a> is a transliteration of JavaScript's
--   <tt><a>ImageData</a></tt>. <a>ImageData</a> consists of two
--   <a>Int</a>s and one (unboxed) <a>Vector</a> of <a>Word8</a>s.
--   <tt>width</tt>, <tt>height</tt>, and <tt>data</tt> can be projected
--   from <a>ImageData</a>, <a>length</a> can be used to find the
--   <tt>data</tt> length.
--   
--   Note: <a>ImageData</a> lives on the server, not the client.
data ImageData
ImageData :: !Int -> !Int -> !(Vector Word8) -> ImageData

-- | An interval representing a color's translucency. A color with an alpha
--   value of 0.0 is <tt>transparent</tt>, and a color with an alpha value
--   of 1.0 is opaque.
type Alpha = Interval

-- | An angle type in which 360° represents one complete rotation.
type Degrees = Double

-- | A normalized percentage value (e.g., <tt>0.0</tt> represent 0%,
--   <tt>1.0</tt> represents 100%, etc.).
type Interval = Double

-- | A value representing a percentage (e.g., <tt>0.0</tt> represents 0%,
--   <tt>100.0</tt> represents 100%, etc.).
type Percentage = Double

-- | An angle type in which 2π radians represents one complete rotation.
type Radians = Double

-- | Class for <tt>round</tt> CSS property values.
class RoundProperty a

-- | Shorthand for <a>RoundCap</a> or <a>RoundCorner</a>, with an
--   underscore to distinguish it from <a>round</a>.
round_ :: RoundProperty a => a

-- | <a>newImage</a> takes a URL (perhaps a data URL), and returns the
--   <a>CanvasImage</a> handle <i>after</i> loading. If you are using local
--   images, loading should be near instant.
newImage :: Text -> Canvas CanvasImage

-- | A handle to a canvas image. <a>CanvasImage</a>s cannot be destroyed.
data CanvasImage

-- | <a>newAudio</a> takes an URL to an audio file and returs the
--   <a>CanvasAudio</a> handle <i>after</i> loading. If you are using local
--   audio files, loading should be near instant.
newAudio :: Text -> Canvas CanvasAudio

-- | A handle to a canvas audio. <a>CanvasAudio</a>s cannot be destroyed.
data CanvasAudio

-- | <a>devicePixelRatio</a> returns the device's pixel ratio as used.
--   Typically, the browser ignores <tt>devicePixelRatio</tt> in the
--   canvas, which can make fine details and text look fuzzy. Using the
--   query <tt>?hd</tt> on the URL, <tt>blank-canvas</tt> attempts to use
--   the native <tt>devicePixelRatio</tt>, and if successful,
--   <a>devicePixelRatio</a> will return a number other than 1. You can
--   think of <a>devicePixelRatio</a> as the line width to use to make
--   lines look one pixel wide.
devicePixelRatio :: DeviceContext -> Double

-- | A handle to an offscreen canvas. <a>CanvasContext</a> cannot be
--   destroyed.
data CanvasContext

-- | Create a new, off-screen canvas buffer. Takes width and height as
--   arguments.
newCanvas :: (Int, Int) -> Canvas CanvasContext

-- | <a>with</a> runs a set of canvas commands in the context of a specific
--   canvas buffer.
with :: CanvasContext -> Canvas a -> Canvas a

-- | <a>myCanvasContext</a> returns the current <a>CanvasContext</a>.
myCanvasContext :: Canvas CanvasContext
deviceCanvasContext :: DeviceContext -> CanvasContext

-- | Send all commands to the browser, wait for the browser to act, then
--   continue.
sync :: Canvas ()

-- | <a>console_log</a> aids debugging by sending the argument to the
--   browser <tt>console.log</tt>.
console_log :: JSArg msg => msg -> Canvas ()

-- | <a>eval</a> executes the argument in JavaScript directly.
eval :: Text -> Canvas ()

-- | Class for Haskell data types which represent JavaScript data.
class JSArg a

-- | Display a value as JavaScript data.
showbJS :: JSArg a => a -> Builder

-- | Clear the screen. Restores the default transformation matrix.
clearCanvas :: Canvas ()

-- | Wrap a canvas computation in <a>save</a> / <a>restore</a>.
saveRestore :: Canvas a -> Canvas a

-- | The <tt>#</tt>-operator is the Haskell analog to the
--   <tt>.</tt>-operator in JavaScript. Example:
--   
--   <pre>
--   grd # addColorStop(0, "#8ED6FF");
--   </pre>
--   
--   This can be seen as equivalent of <tt>grd.addColorStop(0,
--   "#8ED6FF")</tt>.
(#) :: a -> (a -> b) -> b
infixr 0 #

-- | Read a file, and generate a data URL.
--   
--   <pre>
--   url &lt;- readDataURL "image/png" "image/foo.png"
--   </pre>
readDataURL :: Text -> FilePath -> IO Text

-- | Find the MIME type for a data URL.
--   
--   <pre>
--   &gt; dataURLMimeType "data:image/png;base64,iVBORw..."
--   "image/png"
--   </pre>
dataURLMimeType :: Text -> Text

-- | Write a data URL to a given file.
writeDataURL :: FilePath -> Text -> IO ()

-- | Draws an image onto the canvas at the given x- and y-coordinates.
drawImageAt :: Image image => (image, Double, Double) -> Canvas ()

-- | Acts like <a>drawImageAt</a>, but with two extra <a>Double</a>
--   arguments. The third and fourth <a>Double</a>s specify the width and
--   height of the image, respectively.
drawImageSize :: Image image => (image, Double, Double, Double, Double) -> Canvas ()

-- | Acts like <a>drawImageSize</a>, but with four extra <a>Double</a>
--   arguments before the arguments of <a>drawImageSize</a>. The first and
--   second <a>Double</a>s specify the x- and y-coordinates at which the
--   image begins to crop. The third and fourth <a>Double</a>s specify the
--   width and height of the cropped image.
--   
--   <pre>
--   <a>drawImageCrop</a> img 0 0 dw dh dx dy dw dh = <a>drawImageSize</a> = dx dy dw dh
--   </pre>
drawImageCrop :: Image image => (image, Double, Double, Double, Double, Double, Double, Double, Double) -> Canvas ()

-- | Writes <a>ImageData</a> to the canvas at the given x- and
--   y-coordinates.
putImageDataAt :: (ImageData, Double, Double) -> Canvas ()

-- | Acts like <a>putImageDataAt</a>, but with four extra <a>Double</a>
--   arguments that specify which region of the <a>ImageData</a> (the dirty
--   rectangle) should be drawn. The third and fourth <a>Double</a>s
--   specify the dirty rectangle's x- and y- coordinates, and the fifth and
--   sixth <a>Double</a>s specify the dirty rectangle's width and height.
--   
--   <pre>
--   <a>putImageDataDirty</a> imgData dx dy 0 0 w h = <a>putImageDataAt</a> imgData dx dy
--     where (w, h) = case imgData of ImageData w' h' _ -&gt; (w', h')
--   </pre>
putImageDataDirty :: (ImageData, Double, Double, Double, Double, Double, Double) -> Canvas ()

-- | Triggers a specific named event.
trigger :: Event -> Canvas ()

-- | A single (typed) event queue
eventQueue :: DeviceContext -> EventQueue

-- | Wait for any event. Blocks.
wait :: DeviceContext -> IO Event

-- | <a>flush</a> all the current events, returning them all to the user.
--   Never blocks.
flush :: DeviceContext -> IO [Event]

-- | Basic event from browser. See
--   <a>http://api.jquery.com/category/events/</a> for details.
data Event
Event :: Bool -> Maybe (Double, Double) -> EventName -> Maybe Int -> Event
[eMetaKey] :: Event -> Bool
[ePageXY] :: Event -> Maybe (Double, Double)
[eType] :: Event -> EventName
[eWhich] :: Event -> Maybe Int

-- | <a>EventName</a> mirrors event names from jQuery, and uses lowercase.
--   Possible named events
--   
--   <ul>
--   <li><tt>keypress</tt>, <tt>keydown</tt>, <tt>keyup</tt></li>
--   <li><tt>mouseDown</tt>, <tt>mouseenter</tt>, <tt>mousemove</tt>,
--   <tt>mouseout</tt>, <tt>mouseover</tt>, <tt>mouseup</tt></li>
--   </ul>
type EventName = Text

-- | <a>EventQueue</a> is an STM channel (<a>TChan</a>) of <a>Event</a>s.
--   Intentionally, <a>EventQueue</a> is not abstract.
type EventQueue = TChan Event

-- | Change the canvas cursor to the specified URL or keyword.
--   
--   <h4><b>Examples</b></h4>
--   
--   <pre>
--   cursor "url(image.png), default"
--   cursor "crosshair"
--   </pre>
cursor :: Text -> Canvas ()
local_only :: Middleware
instance GHC.Num.Num Graphics.Blank.Options


-- | The GHCi entry point for <tt>blank-canvas</tt>. Useful for sending
--   multiple commands to the same port.
module Graphics.Blank.GHCi

-- | splitCanvas is the GHCi entry point into <tt>blank-canvas</tt>. A
--   typical invocation would be
--   
--   <pre>
--   GHCi&gt; import Graphics.Blank
--   GHCi&gt; import Graphics.Blank.GHCi
--   
--   -- Adding commands to the canvas buffer
--   GHCi&gt; splatCanvas 3000 $ ( .. canvas commands .. )
--   </pre>
--   
--   The system remembers if it has been called on a specific port before,
--   and if so, uses the previous session.
splatCanvas :: Options -> Canvas () -> IO ()
