Haste.Graphics.Canvas

Basic Canvas graphics library.

Documentation

data Bitmap

A bitmap, backed by an IMG element. JS representation is a reference to the backing IMG element.

Instances

FromAny Bitmap

ToAny Bitmap

IsElem Bitmap

ImageBuffer Bitmap

data Canvas

A canvas; a viewport into which a picture can be rendered. The origin of the coordinate system used by the canvas is the top left corner of the canvas element. JS representation is a reference to the backing canvas element.

Instances

FromAny Canvas

ToAny Canvas

IsElem Canvas

ImageBuffer Canvas

data Shape a

A shape which can be either stroked or filled to yield a picture.

Instances

Monad Shape

Functor Shape

Applicative Shape

data Picture a

A picture that can be drawn onto a canvas.

Instances

Monad Picture

Functor Picture

Applicative Picture

type Point = (Double, Double)

A point in the plane.

type Vector = (Double, Double)

A two dimensional vector.

type Angle = Double

An angle, given in radians.

data Rect

A rectangle.

Constructors

Rect

Fields

rect_x :: !Double

rect_y :: !Double

rect_w :: !Double

rect_h :: !Double

data Color

A color, specified using its red, green and blue components, with an optional alpha component.

Constructors

RGB !Int !Int !Int

RGBA !Int !Int !Int !Double

data Ctx

A drawing context; part of a canvas. JS representation is the drawing context object itself.

Instances

FromAny Ctx

ToAny Ctx

data AnyImageBuffer where

Constructors

AnyImageBuffer :: ImageBuffer a => a -> AnyImageBuffer

Instances

ImageBuffer AnyImageBuffer

class ImageBuffer a where

Any type that contains a buffered image which can be drawn onto a canvas.

Methods

draw :: a -> Point -> Picture ()

Draw the image buffer with its top left corner at the specified point.

drawClipped :: a -> Point -> Rect -> Picture ()

Draw a portion of the image buffer with its top left corner at the specified point.

Instances

ImageBuffer Canvas

ImageBuffer AnyImageBuffer

ImageBuffer Bitmap

class BitmapSource src where

Any type that can be used to obtain a bitmap.

Methods

loadBitmap :: MonadIO m => src -> m Bitmap

Load a bitmap from some kind of bitmap source.

Instances

BitmapSource URL

BitmapSource Elem

getCanvasById :: MonadIO m => String -> m (Maybe Canvas)

Create a 2D drawing context from a DOM element identified by its ID.

getCanvas :: MonadIO m => Elem -> m (Maybe Canvas)

Create a 2D drawing context from a DOM element.

createCanvas :: Int -> Int -> IO Canvas

Create an off-screen buffer of the specified size.

render :: MonadIO m => Canvas -> Picture a -> m a

Clear a canvas, then draw a picture onto it.

renderOnTop :: MonadIO m => Canvas -> Picture a -> m a

Draw a picture onto a canvas without first clearing it.

buffer :: MonadIO m => Int -> Int -> Picture () -> m Bitmap

Create a new off-screen buffer and store the given picture in it.

toDataURL :: MonadIO m => Canvas -> m URL

Generate a data URL from the contents of a canvas.

setStrokeColor :: Color -> Picture ()

Set a new color for strokes.

setFillColor :: Color -> Picture ()

Set a new fill color.

color :: Color -> Picture () -> Picture ()

Draw the given Picture using the specified Color for both stroke and fill, then restore the previous stroke and fill colors.

opacity :: Double -> Picture () -> Picture ()

Draw a picture with the given opacity.

lineWidth :: Double -> Picture () -> Picture ()

Draw the given picture using a new line width.

translate :: Vector -> Picture () -> Picture ()

Draw the specified picture using the given point as the origin.

scale :: Vector -> Picture () -> Picture ()

Draw the specified picture scaled as specified by the scale vector.

rotate :: Double -> Picture () -> Picture ()

Draw the specified picture rotated r radians clockwise.

stroke :: Shape () -> Picture ()

Draw the contours of a shape.

fill :: Shape () -> Picture ()

Draw a filled shape.

clip :: Shape () -> Picture () -> Picture ()

Draw a picture clipped to the given path.

line :: Point -> Point -> Shape ()

Draw a line between two points.

path :: [Point] -> Shape ()

Draw a path along the specified points.

rect :: Point -> Point -> Shape ()

Draw a rectangle between the two given points.

circle :: Point -> Double -> Shape ()

Draw a circle shape.

arc :: Point -> Double -> Angle -> Angle -> Shape ()

Draw an arc. An arc is specified as a drawn portion of an imaginary circle with a center point, a radius, a starting angle and an ending angle. For instance, arc (0, 0) 10 0 pi will draw a half circle centered at (0, 0), with a radius of 10 pixels.

font :: String -> Picture () -> Picture ()

Draw a picture using a certain font. Obviously only affects text.

text :: Point -> String -> Picture ()

Draw some text onto the canvas.

withContext :: (Ctx -> IO a) -> Picture a

Perform a computation over the drawing context of the picture. This is handy for operations which are either impossible, hard or inefficient to express using the Haste.Graphics.Canvas API.