Is a Pure Javascript Canvas Implementation of Matrix Grid ( Primary Application was to Generate Github Like Random Avatar or Pixel Pattern)

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

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

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

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