Documentation

Getting Started

jqxDraw

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.
<head>
<script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdraw.js"></script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-2FX5PV9DNT"></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-2FX5PV9DNT');</script></head>

The next step is to select an element with jQuery and use the jqxDraw constructor to initialize the plugin.
   <script type="text/javascript">
$(document).ready(function () {
var renderer = $('#container').jqxDraw('getInstance');
});
</script>

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:
$('#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; });
});

Drawing Shapes with jqxDraw

<!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>jqxDraw - Basic shapes drawing example</title>
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdraw.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxtooltip.js"></script>
<style type="text/css">
.smallText
{
font-size:16px;
font-family: Sans-Serif;
}
.largeText
{
font-size:36px;
font-family: Sans-Serif;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$('#container').jqxDraw();
var renderer = $('#container').jqxDraw('getInstance');
var size = renderer.getSize();
// 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' });
// draw a rectangle around the entire area
// params: x, y, width, height, attributes
var borderElement = renderer.rect(0, 0, size.width, size.height, { stroke: '#777777', fill: 'transparent' });
// draw a path
// params: line command, attributes
var pathElement = renderer.path("M 100,100 L 150, 130 C 130,130 180,190 150,150", { stroke: '#777777', fill: 'red' });
// draw an area
// params: line command, attributes
var areaElement = renderer.path("M 300,300 L 350, 330 C 330,330 380,390 350,350 Z", { stroke: '#777777', fill: 'yellow' });
// draw a line
// params: x1, y1, x2, y2, attributes
renderer.line(600, 100, 600, 200, { stroke: 'blue', 'stroke-width': 6 });
renderer.line(550, 50, 650, 90, { stroke: 'green', 'stroke-width': 6 });
// draw text
// params: text, x, y, width, height, angle, params, clip, halign, valign, rotateAround
renderer.text("Drawing shapes", 50, 20, undefined, undefined, 0, { 'class': 'largeText', fill: 'yellow', stroke: 'orange' }, false, 'center', 'center', 'centermiddle');
renderer.text("This is rotated text", 600, 300, undefined, undefined, 45, { 'class': 'smallText' }, false, 'center', 'center', 'centermiddle');
// add an event handler to the circle element
var circleUp = renderer.circle(50, 450, 30, { fill: '#DEDEDE', stroke: '#777777' });
var pathUp = renderer.path("M 30,460 L 70,460, L 50, 430 Z", { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 });
var circleDown = renderer.circle(120, 450, 30, { fill: '#DEDEDE', stroke: '#777777' });
var pathDown = renderer.path("M 100,440 L 140,440, L 120, 470 Z", { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 });
renderer.text("Click these buttons:", 20, 390);
var moveCircle = function (moveUp) {
var circleY = parseInt(renderer.getAttr(circleElement, 'cy'));
renderer.attr(circleElement, { cy: circleY + (moveUp ? -10 : 10) });
}
renderer.on(circleUp, 'click', function () { moveCircle(true); });
renderer.on(pathUp, 'click', function () { moveCircle(true); });
renderer.on(circleDown, 'click', function () { moveCircle(false); });
renderer.on(pathDown, 'click', function () { moveCircle(false); });
renderer.refresh();
});
</script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-2FX5PV9DNT"></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-2FX5PV9DNT');</script></head>
<body class='default'>
<div id='container' style="width:700px; height:500px">
</div>
</body>
</html>

The result of the above code is: