Copyright	(C) 2014-2015, The University of Kansas
License	BSD-style (see the file LICENSE)
Maintainer	Andy Gill
Stability	Beta
Portability	GHC
Safe Haskell	None
Language	Haskell2010

Graphics.Blank.Style

Contents

Overloaded versions of Canvas functions
CanvasColor creation
colour reexports

Description

This module exposes overloaded versions of blank-canvas functions that take a style or color as an argument, which may be of interest if you desire stronger type safety than Text provides.

Note that this module exports function names that conflict with Graphics.Blank. Make sure to hide any functions from Graphics.Blank that you use from this module.

Synopsis

Overloaded versions of `Canvas` functions

strokeStyle :: Style style => style -> Canvas () Source

Sets the color, gradient, or pattern used for strokes.

Examples

strokeStyle red

grd <- createLinearGradient(0, 0, 10, 10)
strokeStyle grd

img <- newImage "/myImage.jpg"
pat <- createPattern(img, Repeat)
strokeStyle pat

fillStyle :: Style style => style -> Canvas () Source

Sets the color, gradient, or pattern used to fill a drawing (black by default).

Examples

fillStyle red

grd <- createLinearGradient(0, 0, 10, 10)
fillStyle grd

img <- newImage "/myImage.jpg"
pat <- createPattern(img, Repeat)
fillStyle pat

shadowColor :: CanvasColor canvasColor => canvasColor -> Canvas () Source

Sets the color used for shadows.

Examples

shadowColor red
shadowColor $ rgb 0 255 0

addColorStop :: CanvasColor color => (Interval, color) -> CanvasGradient -> Canvas () Source

Adds a color and stop position in a CanvasGradient. A stop position is a number between 0.0 and 1.0 that represents the position between start and stop in a gradient.

Example

grd <- createLinearGradient(0, 0, 10, 10)
grd # addColorStop(0, red)

class Style a where Source

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

Methods

jsStyle :: a -> Builder Source

Convert a value into a JavaScript string representing a style value.

Instances

Style Text Source
Style CanvasGradient Source
Style CanvasPattern Source
Style (Colour Double) Source
Style (AlphaColour Double) Source

class Style a => CanvasColor a Source

A Style containing exactly one color.

Instances

CanvasColor Text Source
CanvasColor (Colour Double) Source
CanvasColor (AlphaColour Double) Source

`CanvasColor` creation

rgb :: Word8 -> Word8 -> Word8 -> Colour Double Source

Specifies a Colour by its red, green, and blue components, where each component is an integer between 0 and 255.

rgbPercent :: Percentage -> Percentage -> Percentage -> Colour Double Source

Specifies a Colour by its red, green, and blue components, where each component is given by a percentage (which should be between 0% to 100%) of 255.

rgba :: Word8 -> Word8 -> Word8 -> Alpha -> AlphaColour Double Source

Specifies an AlphaColour by its RGB components and an alpha value.

rgba r g b 0.0 = transparent

rgbaPercent :: Percentage -> Percentage -> Percentage -> Alpha -> AlphaColour Double Source

Specifies an AlphaColour by its RGB component percentages (which should be between 0% and 100%) and an alpha value.

rgbaPercent r g b 0.0 = transparent

hsl :: Degrees -> Percentage -> Percentage -> Colour Double Source

Specifies a Colour by its hue, saturation, and lightness value, where saturation and lightness are percentages between 0% and 100%.

hsla :: Degrees -> Percentage -> Percentage -> Alpha -> AlphaColour Double Source

Specifies an AlphaColour by its HSL values and an alpha value.

hsla h s v 0.0 = transparent

`colour` reexports

`Colour` and `AlphaColour`

data Colour a :: * -> *

This type represents the human preception of colour. The a parameter is a numeric type used internally for the representation.

The Monoid instance allows one to add colours, but beware that adding colours can take you out of gamut. Consider using blend whenever possible.

Instances

AffineSpace Colour
ColourOps Colour
Eq a => Eq (Colour a)
Num a => Monoid (Colour a)
JSArg (Colour Double) Source
CanvasColor (Colour Double) Source
Style (Colour Double) Source

data AlphaColour a :: * -> *

This type represents a Colour that may be semi-transparent.

The Monoid instance allows you to composite colours.

x `mappend` y == x `over` y

To get the (pre-multiplied) colour channel of an AlphaColour c, simply composite c over black.

c `over` black

Instances

AffineSpace AlphaColour
ColourOps AlphaColour
Eq a => Eq (AlphaColour a)
Num a => Monoid (AlphaColour a)	`AlphaColour` forms a monoid with `over` and `transparent`.
JSArg (AlphaColour Double) Source
CanvasColor (AlphaColour Double) Source
Style (AlphaColour Double) Source

transparent :: AlphaColour Double Source

This AlphaColour is entirely transparent and has no associated color channel (i.e., rgba(0, 0, 0, 0.0) or hsla(0, 0%, 0%, 0.0)).

readColourName :: Monad m => String -> m (Colour Double) Source

Takes a string naming a Colour (must be all lowercase) and returns it. Fails if the name is not recognized.

CSS Level 1 colors

aqua :: Colour Double Source

#00FFFF, rgb(0, 255, 255), hsl(180, 100%, 50%). Same as cyan.

black :: Colour Double Source

#000000, rgb(0, 0, 0), hsl(0, 0%, 0%)

blue :: Colour Double Source

#0000FF, rgb(0, 0, 255), hsl(240, 100%, 50%)

fuchsia :: Colour Double Source

#FF00FF, rgb(255, 0, 255), hsl(300, 100%, 50%). Same as magenta.

gray :: Colour Double Source

#808080, rgb(128, 128, 128), hsl(0, 0%, 50%). Same as grey.

green :: Colour Double Source

#008000, rgb(0, 128, 0), hsl(120, 100%, 25%)

lime :: Colour Double Source

#00FF00, rgb(0, 255, 0), hsl(120, 100%, 50%)

maroon :: Colour Double Source

#800000, rgb(128, 0, 0), hsl(0, 100%, 25%)

navy :: Colour Double Source

#000080, rgb(0, 0, 128), hsl(240, 100%, 25%)

olive :: Colour Double Source

#808000, rgb(128, 128, 0), hsl(60, 100%, 25%)

purple :: Colour Double Source

#800080, rgb(128, 0, 128), hsl(300, 100%, 25%)

red :: Colour Double Source

#FF0000, rgb(255, 0, 0), hsl(0, 100%, 50%)

silver :: Colour Double Source

#C0C0C0, rgb(192, 192, 192), hsl(0, 0%, 75%)

teal :: Colour Double Source

#008080, rgb(0, 128, 128), hsl(180, 100%, 25%)

white :: Colour Double Source

#FFFFFF, rgb(255, 255, 255), hsl(0, 100%, 100%)

yellow :: Colour Double Source

#FFFF00, rgb(255, 255, 0), hsl(60, 100%, 50%)

CSS Level 2 color

orange :: Colour Double Source

#FFA500, rgb(255, 165, 0), hsl(39, 100%, 50%)

CSS Color Module Level 3 colors

aliceblue :: Colour Double Source

#F0F8FF, rgb(240, 248, 255), hsl(208, 100%, 97%)

antiquewhite :: Colour Double Source

#FAEBD7, rgb(250, 235, 215), hsl(34, 78%, 91%)

aquamarine :: Colour Double Source

#7FFFD4, rgb(127, 255, 212), hsl(160, 100%, 75%)

azure :: Colour Double Source

#F0FFFF, rgb(240, 255, 255), hsl(180, 100%, 97%)

beige :: Colour Double Source

#F5F5DC, rgb(245, 245, 220), hsl(60, 56%, 91%)

bisque :: Colour Double Source

#FFE4C4, rgb(255, 228, 196), hsl(33, 100%, 88%)

blanchedalmond :: Colour Double Source

#FFEBCD, rgb(255, 235, 205), hsl(36, 100%, 90%)

blueviolet :: Colour Double Source

#8A2BE2, rgb(138, 43, 226), hsl(271, 76%, 53%)

brown :: Colour Double Source

#A52A2A, rgb(165, 42, 42), hsl(0, 59%, 41%)

burlywood :: Colour Double Source

#DEB887, rgb(222, 184, 135), hsl(34, 57%, 70%)

cadetblue :: Colour Double Source

#5F9EA0, rgb(95, 158, 160), hsl(182, 25%, 50%)

chartreuse :: Colour Double Source

#7FFF00, rgb(127, 255, 0), hsl(90, 100%, 50%)

chocolate :: Colour Double Source

#D2691E, rgb(210, 105, 30), hsl(25, 75%, 47%)

coral :: Colour Double Source

#FF7F50, rgb(255, 127, 80), hsl(16, 100%, 66%)

cornflowerblue :: Colour Double Source

#6495ED, rgb(100, 149, 237), hsl(219, 79%, 66%)

cornsilk :: Colour Double Source

#FFF8DC, rgb(255, 248, 220), hsl(48, 100%, 93%)

crimson :: Colour Double Source

#DC143C, rgb(220, 20, 60), hsl(348, 83%, 58%)

cyan :: Colour Double Source

#00FFFF, rgb(0, 255, 255), hsl(180, 100%, 50%). Same as aqua.

darkblue :: Colour Double Source

#00008B, rgb(0, 0, 139), hsl(240, 100%, 27%)

darkcyan :: Colour Double Source

#008B8B, rgb(0, 139, 139), hsl(180, 100%, 27%)

darkgoldenrod :: Colour Double Source

#B8860B, rgb(184, 134, 11), hsl(43, 89%, 38%)

darkgray :: Colour Double Source

#A9A9A9, rgb(169, 169, 169), hsl(0, 0%, 66%). Same as darkgrey.

darkgreen :: Colour Double Source

#006400, rgb(0, 100, 0), hsl(120, 100%, 20%)

darkgrey :: Colour Double Source

#A9A9A9, rgb(169, 169, 169), hsl(0, 0%, 66%). Same as darkgray.

darkkhaki :: Colour Double Source

#BDB76B, rgb(189, 183, 107), hsl(56, 38%, 58%)

darkmagenta :: Colour Double Source

#8B008B, rgb(139, 0, 139), hsl(300, 100%, 27%)

darkolivegreen :: Colour Double Source

#556B2F, rgb(85, 107, 47), hsl(82, 39%, 30%)

darkorange :: Colour Double Source

#FF8C00, rgb(255, 140, 0), hsl(33, 100%, 50%)

darkorchid :: Colour Double Source

#9932CC, rgb(153, 50, 204), hsl(280, 61%, 50%)

darkred :: Colour Double Source

#8B0000, rgb(139, 0, 0), hsl(0, 100%, 27%)

darksalmon :: Colour Double Source

#E9967A, rgb(233, 150, 122), hsl(15, 72%, 70%)

darkseagreen :: Colour Double Source

#8FBC8F, rgb(143, 188, 143), hsl(120, 25%, 65%)

darkslateblue :: Colour Double Source

#483D8B, rgb(72, 61, 139), hsl(248, 39%, 39%)

darkslategray :: Colour Double Source

#2F4F4F, rgb(47, 79, 79), hsl(180, 25%, 25%). Same as darkslategrey.

darkslategrey :: Colour Double Source

#2F4F4F, rgb(47, 79, 79), hsl(180, 25%, 25%). Same as darkslategray.

darkturquoise :: Colour Double Source

#00CED1, rgb(0, 206, 209), hsl(181, 100%, 41%)

darkviolet :: Colour Double Source

#9400D3, rgb(148, 0, 211), hsl(282, 100%, 41%)

deeppink :: Colour Double Source

#FF1493, rgb(255, 20, 147), hsl(328, 100%, 54%)

deepskyblue :: Colour Double Source

#00BFFF, rgb(0, 191, 255), hsl(195, 100%, 50%)

dimgray :: Colour Double Source

#696969, rgb(105, 105, 105), hsl(0, 0%, 41%). Same as darkgrey.

dimgrey :: Colour Double Source

#696969, rgb(105, 105, 105), hsl(0, 0%, 41%). Same as darkgray.

dodgerblue :: Colour Double Source

#1E90FF, rgb(30, 144, 255), hsl(210, 100%, 56%)

firebrick :: Colour Double Source

#B22222, rgb(178, 34, 34), hsl(0, 68%, 42%)

floralwhite :: Colour Double Source

#FFFAF0, rgb(255, 250, 240), hsl(40, 100%, 97%)

forestgreen :: Colour Double Source

#228B22, rgb(34, 139, 34), hsl(120, 61%, 34%)

gainsboro :: Colour Double Source

#DCDCDC, rgb(220, 220, 220), hsl(0, 0%, 86%)

ghostwhite :: Colour Double Source

#F8F8FF, rgb(248, 248, 255), hsl(240, 100%, 99%)

gold :: Colour Double Source

#FFD700, rgb(255, 215, 0), hsl(51, 100%, 50%)

goldenrod :: Colour Double Source

#DAA520, rgb(218, 165, 32), hsl(43, 74%, 49%)

grey :: Colour Double Source

#808080, rgb(128, 128, 128), hsl(0, 0%, 50%). Same as gray.

greenyellow :: Colour Double Source

#ADFF2F, rgb(173, 255, 47), hsl(84, 100%, 59%)

honeydew :: Colour Double Source

#F0FFF0, rgb(240, 255, 240), hsl(120, 100%, 97%)

hotpink :: Colour Double Source

#FF69B4, rgb(255, 105, 180), hsl(330, 100%, 71%)

indianred :: Colour Double Source

#CD5C5C, rgb(205, 92, 92), hsl(0, 53%, 58%)

indigo :: Colour Double Source

#4B0082, rgb(75, 0, 130), hsl(275, 100%, 25%)

ivory :: Colour Double Source

#FFFFF0, rgb(255, 255, 240), hsl(60, 100%, 97%)

khaki :: Colour Double Source

#F0E68C, rgb(240, 230, 140), hsl(54, 77%, 75%)

lavender :: Colour Double Source

#E6E6FA, rgb(230, 230, 250), hsl(240, 67%, 94%)

lavenderblush :: Colour Double Source

#FFF0F5, rgb(255, 240, 245), hsl(340, 100%, 97%)

lawngreen :: Colour Double Source

#7CFC00, rgb(124, 252, 0), hsl(90, 100%, 49%)

lemonchiffon :: Colour Double Source

#FFFACD, rgb(255, 250, 205), hsl(54, 100%, 90%)

lightblue :: Colour Double Source

#ADD8E6, rgb(173, 216, 230), hsl(195, 53%, 79%)

lightcoral :: Colour Double Source

#F08080, rgb(240, 128, 128), hsl(0, 79%, 72%)

lightcyan :: Colour Double Source

#E0FFFF, rgb(224, 255, 255), hsl(180, 100%, 94%)

lightgoldenrodyellow :: Colour Double Source

#FAFAD2, rgb(250, 250, 210), hsl(60, 80%, 90%)

lightgray :: Colour Double Source

#D3D3D3, rgb(211, 211, 211), hsl(0, 0%, 83%). Same as lightgrey.

lightgreen :: Colour Double Source

#90EE90, rgb(144, 238, 144), hsl(120, 73%, 75%)

lightgrey :: Colour Double Source

#D3D3D3, rgb(211, 211, 211), hsl(0, 0%, 83%). Same as lightgray.

lightpink :: Colour Double Source

#FFB6C1, rgb(255, 182, 193), hsl(351, 100%, 86%)

lightsalmon :: Colour Double Source

#FFA07A, rgb(255, 160, 122), hsl(17, 100%, 74%)

lightseagreen :: Colour Double Source

#20B2AA, rgb(32, 178, 170), hsl(177, 70%, 41%)

lightskyblue :: Colour Double Source

#87CEFA, rgb(135, 206, 250), hsl(203, 92%, 75%)

lightslategray :: Colour Double Source

#778899, rgb(119, 136, 153), hsl(210, 14%, 53%). Same as lightslategrey.

lightslategrey :: Colour Double Source

#778899, rgb(119, 136, 153), hsl(210, 14%, 53%). Same as lightslategray.

lightsteelblue :: Colour Double Source

#B0C4DE, rgb(176, 196, 222), hsl(214, 41%, 78%)

lightyellow :: Colour Double Source

#FFFFE0, rgb(255, 255, 224), hsl(60, 100%, 94%)

limegreen :: Colour Double Source

#32CD32, rgb(50, 205, 50), hsl(120, 61%, 50%)

linen :: Colour Double Source

#FAF0E6, rgb(250, 240, 230), hsl(30, 67%, 94%)

magenta :: Colour Double Source

#FF00FF, rgb(255, 0, 255), hsl(300, 100%, 50%). Same as fuchsia.

mediumaquamarine :: Colour Double Source

#66CDAA, rgb(102, 205, 170), hsl(160, 51%, 60%)

mediumblue :: Colour Double Source

#0000CD, rgb(0, 0, 205), hsl(240, 100%, 40%)

mediumorchid :: Colour Double Source

#BA55D3, rgb(186, 85, 211), hsl(288, 59%, 58%)

mediumpurple :: Colour Double Source

#9370DB, rgb(147, 112, 219), hsl(260, 60%, 65%)

mediumseagreen :: Colour Double Source

#3CB371, rgb(60, 179, 113), hsl(147, 50%, 47%)

mediumslateblue :: Colour Double Source

#7B68EE, rgb(123, 104, 238), hsl(249, 80%, 67%)

mediumspringgreen :: Colour Double Source

#00FA9A, rgb(0, 250, 154), hsl(157, 100%, 49%)

mediumturquoise :: Colour Double Source

#48D1CC, rgb(72, 209, 204), hsl(178, 60%, 55%)

mediumvioletred :: Colour Double Source

#C71585, rgb(199, 21, 133), hsl(322, 81%, 43%)

midnightblue :: Colour Double Source

#191970, rgb(25, 25, 112), hsl(240, 64%, 27%)

mintcream :: Colour Double Source

#F5FFFA, rgb(245, 255, 250), hsl(150, 100%, 98%)

mistyrose :: Colour Double Source

#FFE4E1, rgb(255, 228, 225), hsl(6, 100%, 94%)

moccasin :: Colour Double Source

#FFE4B5, rgb(255, 228, 181), hsl(38, 100%, 85%)

navajowhite :: Colour Double Source

#FFDEAD, rgb(255, 222, 173), hsl(36, 100%, 84%)

oldlace :: Colour Double Source

#FDF5E6, rgb(253, 245, 230), hsl(39, 85%, 95%)

olivedrab :: Colour Double Source

#6B8E23, rgb(107, 142, 35), hsl(80, 60%, 35%)

orangered :: Colour Double Source

#FF4500, rgb(255, 69, 0), hsl(16, 100%, 50%)

orchid :: Colour Double Source

#DA70D6, rgb(218, 112, 214), hsl(302, 59%, 65%)

palegoldenrod :: Colour Double Source

#EEE8AA, rgb(238, 232, 170), hsl(55, 67%, 80%)

palegreen :: Colour Double Source

#98FB98, rgb(152, 251, 152), hsl(120, 93%, 79%)

paleturquoise :: Colour Double Source

#AFEEEE, rgb(175, 238, 238), hsl(180, 65%, 81%)

palevioletred :: Colour Double Source

#DB7093, rgb(219, 112, 147), hsl(340, 60%, 65%)

papayawhip :: Colour Double Source

#FFEFD5, rgb(255, 239, 213), hsl(37, 100%, 92%)

peachpuff :: Colour Double Source

#FFDAB9, rgb(255, 218, 185), hsl(28, 100%, 86%)

peru :: Colour Double Source

#CD853F, rgb(205, 133, 63), hsl(30, 59%, 53%)

pink :: Colour Double Source

#FFC0CB, rgb(255, 192, 203), hsl(350, 100%, 88%)

plum :: Colour Double Source

#DDA0DD, rgb(221, 160, 221), hsl(300, 47%, 75%)

powderblue :: Colour Double Source

#B0E0E6, rgb(176, 224, 230), hsl(187, 52%, 80%)

rosybrown :: Colour Double Source

#BC8F8F, rgb(188, 143, 143), hsl(0, 25%, 65%)

royalblue :: Colour Double Source

#4169E1, rgb(65, 105, 225), hsl(225, 73%, 57%)

saddlebrown :: Colour Double Source

#8B4513, rgb(139, 69, 19), hsl(25, 76%, 31%)

salmon :: Colour Double Source

#FA8072, rgb(250, 128, 114), hsl(6, 93%, 71%)

sandybrown :: Colour Double Source

#F4A460, rgb(244, 164, 96), hsl(28, 87%, 67%)

seagreen :: Colour Double Source

#2E8B57, rgb(46, 139, 87), hsl(146, 50%, 36%)

seashell :: Colour Double Source

#FFF5EE, rgb(255, 245, 238), hsl(25, 100%, 97%)

sienna :: Colour Double Source

#A0522D, rgb(160, 82, 45), hsl(19, 56%, 40%)

skyblue :: Colour Double Source

#87CEEB, rgb(135, 206, 235), hsl(197, 71%, 73%)

slateblue :: Colour Double Source

#6A5ACD, rgb(106, 90, 205), hsl(248, 53%, 58%)

slategray :: Colour Double Source

#708090, rgb(112, 128, 144), hsl(210, 13%, 50%). Same as slategrey.

slategrey :: Colour Double Source

#708090, rgb(112, 128, 144), hsl(210, 13%, 50%). Same as slategray.

snow :: Colour Double Source

#FFFAFA, rgb(255, 250, 250), hsl(0, 100%, 99%)

springgreen :: Colour Double Source

#00FF7F, rgb(0, 255, 127), hsl(150, 100%, 50%)

steelblue :: Colour Double Source

#4682B4, rgb(70, 130, 180), hsl(207, 44%, 49%)

tan :: Colour Double Source

#D2B48C, rgb(210, 180, 140), hsl(34, 44%, 69%)

thistle :: Colour Double Source

#D8BFD8, rgb(216, 191, 216), hsl(300, 24%, 80%)

tomato :: Colour Double Source

#FF6347, rgb(255, 99, 71), hsl(9, 100%, 64%)

turquoise :: Colour Double Source

#40E0D0, rgb(64, 224, 208), hsl(174, 72%, 56%)

violet :: Colour Double Source

#EE82EE, rgb(238, 130, 238), hsl(300, 76%, 72%)

wheat :: Colour Double Source

#F5DEB3, rgb(245, 222, 179), hsl(39, 77%, 83%)

whitesmoke :: Colour Double Source

#F5F5F5, rgb(245, 245, 245), hsl(0, 0%, 96%)

yellowgreen :: Colour Double Source

#9ACD32, rgb(154, 205, 50), hsl(80, 61%, 50%)

CSS Color Module Level 4 color

rebeccapurple :: Colour Double Source

#663399, rgb(102, 51, 153), hsl(270, 50%, 40%)

Overloaded versions of Canvas functions

Examples

Examples

Examples

Example

CanvasColor creation

colour reexports

Colour and AlphaColour

CSS Level 1 colors

CSS Level 2 color

CSS Color Module Level 3 colors

CSS Color Module Level 4 color

Overloaded versions of `Canvas` functions

`CanvasColor` creation

`colour` reexports

`Colour` and `AlphaColour`