Painter. Method references

Painter

Constructs new Painter object. More then one instance of Painter object can be constructed on a web page, if necessary.
 

Example:

var painter = new Painter();

setDrawArea(canvas,options)

Associates an HTML5 canvas element with the drawing area of this painter object.

Parameters:

canvas - an HTML5 canvas element to serve as the drawing area

options - optional parameters for the drawing area. The following options are supported:
    select_ignore_bgcolor - if true the tool select_rect doesn't copy the background color.
    smooth_curve - turns on/off smoothing for curve and area tools. Specify true or false. The default is true;

Example:

painter.setDrawArea(document.getElementById("drawarea")), { background : "#ffffff" });
    

NOTE: If you use jQuery to access DOM elements remember that jQuery selectors, e.g. $("#drawarea") return jQuery wrapping object, not a DOM element, so you should pass $("#drawarea")[0] instead.

setImageSize(width,height)

Sets the image size. Call this method after setting the draw area if necessary.

If the image size exceeds the canvas size the use can scroll it using pan tool.

If you load an existing image or the background one the size is automatically set according to them. If you call this method after loading an image the size is changed to the specified one. If you neither load anything nor call this method the image size is set by the draw area canvas.

Parameters:

width - image width

height - image height.

addControlPanel(canvas,options)

Allows defining Tool Panel or Color Panel or Pen Panel or Action Panel. Every panel holds the buttons specified by the option tools or colors or pens or actions accordingly.

Parameters:

canvas - An HTML5 canvas element that serves as the button panel. The canvas size can be set according to your desing preferences.

options - The panel options object. The only required option field is the list of buttons. Its name defines the panel type and can be one of the following: "tools" or "colors",or "pens", or "actions." The option value must be comma separated list of button names.

The other option fields supported by every panel type are:

rows - number of rows to arrange the buttons

cols - number of columns to arrange the buttons

hgap - horizontal gap between the buttons

vgap - vertical gap between the buttons

background - the background color of the panel

Example:

painter.addControlPanel(document.getElementById("colorpanel")), {
    colors : "#000000,#ff0000,#00ff00,#0000ff,#ffffff,#ffff00,#00ffff,#ff00ff",
    rows   : 2,
    cols   : 4,
    background : "#c0c0c0"
});
    

You can create more then one panel of same type to arrange buttons in separate groups on the page.

NOTE: If you use jQuery to access DOM elements remember that jQuery selectors, e.g. $("#colorpanel") return jQuery wrapping object, not a DOM element, so you should pass $("#colorpanel")[0] instead.

getImageData(options)

Returns the image data as Data URI string.

Parameters:

options - the following options are supported:

width - specifies to scale the returned image width to the specified value

height - specifies to scale the returned image height to the specified value

background - if true the background layer is painted on the returned image.

drawing - if true the drawing layer is painted on the returned image.

format - specifies the image format, for example: image/png or image/jpeg. Supported formats depend on the browser. Only image/png is supported in all browsers

Returns:

JavaScript string containing image data in Data URI format:
data:image/png;base64,<...data...>

getSelectedData()

Returns data of the selected portion of the image or null if there is no selection.

Returns:

Object having the fields x - x left side of the selection,
y - y upper side of the selection,
and data - string containing image data of the selected portion in Data URI format:
data:image/png;base64,<...data...>

loadImage(url)

Load an image for editing

Parameters:

url - URL of the image to be loaded. The URL can be either absolute or relative to the current document.

setImage(image)

Sets an image for editing

Parameters:

image - Image object to be set. It can be either JavaScript Image or an <img> element.

loadBackgroundImage(url)

Loads an image which is used as the background.

Parameters:

url - URL of the background image. The URL can be either absolute or relative to the current document.

setBackgroundImage(image)

Sets an image which is used as the background.

Parameters:

image - An Image object to be set. It can be either JavaScript Image or an <img> element.

loadMaskImage(url)

Loads an image which is used as mask. Mask can be either GIF or PNG image having transparent areas.
The mask is placed on the top of the drawing and the user can't draw outside the transparent areas.

Parameters:

url - URL of the mask image. The URL can be either absolute or relative to the current document.

setMaskImage(image)

Sets an image which is used as mask. Mask can be either GIF or PNG image having transparent areas.
The mask is placed on the top of the drawing and the user can't draw outside the transparent areas.

Parameters:

image - An Image object to be used as the mask. It can be either JavaScript Image or an <img> element.

isChanged()

Returns true if the user has changed anything on the draw area.

setTool(tool)

Sets current drawing tool.

Parameters:

tool - The tool name. Currently the following tools are supported:

line,arrow_path,curve,rect,round_rect,oval,polyline,color_picker,move_rect,bezier,pan,
arrow,arrow_dim,area,filled_rect,filled_round_rect,filled_oval,polygon,text,copy_rect,
eraser,select_rect
	

setColor(color)

Sets current drawing color.

Parameters:

color - color specified as: "#RRGGBB" or "#RGB" or "rgba(red,green,blue,alpha)".

setPen(pen)

Sets current pen for shape outlines.

Parameters:

pen - The pen name. Currently the following pens are supported:

solid1,solid2,solid4,dashed1,dashed2,dashed4,zigzag2,zigzag4

setPattern(pattern)

Sets current pattern for filled shapes.

Parameters:

pen - The pattern name. Currently the following pens are supported:

solid, hatching, crosshatch, dots, grid, saw, bricks, wave

setFont(font)

Sets font for the text tool.

Parameters:

font - Font specification in the following format: name-style-size, where style can be one of the following: plain, bold, italic, bolditalic

doAction(action)

Executes specified action.

Parameters:

action - Action name. The action name can be clear, undo, redo, font,
or one of custom actions defined by addCustomAction.

putClipart(url,x,y,options)

Puts specified image on the DrawArea at the specified position. After that the user can adjust the image position and apply it to the DrawArea.

Parameters:

url - URL of the image.

x - horizontal coordinate of the clipart (specified relative to the DrawArea element).

y - vertical coordinate of the clipart (specified relative to the DrawArea element).

options - Options object. The following object fields are supported:

canresize - if set to false the user can't resize the clipart before applying it; the default is true.

canrotate - if set to false the user can't rotate the clipart before applying it; the default is true.

opaque - if set to false the user can't capture the clipart on its transparent areas; the default is true.

addCustomAction(name,handler,icon)

Defines custom action button.

Parameters:

name - name of the button

handler - the function to invoke when the button is pressed

icon - URL of the button icon

Example:

painter.addCustomAction('help',function(action){
	window.open('help.html','help','width=400, height=300');
}, 'help.gif' );
   

addCustomTool(name,params)

Defines a custom tool button. Custom tool buttons allow users to select one of the standart tools, color, and pen using single button which is convenient for custom application needs. Once custom tool is defined it can be placed on the Tool Panel.

Parameters:

name - name of the tool

params - object defining the fields: tool, color, pen, pattern, icon. Every field is optional but the tool. For any unspecified field current setting is used.

Example:

painter.addCustomTool('river', {
	tool:'curve', color:'#0000FF', pen:'solid4' icon:'river.gif'
});
   

addCustomPen(name,params)

Defines a custom pen button. Custom pen allows using custom shapes when the user draws curves, lines, shape outlines. Once a pen is defined it can be placed on the Pen Panel.

Parameters:

name - name of the pen

params - object defining the fields: type, path, advance, width. See more details about custom pens.

addCustomPattern(name,pattern_image,replacable_color)

Defines a custom pattern button. Custom pattern allows using custom patterns for filled shapes. Once a pattern is defined it can be placed on the Pattern Panel.

Parameters:

name - name of the pattern

pattern_icon - image which is used as the pattern

replacable_color - if specified the editor replaces the color on the image with the current color

Example:

painter.addCustomPattern('bush', 'patterns/bush.gif', '#000000' );
   

setIcons(icons)

Allows to replace the standard button icons.

Parameters:

icons - An object whose fields specify new icons. The field names must correspond the tool or pen or action names you want to replace icons for. The corresponding values must be the icons URLs. You can replace either some or all the icons.

Example:

painter.setIcons({
   clear : 'my_clear_image.gif',
   undo  : 'my_undo_image.gif',
   redo  : 'my_redo_image.gif'
});