Github-like Avatar Implementation (Not Accurate)

only the option canvasID is required.


new minBlock(canvasID: String);

// or
  
new minBlock({
  blocksPerEdge: Number, // default -> 5
  canvasID: String, // required
  color: {
      primary: String,
      secondary: String
  }, // default -> a pair of random colors
  padding: Number, // default -> 20
  spacing: Number // default -> 0
});

In Html


<script type='text/javascript' src='https://raw.githubusercontent.com/flouthoc/minBlock.js/master/minBlock.js'></script>

Where To Put It


<html>
  <head>
    <script type='text/javascript' src='minBlock.js'></script>
  </head>
  <body>
    <canvas id='myCanvas' width=500 height=500></canvas>

    <script type='text/javascript'>
      new minBlock('myCanvas');
    </script>
  </body>
</html>

Working with optional parameters


new minBlock({
  canvasID: 'myCanvas',
  blocksPerEdge: 4,
  color: {
    primary: '#27ae60',
    secondary: '#2ecc71'
  },
  padding: 0,
  spacing: 2
});

To-Do's (Not Yet Implemented)

~~1.) Making it Sensitive for nxn Matrix by @GreenLantern101~~

~~2.) Simplifying Arguments To JSON format by @alvaropinot~~

3.) Minifying the source