Placing the editor on a page

Before placing the editor on the page include its code and create new instance of Painter object:

<script src="https://izhuk.com/painter/api"></script>
<script>
    var painter = new Painter();
</script>

Now you can place the editor components on the page. There are 5 types of the components:

The components can be placed and configured on the page individually. The rest of this section describes them.

Draw Area

Draw Area represents the drawing area. It is the only required component.
To create the Draw Area define an HTML5 canvas element, for example:

<canvas id="drawarea" width="640" height="160"></canvas>

and call painter's method setDrawArea() passing the canvas element as parameter:

<script>
    painter.setDrawArea(document.getElementById('drawarea'));
</script>

The result must look like this (you can draw here):

By default the image size equals to the Draw Area size, but you can change it using the method setImageSize(width,height).

Tool Panel

The Tool Panel displayes buttons that allow selecting a drawing tool. To create a Tool Panel define an HTML5 canvas element:

<canvas id="toolpanel" width="395" height="65"></canvas>

and call painter's method addControlPanel() passing the canvas element and the panel options as parameters:

<script>
    painter.addControlPanel( document.getElementById('toolpanel'), {
    'tools': 'line,arrow_path,curve,rect,round_rect,oval,polyline,bezier,color_picker,flood_fill,move_rect,pan,'+
	     'arrow,arrow_dim,area,filled_rect,filled_round_rect,filled_oval,polygon,point,eraser,text,copy_rect,select_rect',
    'rows' : 2,
    'cols' : 0
    });
</script>

The result must look like this:

The main and necessary option is 'tools' which defines the list of tools.
The example above shows all the supported tools. So, you can use it as the Tool Reference.
In addition to standard tools you can add custom tools which are combination of a standard tool, color, and/or pen.

Color Panel

The Color Panel displayes buttons that allow the user to select the drawing color. To create a Color Panel define an HTML5 canvas element:

<canvas id="colorpanel" width="449" height="49"></canvas>

and call painter's method addControlPanel() passing to it the canvas element and the panel options:

<script>
  painter.addControlPanel( document.getElementById('colorpanel'), {
    'colors': '#ff0000,#ffff00,#c0c000,#00ff00,#00ffff,#0000ff,#c000ff,#ff00ff,#ff00c0,'+
              '#ffc0c0,#ffffc0,#f0f080,#c0ffc0,#c0ffff,#c0c0ff,#f080ff,#ffc0ff,#ffe0e0,'+
              '#cc0000,#888800,#606000,#008800,#008888,#000088,#8000cc,#880088,#cc0080,'+
              '#ffffff,#e0e0e0,#d0d0d0,#c0c0c0,#b0b0b0,#a0a0a0,#808080,#404040,#000000',
    'rows' : 2,
    'cols' : 0
  });
</script>

The result must look like this:

The main and necessary option is 'colors' which defines the list of colors.
See more details on the method addControlPanel.

Note: If you wish to specify one or more colors as rgba(red,green,blue,alpha)
use array of strings instead of comma separated string for the colors property, for example:
colors : ['rgba(255,0,0,0.5)','rgba(0,255,0,0.5)','rgba(0,0,255,0.5)'];

Pen Panel

The Pen Panel displayes buttons that allow the user to select the drawing pen. To create a Pen Panel define an HTML5 canvas element:

<canvas id="penpanel" width="199" height="24"></canvas>

and call painter's method addControlPanel() passing to it the canvas element and the panel options:

<script>
    painter.addControlPanel( document.getElementById('penpanel'), {
	'pens' : 'solid1,solid2,solid4,dashed1,dashed2,dashed4,zigzag2,zigzag4',
	'rows' : 1,
	'cols' : 0
    });
</script>

The result must look like this:

The main and necessary option is 'pens' which defines the list of pens.
In addition to the standard pens listed above you can define you custom pens.
See more details on the method addControlPanel.

Pattern Panel

The Pattern Panel displayes buttons to select pattern for filled shapes. To create a Pattern Panel define an HTML5 canvas element:

<canvas id="patternpanel" width="247" height="24"></canvas>

and call painter's method addControlPanel() passing to it the canvas element and the panel options:

<script>
    painter.addControlPanel( document.getElementById('patternpanel'), {
	'patterns' : 'solid, hatching, crosshatch, dots, grid, saw, bricks, wave',
	'rows' : 1,
	'cols' : 0
    });
</script>

The result must look like this:

The main and necessary option is 'patterns' defining the list of patterns.

Action Panel

The Action Panel displayes buttons that allow the user to select the drawing pen. To create a Action Panel define an HTML5 canvas element:

<canvas id="actionpanel" width="149" height="24"></canvas>

and call painter's method addControlPanel() passing to it the canvas element and the panel options:

<script>
    painter.addControlPanel( document.getElementById('actionpanel'), {
	'actions':'clear,undo,redo,font',
	'rows' : 1,
	'cols' : 0
    });
</script>

The result must look like this:

The main and necessary option is 'actions' which defines the list of actions.
See more details on the method addControlPanel.