## 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