Client-side avatar customization engine written in pure JavaScript for HTML5 canvases
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


  1. Specify the rendered avatar position
<div id="avatars">
	<canvas id="avatar" width="160" height="220">
		<div id="bc_avatar"></div>
	<div id="dom_compiled">
		<img id="compiled" src="images/Elidiun/Base_normalF.png" width="160" height="220" />
  1. Specify an equipped section
<div id="equipped">
  1. Specify an inventory section
<div id="inventory">
  1. Specify save and clear operations
<div id="options">
	<a href="#" id="save" >Save</a>
	<a href="#" id="clear">Clear</a>
  1. Include the necessary scripts into your document
<script type="text/javascript" src="avaku/config.js"></script>
<script type="text/javascript" src="avaku/linkedlist.js"></script>
<script type="text/javascript" src="avaku/algo.js"></script>
<script type="text/javascript" src="avaku/avatar.js"></script>
<script type="text/javascript" src="avaku/base.js"></script>
<script type="text/javascript" src="avaku/layer.js"></script>
<script type="text/javascript" src="avaku/itemfactory.js"></script>
<script type="text/javascript" src="images/Elidiun/elidiun.js"></script>
<script type="text/javascript" src="avaku/inventory.js"></script>
<script type="text/javascript" src="avaku/avaku.js"></script>
  1. Initialize the scripts
<script type="text/javascript">
function init() {
window.addEventListener('DOMContentLoaded', init);

Adding Item Sources

There are two methods of defining a source of items: 1) Inheriting from the ItemFactory or 2) setup the AjaxFactory.

Inheriting from the ItemFactory

In order to define a source of items, we must inherit from the ItemFactory and define the required methods:

  1. getItems(user, category) Returns a list of items owned by a user under a specified category.

  2. sendItems(user, avatar) Defines how to update the user's avatars on the server side.

var Elidiun = function() {
	this.matrix = {};
	this.matrix['head'] = [
		new Item('images/Elidiun/items/23h6qgw.jpg'),
		new Item('images/Elidiun/items/30b1b4g.jpg'),
		new Item('images/Elidiun/items/ancienp_hair_olive.png'),
		new Item('images/Elidiun/items/ancienp_hair_purple.png'),
		new Item('images/Elidiun/items/ancienp_hair_white.png'),
		new Item('images/Elidiun/items/ancienp_eyes_purple.png'),
	this.matrix['upper'] = [
		new Item('images/Elidiun/items/SpaceROCK_Cape_Blue_U.png'),
		new Item('images/Elidiun/items/WINTERDOLL_DRESS_MALE_blonde.png'),
		new Item('images/Elidiun/items/femalehoodiedeepurple.png'),
		new Item('images/Elidiun/items/femalehoodieforest.png'),
		new Item('images/Elidiun/items/femalehoodiegray.png')
	this.matrix['lower'] = [
		new Item('images/Elidiun/items/SWAGGER_JEANS_white.png'),
		new Item('images/Elidiun/items/StVRoses_f_skirt_white.png')
	this.matrix['shoes'] = [
		new Item('images/Elidiun/items/converseblack.png')];

Elidiun.prototype = ItemFactory;

Elidiun.prototype.getItems = function(user, category) {
	return this.matrix[category];

Elidiun.prototype.sendItems = function(user, avatar) {
	// Do nothing