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

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

Datatypes in blank-canvas

Size Types (things with a width and height)

class Size Datatypes	class Image	Producer	Consumer	Notes
Context		blankCanvas	send	The main Graphics Context. Contains the default CanvasContext
CanvasImage	✅	newImage	drawImage	A first-class image handle
CanvasContext	✅	newContext myContext deviceCanvasContext	with	A first-class offscreen canvas handle
ImageData		createImageData getImageData	putImageData	An unsigned byte 'Vector' of raw image data

Style Types (drawing style)

class Style is used by strokeStyle and fillStyle.

class Style Datatype	Producer	Notes
CanvasPattern	createPattern	A pattern from an Image
CanvasGradient	createLinearGradient createRadialGradient	A gradient pattern
Text	"literal string"	"red" is monochromatic style

Note that the monomorphic versions of strokeStyle and fillStyle are imported by default (only work with Text); you need to import Graphics.Blank.Style to get the overloaded versions.

Canvas element

Attributes

Canvas Attributes	Haskell Projector
width unsigned long	width :: (Size a, Num b) => a -> b
height unsigned long	height :: (Size a, Num b) => a -> b

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.strokeStyle :: Style style => style -> Canvas ()
fillStyle any	Style.fillStyle :: 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 x0, float y0, float x1, float y1)	(Float, Float, Float, Float) -> Canvas CanvasGradient
createRadialGradient(float x0, float y0, float r0, float x1, float y1, float r1)	(Float, Float, Float, Float, Float, Float) -> Canvas CanvasGradient
createPattern(Object image, string repetition)	Image image => (image, Text) -> Canvas CanvasPattern

CanvasGradient Method	Haskell Type
addColorStop(float offset, string color)	(Float, Text) -> CanvasGradient -> Canvas ()

Note that addColorStop is in the Canvas monad, and takes CanvasGradient as its argument.

Paths

Methods

Context Method	Haskell Type
beginPath()	() -> Canvas ()
closePath()	() -> Canvas ()
fill()	() -> Canvas ()
stroke()	() -> Canvas ()
clip()	() -> Canvas ()
moveTo(float x, float y)	(Float, Float) -> Canvas ()
lineTo(float x, float y)	(Float, Float) -> Canvas ()
quadraticCurveTo(float cpx, float cpy,float x, float y )	(Float, Float, Float, Float) -> Canvas ()
bezierCurveTo(float cp1x, float cp1y, float cp2x, float cp2y, float x, float y )	(Float, Float, Float, Float, Float, Float) -> Canvas ()
arcTo(float x1, float y1, float x2, float y2, float radius )	(Float, Float, Float, Float, Float) -> Canvas ()
arc(float x, float y, float radius, float startAngle, float endAngle, boolean anticlockwise)	(Float, Float, Float, Float, Float, Bool) -> Canvas ()
rect(float x, float y, float w, float h)	(Float, Float, Float, Float) -> Canvas ()
isPointInPath(float x, float y)	(Float, Float) -> Canvas Bool

Text

Attributes

Context Method	Haskell Type
font string	Text -> Canvas ()
textAlign string	Text -> Canvas ()
textBaseline string	Text -> Canvas ()

Methods

Context Method	Haskell Type
fillText(string text, float x, float y,[Optional] float maxWidth)	(Text, Float, Float) -> Canvas ()
strokeText(string text, float x, float y,[Optional] float maxWidth)	(Text, Float, Float) -> Canvas ()
measureText(string text)	Text -> Canvas TextMetrics

TextMetrics Attributes	Haskell Type
width float	.. use pattern matching on TextMetrics ..

###Rectangles

Methods

Context Method	Haskell Type
clearRect(float x, float y, float w, float h)	(Float, Float, Float, Float) -> Canvas ()
fillRect(float x, float y, float w, float h)	(Float, Float, Float, Float) -> Canvas ()
strokeRect(float x, float y, float w, float h)	(Float, Float, Float, Float) -> Canvas ()

Pixel manipulation

Methods

Context Method	Haskell Type
createImageData(float sw, float sh)	(Int, Int) -> ImageData
createImageData(ImageData imagedata)	(Not needed; Haskell values are immutable)
getImageData(float sx, float sy, float sw, float sh)	(Float, Float, Float, Float) -> Canvas ImageData
putImageData(ImageData imagedata,float dx, float dy,[Optional] float dirtyX, float dirtyY , float dirtyWidth, float dirtyHeight)	(ImageData, [Float]) -> Canvas ()

Note that createImageData does not use the Canvas monad, because the ImageData lives on the Haskell side.

ImageData Attributes	Haskell Type
width unsigned long	width :: (Size a, Num b) => a -> b -- or pattern matching
height unsigned long	height :: (Size a, Num b) => a -> b -- or pattern matching
data CanvasPixelArray	.. use pattern matching on ImageData ..

data ImageData = ImageData !Int !Int !(Vector Word8) deriving (Show, Eq, Ord)

Extensions

JavaScript	Haskell Type
new Image()	Text -> Canvas CanvasImage
document.createElement('canvas')	newCanvas :: (Int, Int) -> Canvas CanvasContext
	with :: CanvasContext -> Canvas a -> Canvas a
	myContext :: Canvas CanvasContext