Sterling's Canvas Games

Understanding Documentation

Function Parameters

Parameter that have no pipes(|) around them are required values. Parameters with pipes around them are optional.

Serialize & Deserialize

Crappy Canvas' Serialize and Deserialize allow an easy and effective way to convert objects into strings and back again. This is useful to package data in a small string that still holds every needed value. Crappy Canvas also gives all Objects a built-in serialize function called like object.serialize().

Serialize

Objects can be easily converted to a string using the serialize() function.

...
//Basic Object
function Column(a, b){
	this.a = a;
	this.b = b;
}
var a = new Column(3,4);
console.log(a)
//Serialize the object instance
var string = serialize
console.log(string);
console.log("Continued On The Deserialize Section");
...
...
...
...
...
...
...
...
[object Object]
...
...
"{"a":3,"b":4,"#":"Column"}"
Continued On The Deserialize Section
...

Deserialize

Serializing wouldn't prove to be very useful unless you had a way to turn the string into an object again. Luckily I thought of that and created the deserialize() function. You can receive the same result by calling the deserialize function from the string like string.desrialize().

...
b = deserialize(string);
console.log(b);
...
...
...
[object Object]
...

Advanced Canvas Setup

The library's Advanced Canvas Setup allow users to create a canvas element with any properties they want in one simple function. The function AdvancedCanvas has five paramters: length, width, id, HTML Element to append, and a keyed list of other properties to include. Crappy Canvas uses the variable c and cx for the canvas context and canvas element respectively.

AdvancedCanvas(width,height,id,parent,|{"key":"value"}|)

//Initialize array for extra attributes
atts = {"key":"value","style":["borderRadius":"32px"]};
//Use the Advanced Canvas Function
AdvancedCanvas(500,500,"canv",document.body,atts);

Rectangle Object

The rectangle object is a very powerful tool that allows users a variety of abilities such as checking for overlapping rectangles, check if a point is in a rectangle as well as return a random point in a rectangle.

Creating a Rectangle

The Rectangle constructor requires 4 parameters: x Position, y Position, width, height. This returns a rectangle of the specified width, height and location.

Rectangle Info Functions

rectangle.getRPoint(): Returns a random point within the recatangle.

rectangle.inRect(x,y): Returns a boolean value telling if a point is in the rectangle or not.

rectangle1.overlap(rectangle2): Returns boolean value based on whether or not two rectangles are overlapping

Graphics

rectangle.draw(|color|, |context|)