Graphics.Blank.Style

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.

Overloaded versions of Canvas functions

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

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

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

Sets the color used for shadows.

Examples

shadowColor red
shadowColor $ rgb 0 255 0

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

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

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

Methods

jsStyle :: a -> Builder

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

Instances

Style Text

Defined in Graphics.Blank.JavaScript

Methods

jsStyle :: Text -> Builder

Style CanvasGradient

Defined in Graphics.Blank.JavaScript

Methods

jsStyle :: CanvasGradient -> Builder

Style CanvasPattern

Defined in Graphics.Blank.JavaScript

Methods

jsStyle :: CanvasPattern -> Builder

Style (Colour Double)

Defined in Graphics.Blank.JavaScript

Methods

jsStyle :: Colour Double -> Builder

Style (AlphaColour Double)

Defined in Graphics.Blank.JavaScript

Methods

jsStyle :: AlphaColour Double -> Builder

class Style a => CanvasColor a

A Style containing exactly one color.

Instances

CanvasColor Text

Defined in Graphics.Blank.JavaScript

CanvasColor (Colour Double)

Defined in Graphics.Blank.JavaScript

CanvasColor (AlphaColour Double)

Defined in Graphics.Blank.JavaScript

CanvasColor creation

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

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

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

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

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

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

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

Defined in Data.Colour.Internal

Methods

affineCombo :: Num a => [(a, Colour a)] -> Colour a -> Colour a

ColourOps Colour

Defined in Data.Colour.Internal

Methods

over :: Num a => AlphaColour a -> Colour a -> Colour a

darken :: Num a => a -> Colour a -> Colour a

Eq a => Eq (Colour a)

Defined in Data.Colour.Internal

Methods

(==) :: Colour a -> Colour a -> Bool

(/=) :: Colour a -> Colour a -> Bool

Num a => Semigroup (Colour a)

Defined in Data.Colour.Internal

Methods

(<>) :: Colour a -> Colour a -> Colour a

sconcat :: NonEmpty (Colour a) -> Colour a

stimes :: Integral b => b -> Colour a -> Colour a

Num a => Monoid (Colour a)

Defined in Data.Colour.Internal

Methods

mempty :: Colour a

mappend :: Colour a -> Colour a -> Colour a

mconcat :: [Colour a] -> Colour a

JSArg (Colour Double)

Defined in Graphics.Blank.JavaScript

Methods

showbJS :: Colour Double -> Builder

CanvasColor (Colour Double)

Defined in Graphics.Blank.JavaScript

Style (Colour Double)

Defined in Graphics.Blank.JavaScript

Methods

jsStyle :: Colour Double -> Builder

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

Defined in Data.Colour.Internal

Methods

affineCombo :: Num a => [(a, AlphaColour a)] -> AlphaColour a -> AlphaColour a

ColourOps AlphaColour

Defined in Data.Colour.Internal

Methods

over :: Num a => AlphaColour a -> AlphaColour a -> AlphaColour a

darken :: Num a => a -> AlphaColour a -> AlphaColour a

Eq a => Eq (AlphaColour a)

Defined in Data.Colour.Internal

Methods

(==) :: AlphaColour a -> AlphaColour a -> Bool

(/=) :: AlphaColour a -> AlphaColour a -> Bool

Num a => Semigroup (AlphaColour a)

AlphaColour forms a monoid with over and transparent.

Defined in Data.Colour.Internal

Methods

(<>) :: AlphaColour a -> AlphaColour a -> AlphaColour a

sconcat :: NonEmpty (AlphaColour a) -> AlphaColour a

stimes :: Integral b => b -> AlphaColour a -> AlphaColour a

Num a => Monoid (AlphaColour a)

Defined in Data.Colour.Internal

Methods

mempty :: AlphaColour a

mappend :: AlphaColour a -> AlphaColour a -> AlphaColour a

mconcat :: [AlphaColour a] -> AlphaColour a

JSArg (AlphaColour Double)

Defined in Graphics.Blank.JavaScript

Methods

showbJS :: AlphaColour Double -> Builder

CanvasColor (AlphaColour Double)

Defined in Graphics.Blank.JavaScript

Style (AlphaColour Double)

Defined in Graphics.Blank.JavaScript

Methods

jsStyle :: AlphaColour Double -> Builder

transparent :: AlphaColour Double

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 :: MonadFail m => String -> m (Colour Double)

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

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

black :: Colour Double

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

blue :: Colour Double

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

fuchsia :: Colour Double

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

gray :: Colour Double

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

green :: Colour Double

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

lime :: Colour Double

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

maroon :: Colour Double

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

navy :: Colour Double

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

olive :: Colour Double

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

purple :: Colour Double

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

red :: Colour Double

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

silver :: Colour Double

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

teal :: Colour Double

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

white :: Colour Double

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

yellow :: Colour Double

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

CSS Level 2 color

orange :: Colour Double

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

CSS Color Module Level 3 colors

aliceblue :: Colour Double

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

antiquewhite :: Colour Double

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

aquamarine :: Colour Double

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

azure :: Colour Double

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

beige :: Colour Double

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

bisque :: Colour Double

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

blanchedalmond :: Colour Double

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

blueviolet :: Colour Double

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

brown :: Colour Double

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

burlywood :: Colour Double

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

cadetblue :: Colour Double

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

chartreuse :: Colour Double

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

chocolate :: Colour Double

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

coral :: Colour Double

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

cornflowerblue :: Colour Double

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

cornsilk :: Colour Double

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

crimson :: Colour Double

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

cyan :: Colour Double

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

darkblue :: Colour Double

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

darkcyan :: Colour Double

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

darkgoldenrod :: Colour Double

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

darkgray :: Colour Double

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

darkgreen :: Colour Double

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

darkgrey :: Colour Double

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

darkkhaki :: Colour Double

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

darkmagenta :: Colour Double

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

darkolivegreen :: Colour Double

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

darkorange :: Colour Double

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

darkorchid :: Colour Double

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

darkred :: Colour Double

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

darksalmon :: Colour Double

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

darkseagreen :: Colour Double

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

darkslateblue :: Colour Double

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

darkslategray :: Colour Double

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

darkslategrey :: Colour Double

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

darkturquoise :: Colour Double

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

darkviolet :: Colour Double

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

deeppink :: Colour Double

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

deepskyblue :: Colour Double

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

dimgray :: Colour Double

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

dimgrey :: Colour Double

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

dodgerblue :: Colour Double

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

firebrick :: Colour Double

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

floralwhite :: Colour Double

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

forestgreen :: Colour Double

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

gainsboro :: Colour Double

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

ghostwhite :: Colour Double

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

gold :: Colour Double

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

goldenrod :: Colour Double

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

grey :: Colour Double

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

greenyellow :: Colour Double

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

honeydew :: Colour Double

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

hotpink :: Colour Double

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

indianred :: Colour Double

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

indigo :: Colour Double

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

ivory :: Colour Double

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

khaki :: Colour Double

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

lavender :: Colour Double

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

lavenderblush :: Colour Double

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

lawngreen :: Colour Double

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

lemonchiffon :: Colour Double

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

lightblue :: Colour Double

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

lightcoral :: Colour Double

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

lightcyan :: Colour Double

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

lightgoldenrodyellow :: Colour Double

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

lightgray :: Colour Double

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

lightgreen :: Colour Double

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

lightgrey :: Colour Double

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

lightpink :: Colour Double

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

lightsalmon :: Colour Double

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

lightseagreen :: Colour Double

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

lightskyblue :: Colour Double

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

lightslategray :: Colour Double

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

lightslategrey :: Colour Double

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

lightsteelblue :: Colour Double

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

lightyellow :: Colour Double

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

limegreen :: Colour Double

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

linen :: Colour Double

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

magenta :: Colour Double

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

mediumaquamarine :: Colour Double

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

mediumblue :: Colour Double

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

mediumorchid :: Colour Double

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

mediumpurple :: Colour Double

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

mediumseagreen :: Colour Double

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

mediumslateblue :: Colour Double

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

mediumspringgreen :: Colour Double

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

mediumturquoise :: Colour Double

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

mediumvioletred :: Colour Double

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

midnightblue :: Colour Double

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

mintcream :: Colour Double

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

mistyrose :: Colour Double

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

moccasin :: Colour Double

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

navajowhite :: Colour Double

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

oldlace :: Colour Double

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

olivedrab :: Colour Double

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

orangered :: Colour Double

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

orchid :: Colour Double

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

palegoldenrod :: Colour Double

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

palegreen :: Colour Double

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

paleturquoise :: Colour Double

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

palevioletred :: Colour Double

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

papayawhip :: Colour Double

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

peachpuff :: Colour Double

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

peru :: Colour Double

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

pink :: Colour Double

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

plum :: Colour Double

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

powderblue :: Colour Double

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

rosybrown :: Colour Double

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

royalblue :: Colour Double

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

saddlebrown :: Colour Double

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

salmon :: Colour Double

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

sandybrown :: Colour Double

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

seagreen :: Colour Double

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

seashell :: Colour Double

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

sienna :: Colour Double

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

skyblue :: Colour Double

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

slateblue :: Colour Double

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

slategray :: Colour Double

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

slategrey :: Colour Double

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

snow :: Colour Double

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

springgreen :: Colour Double

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

steelblue :: Colour Double

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

tan :: Colour Double

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

thistle :: Colour Double

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

tomato :: Colour Double

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

turquoise :: Colour Double

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

violet :: Colour Double

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

wheat :: Colour Double

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

whitesmoke :: Colour Double

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

yellowgreen :: Colour Double

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

CSS Color Module Level 4 color

rebeccapurple :: Colour Double

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