Getting started

Download this plugin from the Github repository or install it through NPM:

$ npm install pixer

Or install it through Bower:

$ bower install pixer

Required assets

Set some CSS rules for the canvas elements we are going to use.
These are some suggested classes:

.js-pixer {
	width: 100%;
	height: 80px;
}

.js-pixer--big {
	width: 100%;
	height: 120px;
}

.js-pixer--small {
	width: 100%;
	height: 40px;
}

And import the Pixer library:

<script src="path/to/dist/pixer.js"></script>

Required markup

Add the data-pixer attribute to the canvas element in between the two block elements you want to apply the pixelated border to.
It's mandatory to set a CSS property for the background of the two target elements:

<!-- target 1 -->
<div style="background:<COLOR>"></div>

<!-- the pixelated gradient border will be generated inside this canvas -->
<canvas data-pixer class="js-pixer"></canvas>

<!-- target 2 -->
<div style="background:<ANOTHER COLOR>"></div>

Start it up

This Javascript library is UMD compliant, so you can consume it even like this:

var pixer = require('pixer');

// Call the init function which returns the API object handler
var pixerApi = pixer();

Or just get the global object bound to the window:

var pixer = window.pixer;

// Call the init function which returns the API object handler
var pixerApi = pixer();

Set some options

At the moment the only customizable setting is the number of stripes that the pixelated border will be formed of. The default amount of stripes is 4.
You can set the custom amount of stripes by passing a valid JSON object into the data-pixer attribute:

<div style="background:<COLOR>"></div>

<canvas data-pixer='{"stripes":"4"}' class="js-pixer"></canvas>

<div style="background:<ANOTHER COLOR>"></div>

API

Available methods:

var pixerApi = pixer();

// Reflow all the pixelated borders in the page
pixerApi.reflow();