API

blank-canvas is a set of bindings to the HTML5 Canvas API

Hackage Documentation

The HTML5 Canvas operations are transliterations of the JavaScript API. A good starting point is a HTML5 Canvas Cheat Sheet, the HTML5 tutorials, or the Mozilla Canvas tutorial.

The Canvas monad forms a JavaScript/Canvas DSL, and we, where possible, stick to the JavaScript idioms. So a method call with no arguments takes a unit, a method call that takes 3 JavaScript numbers will take a 3-tuple of Floats, etc. When there is a var-args JavaScript function, we use lists, as needed (it turns out that all var-args functions take a variable number of JavaScript numbers.)

Here are the main Canvas monadic functions, in both JavaScript and Haskell.

Canvas element

Attributes

Canvas Attributes	Haskell Idiom
width unsigned long	(width,_) <- size
height unsigned long	(_,height) <- size
(..).width, (..).height	size :: Canvas (Float,Float)

Note that size always returns the same values; we do not support dynamic re-sizing.

Methods

Canvas Method	Haskell Type
string toDataURL()	() -> Canvas Text

2D Context

Methods

Context Method	Haskell Type
void save()	() -> Canvas ()
void restore()	() -> Canvas ()

Transformation

Methods

Context Method	Haskell Type
void scale(float x,float y)	(Float, Float) -> Canvas ()
void rotate(float angle)	Float -> Canvas ()
void translate(float x,float y)	(Float, Float) -> Canvas ()
void transform(float m11, float m12, float m21, float m22, float dx, float dy)	(Float, Float, Float, Float, Float, Float) -> Canvas ()
void setTransform(float m11, float m12,float m21, float m22, float dx, float dy)	(Float, Float, Float, Float, Float, Float) -> Canvas ()

Image drawing

Methods

Context Method	Haskell Type
void drawImage(Object image, float dx, float dy, [Optional] float dw, float dh)	Image image => (image, [Float]) -> Canvas ()
void drawImage(Object image, float sx, float sy, float sw, float sh, float dx, float dy, float dw, float dh)	Image image => (image, [Float]) -> Canvas ()

Compositing

Attributes

Context Attribute	Haskell Type
globalAlpha float	Float -> Canvas ()
globalCompositeOperation string	Text -> Canvas ()

Line styles

Attributes

Context Attribute	Haskell Type
lineWidth float	Float -> Canvas ()
lineCap string	Text -> Canvas ()
lineJoin string	Text -> Canvas ()
miterLimit float	Float -> Canvas ()

Colors, styles and shadows

Attributes

Context Attribute	Haskell Type
strokeStyle any	Text -> Canvas () -- see note below
fillStyle any	Text -> Canvas () -- see note below
shadowOffsetX float	Float -> Canvas ()
shadowOffsetY float	Float -> Canvas ()
shadowBlur float	Float -> Canvas ()
shadowColor string	Text -> Canvas ()

Overloaded Style Attributes

Note: We also support an overloaded strokeStyle and fillStyle, by importing the Style module.

import qualified Graphics.Blank.Style as Style

Context Attribute	Haskell Type
strokeStyle any	Style style => style -> Canvas ()
fillStyle any	Style style => style -> Canvas ()

The reason these generalized versions are not exported by default is that they clash with the overloaded strings used by Text.

Methods

Context Method	Haskell Type
createLinearGradient	(Float, Float, Float, Float) -> Canvas CanvasGradient
createRadialGradient	(Float, Float, Float, Float, Float, Float) -> Canvas CanvasGradient
createPattern	(CanvasImage, Text) -> Canvas CanvasPattern
addColorStop	(Float, Text) -> CanvasGradient -> Canvas ()

Paths

Attributes

Context Method	Haskell Type
beginPath	() -> Canvas ()
closePath	() -> Canvas ()
fill	() -> Canvas ()
stroke	() -> Canvas ()
clip	() -> Canvas ()
moveTo	(Float, Float) -> Canvas ()
lineTo	(Float, Float) -> Canvas ()
quadraticCurveTo	(Float, Float, Float, Float) -> Canvas ()
bezierCurveTo	(Float, Float, Float, Float, Float, Float) -> Canvas ()
arcTo	(Float, Float, Float, Float, Float) -> Canvas ()
arc	(Float, Float, Float, Float, Float, Bool) -> Canvas ()
rect	(Float, Float, Float, Float) -> Canvas ()
isPointInPath	(Float, Float) -> Canvas Bool

Text

Attributes

Context Method	Haskell Type
font	Text -> Canvas ()
textAlign	Text -> Canvas ()
textBaseline	Text -> Canvas ()
fillText	(Text, Float, Float) -> Canvas ()
strokeText	(Text, Float, Float) -> Canvas ()
measureText	Text -> Canvas TextMetrics

###Rectangles

Attributes

Context Method	Haskell Type
clearRect	(Float, Float, Float, Float) -> Canvas ()
fillRect	(Float, Float, Float, Float) -> Canvas ()
strokeRect	(Float, Float, Float, Float) -> Canvas ()

Pixel manipulation

Attributes

Context Method	Haskell Type
createImageData	(Int, Int) -> ImageData
getImageData	(Float, Float, Float, Float) -> Canvas ImageData
putImageData	(ImageData, [Float]) -> Canvas ()

Extensions

Context Method	Haskell Type
newImage	Text -> Canvas CanvasImage
newCanvas	(Int, Int) -> Canvas CanvasContext

Events

| trigger | Event -> Canvas () | | eventQueue | Context -> EventQueue | | wait | Context -> IO Event | | tryGet | Context -> IO (Maybe Event) | | flush | Context -> IO [Event] |