Module

Graphics.Drawing

This module defines a type Drawing for creating vector graphics.

#Point 

type Point = { x :: Number, y :: Number }

A Point consists of x and y coordinates.

#Shape 

data Shape

A single shape.

Instances

#path 

path :: forall f. Foldable f => f Point -> Shape

Create a path.

#closed 

closed :: forall f. Foldable f => f Point -> Shape

Create a closed path.

#rectangle 

rectangle :: Number -> Number -> Number -> Number -> Shape

Create a rectangle from the left, top, width and height parameters.

#circle 

circle :: Number -> Number -> Number -> Shape

Create a circle from the left, top and radius parameters.

#arc 

arc :: Number -> Number -> Number -> Number -> Number -> Shape

Create a circular arc from the left, top, start angle, end angle and radius parameters.

#FillStyle 

newtype FillStyle

Encapsulates fill color etc.

Instances

#fillColor 

fillColor :: Color -> FillStyle

Set the fill color.

#OutlineStyle 

newtype OutlineStyle

Encapsulates outline color etc.

Instances

#outlineColor 

outlineColor :: Color -> OutlineStyle

Set the outline color.

#lineWidth 

lineWidth :: Number -> OutlineStyle

Set the line width.

#Shadow 

newtype Shadow

Encapsulates shadow settings etc.

Instances

#shadowOffset 

shadowOffset :: Number -> Number -> Shadow

Set the shadow blur.

#shadowBlur 

shadowBlur :: Number -> Shadow

Set the shadow blur.

#shadowColor 

shadowColor :: Color -> Shadow

Set the shadow color.

#shadow 

shadow :: Shadow -> Drawing -> Drawing

Apply a Shadow to a Drawing.

#Drawing 

data Drawing

A vector Drawing.

Instances

#filled 

filled :: FillStyle -> Shape -> Drawing

Fill a Shape.

#outlined 

outlined :: OutlineStyle -> Shape -> Drawing

Draw the outline of a Shape.

#clipped 

clipped :: Shape -> Drawing -> Drawing

Clip a Drawing to a Shape.

#scale 

scale :: Number -> Number -> Drawing -> Drawing

Apply a scale transformation by providing the x and y scale factors.

#translate 

translate :: Number -> Number -> Drawing -> Drawing

Apply a translation by providing the x and y distances.

#rotate 

rotate :: Number -> Drawing -> Drawing

Apply a rotation by providing the angle.

#text 

text :: Font -> Number -> Number -> FillStyle -> String -> Drawing

Render some text.

#everywhere 

everywhere :: (Drawing -> Drawing) -> Drawing -> Drawing

Modify a Drawing by applying a transformation to every subdrawing.

#render 

render :: Context2D -> Drawing -> Effect Unit

Render a Drawing to a canvas.

Re-exports from Color

#Color 

data Color

The representation of a color.

Note:

  • The Eq instance compares two Colors by comparing their (integer) RGB values. This is different from comparing the HSL values (for example, HSL has many different representations of black (arbitrary hue and saturation values).
  • Colors outside the sRGB gamut which cannot be displayed on a typical computer screen can not be represented by Color.

Instances

Re-exports from Graphics.Drawing.Font

#Font 

data Font

Fonts.

Instances

Modules