## Properties

Name | Type | Default
--- | --- | ---
renderEngine | String | ''

Determines the rendering engine used to display the chart. Possible values are 'SVG', 'VML' and 'HTML5'. When the property is not set jqxDraw will automatically select an optimal rendering engine depending on the browser capabilities.

#### Code examples

        $('#jqxDraw').jqxDraw({renderEngine: 'HTML5'});
        $('#jqxDraw').jqxDraw('refresh');

Try it: renderEngine is set to 'HTML5'

## Events

Name | Arguments |
--- | --- | ---

## Methods

Name | Arguments | Return Value
--- | --- | ---
attr | element, attributes | none

Sets attributes of an element

Parameter | Type | Description
--- | --- | ---
element | Object |
attributes(optional) | Object |

Return Value
Object

#### Code examples

        $('#container').jqxDraw();
        var renderer = $('#container').jqxDraw('getInstance');

        // create a circle
        // params: cx, cy, radius, params
        var circleElement = renderer.circle(250, 150, 50, {});
        // set the fill color and border color of the circle
        // params: element, attributes
        renderer.attr(circleElement, { fill: 'lightblue', stroke: 'darkblue' });

Try it: invoke the 'attr' method

circle | cx, cy, r, {optional attributes} | element object

Creates a circle element

Parameter | Type | Description
--- | --- | ---
cy | Number |
r | Number |
attributes | Object |

Return Value
Object

#### Code examples

        $('#container').jqxDraw();
        var renderer = $('#container').jqxDraw('getInstance');

        // create a circle
        // params: cx, cy, radius, attributes
        var circleElement = renderer.circle(250, 150, 50, {});

Try it: invoke the 'circle' method

clear | None | None

Clears the content of the jqxDraw widget.

Parameter | Type | Description
--- | --- | ---
None |  |

Return Value
None

#### Code examples

        $('#container').jqxDraw('clear');

Try it: invoke the 'clear' method

getAttr | element, attribute name | string

Gets element's attribute

Parameter | Type | Description
--- | --- | ---
element | Object |
attributes(optional) | Object |

Return Value
String

#### Code examples

        $('#container').jqxDraw();
        var renderer = $('#container').jqxDraw('getInstance');

        // create a circle
        // params: cx, cy, radius, params
        var circleElement = renderer.circle(250, 150, 50, {fill: 'lightblue'}});
        // get the fill color of the circle
        // params: element, attribute name
        var fillColor = renderer.getAttr(circleElement, 'fill');

Try it: invoke the 'getAttr' method

line | x1, y1, x2, y2, {optional attributes} | element object

Creates a line element

Parameter | Type | Description
--- | --- | ---
x1 | Number |
y1 | Number |
x2 | Number |
y2 | Number |
attributes(optional) | Object |

Return Value
Object

#### Code examples

        $('#container').jqxDraw();
        var renderer = $('#container').jqxDraw('getInstance');

        // params: x1, y1, x2, y2, attributes
        renderer.line(600, 100, 600, 200, { stroke: 'blue', 'stroke-width': 6 });

Try it: invoke the 'line' method

measureText | text, angle, {optional attributes} | {width, height}

Estimates the size of a text element

Parameter | Type | Description
--- | --- | ---
text | String |
angle | Number |
attributes(optional) | Object |

Return Value
Object - object.width and object.height Number properties.

#### Code examples

        $('#container').jqxDraw();
        var renderer = $('#container').jqxDraw('getInstance');
        // params: text, angle, attributes
        var textSize = renderer.measureText('My text', 45,  { 'class': 'smallText' });

Try it: invoke the 'measureText' method

on | element, event, function | none

Adds an event handler to an element

Parameter | Type | Description
--- | --- | ---
element | Object |
event | String |
function | Object |

Return Value
None

#### Code examples

        $('#container').jqxDraw();
        var renderer = $('#container').jqxDraw('getInstance');

        // create a circle
        // params: cx, cy, radius, params
        var circleElement = renderer.circle(250, 150, 50, {fill: 'lightblue'});
        renderer.on(circleElement, 'click', function ()
            {
                // get the Y coordinate of the circle's center
                var circleY = parseInt(renderer.getAttr(circleElement, 'cy'));

                // move the circle 10 pixels down
                renderer.attr(circleElement, { cy: circleY + 10; });
            });

Try it: invoke the 'on' method

off | element, event, function | none

Removes an event handler from an element

Parameter | Type | Description
--- | --- | ---
element | Object |
event | String |
function | Object |

Return Value
None

#### Code examples

        $('#container').jqxDraw();
        var renderer = $('#container').jqxDraw('getInstance');

        // create a circle
        // params: cx, cy, radius, params
        var circleElement = renderer.circle(250, 150, 50, {fill: 'lightblue'});
        var moveCircle = function() {
            var circleY = parseInt(renderer.getAttr(circleElement, 'cy'));
            renderer.attr(circleElement, { cy: circleY + 10 });
        }
        // add event handler
        renderer.on(circleElement, 'click', moveCircle);
        // remove event handler
        renderer.off(circleElement, 'click', moveCircle);

Try it: invoke the 'off' method

path | line command , {optional attributes} | element object

Creates a path element

Parameter | Type | Description
--- | --- | ---
path | String |
attributes(optional) | Object |

Return Value
Object

#### Code examples

        $('#container').jqxDraw();
        var renderer = $('#container').jqxDraw('getInstance');

        // draw a path
        // params: line command ('d'), attributes
        var path = renderer.path("M 100,100 L 150,130 C 130,130 180,190 150,150", { stroke: '#777777', fill: 'red' });

        /* Supported line commands:
        MoveTo: M x,y
        LineTo: L x,y
        Cubic curve: C x1,y1,x2,y2,x,y
        Close path: Z
        */

Try it: invoke the 'path' method

pieslice | cx, cy, innerRadius, outerRadius, fromAngle, endAngle, centerOffset, {optional attributes} | element object

Creates a pie slice element

Parameter | Type | Description
--- | --- | ---
cx | Number |
cy | Number |
innerRadius | Number |
fromAngle | Number |
endAngle | Number |
centerOffset | Number |
attributes(optional) | Object |

Return Value
Object

#### Code examples

        $('#container').jqxDraw();
        var renderer = $('#container').jqxDraw('getInstance');

        // create a pie slice
        // params: cx, cy, innerRadius, outerRadius, fromAngle, endAngle, centerOffset, {optional attributes}
        var piesliceElement = renderer.pieslice(250, 150, 50, 100, 15, 95, 0, {fill: 'yellow'});

Try it: invoke the 'pieslice' method

refresh | None | None

Refreshes / re-draws the content of the jqxDraw widget.

Parameter | Type | Description
--- | --- | ---
None |  |

Return Value
None

#### Code examples

        $('#container').jqxDraw('refresh');

Try it: invoke the 'refresh' method

rect | x, y, width, height, {optional attributes} | element object

Creates a rectangle element

Parameter | Type | Description
--- | --- | ---
x | Number |
y | Number |
width | Number |
height | Number |
attributes(optional) | Object |

Return Value
Object

#### Code examples

        $('#container').jqxDraw();
        var renderer = $('#container').jqxDraw('getInstance');

        // params: x, y, width, height, attributes
        var rectElement = renderer.rect(0, 0, 200, 100, { stroke: '#777777', fill: 'transparent' });

Try it: invoke the 'rect' method

saveAsJPEG | fileName, exportServer | boolean

Exports the content as JPEG image.
The browser must support HTML5 Canvas and the device must be able to connect to the export server. If you don't setup your own export server the default server is jqwidgets.com.

Parameter | Type | Description
--- | --- | ---
image | String |
url | String |

Return Value
None

#### Code examples

        $('#jqxDraw').jqxDraw('saveAsJPEG', 'myImage.jpeg', 'http://<my domain>/export_server/server.php');

Try it: invoke the 'saveAsJPEG' method

saveAsPNG | fileName, exportServer | boolean

Exports the chart's content as PNG image.
The browser must support HTML5 Canvas and the device must be able to connect to the export server. If you don't setup your own export server the default server is jqwidgets.com.

Parameter | Type | Description
--- | --- | ---
image | String |
url | String |

Return Value
None

#### Code examples

        $('#jqxDraw').jqxDraw('saveAsPNG', 'myImage.png', 'http://<my domain>/export_server/server.php');

Try it: invoke the 'saveAsPNG' method

text | text, x, y, width, height, angle, attributes, clip, halign, valign, rotateAround | element object

Creates a text element

Parameter | Type | Description
--- | --- | ---
x | Number |
y | Number |
width | Number |
height | Number |
angle | Number |
attributes | Array |
clip | Boolean |
halign | String |
valign | String |
rotateAround | String |

Return Value
Object

#### Code examples

        $('#container').jqxDraw();
        var renderer = $('#container').jqxDraw('getInstance');
        // params: text, x, y, width, height, angle, attributes, clip, horizontal alignment('center', 'left', 'right'), vertical alignment('middle', 'top', 'bottom'), rotate around point
        renderer.text(
            "Drawing shapes", // text
            50, // x
            20, // y
            undefined, // width
            undefined, // height
            0, // angle
            { 'class': 'largeText', fill: 'yellow', stroke: 'orange' }, // attributes
            false, // clip
            'center', // horizontal alignment
            'center', // vertical alignment
            'centermiddle'); // rotate around point

Try it: invoke the 'text' method