Demos & Documentation
Using patternizer.com
In the meantime, here are a few tips:
- Unique URLs are generated for each pattern, and each save creates a new numbered version for that URL. Sign up if you want to keep your patterns organized.
- I find the best results come from play, not attempting exact precision
- Use the up/down arrow keys for minor 1px shifts, and if your cursor is in a text input, shift-up/down moves 10px
- Drag n drop to reorder stripes. Stripes are drawn in the same stacking order that you see in the panel
- If offset isn’t doing what you want, try flipping the angle 180 degrees. It will look exactly the same, but have the opposite effect.
- Super-user tip: Shift-click multiple stripes to set all their values at once. Be careful with this though, it can quickly make changes you may not want.
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:
[cc lang=”html”]
[/cc]
Then you’ll need a canvas element that will get the pattern.
[cc lang=”html”]
[/cc]
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.
[cc lang=”javascript”]
[/cc]
Demos
[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.