Patternizer

Demos & Documentation

Using patternizer.com

In the meantime, here are a few tips:

Using patternizer.js in a webpage

Patternizer uses the canvas element, which is supported natively in all modern browsers and mobile devices.

You’ll find the latest code and demos at GitHub. Download the zip and you should have everything you need.

Patternizer.js works like any script. Attach the script to a page:

<script type="text/javascript" src="/path/to/patternizer.js"></script>

Then you’ll need a canvas element that will get the pattern.

<canvas id="bgCanvas" width="600" height="200"></canvas>

patternizer.js creates the patternizer() method, which accepts an options object to define the stripes. This is what you’ll find in the Code tab of your patterns. Copy the code from there and paste it into the patternizer() method.

<script type="text/javascript">

var bgCanvas = document.getElementById('bgCanvas');

bgCanvas.patternizer({
    stripes : [
        {
            color: '#ffb4d5',
            rotation: 45,
            opacity: 80,
            mode: 'normal',
            width: 30,
            gap: 10,
            offset: 0
        },
        {
            color: '#3a83d6',
            rotation: 200,
            opacity: 50,
            mode: 'plaid',
            width: 10,
            gap: 10,
            offset: 0
        }
    ],
    bg : '#ffffff'
});

</script>

Demos

Fixed webpage background

[more demos on the way]

Old IE support

For IE 7 and 8 support, I have successfully used excanvas (though its definitely slower, and the current patternizer.js version doesn’t work with it out of the box). In theory, Flashcanvas should work as well and is supposedly much faster. I’m planning on updating the script to have old IE support with excanvas or flashcanvas.