Skip to content
Andy Gill edited this page Jun 18, 2014 · 42 revisions

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] |

Clone this wiki locally