This is the documentation for DGLib javascript graphics library.

Installation

This is a graphics library meant to provide tools for javascript programmers to manage the content of canvas elements on HTML pages. As so, it doesn't do anything for it self and requires no instalation. All you have to do is include mootools and the js file for DGLib on your HTML head before your scripts in this order:

note: As you might have already noticed, this library has a dependency on mootools. So it has to be included before DGLib.js. Mootools 1.2.4 is included on the DGLib package in it's compressed version but be sure to check out http://mootools.net/ for new versions and documentation.

And that's about it!

Usage

The functionalities are all encapsulated on an object named DGlib. That means you can call all the methods from this object for example: DGlib.selectCanvas("myCanvas");

The first method to be called should be DGlib.selectCanvas() in order to select witch canvas you want to affect with the next drawing method calls. To switch between canvas elements in the page you only need to call DGlib.selectCanvas() again with the new canvas id as an argument.

All the methods in DGlib require a canvas to be selected and to select a canvas you have to make sure that the canvas element is allready loaded in the DOM. For that I recommend running your script on the domReady event of mootools or the standard .

Color attributes are all strings constructed according to the javascript color formats like 'rgb(255,0,0)' or 'rgba(255,255,255,0.5)' or 'hsl(0,100%,100%)'.

Method description:

DGlib.selectCanvas(canvasID)

Switches between canvas to draw

Example: DGlib.selectCanvas("canvasTest");

DGlib.setCanvasSize(width, height)

Sets the current canvas size. Should be set before drawing. The arguments can be numbers (pixels) or strings like ('100%').

Example: DGlib.setCanvasSize('100%', 300);

DGlib.drawRect(pointAndSize, color, mode)

Draws a rectangle on the current canvas
Arguments are:
- An array of 4 values [topLeftCoordX, topLeftCoordY, Width, Height],
- A string for the color,
- A mode string that can have the values 'fill', 'stroke' or "both". IF 'both' IS USED, COLOR WILL HAVE TO BE AN ARRAY OF TWO COLORS, [stroke, fill]

Example: DGlib.drawRect([0, 0, '100%', '100%'], 'rgb(0,0,0)', 'stroke');

DGlib.drawPoly(points, color, thickness, closeShape, mode)

Draws a polygon or a line on the current selected canvas
arguments are:
- Array of points by witch the stroke line will pass (being each point an array of two numbers representing x and y values),
(NOTE: the coordinates can be either pixel values or percentages)
- A string for the color,
- A number with the thickness of the stroke line
- A boolean (closeShape) saying if you want to close the line into a shape
- A mode, could be "stroke" or "fill" or "both". IF 'both' IS USED, COLOR WILL HAVE TO BE AN ARRAY OF TWO COLORS, [stroke, fill]

Example: DGlib.drawPoly([[300,10],[10,10],[200,400],[300,400]], ['rgba(0,0,150,0.5)', 'rgba(0,0,0,0.5)'], 4, true, 'both');

DGlib.drawLine(from, to, color, thickness)

Draws a line
arguments:
- two points (array of numbers or percentages)
- A string for the color
- A number for the thickness
short hand for DGlib.drawPoly([from,to], color, thickness, false, 'stroke');
it's better performancewise to use DGlib.drawPoly

Example: DGlib.drawLine([20,20], ['20%','20%'], 'rgb(200,0,34)', 2);

DGlib.drawCircle(center, radius, color, thickness, mode)

Draws a circle on the selected canvas
arguments are:
- A point (array of x and y numbers or percentages) for the center of the circle
- A number (in pixels) for the radius
- A string for the color
- A number for the thickness of the line in pixels
- A mode, could be "stroke" or "fill" or "both". IF 'both' IS USED, COLOR WILL HAVE TO BE AN ARRAY OF TWO COLORS, [stroke, fill]

Example: DGlib.drawCircle(['20%', '20%'], 50, ['rgb(0,0,0)','rgb(200,0,34)'], 10, 'both');

DGlib.drawRoundedRectangle(pointAndSize, radius, color, thickness, mode)

Draws a rectangle with rouded corners
Arguments are:
- An array of 4 values [topLeftCoordX, topLeftCoordY, Width, Height],
- A string for the color,
- A radius value for the corners
- A mode, could be "stroke" or "fill" or "both". IF 'both' IS USED, COLOR WILL HAVE TO BE AN ARRAY OF TWO COLORS, [stroke, fill]

Example: DGlib.drawRoundedRectangle(['50%', '50%', 200, 200], 20, ['rgba(150,140,250,0.9)', 'rgb(150,0,0)'], 1, 'both');

DGlib.linearGradient(point1, point2)

Returns a gradient for use as color
Arguments are:
- A point for the start of the gradient
- A point for the end of the gradient
After the gradient is returned use the addColorStop(position, color) method to add colors to the gradient

Example:
    var gradient = DGlib.linearGradient([500, 400], [500, 600]);
    gradient.addColorStop(0, 'rgba(80,255,80,0.8)');
    gradient.addColorStop(1, 'rgba(255,255,255,0)');
    DGlib.drawCircle([800,400], 100, gradient , 2, 'stroke');

DGlib.drawImage(url, position)

Places a bitmap image on the screen (works with jpg, bmp, and png with or without transparency)
Arguments are:
- Url of the image
- Position of the image (array of two numbers or percentages x and y)

Example: DGlib.drawImage('ballTest_blue.png',[0,0]);