Demo!

JS Fiddle Result

JS Fiddle with Code

What choices are available for making this icon?

Corners (same for Edges)

• 2⁴ - Pattern choices (16 defined)
• 2¹ - Invert Colour Scheme choices (Yes or No)
• 2² - Pattern rotation choices (although some may be identical)

Middle

• 2² - Pattern choices (only 4 symmetric patterns in the set)
• 2¹ - Invert Colour Scheme choices (Yes or No)

Colour

• 2⁵ - Red Pallet choices (limited to 32)
• 2⁵ - Blue Pallet choices (limited to 32)
• 2⁵ - Green Pallet choices (limited to 32)

Lets store this as bits!

Total of 22 bits... 4 Million Unique Options !

Examples: 

'Ottawa JS'

1000000110000111010001101010011

'Hackers United'

110000001010000110100111001111110

'Benjamin Sisko'

101101001111010110011010101110001

var node = document.querySelector('canvas');
var ctx = node.getContext("2d");

// Setup the default paintbrush and save
ctx.fillStyle = "white";
ctx.save(); // Restore Point

// paint background white
ctx.fillRect(x, y, size, size);

// Setup the coloured paintbrush
ctx.fillStyle = "fuchsia";

// Draw Patch
ctx.beginPath();
ctx.moveTo(x,y);
ctx.lineTo(x,y);
... for all coordinates of the shape ...
ctx.closePath();
ctx.fill(); //draw to screen

ctx.restore(); // Restore back to white

and build a custom one!

Different Patch Patterns

Sizes: 4x4, 8x8, ...

Different Symmetries