NAME

IWL::Canvas - a canvas widget

INHERITANCE

IWL::Error -> IWL::Object -> IWL::Widget -> IWL::Canvas

DESCRIPTION

The canvas widget provides a canvas element for rendering dynamic bitmap images

CONSTRUCTOR

IWL::Canvas->new ([%ARGS])

Where %ARGS is an optional hash parameter with with key-values.

METHODS

setWidth (WIDTH)

Sets the width of the canvas

Parameter: WIDTH - the width to use

setHeight (HEIGHT)

Sets the height of the canvas

Parameter: HEIGHT - the height to use

setDimensions (WIDTH, HEIGHT)

Sets the width and height of the canvas

Parameters: WIDTH - the width of the canvas, HEIGHT - the height of the canvas

Drawing Methods

The names of the following methods reflect the reference names of methods and properties of the HTML5 Canvas element

getContext ([TYPE, NAME])

Gets the canvas drawing context for a given type

Parameters: TYPE - the type of the context. Defaults to 2d, NAME - optional name for the desired context

Context properties

All context properties can optionally receive the current context name as their last parameter

fillStyle (COLOR)

Sets the color for fill operations

Parameters: COLOR - the fill color. Can be one of the following:

#RRGGBB

A string, representing a hex RGB color

Red, Green, Blue

An array, where every element represents a value between 0 - 255

Red, Green, Blue, Alpha

Same as above, but the Alpha is a float number between 0 - 1

GRADIENT_NAME/PATTERN_NAME

The name of an existing gradient or pattern object

globalAlpha (VALUE)

Sets the global alpha value of the canvas' context

Parameters: VALUE - a float, between 0 - 1, indicating the global alpha values

globalCompositeOperation (TYPE)

Determines the way the canvas is drawn relative to any background content.

Parameters: TYPE - a string type, can be one of the following:

copy

Displays the source image instead of the destination image.

darker

Display the sum of the source image and destination image, with color values approaching 0 as a limit.

destination-atop

Display the destination image wherever both images are opaque. Display the source image wherever the source image is opaque but the destination image is transparent.

destination-in

Display the destination image wherever both the destination image and source image are opaque. Display transparency elsewhere.

destination-out

Display the destination image wherever the destination image is opaque and the source image is transparent. Display transparency elsewhere.

destination-over

Display the destination image wherever the destination image is opaque. Display the source image elsewhere.

lighter

Display the sum of the source image and destination image, with color values approaching 1 as a limit.

source-atop

Display the source image wherever both images are opaque. Display the destination image wherever the destination image is opaque but the source image is transparent. Display transparency elsewhere.

source-in

Display the source image wherever both the source image and destination image are opaque. Display transparency elsewhere.

source-out

Display the source image wherever the source image is opaque and the destination image is transparent. Display transparency elsewhere.

source-over

Display the source image wherever the source image is opaque. Display the destination image elsewhere. Default

xor

Exclusive OR of the source and destination images. Works only with black and white images and is not recommended for color images.

lineCap (TYPE)

Sets the end style of drawn lines

Parameters: TYPE - a string type, can be one of the following:

butt

Flat end, perpendicular to the line. Default

round

Round end

square

Square end

lineJoin (TYPE)

Sets the join style between lines

Parameters: TYPE - a string type, can be one of the following:

round

Round joins

bevel

Beveled joins

miter

Miter joins. Default

lineWidth (VALUE)

Sets the width of drawn lines

Parameters: VALUE - a float, greater than 0, which determines the width of the drawn line, in units of the coordinate space

miterLimit (VALUE)

Sets the miter limit, which specifies how the canvas draws the juncture between connected line segments

Parameters: VALUE - a float value

shadowBlur (VALUE)

Sets the width that a shadow can cover.

Parameters: VALUE - a positive float value, in units of coordinate space

Note: Only supported by Safari

shadowColor (COLOR)

Sets the color for shadows

Parameters: COLOR - the shadow color. Can be one of the following:

#RRGGBB

A string, representing a hex RGB color

Red, Green, Blue

An array, where every element represents a value between 0 - 255

Red, Green, Blue, Alpha

Same as above, but the Alpha is a float number between 0 - 1

Note: Only supported by Safari

shadowOffsetX (VALUE)

Sets the X offset of a shadow

Parameters: VALUE - the X offset of the shadow, in units of coordinate space

Note: Only supported by Safari

shadowOffsetY (VALUE)

Sets the Y offset of a shadow

Parameters: VALUE - the Y offset of the shadow, in units of coordinate space

Note: Only supported by Safari

strokeStyle (COLOR)

Sets the color for stroke operations

Parameters: COLOR - the shadow color. Can be one of the following:

#RRGGBB

A string, representing a hex RGB color

Red, Green, Blue

An array, where every element represents a value between 0 - 255

Red, Green, Blue, Alpha

Same as above, but the Alpha is a float number between 0 - 1

GRADIENT_NAME/PATTERN_NAME

The name of an existing gradient or pattern object

Context methods

All context methods can optionally receive the current context name as their last parameter

Area methods

fillRect (X, Y, WIDTH, HEIGHT)

Paints a rectangular area

Parameters: (X, Y) - the X and Y coordinates of a point of the rectangular area, WIDTH - the width of the rectangular area, HEIGHT - the height

strokeRect (X, Y, WIDTH, HEIGHT)

Paints a rectangular outline

Parameters: (X, Y) - the X and Y coordinates of a point of the rectangular outline, WIDTH - the width of the rectangular outline, HEIGHT - the height

clearRect (X, Y, WIDTH, HEIGHT)

Clears a rectangular area and makes it fully transparent

Parameters: (X, Y) - the X and Y coordinates of a point of the rectangular area, WIDTH - the width of the rectangular area, HEIGHT - the height

Path methods

beginPath

Creates a new path in the canvas

stroke

Strokes the current path

fill

Fills the current path

closePath

Closes the current path

moveTo (X, Y)

Moves the path position to the given point

Parameters: (X, Y) - the X and Y coordinates of the point

lineTo (X, Y)

Creates a new line from the current path position to the given point

Parameters: (X, Y) - the X and Y coordinates of the point

arc (X, Y, RADIUS, START_ANGLE, END_ANGLE, CLOCKWISE)

Creates a new arc from the current path position.

Parameters: (X, Y) - the X and Y coordinates of the center of the arc, RADIUS - the radius of the arc, START_ANGLE - the starting angle, measured in radians, END_ANGLE - the ending angle, measured in radians, CLOCKWISE - boolean, if true, the arc will be drawn in a clockwise direction

arcTo (X1, Y1, X2, Y2, RADIUS)

Creates a new arc from the current path position, using a radius and tangent points

Parameters: (X1, Y1) - the X and Y coordinates of the end point of a line between the it and the current path position, (X2, Y2) - the X and Y coordinates of the end point of a line between it and (X2, Y2), RADIUS - the radius of the arc

Note: Not supported by Internet Explorer

rect (X, Y, WIDTH, HEIGHT)

Creates a new rectangle to the path

Parameters: (X, Y) - the X and Y coordinates of a point of the rectangle, WIDTH - the width of the rectangle, HEIGHT - the height

quadraticCurveTo (CPX, CPY, X, Y)

Creates a new quadratic curve from the current path position

Parameters: (CPX, CPY) - the X and Y coordinates of the control point of the curve, (X, Y) - the X and Y coordinates of the end point of the curve

bezierCurveTo (CP1X, CP1Y, CP2X, CP2Y, X, Y)

Creates a new bezier curve from the current path position

Parameters: (CP1X, CP1Y) - the X and Y coordinates of the first control point of the curve, (CP2X, CP2Y) - the X and Y coordinates of the second control point of the curve, (X, Y) - the X and Y coordinates of the end point of the curve

clip

Sets the current path as a clipping path

Note: Not supported by Internet Explorer

Image methods

drawImage (IMAGE, X, Y, [WIDTH, HEIGHT, DX, DY, DWIDTH, DHEIGHT])

Draws an image

Parameters: IMAGE - The image to draw, this can be an IWL::Image or IWL::Canvas, or an image/canvas ID, (X, Y) - the X and Y coordinates where the image should be placed, WIDTH - the desired width of the image, HEIGHT - the desired height. If the following parameters are specified, the previous four parameters describe what portion of the image should be used, and the next four parameters describe the position and size of the slice when set on the canvas

Gradient methods

createLinearGradient (X1, Y1, X2, Y2, [GRADIENT_NAME])

Creates a linear gradient object. The object can be assigned as a parameter to the IWL::Canvas::fillStyle(3pm) and IWL::Canvas::strokeStyle(3pm) methods

Parameters: (X1, Y1) and (X2, Y2) represent the X and Y coordinates of the rectangular region, which will be filled by a gradient, GRADIENT_NAME - the optional name of the gradient object. Defaults to gradient

createRadialGradient (X1, Y1, R1, X2, Y2, R2, [GRADIENT_NAME])

Creates a radial gradient object. The object can be assigned as a parameter to the IWL::Canvas::fillStyle(3pm) and IWL::Canvas::strokeStyle(3pm) methods

Parameters: (X1, Y1) and (X2, Y2) represent the X and Y coordinates of the center points of the two circles, which define the radial region to be filled by a gradient, R1 and R2 - represent the radii of those circles, GRADIENT_NAME - the optional name of the gradient object. Defaults to gradient

Note: Not supported by Internet Explorer

addColorStop (OFFSET, COLOR, [GRADIENT_NAME])

Sets a color point to the gradient

Parameters: OFFSET - a float value, between 0 - 1, defines the offset of the color within the gradient, COLOR - the point color. Can be one of the following:

Note: This method does not require the context name as a last parameter

#RRGGBB

A string, representing a hex RGB color

Red, Green, Blue

An array, where every element represents a value between 0 - 255

Red, Green, Blue, Alpha

Same as above, but the Alpha is a float number between 0 - 1

GRADIENT_NAME - the optional gradient name of a gradient object, which has already been created

Pattern methods

createPattern (IMAGE, REPETITION, [PATTERN_NAME])

Creates a pattern object. The object can be assigned as a parameter to the IWL::Canvas::fillStyle(3pm) and IWL::Canvas::strokeStyle(3pm) methods

Parameters: IMAGE - The image to draw, this can be an IWL::Image or IWL::Canvas, or an image/canvas ID, REPETITION - a string value, can be one of the following:

repeat

Repeat the image in both the X and Y directions.

repeat-x

Repeat the image in the X direction.

repeat-y

Repeat the image in the Y direction.

no-repeat

Does not repeat the image

PATTERN_NAME - the optional name of the pattern object. Defaults to pattern

Note: Not supported by Internet Explorer

Canvas state methods

save

Saves the canvas state

restore

Restores the canvas state to the most recent saved state

translate (X, Y)

Translates the origin of the canvas to a new point

Parameters: (X, Y) - the point where the origin of the canvas should be moved to

rotate (ANGLE)

Rotates the canvas around the origin

Parameters: ANGLE - the angle of translation, in radians

scale (X, Y)

Scales the canvas from the origin

Parameters: (X, Y) - the horizontal and vertical scaling factors

LICENCE AND COPYRIGHT

Copyright (c) 2006-2007 Viktor Kojouharov. All rights reserved.

This module is free software; you can redistribute it and/or modify it under the same terms as Perl itself. See perldoc perlartistic.

This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.

cpanm IWL

perl -MCPAN -e shell
install IWL