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

Context is our abstact handle into a specific 2d-context inside a browser. Note that the JavaScript API concepts of 2D-Context and Canvas are conflated in blank-canvas. Therefore, there is no getContext method, rather getContext is implied (when using send).

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

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

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

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

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

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

The direction in which a CanvasPattern repeats.

A handle to the CanvasGradient. CanvasGradients can not be destroyed.

A handle to the CanvasPattern. CanvasPatterns can not be destroyed.

The anchor point for text in the current DeviceContext.

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

The width argument of TextMetrics can trivially be projected out.

Capture ImageDate from the Canvas.

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

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

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

image takes a URL (perhaps a data URL), and returns the CanvasImage handle, _after_ loading. The assumption is you are using local images, so loading should be near instant.

A handle to the Image. CanvasImages can not be destroyed.

A handle to an offscreen canvas. CanvasContext can not be destroyed.

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

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

myCanvasContext returns the current CanvasContent.

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

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

eval executes the argument in JavaScript directly.

Clear the screen. Restores the default transformation matrix.

Wrap a canvas computation in save / restore.

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

Read a file, and generate a data URL.

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

Find the mime type for a data URL.

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

Write a data URL to a given file.

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

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

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

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

Acts like putImageDataDirty, 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')

trigger a specific named event, please.

A single (typed) event queue

wait for any event. blocks.

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

Basic Event from Browser; see http://api.jquery.com/category/events/ for details.

EventName mirrors event names from jquery, and use lower case. Possible named events

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

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