Patternizer: HTML5 Canvas-Powered Patterns

Since ever, we create patterns as image files and use them in web pages by simply attaching them to the backgrounds of elements via CSS.

Patternizer, a web-based pattern design application, brings a different approach in how we create and use them.

The application enables us to design a pattern by simply inserting any number of stripes, rotating them and setting their properties like opacity, color, width or offset.

While we are designing the pattern, the application generates a code including the values of variables which can be used with a JS-library provided (patternizer.js) to build that pattern with HTML5 <canvas>. No images used, just a lightweight JavaScript file and few rules.

The method usually ends up in a smaller-sized solution and, best of all, the pattern can be manipulated by simply changing the values.

Also, with a free membership, it is possible to save and share patterns created.