Generate Pixelated Images With JavaScript And Canvas – Pixel Display

Pixel Display is a funny JavaScript library that generates pixelated images from JavaScript objects using HTML5 canvas.

It also has the ability to pixelate a regular image you provide.

Plus, the library enables you to animate the generated pixelated images in a given interval.

How to use it:

Download and import the minified version of the Pixel Display library into the document.

<script src="/path/to/pixeldisplay.min.js"></script>

Create an HTML canvas element with the following data attributes:

• data-density
• data-pixel-height
• data-pixel-width.
• data-foreground-color
• data-background-color

<canvas id="display" data-density="10"></canvas>

Initialize the Pixel Display library and we’re ready to go.

var instance = new Display('#display');

Render an image from a JavaScript object.

var myData = [
    1,0,0,0,
    0,1,0,0,
    0,0,1,0,
    0,0,0,1
];
instance.renderArray(myData);

Pixelate an image.

instance.renderImage('image.png');

Animate pixelated images.

var myAnimation = new Animation(instance, [imageArray1, imageArray2], delay=1000);
// starts the animation
myAnimation.start();
// stops the animation
myAnimation.stop();