Graphics.Blank

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

Starting blank-canvas

blankCanvas :: Options -> (DeviceContext -> IO ()) -> IO ()

blankCanvas is the main entry point into blank-canvas. A typical invocation would be

{-# LANGUAGE OverloadedStrings #-}
module Main where

import Graphics.Blank

main = blankCanvas 3000 $ \ context -> do
        send context $ do
                moveTo(50,50)
                lineTo(200,100)
                lineWidth 10
                strokeStyle "red"
                stroke()

data Options

Additional blank-canvas settings. The defaults can be used by creating Options as a Num. For example, blankCanvas 3000 uses the default Options on port 3000.

Constructors

Options

Fields

• port :: Int

  On which port do we issue blank-canvas?

• events :: [EventName]

  To which events does the canvas listen? Default: []

• debug :: Bool

  Turn on debugging. Default: False

• root :: String

  Location of the static files. Default: "."

• middleware :: [Middleware]

  Extra middleware(s) to be executed. Default: [local_only]

• weak :: Bool

  use a weak monad, which may help debugging (default False)

Instances

Num Options

Defined in Graphics.Blank

Methods

(+) :: Options -> Options -> Options

(-) :: Options -> Options -> Options

(*) :: Options -> Options -> Options

negate :: Options -> Options

abs :: Options -> Options

signum :: Options -> Options

fromInteger :: Integer -> Options

sending to the Graphics DeviceContext

data DeviceContext

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

Instances

Image DeviceContext

Defined in Graphics.Blank.DeviceContext

Methods

jsImage :: DeviceContext -> Builder

width :: Num b => DeviceContext -> b

height :: Num b => DeviceContext -> b

send :: DeviceContext -> Canvas a -> IO a

Sends a set of canvas commands to the Canvas. Attempts to common up as many commands as possible. Should not crash.

HTML5 Canvas API

See https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API for the JavaScript version of this API.

data Canvas :: * -> *

Instances

Monad Canvas

Defined in Graphics.Blank.Canvas

Methods

(>>=) :: Canvas a -> (a -> Canvas b) -> Canvas b

(>>) :: Canvas a -> Canvas b -> Canvas b

return :: a -> Canvas a

fail :: String -> Canvas a

Functor Canvas

Defined in Graphics.Blank.Canvas

Methods

fmap :: (a -> b) -> Canvas a -> Canvas b

(<$) :: a -> Canvas b -> Canvas a

Applicative Canvas

Defined in Graphics.Blank.Canvas

Methods

pure :: a -> Canvas a

(<*>) :: Canvas (a -> b) -> Canvas a -> Canvas b

liftA2 :: (a -> b -> c) -> Canvas a -> Canvas b -> Canvas c

(*>) :: Canvas a -> Canvas b -> Canvas b

(<*) :: Canvas a -> Canvas b -> Canvas a

Semigroup a => Semigroup (Canvas a)

Defined in Graphics.Blank.Canvas

Methods

(<>) :: Canvas a -> Canvas a -> Canvas a

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

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

Monoid a => Monoid (Canvas a)

Defined in Graphics.Blank.Canvas

Methods

mempty :: Canvas a

mappend :: Canvas a -> Canvas a -> Canvas a

mconcat :: [Canvas a] -> Canvas a

Canvas element

height :: (Image image, Num a) => image -> a

The height of an Image in pixels.

width :: (Image image, Num a) => image -> a

The width of an Image in pixels.

toDataURL :: () -> Canvas Text

Turn the canvas into a PNG data stream / data URL.

"data:image/png;base64,iVBORw0KGgo.."

2D Context

save :: () -> Canvas ()

Saves the entire canvas by pushing the current state onto a stack.

restore :: () -> 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.

Transformation

scale :: (Interval, Interval) -> 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.

Examples

scale(0.5, 0.5)        -- Halve the canvas units
fillRect(0, 0, 20, 20) -- Draw a 10x10 square
scale(-1, 1)           -- Flip the context horizontally

rotate :: Radians -> Canvas ()

Applies a rotation transformation to the canvas. When you call functions such as fillRect after rotate, the drawings will be rotated clockwise by the angle given to rotate (in radians).

Example

rotate (pi/2)        -- Rotate the canvas 90°
fillRect(0, 0, 20, 10) -- Draw a 10x20 rectangle

translate :: (Double, Double) -> Canvas ()

Applies a translation transformation by remapping the origin (i.e., the (0,0) position) on the canvas. When you call functions such as fillRect after translate, the values passed to translate are added to the x- and y-coordinate values.

Example

translate(20, 20)
fillRect(0, 0, 40, 40) -- Draw a 40x40 square, starting in position (20, 20)

transform :: (Double, Double, Double, Double, Double, Double) -> Canvas ()

Applies a transformation by multiplying a matrix to the canvas's current transformation. If transform(a, b, c, d, e, f) is called, the matrix

( a c e )
( b d f )
( 0 0 1 )

is multiplied by the current transformation. The parameters are:

• a is the horizontal scaling
• b is the horizontal skewing
• c is the vertical skewing
• d is the vertical scaling
• e is the horizontal movement
• f is the vertical movement

setTransform :: (Double, Double, Double, Double, Double, Double) -> Canvas ()

Resets the canvas's transformation matrix to the identity matrix, then calls transform with the given arguments.

Image drawing

class Image a

Class for JavaScript objects that represent images (including the canvas itself).

Minimal complete definition

jsImage, width, height

Instances

Image CanvasContext

Defined in Graphics.Blank.JavaScript

Methods

jsImage :: CanvasContext -> Builder

width :: Num b => CanvasContext -> b

height :: Num b => CanvasContext -> b

Image CanvasImage

Defined in Graphics.Blank.JavaScript

Methods

jsImage :: CanvasImage -> Builder

width :: Num b => CanvasImage -> b

height :: Num b => CanvasImage -> b

Image DeviceContext

Defined in Graphics.Blank.DeviceContext

Methods

jsImage :: DeviceContext -> Builder

width :: Num b => DeviceContext -> b

height :: Num b => DeviceContext -> b

drawImage :: Image image => (image, [Double]) -> Canvas ()

drawImage' takes 2, 4, or 8 Double arguments. See drawImageAt, drawImageSize, and drawImageCrop for variants with exact numbers of arguments.

Compositing

globalAlpha :: Alpha -> Canvas ()

Set the alpha value that is applied to shapes before they are drawn onto the canvas.

globalCompositeOperation :: Text -> Canvas ()

Sets how new shapes should be drawn over existing shapes.

Examples

globalCompositeOperation "source-over"
globalCompositeOperation "destination-atop"

Line styles

lineWidth :: Double -> Canvas ()

Sets the thickness of lines in pixels (1.0 by default).

lineCap :: LineEndCap -> Canvas ()

Sets the LineEndCap to use when drawing the endpoints of lines.

lineJoin :: LineJoinCorner -> Canvas ()

Sets the LineJoinCorner to use when drawing two connected lines.

miterLimit :: Double -> Canvas ()

Sets the maximum miter length (10.0 by default) to use when the lineWidth is miter.

data LineEndCap

The style of the caps on the endpoints of a line.

Constructors

ButtCap

Flat edges (default).

RoundCap

Semicircular end caps

SquareCap

Square end caps

Instances

Bounded LineEndCap

Defined in Graphics.Blank.JavaScript

Methods

minBound :: LineEndCap

maxBound :: LineEndCap

Enum LineEndCap

Defined in Graphics.Blank.JavaScript

Methods

succ :: LineEndCap -> LineEndCap

pred :: LineEndCap -> LineEndCap

toEnum :: Int -> LineEndCap

fromEnum :: LineEndCap -> Int

enumFrom :: LineEndCap -> [LineEndCap]

enumFromThen :: LineEndCap -> LineEndCap -> [LineEndCap]

enumFromTo :: LineEndCap -> LineEndCap -> [LineEndCap]

enumFromThenTo :: LineEndCap -> LineEndCap -> LineEndCap -> [LineEndCap]

Eq LineEndCap

Defined in Graphics.Blank.JavaScript

Methods

(==) :: LineEndCap -> LineEndCap -> Bool

(/=) :: LineEndCap -> LineEndCap -> Bool

Ord LineEndCap

Defined in Graphics.Blank.JavaScript

Methods

compare :: LineEndCap -> LineEndCap -> Ordering

(<) :: LineEndCap -> LineEndCap -> Bool

(<=) :: LineEndCap -> LineEndCap -> Bool

(>) :: LineEndCap -> LineEndCap -> Bool

(>=) :: LineEndCap -> LineEndCap -> Bool

max :: LineEndCap -> LineEndCap -> LineEndCap

min :: LineEndCap -> LineEndCap -> LineEndCap

Read LineEndCap

Defined in Graphics.Blank.JavaScript

Methods

readsPrec :: Int -> ReadS LineEndCap

readList :: ReadS [LineEndCap]

readPrec :: ReadPrec LineEndCap

readListPrec :: ReadPrec [LineEndCap]

Show LineEndCap

Defined in Graphics.Blank.JavaScript

Methods

showsPrec :: Int -> LineEndCap -> ShowS

show :: LineEndCap -> String

showList :: [LineEndCap] -> ShowS

Ix LineEndCap

Defined in Graphics.Blank.JavaScript

Methods

range :: (LineEndCap, LineEndCap) -> [LineEndCap]

index :: (LineEndCap, LineEndCap) -> LineEndCap -> Int

unsafeIndex :: (LineEndCap, LineEndCap) -> LineEndCap -> Int

inRange :: (LineEndCap, LineEndCap) -> LineEndCap -> Bool

rangeSize :: (LineEndCap, LineEndCap) -> Int

unsafeRangeSize :: (LineEndCap, LineEndCap) -> Int

IsString LineEndCap

Defined in Graphics.Blank.JavaScript

Methods

fromString :: String -> LineEndCap

Default LineEndCap

Defined in Graphics.Blank.JavaScript

Methods

def :: LineEndCap

TextShow LineEndCap

Defined in Graphics.Blank.JavaScript

Methods

showbPrec :: Int -> LineEndCap -> Builder

showb :: LineEndCap -> Builder

showbList :: [LineEndCap] -> Builder

showtPrec :: Int -> LineEndCap -> Text

showt :: LineEndCap -> Text

showtList :: [LineEndCap] -> Text

showtlPrec :: Int -> LineEndCap -> Text

showtl :: LineEndCap -> Text

showtlList :: [LineEndCap] -> Text

JSArg LineEndCap

Defined in Graphics.Blank.JavaScript

Methods

showbJS :: LineEndCap -> Builder

RoundProperty LineEndCap

Defined in Graphics.Blank.JavaScript

Methods

round_ :: LineEndCap

butt :: LineEndCap

Shorthand for ButtCap.

square :: LineEndCap

Shorthand for SquareCap.

data LineJoinCorner

The style of corner that is created when two lines join.

Constructors

BevelCorner

A filled triangle with a beveled edge connects two lines.

RoundCorner

A filled arc connects two lines.

MiterCorner

A filled triangle with a sharp edge connects two lines (default).

Instances

Bounded LineJoinCorner

Defined in Graphics.Blank.JavaScript

Methods

minBound :: LineJoinCorner

maxBound :: LineJoinCorner

Enum LineJoinCorner

Defined in Graphics.Blank.JavaScript

Methods

succ :: LineJoinCorner -> LineJoinCorner

pred :: LineJoinCorner -> LineJoinCorner

toEnum :: Int -> LineJoinCorner

fromEnum :: LineJoinCorner -> Int

enumFrom :: LineJoinCorner -> [LineJoinCorner]

enumFromThen :: LineJoinCorner -> LineJoinCorner -> [LineJoinCorner]

enumFromTo :: LineJoinCorner -> LineJoinCorner -> [LineJoinCorner]

enumFromThenTo :: LineJoinCorner -> LineJoinCorner -> LineJoinCorner -> [LineJoinCorner]

Eq LineJoinCorner

Defined in Graphics.Blank.JavaScript

Methods

(==) :: LineJoinCorner -> LineJoinCorner -> Bool

(/=) :: LineJoinCorner -> LineJoinCorner -> Bool

Ord LineJoinCorner

Defined in Graphics.Blank.JavaScript

Methods

compare :: LineJoinCorner -> LineJoinCorner -> Ordering

(<) :: LineJoinCorner -> LineJoinCorner -> Bool

(<=) :: LineJoinCorner -> LineJoinCorner -> Bool

(>) :: LineJoinCorner -> LineJoinCorner -> Bool

(>=) :: LineJoinCorner -> LineJoinCorner -> Bool

max :: LineJoinCorner -> LineJoinCorner -> LineJoinCorner

min :: LineJoinCorner -> LineJoinCorner -> LineJoinCorner

Read LineJoinCorner

Defined in Graphics.Blank.JavaScript

Methods

readsPrec :: Int -> ReadS LineJoinCorner

readList :: ReadS [LineJoinCorner]

readPrec :: ReadPrec LineJoinCorner

readListPrec :: ReadPrec [LineJoinCorner]

Show LineJoinCorner

Defined in Graphics.Blank.JavaScript

Methods

showsPrec :: Int -> LineJoinCorner -> ShowS

show :: LineJoinCorner -> String

showList :: [LineJoinCorner] -> ShowS

Ix LineJoinCorner

Defined in Graphics.Blank.JavaScript

Methods

range :: (LineJoinCorner, LineJoinCorner) -> [LineJoinCorner]

index :: (LineJoinCorner, LineJoinCorner) -> LineJoinCorner -> Int

unsafeIndex :: (LineJoinCorner, LineJoinCorner) -> LineJoinCorner -> Int

inRange :: (LineJoinCorner, LineJoinCorner) -> LineJoinCorner -> Bool

rangeSize :: (LineJoinCorner, LineJoinCorner) -> Int

unsafeRangeSize :: (LineJoinCorner, LineJoinCorner) -> Int

IsString LineJoinCorner

Defined in Graphics.Blank.JavaScript

Methods

fromString :: String -> LineJoinCorner

Default LineJoinCorner

Defined in Graphics.Blank.JavaScript

Methods

def :: LineJoinCorner

TextShow LineJoinCorner

Defined in Graphics.Blank.JavaScript

Methods

showbPrec :: Int -> LineJoinCorner -> Builder

showb :: LineJoinCorner -> Builder

showbList :: [LineJoinCorner] -> Builder

showtPrec :: Int -> LineJoinCorner -> Text

showt :: LineJoinCorner -> Text

showtList :: [LineJoinCorner] -> Text

showtlPrec :: Int -> LineJoinCorner -> Text

showtl :: LineJoinCorner -> Text

showtlList :: [LineJoinCorner] -> Text

JSArg LineJoinCorner

Defined in Graphics.Blank.JavaScript

Methods

showbJS :: LineJoinCorner -> Builder

RoundProperty LineJoinCorner

Defined in Graphics.Blank.JavaScript

Methods

round_ :: LineJoinCorner

bevel :: LineJoinCorner

Shorthand for BevelCorner.

miter :: LineJoinCorner

Shorthand for MiterCorner.

Colors, styles and shadows

strokeStyle :: Text -> Canvas ()

Sets the color used for strokes ("black" by default).

Examples

strokeStyle "red"
strokeStyle "#00FF00"

fillStyle :: Text -> Canvas ()

Sets the color used to fill a drawing ("black" by default).

Examples

fillStyle "red"
fillStyle "#00FF00"

shadowOffsetX :: Double -> Canvas ()

Sets the horizontal distance that a shadow will be offset (0.0 by default).

shadowOffsetY :: Double -> Canvas ()

Sets the vertical distance that a shadow will be offset (0.0 by default).

shadowBlur :: Double -> Canvas ()

Sets the blur level for shadows (0.0 by default).

shadowColor :: Text -> Canvas ()

Sets the color used for shadows.

Examples

shadowColor "red"
shadowColor "#00FF00"

createLinearGradient :: (Double, Double, Double, Double) -> Canvas CanvasGradient

createLinearGradient(x0, y0, x1, y1) creates a linear gradient along a line, which can be used to fill other shapes.

• x0 is the starting x-coordinate of the gradient
• y0 is the starting y-coordinate of the gradient
• x1 is the ending y-coordinate of the gradient
• y1 is the ending y-coordinate of the gradient

Example

grd <- createLinearGradient(0, 0, 10, 10)
grd # addColorStop(0, "blue")
grd # addColorStop(1, "red")
fillStyle grd

createRadialGradient :: (Double, Double, Double, Double, Double, Double) -> Canvas CanvasGradient

createRadialGradient(x0, y0, r0, x1, y1, r1) creates a radial gradient given by the coordinates of two circles, which can be used to fill other shapes.

• x0 is the x-axis of the coordinate of the start circle
• y0 is the y-axis of the coordinate of the start circle
• r0 is the radius of the start circle
• x1 is the x-axis of the coordinate of the end circle
• y1 is the y-axis of the coordinate of the end circle
• r1 is the radius of the end circle

Example

grd <- createRadialGradient(100,100,100,100,100,0)
grd # addColorStop(0, "blue")
grd # addColorStop(1, "red")
fillStyle grd

createPattern :: (CanvasImage, RepeatDirection) -> Canvas CanvasPattern

Creates a pattern using a CanvasImage and a RepeatDirection.

Example

img <- newImage "cat.jpg"
pat <- createPattern(img, repeatX)
fillStyle pat

addColorStop :: (Interval, Text) -> 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")

data RepeatDirection

The direction in which a CanvasPattern repeats.

Constructors

Repeat

The pattern repeats both horizontally and vertically (default).

RepeatX

The pattern repeats only horizontally.

RepeatY

The pattern repeats only vertically.

NoRepeat

The pattern displays only once and does not repeat.

Instances

Bounded RepeatDirection

Defined in Graphics.Blank.JavaScript

Methods

minBound :: RepeatDirection

maxBound :: RepeatDirection

Enum RepeatDirection

Defined in Graphics.Blank.JavaScript

Methods

succ :: RepeatDirection -> RepeatDirection

pred :: RepeatDirection -> RepeatDirection

toEnum :: Int -> RepeatDirection

fromEnum :: RepeatDirection -> Int

enumFrom :: RepeatDirection -> [RepeatDirection]

enumFromThen :: RepeatDirection -> RepeatDirection -> [RepeatDirection]

enumFromTo :: RepeatDirection -> RepeatDirection -> [RepeatDirection]

enumFromThenTo :: RepeatDirection -> RepeatDirection -> RepeatDirection -> [RepeatDirection]

Eq RepeatDirection

Defined in Graphics.Blank.JavaScript

Methods

(==) :: RepeatDirection -> RepeatDirection -> Bool

(/=) :: RepeatDirection -> RepeatDirection -> Bool

Ord RepeatDirection

Defined in Graphics.Blank.JavaScript

Methods

compare :: RepeatDirection -> RepeatDirection -> Ordering

(<) :: RepeatDirection -> RepeatDirection -> Bool

(<=) :: RepeatDirection -> RepeatDirection -> Bool

(>) :: RepeatDirection -> RepeatDirection -> Bool

(>=) :: RepeatDirection -> RepeatDirection -> Bool

max :: RepeatDirection -> RepeatDirection -> RepeatDirection

min :: RepeatDirection -> RepeatDirection -> RepeatDirection

Read RepeatDirection

Defined in Graphics.Blank.JavaScript

Methods

readsPrec :: Int -> ReadS RepeatDirection

readList :: ReadS [RepeatDirection]

readPrec :: ReadPrec RepeatDirection

readListPrec :: ReadPrec [RepeatDirection]

Show RepeatDirection

Defined in Graphics.Blank.JavaScript

Methods

showsPrec :: Int -> RepeatDirection -> ShowS

show :: RepeatDirection -> String

showList :: [RepeatDirection] -> ShowS

Ix RepeatDirection

Defined in Graphics.Blank.JavaScript

Methods

range :: (RepeatDirection, RepeatDirection) -> [RepeatDirection]

index :: (RepeatDirection, RepeatDirection) -> RepeatDirection -> Int

unsafeIndex :: (RepeatDirection, RepeatDirection) -> RepeatDirection -> Int

inRange :: (RepeatDirection, RepeatDirection) -> RepeatDirection -> Bool

rangeSize :: (RepeatDirection, RepeatDirection) -> Int

unsafeRangeSize :: (RepeatDirection, RepeatDirection) -> Int

IsString RepeatDirection

Defined in Graphics.Blank.JavaScript

Methods

fromString :: String -> RepeatDirection

Default RepeatDirection

Defined in Graphics.Blank.JavaScript

Methods

def :: RepeatDirection

TextShow RepeatDirection

Defined in Graphics.Blank.JavaScript

Methods

showbPrec :: Int -> RepeatDirection -> Builder

showb :: RepeatDirection -> Builder

showbList :: [RepeatDirection] -> Builder

showtPrec :: Int -> RepeatDirection -> Text

showt :: RepeatDirection -> Text

showtList :: [RepeatDirection] -> Text

showtlPrec :: Int -> RepeatDirection -> Text

showtl :: RepeatDirection -> Text

showtlList :: [RepeatDirection] -> Text

JSArg RepeatDirection

Defined in Graphics.Blank.JavaScript

Methods

showbJS :: RepeatDirection -> Builder

repeat_ :: RepeatDirection

Shorthand for Repeat, with an underscore to distinguish it from repeat.

repeatX :: RepeatDirection

Shorthand for RepeatX.

repeatY :: RepeatDirection

Shorthand for RepeatY.

noRepeat :: RepeatDirection

Shorthand for NoRepeat.

data CanvasGradient

A handle to the a canvas gradient. CanvasGradients cannot be destroyed.

Instances

Eq CanvasGradient

Defined in Graphics.Blank.JavaScript

Methods

(==) :: CanvasGradient -> CanvasGradient -> Bool

(/=) :: CanvasGradient -> CanvasGradient -> Bool

Ord CanvasGradient

Defined in Graphics.Blank.JavaScript

Methods

compare :: CanvasGradient -> CanvasGradient -> Ordering

(<) :: CanvasGradient -> CanvasGradient -> Bool

(<=) :: CanvasGradient -> CanvasGradient -> Bool

(>) :: CanvasGradient -> CanvasGradient -> Bool

(>=) :: CanvasGradient -> CanvasGradient -> Bool

max :: CanvasGradient -> CanvasGradient -> CanvasGradient

min :: CanvasGradient -> CanvasGradient -> CanvasGradient

Show CanvasGradient

Defined in Graphics.Blank.JavaScript

Methods

showsPrec :: Int -> CanvasGradient -> ShowS

show :: CanvasGradient -> String

showList :: [CanvasGradient] -> ShowS

TextShow CanvasGradient

Defined in Graphics.Blank.JavaScript

Methods

showbPrec :: Int -> CanvasGradient -> Builder

showb :: CanvasGradient -> Builder

showbList :: [CanvasGradient] -> Builder

showtPrec :: Int -> CanvasGradient -> Text

showt :: CanvasGradient -> Text

showtList :: [CanvasGradient] -> Text

showtlPrec :: Int -> CanvasGradient -> Text

showtl :: CanvasGradient -> Text

showtlList :: [CanvasGradient] -> Text

JSArg CanvasGradient

Defined in Graphics.Blank.JavaScript

Methods

showbJS :: CanvasGradient -> Builder

Style CanvasGradient

Defined in Graphics.Blank.JavaScript

Methods

jsStyle :: CanvasGradient -> Builder

data CanvasPattern

A handle to a canvas pattern. CanvasPatterns cannot be destroyed.

Instances

Eq CanvasPattern

Defined in Graphics.Blank.JavaScript

Methods

(==) :: CanvasPattern -> CanvasPattern -> Bool

(/=) :: CanvasPattern -> CanvasPattern -> Bool

Ord CanvasPattern

Defined in Graphics.Blank.JavaScript

Methods

compare :: CanvasPattern -> CanvasPattern -> Ordering

(<) :: CanvasPattern -> CanvasPattern -> Bool

(<=) :: CanvasPattern -> CanvasPattern -> Bool

(>) :: CanvasPattern -> CanvasPattern -> Bool

(>=) :: CanvasPattern -> CanvasPattern -> Bool

max :: CanvasPattern -> CanvasPattern -> CanvasPattern

min :: CanvasPattern -> CanvasPattern -> CanvasPattern

Show CanvasPattern

Defined in Graphics.Blank.JavaScript

Methods

showsPrec :: Int -> CanvasPattern -> ShowS

show :: CanvasPattern -> String

showList :: [CanvasPattern] -> ShowS

TextShow CanvasPattern

Defined in Graphics.Blank.JavaScript

Methods

showbPrec :: Int -> CanvasPattern -> Builder

showb :: CanvasPattern -> Builder

showbList :: [CanvasPattern] -> Builder

showtPrec :: Int -> CanvasPattern -> Text

showt :: CanvasPattern -> Text

showtList :: [CanvasPattern] -> Text

showtlPrec :: Int -> CanvasPattern -> Text

showtl :: CanvasPattern -> Text

showtlList :: [CanvasPattern] -> Text

JSArg CanvasPattern

Defined in Graphics.Blank.JavaScript

Methods

showbJS :: CanvasPattern -> Builder

Style CanvasPattern

Defined in Graphics.Blank.JavaScript

Methods

jsStyle :: CanvasPattern -> Builder

Paths

beginPath :: () -> Canvas ()

Begins drawing a new path. This will empty the current list of subpaths.

Example

beginPath()
moveTo(20, 20)
lineTo(200, 20)
stroke()

closePath :: () -> Canvas ()

Creates a path from the current point back to the start, to close it.

Example

beginPath()
moveTo(20, 20)
lineTo(200, 20)
lineTo(120, 120)
closePath()
stroke()

fill :: () -> Canvas ()

Fills the current path with the current fillStyle.

Example

rect(10, 10, 100, 100)
fill()

stroke :: () -> Canvas ()

Draws the current path's strokes with the current strokeStyle (black by default).

Example

rect(10, 10, 100, 100)
stroke()

clip :: () -> Canvas ()

Turns the path currently being built into the current clipping path. Anything drawn after clip is called will only be visible if inside the new clipping path.

Example

rect(50, 20, 200, 120)
stroke()
clip()
fillStyle "red"
fillRect(0, 0, 150, 100)

moveTo :: (Double, Double) -> Canvas ()

moveTo(x, y) moves the starting point of a new subpath to the given (x, y) coordinates.

Example

beginPath()
moveTo(50, 50)
lineTo(200, 50)
stroke()

lineTo :: (Double, Double) -> Canvas ()

lineTo(x, y) connects the last point in the subpath to the given (x, y) coordinates (without actually drawing it).

Example

beginPath()
moveTo(50, 50)
lineTo(200, 50)
stroke()

quadraticCurveTo :: (Double, Double, Double, Double) -> Canvas ()

quadraticCurveTo(cpx, cpy, x, y) adds a quadratic Bézier curve to the path (whereas bezierCurveTo adds a cubic Bézier curve).

• cpx is the x-coordinate of the control point
• cpy is the y-coordinate of the control point
• x is the x-coordinate of the end point
• y is the y-coordinate of the end point

bezierCurveTo :: (Double, Double, Double, Double, Double, Double) -> Canvas ()

bezierCurveTo(cp1x, cp1y, cp2x, cp2y x, y) adds a cubic Bézier curve to the path (whereas quadraticCurveTo adds a quadratic Bézier curve).

• cp1x is the x-coordinate of the first control point
• cp1y is the y-coordinate of the first control point
• cp2x is the x-coordinate of the second control point
• cp2y is the y-coordinate of the second control point
• x is the x-coordinate of the end point
• y is the y-coordinate of the end point

arcTo :: (Double, Double, Double, Double, Double) -> Canvas ()

arcTo(x1, y1, x2, y2, r) creates an arc between two tangents, specified by two control points and a radius.

• x1 is the x-coordinate of the first control point
• y1 is the y-coordinate of the first control point
• x2 is the x-coordinate of the second control point
• y2 is the y-coordinate of the second control point
• r is the arc's radius

arc :: (Double, Double, Double, Radians, Radians, Bool) -> Canvas ()

arc(x, y, r, sAngle, eAngle, cc) creates a circular arc, where

• x is the x-coordinate of the center of the circle
• y is the y-coordinate of the center of the circle
• r is the radius of the circle on which the arc is drawn
• sAngle is the starting angle (where 0 at the 3 o'clock position of the circle)
• eAngle is the ending angle
• cc is the arc direction, where True indicates counterclockwise and False indicates clockwise.

rect :: (Double, Double, Double, Double) -> Canvas ()

rect(x, y, w, h) creates a rectangle with an upper-left corner at position (x, y), width w, and height h (where width and height are in pixels).

Example

rect(10, 10, 100, 100)
fill()

isPointInPath :: (Double, Double) -> Canvas Bool

isPointInPath(x, y) queries whether point (x, y) is within the current path.

Example

rect(10, 10, 100, 100)
stroke()
b <- isPointInPath(10, 10) -- b == True

Text

font :: Text -> Canvas ()

Sets the text context's font properties.

Examples

font "40pt 'Gill Sans Extrabold'"
font "80% sans-serif"
font "bold italic large serif"

textAlign :: TextAnchorAlignment -> Canvas ()

Sets the TextAnchorAlignment to use when drawing text.

textBaseline :: TextBaselineAlignment -> Canvas ()

Sets the TextBaselineAlignment to use when drawing text.

fillText :: (Text, Double, Double) -> Canvas ()

fillText(t, x, y) fills the text t at position (x, y) using the current fillStyle.

Example

font "48px serif"
fillText("Hello, World!", 50, 100)

strokeText :: (Text, Double, Double) -> Canvas ()

strokeText(t, x, y) draws text t (with no fill) at position (x, y) using the current strokeStyle.

Example

font "48px serif"
strokeText("Hello, World!", 50, 100)

measureText :: Text -> Canvas TextMetrics

Queries the measured width of the text argument.

Example

TextMetrics w <- measureText "Hello, World!"

data TextAnchorAlignment

The anchor point for text in the current DeviceContext.

Constructors

StartAnchor

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

EndAnchor

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

CenterAnchor

The text is anchored in its center.

LeftAnchor

The text is anchored at its left edge.

RightAnchor

the text is anchored at its right edge.

Instances

Bounded TextAnchorAlignment

Defined in Graphics.Blank.JavaScript

Methods

minBound :: TextAnchorAlignment

maxBound :: TextAnchorAlignment

Enum TextAnchorAlignment

Defined in Graphics.Blank.JavaScript

Methods

succ :: TextAnchorAlignment -> TextAnchorAlignment

pred :: TextAnchorAlignment -> TextAnchorAlignment

toEnum :: Int -> TextAnchorAlignment

fromEnum :: TextAnchorAlignment -> Int

enumFrom :: TextAnchorAlignment -> [TextAnchorAlignment]

enumFromThen :: TextAnchorAlignment -> TextAnchorAlignment -> [TextAnchorAlignment]

enumFromTo :: TextAnchorAlignment -> TextAnchorAlignment -> [TextAnchorAlignment]

enumFromThenTo :: TextAnchorAlignment -> TextAnchorAlignment -> TextAnchorAlignment -> [TextAnchorAlignment]

Eq TextAnchorAlignment

Defined in Graphics.Blank.JavaScript

Methods

(==) :: TextAnchorAlignment -> TextAnchorAlignment -> Bool

(/=) :: TextAnchorAlignment -> TextAnchorAlignment -> Bool

Ord TextAnchorAlignment

Defined in Graphics.Blank.JavaScript

Methods

compare :: TextAnchorAlignment -> TextAnchorAlignment -> Ordering

(<) :: TextAnchorAlignment -> TextAnchorAlignment -> Bool

(<=) :: TextAnchorAlignment -> TextAnchorAlignment -> Bool

(>) :: TextAnchorAlignment -> TextAnchorAlignment -> Bool

(>=) :: TextAnchorAlignment -> TextAnchorAlignment -> Bool

max :: TextAnchorAlignment -> TextAnchorAlignment -> TextAnchorAlignment

min :: TextAnchorAlignment -> TextAnchorAlignment -> TextAnchorAlignment

Read TextAnchorAlignment

Defined in Graphics.Blank.JavaScript

Methods

readsPrec :: Int -> ReadS TextAnchorAlignment

readList :: ReadS [TextAnchorAlignment]

readPrec :: ReadPrec TextAnchorAlignment

readListPrec :: ReadPrec [TextAnchorAlignment]

Show TextAnchorAlignment

Defined in Graphics.Blank.JavaScript

Methods

showsPrec :: Int -> TextAnchorAlignment -> ShowS

show :: TextAnchorAlignment -> String

showList :: [TextAnchorAlignment] -> ShowS

Ix TextAnchorAlignment

Defined in Graphics.Blank.JavaScript

Methods

range :: (TextAnchorAlignment, TextAnchorAlignment) -> [TextAnchorAlignment]

index :: (TextAnchorAlignment, TextAnchorAlignment) -> TextAnchorAlignment -> Int

unsafeIndex :: (TextAnchorAlignment, TextAnchorAlignment) -> TextAnchorAlignment -> Int

inRange :: (TextAnchorAlignment, TextAnchorAlignment) -> TextAnchorAlignment -> Bool

rangeSize :: (TextAnchorAlignment, TextAnchorAlignment) -> Int

unsafeRangeSize :: (TextAnchorAlignment, TextAnchorAlignment) -> Int

IsString TextAnchorAlignment

Defined in Graphics.Blank.JavaScript

Methods

fromString :: String -> TextAnchorAlignment

Default TextAnchorAlignment

Defined in Graphics.Blank.JavaScript

Methods

def :: TextAnchorAlignment

TextShow TextAnchorAlignment

Defined in Graphics.Blank.JavaScript

Methods

showbPrec :: Int -> TextAnchorAlignment -> Builder

showb :: TextAnchorAlignment -> Builder

showbList :: [TextAnchorAlignment] -> Builder

showtPrec :: Int -> TextAnchorAlignment -> Text

showt :: TextAnchorAlignment -> Text

showtList :: [TextAnchorAlignment] -> Text

showtlPrec :: Int -> TextAnchorAlignment -> Text

showtl :: TextAnchorAlignment -> Text

showtlList :: [TextAnchorAlignment] -> Text

JSArg TextAnchorAlignment

Defined in Graphics.Blank.JavaScript

Methods

showbJS :: TextAnchorAlignment -> Builder

start :: TextAnchorAlignment

Shorthand for StartAnchor.

end :: TextAnchorAlignment

Shorthand for EndAnchor.

center :: TextAnchorAlignment

Shorthand for CenterAnchor.

left :: TextAnchorAlignment

Shorthand for LeftAnchor.

right :: TextAnchorAlignment

Shorthand for RightAnchor.

data TextBaselineAlignment

The baseline alignment used when drawing text in the current DeviceContext. The baselines are ordered from highest (Top) to lowest (Bottom).

Constructors

TopBaseline

HangingBaseline

MiddleBaseline

AlphabeticBaseline

IdeographicBaseline

BottomBaseline

Instances

Bounded TextBaselineAlignment

Defined in Graphics.Blank.JavaScript

Methods

minBound :: TextBaselineAlignment

maxBound :: TextBaselineAlignment

Enum TextBaselineAlignment

Defined in Graphics.Blank.JavaScript

Methods

succ :: TextBaselineAlignment -> TextBaselineAlignment

pred :: TextBaselineAlignment -> TextBaselineAlignment

toEnum :: Int -> TextBaselineAlignment

fromEnum :: TextBaselineAlignment -> Int

enumFrom :: TextBaselineAlignment -> [TextBaselineAlignment]

enumFromThen :: TextBaselineAlignment -> TextBaselineAlignment -> [TextBaselineAlignment]

enumFromTo :: TextBaselineAlignment -> TextBaselineAlignment -> [TextBaselineAlignment]

enumFromThenTo :: TextBaselineAlignment -> TextBaselineAlignment -> TextBaselineAlignment -> [TextBaselineAlignment]

Eq TextBaselineAlignment

Defined in Graphics.Blank.JavaScript

Methods

(==) :: TextBaselineAlignment -> TextBaselineAlignment -> Bool

(/=) :: TextBaselineAlignment -> TextBaselineAlignment -> Bool

Ord TextBaselineAlignment

Defined in Graphics.Blank.JavaScript

Methods

compare :: TextBaselineAlignment -> TextBaselineAlignment -> Ordering

(<) :: TextBaselineAlignment -> TextBaselineAlignment -> Bool

(<=) :: TextBaselineAlignment -> TextBaselineAlignment -> Bool

(>) :: TextBaselineAlignment -> TextBaselineAlignment -> Bool

(>=) :: TextBaselineAlignment -> TextBaselineAlignment -> Bool

max :: TextBaselineAlignment -> TextBaselineAlignment -> TextBaselineAlignment

min :: TextBaselineAlignment -> TextBaselineAlignment -> TextBaselineAlignment

Read TextBaselineAlignment

Defined in Graphics.Blank.JavaScript

Methods

readsPrec :: Int -> ReadS TextBaselineAlignment

readList :: ReadS [TextBaselineAlignment]

readPrec :: ReadPrec TextBaselineAlignment

readListPrec :: ReadPrec [TextBaselineAlignment]

Show TextBaselineAlignment

Defined in Graphics.Blank.JavaScript

Methods

showsPrec :: Int -> TextBaselineAlignment -> ShowS

show :: TextBaselineAlignment -> String

showList :: [TextBaselineAlignment] -> ShowS

Ix TextBaselineAlignment

Defined in Graphics.Blank.JavaScript

Methods

range :: (TextBaselineAlignment, TextBaselineAlignment) -> [TextBaselineAlignment]

index :: (TextBaselineAlignment, TextBaselineAlignment) -> TextBaselineAlignment -> Int

unsafeIndex :: (TextBaselineAlignment, TextBaselineAlignment) -> TextBaselineAlignment -> Int

inRange :: (TextBaselineAlignment, TextBaselineAlignment) -> TextBaselineAlignment -> Bool

rangeSize :: (TextBaselineAlignment, TextBaselineAlignment) -> Int

unsafeRangeSize :: (TextBaselineAlignment, TextBaselineAlignment) -> Int

IsString TextBaselineAlignment

Defined in Graphics.Blank.JavaScript

Methods

fromString :: String -> TextBaselineAlignment

Default TextBaselineAlignment

Defined in Graphics.Blank.JavaScript

Methods

def :: TextBaselineAlignment

TextShow TextBaselineAlignment

Defined in Graphics.Blank.JavaScript

Methods

showbPrec :: Int -> TextBaselineAlignment -> Builder

showb :: TextBaselineAlignment -> Builder

showbList :: [TextBaselineAlignment] -> Builder

showtPrec :: Int -> TextBaselineAlignment -> Text

showt :: TextBaselineAlignment -> Text

showtList :: [TextBaselineAlignment] -> Text

showtlPrec :: Int -> TextBaselineAlignment -> Text

showtl :: TextBaselineAlignment -> Text

showtlList :: [TextBaselineAlignment] -> Text

JSArg TextBaselineAlignment

Defined in Graphics.Blank.JavaScript

Methods

showbJS :: TextBaselineAlignment -> Builder

top :: TextBaselineAlignment

Shorthand for TopBaseline.

hanging :: TextBaselineAlignment

Shorthand for HangingBaseline.

middle :: TextBaselineAlignment

Shorthand for MiddleBaseline.

alphabetic :: TextBaselineAlignment

Shorthand for AlphabeticBaseline.

ideographic :: TextBaselineAlignment

Shorthand for IdeographicBaseline.

bottom :: TextBaselineAlignment

Shorthand for BottomBaseline.

data TextMetrics

The width argument of TextMetrics can trivially be projected out.

Constructors

TextMetrics Double

Instances

Show TextMetrics

Defined in Graphics.Blank.Canvas

Methods

showsPrec :: Int -> TextMetrics -> ShowS

show :: TextMetrics -> String

showList :: [TextMetrics] -> ShowS

TextShow TextMetrics

Defined in Graphics.Blank.Canvas

Methods

showbPrec :: Int -> TextMetrics -> Builder

showb :: TextMetrics -> Builder

showbList :: [TextMetrics] -> Builder

showtPrec :: Int -> TextMetrics -> Text

showt :: TextMetrics -> Text

showtList :: [TextMetrics] -> Text

showtlPrec :: Int -> TextMetrics -> Text

showtl :: TextMetrics -> Text

showtlList :: [TextMetrics] -> Text

Rectangles

clearRect :: (Double, Double, Double, Double) -> Canvas ()

clearRect(x, y, w, h) clears all pixels within the rectangle with upper-left corner (x, y), width w, and height h (i.e., sets the pixels to transparent black).

Example

fillStyle "red"
fillRect(0, 0, 300, 150)
clearRect(20, 20, 100, 50)

fillRect :: (Double, Double, Double, Double) -> Canvas ()

fillRect(x, y, w, h) draws a filled rectangle with upper-left corner (x, y), width w, and height h using the current fillStyle.

Example

fillStyle "red"
fillRect(0, 0, 300, 150)

strokeRect :: (Double, Double, Double, Double) -> Canvas ()

strokeRect(x, y, w, h) draws a rectangle (no fill) with upper-left corner (x, y), width w, and height h using the current strokeStyle.

Example

strokeStyle "red"
strokeRect(0, 0, 300, 150)

Pixel manipulation

getImageData :: (Double, Double, Double, Double) -> Canvas ImageData

getImageData(x, y, w, h) capture ImageData from the rectangle with upper-left corner (x, y), width w, and height h.

putImageData :: (ImageData, [Double]) -> Canvas ()

putImageData takes 2 or 6 Double arguments. See putImageDataAt and putImageDataDirty for variants with exact numbers of arguments.

data ImageData

ImageData is a transliteration of JavaScript's ImageData. ImageData consists of two Ints and one (unboxed) Vector of Word8s. width, height, and data can be projected from ImageData, length can be used to find the data length.

Note: ImageData lives on the server, not the client.

Constructors

ImageData !Int !Int !(Vector Word8)

Instances

Eq ImageData

Defined in Graphics.Blank.JavaScript

Methods

(==) :: ImageData -> ImageData -> Bool

(/=) :: ImageData -> ImageData -> Bool

Ord ImageData

Defined in Graphics.Blank.JavaScript

Methods

compare :: ImageData -> ImageData -> Ordering

(<) :: ImageData -> ImageData -> Bool

(<=) :: ImageData -> ImageData -> Bool

(>) :: ImageData -> ImageData -> Bool

(>=) :: ImageData -> ImageData -> Bool

max :: ImageData -> ImageData -> ImageData

min :: ImageData -> ImageData -> ImageData

Show ImageData

Defined in Graphics.Blank.JavaScript

Methods

showsPrec :: Int -> ImageData -> ShowS

show :: ImageData -> String

showList :: [ImageData] -> ShowS

TextShow ImageData

Defined in Graphics.Blank.JavaScript

Methods

showbPrec :: Int -> ImageData -> Builder

showb :: ImageData -> Builder

showbList :: [ImageData] -> Builder

showtPrec :: Int -> ImageData -> Text

showt :: ImageData -> Text

showtList :: [ImageData] -> Text

showtlPrec :: Int -> ImageData -> Text

showtl :: ImageData -> Text

showtlList :: [ImageData] -> Text

JSArg ImageData

Defined in Graphics.Blank.JavaScript

Methods

showbJS :: ImageData -> Builder

Type information

type Alpha = Interval

An interval representing a color's translucency. A color with an alpha value of 0.0 is transparent, and a color with an alpha value of 1.0 is opaque.

type Degrees = Double

An angle type in which 360° represents one complete rotation.

type Interval = Double

A normalized percentage value (e.g., 0.0 represent 0%, 1.0 represents 100%, etc.).

type Percentage = Double

A value representing a percentage (e.g., 0.0 represents 0%, 100.0 represents 100%, etc.).

type Radians = Double

An angle type in which 2π radians represents one complete rotation.

class RoundProperty a where

Class for round CSS property values.

Methods

round_ :: a

Shorthand for RoundCap or RoundCorner, with an underscore to distinguish it from round.

Instances

RoundProperty LineJoinCorner

Defined in Graphics.Blank.JavaScript

Methods

round_ :: LineJoinCorner

RoundProperty LineEndCap

Defined in Graphics.Blank.JavaScript

Methods

round_ :: LineEndCap

blank-canvas Extensions

Reading from Canvas

newImage :: Text -> Canvas CanvasImage

newImage takes a URL (perhaps a data URL), and returns the CanvasImage handle after loading. If you are using local images, loading should be near instant.

data CanvasImage

A handle to a canvas image. CanvasImages cannot be destroyed.

Instances

Eq CanvasImage

Defined in Graphics.Blank.JavaScript

Methods

(==) :: CanvasImage -> CanvasImage -> Bool

(/=) :: CanvasImage -> CanvasImage -> Bool

Ord CanvasImage

Defined in Graphics.Blank.JavaScript

Methods

compare :: CanvasImage -> CanvasImage -> Ordering

(<) :: CanvasImage -> CanvasImage -> Bool

(<=) :: CanvasImage -> CanvasImage -> Bool

(>) :: CanvasImage -> CanvasImage -> Bool

(>=) :: CanvasImage -> CanvasImage -> Bool

max :: CanvasImage -> CanvasImage -> CanvasImage

min :: CanvasImage -> CanvasImage -> CanvasImage

Show CanvasImage

Defined in Graphics.Blank.JavaScript

Methods

showsPrec :: Int -> CanvasImage -> ShowS

show :: CanvasImage -> String

showList :: [CanvasImage] -> ShowS

TextShow CanvasImage

Defined in Graphics.Blank.JavaScript

Methods

showbPrec :: Int -> CanvasImage -> Builder

showb :: CanvasImage -> Builder

showbList :: [CanvasImage] -> Builder

showtPrec :: Int -> CanvasImage -> Text

showt :: CanvasImage -> Text

showtList :: [CanvasImage] -> Text

showtlPrec :: Int -> CanvasImage -> Text

showtl :: CanvasImage -> Text

showtlList :: [CanvasImage] -> Text

JSArg CanvasImage

Defined in Graphics.Blank.JavaScript

Methods

showbJS :: CanvasImage -> Builder

Image CanvasImage

Defined in Graphics.Blank.JavaScript

Methods

jsImage :: CanvasImage -> Builder

width :: Num b => CanvasImage -> b

height :: Num b => CanvasImage -> b

newAudio :: Text -> Canvas CanvasAudio

newAudio takes an URL to an audio file and returs the CanvasAudio handle after loading. If you are using local audio files, loading should be near instant.

data CanvasAudio

A handle to a canvas audio. CanvasAudios cannot be destroyed.

Instances

Eq CanvasAudio

Defined in Graphics.Blank.JavaScript

Methods

(==) :: CanvasAudio -> CanvasAudio -> Bool

(/=) :: CanvasAudio -> CanvasAudio -> Bool

Ord CanvasAudio

Defined in Graphics.Blank.JavaScript

Methods

compare :: CanvasAudio -> CanvasAudio -> Ordering

(<) :: CanvasAudio -> CanvasAudio -> Bool

(<=) :: CanvasAudio -> CanvasAudio -> Bool

(>) :: CanvasAudio -> CanvasAudio -> Bool

(>=) :: CanvasAudio -> CanvasAudio -> Bool

max :: CanvasAudio -> CanvasAudio -> CanvasAudio

min :: CanvasAudio -> CanvasAudio -> CanvasAudio

Show CanvasAudio

Defined in Graphics.Blank.JavaScript

Methods

showsPrec :: Int -> CanvasAudio -> ShowS

show :: CanvasAudio -> String

showList :: [CanvasAudio] -> ShowS

TextShow CanvasAudio

Defined in Graphics.Blank.JavaScript

Methods

showbPrec :: Int -> CanvasAudio -> Builder

showb :: CanvasAudio -> Builder

showbList :: [CanvasAudio] -> Builder

showtPrec :: Int -> CanvasAudio -> Text

showt :: CanvasAudio -> Text

showtList :: [CanvasAudio] -> Text

showtlPrec :: Int -> CanvasAudio -> Text

showtl :: CanvasAudio -> Text

showtlList :: [CanvasAudio] -> Text

JSArg CanvasAudio

Defined in Graphics.Blank.JavaScript

Methods

showbJS :: CanvasAudio -> Builder

DeviceContext attributes

devicePixelRatio :: DeviceContext -> Double

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

CanvasContext, and off-screen Canvas.

data CanvasContext

A handle to an offscreen canvas. CanvasContext cannot be destroyed.

Instances

Eq CanvasContext

Defined in Graphics.Blank.JavaScript

Methods

(==) :: CanvasContext -> CanvasContext -> Bool

(/=) :: CanvasContext -> CanvasContext -> Bool

Ord CanvasContext

Defined in Graphics.Blank.JavaScript

Methods

compare :: CanvasContext -> CanvasContext -> Ordering

(<) :: CanvasContext -> CanvasContext -> Bool

(<=) :: CanvasContext -> CanvasContext -> Bool

(>) :: CanvasContext -> CanvasContext -> Bool

(>=) :: CanvasContext -> CanvasContext -> Bool

max :: CanvasContext -> CanvasContext -> CanvasContext

min :: CanvasContext -> CanvasContext -> CanvasContext

Show CanvasContext

Defined in Graphics.Blank.JavaScript

Methods

showsPrec :: Int -> CanvasContext -> ShowS

show :: CanvasContext -> String

showList :: [CanvasContext] -> ShowS

TextShow CanvasContext

Defined in Graphics.Blank.JavaScript

Methods

showbPrec :: Int -> CanvasContext -> Builder

showb :: CanvasContext -> Builder

showbList :: [CanvasContext] -> Builder

showtPrec :: Int -> CanvasContext -> Text

showt :: CanvasContext -> Text

showtList :: [CanvasContext] -> Text

showtlPrec :: Int -> CanvasContext -> Text

showtl :: CanvasContext -> Text

showtlList :: [CanvasContext] -> Text

JSArg CanvasContext

Defined in Graphics.Blank.JavaScript

Methods

showbJS :: CanvasContext -> Builder

Image CanvasContext

Defined in Graphics.Blank.JavaScript

Methods

jsImage :: CanvasContext -> Builder

width :: Num b => CanvasContext -> b

height :: Num b => CanvasContext -> b

newCanvas :: (Int, Int) -> Canvas CanvasContext

Create a new, off-screen canvas buffer. Takes width and height as arguments.

with :: CanvasContext -> Canvas a -> Canvas a

with runs a set of canvas commands in the context of a specific canvas buffer.

myCanvasContext :: Canvas CanvasContext

myCanvasContext returns the current CanvasContext.

deviceCanvasContext :: DeviceContext -> CanvasContext

Syncing

sync :: Canvas ()

Send all commands to the browser, wait for the browser to act, then continue.

Debugging

console_log :: JSArg msg => msg -> Canvas ()

console_log aids debugging by sending the argument to the browser console.log.

eval :: Text -> Canvas ()

eval executes the argument in JavaScript directly.

class JSArg a where

Class for Haskell data types which represent JavaScript data.

Methods

showbJS :: a -> Builder

Display a value as JavaScript data.

Instances

JSArg Bool

Defined in Graphics.Blank.JavaScript

Methods

showbJS :: Bool -> Builder

JSArg Double

Defined in Graphics.Blank.JavaScript

Methods

showbJS :: Double -> Builder

JSArg Int

Defined in Graphics.Blank.JavaScript

Methods

showbJS :: Int -> Builder

JSArg Text

Defined in Graphics.Blank.JavaScript

Methods

showbJS :: Text -> Builder

JSArg CanvasContext

Defined in Graphics.Blank.JavaScript

Methods

showbJS :: CanvasContext -> Builder

JSArg CanvasImage

Defined in Graphics.Blank.JavaScript

Methods

showbJS :: CanvasImage -> Builder

JSArg CanvasGradient

Defined in Graphics.Blank.JavaScript

Methods

showbJS :: CanvasGradient -> Builder

JSArg CanvasPattern

Defined in Graphics.Blank.JavaScript

Methods

showbJS :: CanvasPattern -> Builder

JSArg CanvasAudio

Defined in Graphics.Blank.JavaScript

Methods

showbJS :: CanvasAudio -> Builder

JSArg TextBaselineAlignment

Defined in Graphics.Blank.JavaScript

Methods

showbJS :: TextBaselineAlignment -> Builder

JSArg TextAnchorAlignment

Defined in Graphics.Blank.JavaScript

Methods

showbJS :: TextAnchorAlignment -> Builder

JSArg LineJoinCorner

Defined in Graphics.Blank.JavaScript

Methods

showbJS :: LineJoinCorner -> Builder

JSArg LineEndCap

Defined in Graphics.Blank.JavaScript

Methods

showbJS :: LineEndCap -> Builder

JSArg RepeatDirection

Defined in Graphics.Blank.JavaScript

Methods

showbJS :: RepeatDirection -> Builder

JSArg ImageData

Defined in Graphics.Blank.JavaScript

Methods

showbJS :: ImageData -> Builder

JSArg Cursor

Defined in Graphics.Blank.Types.Cursor

Methods

showbJS :: Cursor -> Builder

JSArg Font

Defined in Graphics.Blank.Types.Font

Methods

showbJS :: Font -> Builder

JSArg (Colour Double)

Defined in Graphics.Blank.JavaScript

Methods

showbJS :: Colour Double -> Builder

JSArg (AlphaColour Double)

Defined in Graphics.Blank.JavaScript

Methods

showbJS :: AlphaColour Double -> Builder

Drawing Utilities

clearCanvas :: Canvas ()

Clear the screen. Restores the default transformation matrix.

saveRestore :: Canvas a -> Canvas a

Wrap a canvas computation in save / restore.

(#) :: a -> (a -> b) -> b infixr 0

The #-operator is the Haskell analog to the .-operator in JavaScript. Example:

grd # addColorStop(0, "#8ED6FF");

This can be seen as equivalent of grd.addColorStop(0, "#8ED6FF").

readDataURL :: Text -> FilePath -> IO Text

Read a file, and generate a data URL.

 url <- readDataURL "image/png" "image/foo.png"

dataURLMimeType :: Text -> Text

Find the MIME type for a data URL.

> dataURLMimeType "data:image/png;base64,iVBORw..."
"image/png"

writeDataURL :: FilePath -> Text -> IO ()

Write a data URL to a given file.

drawImageAt :: Image image => (image, Double, Double) -> Canvas ()

Draws an image onto the canvas at the given x- and y-coordinates.

drawImageSize :: Image image => (image, Double, Double, Double, Double) -> Canvas ()

Acts like drawImageAt, but with two extra Double arguments. The third and fourth Doubles specify the width and height of the image, respectively.

drawImageCrop :: Image image => (image, Double, Double, Double, Double, Double, Double, Double, Double) -> Canvas ()

Acts like drawImageSize, but with four extra Double arguments before the arguments of drawImageSize. The first and second Doubles specify the x- and y-coordinates at which the image begins to crop. The third and fourth Doubles specify the width and height of the cropped image.

drawImageCrop img 0 0 dw dh dx dy dw dh = drawImageSize = dx dy dw dh

putImageDataAt :: (ImageData, Double, Double) -> Canvas ()

Writes ImageData to the canvas at the given x- and y-coordinates.

putImageDataDirty :: (ImageData, Double, Double, Double, Double, Double, Double) -> Canvas ()

Acts like putImageDataAt, but with four extra Double arguments that specify which region of the ImageData (the dirty rectangle) should be drawn. The third and fourth Doubles specify the dirty rectangle's x- and y- coordinates, and the fifth and sixth Doubles specify the dirty rectangle's width and height.

putImageDataDirty imgData dx dy 0 0 w h = putImageDataAt imgData dx dy
  where (w, h) = case imgData of ImageData w' h' _ -> (w', h')

Events

trigger :: Event -> Canvas ()

Triggers a specific named event.

eventQueue :: DeviceContext -> EventQueue

A single (typed) event queue

wait :: DeviceContext -> IO Event

Wait for any event. Blocks.

flush :: DeviceContext -> IO [Event]

flush all the current events, returning them all to the user. Never blocks.

data Event

Basic event from browser. See http://api.jquery.com/category/events/ for details.

Constructors

Event

Fields

• eMetaKey :: Bool
• ePageXY :: Maybe (Double, Double)
• eType :: EventName
• eWhich :: Maybe Int

Instances

Eq Event

Defined in Graphics.Blank.Events

Methods

(==) :: Event -> Event -> Bool

(/=) :: Event -> Event -> Bool

Ord Event

Defined in Graphics.Blank.Events

Methods

compare :: Event -> Event -> Ordering

(<) :: Event -> Event -> Bool

(<=) :: Event -> Event -> Bool

(>) :: Event -> Event -> Bool

(>=) :: Event -> Event -> Bool

max :: Event -> Event -> Event

min :: Event -> Event -> Event

Show Event

Defined in Graphics.Blank.Events

Methods

showsPrec :: Int -> Event -> ShowS

show :: Event -> String

showList :: [Event] -> ShowS

ToJSON Event

Defined in Graphics.Blank.Events

Methods

toJSON :: Event -> Value

toEncoding :: Event -> Encoding

toJSONList :: [Event] -> Value

toEncodingList :: [Event] -> Encoding

FromJSON Event

Defined in Graphics.Blank.Events

Methods

parseJSON :: Value -> Parser Event

parseJSONList :: Value -> Parser [Event]

TextShow Event

Defined in Graphics.Blank.Events

Methods

showbPrec :: Int -> Event -> Builder

showb :: Event -> Builder

showbList :: [Event] -> Builder

showtPrec :: Int -> Event -> Text

showt :: Event -> Text

showtList :: [Event] -> Text

showtlPrec :: Int -> Event -> Text

showtl :: Event -> Text

showtlList :: [Event] -> Text

type EventName = Text

EventName mirrors event names from jQuery, and uses lowercase. Possible named events

• keypress, keydown, keyup
• mouseDown, mouseenter, mousemove, mouseout, mouseover, mouseup

type EventQueue = TChan Event

EventQueue is an STM channel (TChan) of Events. Intentionally, EventQueue is not abstract.

Cursor manipulation

cursor :: Text -> Canvas ()

Change the canvas cursor to the specified URL or keyword.

Examples

cursor "url(image.png), default"
cursor "crosshair"

Middleware

local_only :: Middleware