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

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

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

Functor Canvas

Applicative Canvas

Monoid a => Monoid (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

Image CanvasImage

Image DeviceContext

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

Enum LineEndCap

Eq LineEndCap

Ord LineEndCap

Read LineEndCap

Show LineEndCap

Ix LineEndCap

IsString LineEndCap

Default LineEndCap

TextShow LineEndCap

JSArg LineEndCap

RoundProperty 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

Enum LineJoinCorner

Eq LineJoinCorner

Ord LineJoinCorner

Read LineJoinCorner

Show LineJoinCorner

Ix LineJoinCorner

IsString LineJoinCorner

Default LineJoinCorner

TextShow LineJoinCorner

JSArg LineJoinCorner

RoundProperty 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

Enum RepeatDirection

Eq RepeatDirection

Ord RepeatDirection

Read RepeatDirection

Show RepeatDirection

Ix RepeatDirection

IsString RepeatDirection

Default RepeatDirection

TextShow RepeatDirection

JSArg RepeatDirection

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

Ord CanvasGradient

Show CanvasGradient

TextShow CanvasGradient

JSArg CanvasGradient

Style CanvasGradient

data CanvasPattern

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

Instances

Eq CanvasPattern

Ord CanvasPattern

Show CanvasPattern

TextShow CanvasPattern

JSArg CanvasPattern

Style CanvasPattern

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

Enum TextAnchorAlignment

Eq TextAnchorAlignment

Ord TextAnchorAlignment

Read TextAnchorAlignment

Show TextAnchorAlignment

Ix TextAnchorAlignment

IsString TextAnchorAlignment

Default TextAnchorAlignment

TextShow TextAnchorAlignment

JSArg TextAnchorAlignment

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

Enum TextBaselineAlignment

Eq TextBaselineAlignment

Ord TextBaselineAlignment

Read TextBaselineAlignment

Show TextBaselineAlignment

Ix TextBaselineAlignment

IsString TextBaselineAlignment

Default TextBaselineAlignment

TextShow TextBaselineAlignment

JSArg TextBaselineAlignment

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

TextShow TextMetrics

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

Ord ImageData

Show ImageData

TextShow ImageData

JSArg ImageData

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

RoundProperty 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

Ord CanvasImage

Show CanvasImage

TextShow CanvasImage

JSArg CanvasImage

Image CanvasImage

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

Ord CanvasAudio

Show CanvasAudio

TextShow CanvasAudio

JSArg CanvasAudio

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

Ord CanvasContext

Show CanvasContext

TextShow CanvasContext

JSArg CanvasContext

Image CanvasContext

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

JSArg Double

JSArg Int

JSArg Text

JSArg CanvasContext

JSArg CanvasImage

JSArg CanvasGradient

JSArg CanvasPattern

JSArg CanvasAudio

JSArg TextBaselineAlignment

JSArg TextAnchorAlignment

JSArg LineJoinCorner

JSArg LineEndCap

JSArg RepeatDirection

JSArg ImageData

JSArg Cursor

JSArg Font

JSArg (Colour Double)

JSArg (AlphaColour Double)

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

Ord Event

Show Event

ToJSON Event

FromJSON Event

TextShow Event

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