blank-canvas-0.4.0: HTML5 Canvas Graphics Library

Safe HaskellNone
LanguageHaskell2010

Graphics.Blank

Contents

Description

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.

Synopsis

Starting blank-canvas

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

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 Source

Constructors

Options 

Fields

port :: Int

which port do we issue the blank canvas using

events :: [EventName]

which events does the canvas listen to

debug :: Bool

turn on debugging (default False)

static :: [String]

path to images, and other static artifacts

root :: String

location of the static files (default .)

middleware :: [Middleware]

extra middleware(s) to be executed. (default [local_only])

Instances

sending to the Graphics DeviceContext

data DeviceContext Source

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

Instances

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

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 http://www.nihilogic.dk/labs/canvas_sheet/HTML5_Canvas_Cheat_Sheet.pdf for the JavaScript version of this API.

data Canvas :: * -> * Source

Instances

Canvas element

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

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

toDataURL :: () -> Canvas Text Source

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

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

2D Context

save :: () -> Canvas () Source

restore :: () -> Canvas () Source

Transformation

scale :: (Float, Float) -> Canvas () Source

rotate :: Float -> Canvas () Source

translate :: (Float, Float) -> Canvas () Source

transform :: (Float, Float, Float, Float, Float, Float) -> Canvas () Source

setTransform :: (Float, Float, Float, Float, Float, Float) -> Canvas () Source

Image drawing

class Image a Source

Minimal complete definition

jsImage, width, height

Instances

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

drawImage takes 2, 4 or 8 floats arguments

Compositing

globalAlpha :: Float -> Canvas () Source

globalCompositeOperation :: Text -> Canvas () Source

Line styles

lineWidth :: Float -> Canvas () Source

lineCap :: Text -> Canvas () Source

lineJoin :: Text -> Canvas () Source

miterLimit :: Float -> Canvas () Source

Colors, styles and shadows

strokeStyle :: Text -> Canvas () Source

fillStyle :: Text -> Canvas () Source

shadowOffsetX :: Float -> Canvas () Source

shadowOffsetY :: Float -> Canvas () Source

shadowBlur :: Float -> Canvas () Source

shadowColor :: Text -> Canvas () Source

createLinearGradient :: (Float, Float, Float, Float) -> Canvas CanvasGradient Source

createRadialGradient :: (Float, Float, Float, Float, Float, Float) -> Canvas CanvasGradient Source

createPattern :: (CanvasImage, Text) -> Canvas CanvasPattern Source

addColorStop :: (Float, Text) -> CanvasGradient -> Canvas () Source

add a Color stop to a Canvas Gradient.

data CanvasGradient Source

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

Instances

data CanvasPattern Source

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

Instances

Paths

beginPath :: () -> Canvas () Source

closePath :: () -> Canvas () Source

fill :: () -> Canvas () Source

stroke :: () -> Canvas () Source

clip :: () -> Canvas () Source

moveTo :: (Float, Float) -> Canvas () Source

lineTo :: (Float, Float) -> Canvas () Source

quadraticCurveTo :: (Float, Float, Float, Float) -> Canvas () Source

bezierCurveTo :: (Float, Float, Float, Float, Float, Float) -> Canvas () Source

arcTo :: (Float, Float, Float, Float, Float) -> Canvas () Source

arc :: (Float, Float, Float, Float, Float, Bool) -> Canvas () Source

rect :: (Float, Float, Float, Float) -> Canvas () Source

isPointInPath :: (Float, Float) -> Canvas Bool Source

Text

font :: Text -> Canvas () Source

textAlign :: Text -> Canvas () Source

textBaseline :: Text -> Canvas () Source

fillText :: (Text, Float, Float) -> Canvas () Source

strokeText :: (Text, Float, Float) -> Canvas () Source

measureText :: Text -> Canvas TextMetrics Source

data TextMetrics Source

The width argument of TextMetrics can trivially be projected out.

Constructors

TextMetrics Float 

Instances

Rectangles

clearRect :: (Float, Float, Float, Float) -> Canvas () Source

fillRect :: (Float, Float, Float, Float) -> Canvas () Source

strokeRect :: (Float, Float, Float, Float) -> Canvas () Source

Pixel manipulation

getImageData :: (Float, Float, Float, Float) -> Canvas ImageData Source

Capture ImageDate from the Canvas.

putImageData :: (ImageData, [Float]) -> Canvas () Source

data ImageData Source

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.

Constructors

ImageData !Int !Int !(Vector Word8) 

Instances

blank-canvas Extensions

Reading from Canvas

newImage :: Text -> Canvas CanvasImage Source

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.

data CanvasImage Source

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

Instances

DeviceContext attributes

devicePixelRatio :: DeviceContext -> Float Source

CanvasContext, and off-screen Canvas.

data CanvasContext Source

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

Instances

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

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

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

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

myCanvasContext :: Canvas CanvasContext Source

myCanvasContext returns the current CanvasContent.

deviceCanvasContext :: DeviceContext -> CanvasContext Source

Debugging

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

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

eval :: Text -> Canvas () Source

eval executes the argument in JavaScript directly.

class JSArg a where Source

Methods

showJS :: a -> String Source

Instances

Drawing Utilities

clearCanvas :: Canvas () Source

Clear the screen. Restores the default transformation matrix.

saveRestore :: Canvas () -> Canvas () Source

Wrap a canvas computation in save / restore.

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

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

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

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

Events

trigger :: Event -> Canvas () Source

trigger a specific named event, please.

eventQueue :: DeviceContext -> EventQueue Source

A single (typed) event queue

wait :: DeviceContext -> IO Event Source

wait for any event. blocks.

flush :: DeviceContext -> IO [Event] Source

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

data Event Source

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

Constructors

Event 

Fields

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

Instances

type EventName = Text Source

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

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

type EventQueue = TChan Event Source

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

Middleware

local_only :: Middleware Source