blank-canvas-0.6: HTML5 Canvas Graphics Library

Copyright(C) 2014-2015, The University of Kansas
LicenseBSD-style (see the file LICENSE)
MaintainerAndy Gill
StabilityBeta
PortabilityGHC
Safe HaskellNone
LanguageHaskell2010

Graphics.Blank.Style

Contents

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.

class Style a => CanvasColor a Source

A Style containing exactly one color.

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.

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

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%)