Wes Mantooth - HTML5 Canvas Game Engine - Version 2.x - by Jeremy Heminger

Classes organised alphabetically

Canvas

This class handles and simplifies much of the drawing

init -> {Integer || Function}

creates the canvas tag, initializes the context and returns an ID that referenes the current canvas

Name Type Description
$t Object a DOM object to append the canvas to
example: document.getElemetById("target")
(optional) defaults to the <body> tag
w Number The width of the canvas
(optional) defaults to browser window innerWidth
h Number The height of the canvas
(optional) defaults to browser window innerHeight
callback Function (optional) a callback function that returns the canvas ID

circle -> {Void}

creates a circle ( filled, stroke or both )

Name Type Description
iIntegerreference to the canvas
xNumberx coordinate
yNumbery coordinate
radius Number the radius of the circle
colorStringa hexadecimal color example: ( #000000 )
opacityFloat( 0 - 1 )
fintBooleanif true float-point numbers for coordinates will be converted to whole integer
( default is true )

arc -> {Void}

creates a basic arc

Name Type Description
iIntegerreference to the canvas
xNumberx coordinate
yNumbery coordinate
radius Number the radius of the circle
s Number start angle
e Number end angle
cc Boolean if true the arc is drawn counter-clockwize
colorStringa hexadecimal color example: ( #000000 )
fintBooleanif true float-point numbers for coordinates will be converted to whole integer
( default is true )

qArc -> {Void}

creates a quadratic curve

Name Type Description
iIntegerreference to the canvas
x1Numberx1 coordinate
y1Numbery1 coordinate
x2Numberx2 coordinate
y2Numbery2 coordinate
x3Numberx3 coordinate
y3Numbery3 coordinate
colorStringa hexadecimal color example: ( #000000 )
fintBooleanif true float-point numbers for coordinates will be converted to whole integer
( default is true )

bArc -> {Void}

creates a bezier curve

Name Type Description
iIntegerreference to the canvas
x1Numberx1 coordinate
y1Numbery1 coordinate
x2Numberx2 coordinate
y2Numbery2 coordinate
x3Numberx3 coordinate
y3Numbery3 coordinate
x4Numberx4 coordinate
y4Numbery4 coordinate
colorStringa hexadecimal color example: ( #000000 )
fintBooleanif true float-point numbers for coordinates will be converted to whole integer
( default is true )

text -> {Void}

draws text to the canvas

Name Type Description
iIntegerreference to the canvas
xNumberx coordinate
yNumbery coordinate
txt String the text to display
mEnumstroke, fill
font String [font-size] [font-family] [font-style]
24px Arial italic
colorStringa hexadecimal color example: ( #000000 )
fintBooleanif true float-point numbers for coordinates will be converted to whole integer
( default is true )

line -> {Void}

draws a line to the canvas

Name Type Description
iIntegerreference to the canvas
x1Numberx1 coordinate
y1Numbery1 coordinate
x2Numberx2 coordinate
y2Numbery2 coordinate
colorStringa hexadecimal color example: ( #000000 )
lineWidth Number
fintBooleanif true float-point numbers for coordinates will be converted to whole integer
( default is true )

rectangle -> {Void}

draws a rectangle to the canvas

Name Type Description
iIntegerreference to the canvas
x1Numberx1 coordinate
y1Numbery1 coordinate
x2Numberx2 coordinate note: this is relative to the x1 coordinate
y2Numbery2 coordinate note: this is relative to the y1 coordinate
colorStringa hexadecimal color example: ( #000000 )
mEnumstroke, fill
acolorStringa hexadecimal color example: ( #000000 )
opacityFloat( 0 - 1 )
fintBooleanif true float-point numbers for coordinates will be converted to whole integer
( default is true )

roundRectangle -> {Void}

draws a round rectangle to the canvas

Name Type Description
iIntegerreference to the canvas
xNumberx coordinate
yNumbery coordinate
width Number width of the rectangle
height Number height of rectangle
colorStringa hexadecimal color example: ( #000000 )
mEnumstroke, fill
acolorStringa hexadecimal color example: ( #000000 )
opacityFloat( 0 - 1 )
fintBooleanif true float-point numbers for coordinates will be converted to whole integer
( default is true )

polygon -> {Void}

draws a polygon to the canvas

Name Type Description
iIntegerreference to the canvas
a Array a two dimensional array containing the coordinates of the polygon
[ [ x,y ],[ x,y ],[ x,y ] ]
colorStringa hexadecimal color example: ( #000000 )
mEnumstroke, fill
acolorStringa hexadecimal color example: ( #000000 )
opacityFloat( 0 - 1 )
fintBooleanif true float-point numbers for coordinates will be converted to whole integer
( default is true )

image -> {Void}

draws a bitmap image to the canvas

Name Type Description
iIntegerreference to the canvas
obj Object
Name Type Description
img String path to an image file: ( *.jpg, *.gif, *.png )
sx Number start x coord of section to be drawn
sy Number start y coord of section to be drawn
sWidth Number
sHeight Number
dx Number
dy Number
dWidth Number
dHeight Number
fintBooleanif true float-point numbers for coordinates will be converted to whole integer
( default is true )

clear -> {Void}

clears the referenced canvas

Name Type Description
iIntegerreference to the canvas
save Boolean

zIndex -> {Void}

Sets the z-index of the target canvas

Name Type Description
iIntegerreference to the canvas
z Integer

get -> {Object}

gets the referenced canvas or context

Name Type Description
iIntegerreference to the canvas
o Enum canvas, ctx

pop -> {Void}

remove last context

set_error -> {Void}

appends an error message to an array

Name Type Description
e String The error message

has_error -> {Void}

if errors exist they are dumped to the console