The Fashioner interface is very simple and easy to use, yet extremely powerful. It is comprised of three separate sections.

Main Menu

The main menu is outlined in red in the image above. It holds all of the tools available in the program. These tools are broken down into nine separate categories:

The categories make it easier to select the correct tool quickly.

At the far right of the menu you will see the saved pattern name. If you haven't saved your pattern yet, this will be empty.

Tool Panel

The tool panel is outlined in blue in the image above. At the top of the tool panel you'll see the currently selected layer. Learn more about Layers.

When you select a tool from the menu, it will open in the tool panel. Once a tool has been opened, the main menu will lock out. Choose save or cancel to free the menu.


The canvas is outlined in purple in the image above. The canvas is the area within the Fashioner that displays all the geometry. This is where you will draw and make modifications. 

Everything on the canvas is SVG (scalable vector graphics). 


You can pan the canvas by click dragging on the canvas.


To zoom the canvas, use your scroll wheel.


Since Patternmaker Pro is browser based, we had to find a drawing method that was friendly to the different browsers. We chose to work with SVG.

If you are familiar with other graphics or CAD programs, you will find the coordinate system in SVG to be a bit strange.

The origin of the SVG canvas is in the top left. Moving to the right is the X axis and that is a positive number. Moving down is the Y axis and that is positive, too. It would be the fourth quadrant of a Cartesian system with the Y being positive moving down.

Most people don't care about this, but some of you may be interested. This is just something to keep in mind when working with the program. It may explain some of the movement within the tools.

When we need to move left (x) or up (y), it would be a negative number.