node package manager
Stop writing boring code. Discover, share, and reuse within your team. Create a free org »

pap

Pap

NPM

Renders blurred versions of images to canvas.

Import the module.

var pap = require('pap')();

Load an image and draw it on a canvas.

var mage = document.createElement('image');
 
mage.addEventListener("load", function () {
 
    pap.initialize(mage);
    pap.blur(64);
    document.body.appendChild(pap.canvas);
 
});
 
mage.src = "images/Lenna.png";
 

lennablur

Initialize once, and update blur live.

var Pap = require('pap');
var mage = document.createElement('img');
mage.onload = function () {
 
    var pap = Pap();
    pap.initialize(mage);
    document.body.appendChild(pap.canvas);
    var inc = 0;
    var blurWave = function () {
        inc += 0.02;
        pap.blur(Math.sin(inc) * 32 + 32);
        requestAnimationFrame(blurWave);
    };
 
    blurWave();
 
};
mage.src = "images/Lenna.png";