haste-compiler-0.5.5.0: Haskell To ECMAScript compiler

Safe HaskellNone
LanguageHaskell98

Haste.Graphics.Canvas

Contents

Description

Basic Canvas graphics library.

Synopsis

Basic types and classes

data Bitmap

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

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.

data Shape a

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

data Picture a

A picture that can be drawn onto a canvas.

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

data AnyImageBuffer where

Constructors

AnyImageBuffer :: ImageBuffer a => a -> 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.

drawScaled :: a -> Rect -> Picture ()

Draw the image buffer within given rectangle.

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.

Obtaining a canvas

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)

Deprecated: use the more general fromElem instead.

Create a 2D drawing context from a DOM element.

createCanvas :: MonadIO m => Int -> Int -> m Canvas

Create an off-screen buffer of the specified size.

Rendering and reading canvases

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.

Colors and opacity

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.

Matrix operations

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.

Drawing shapes

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.

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

Draw the given picture using a new line width.

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.

Rendering text

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.

Extending the library

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.