Getting Started


jqxDraw is a small jQuery-based plugin which allows you to draw shapes and texts using VML, SVG and HTML5. In order to use the jqxDraw plugin, you need to include the following JavaScript files in your project.

The next step is to select an element with jQuery and use the jqxDraw constructor to initialize the plugin.

To set a property (option), you need to pass the property name and value(s) in the jqxDraw's constructor.
$('#jqxDraw').jqxDraw({renderEngine: 'HTML5'});
To get a property(option), you need to pass the property name to the jqxTouch's constructor.
var renderEngine = $('#jqxDraw').jqxDraw('renderEngine'});
To bind to an event, you need to do the following:

var renderer = $('#container').jqxDraw('getInstance');
// create a circle
// params: cx, cy, radius, params
var circleElement =, 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; });

Drawing Shapes with jqxDraw

The result of the above code is: