HTML5 Draw

Invoke the on method of the jqxDraw. Author: http://jqwidgets.com

by jqwidgets

HTML

<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<div id='jqxDraw' style="width:680px; height:300px;"></div>

JavaScript

$('#jqxDraw').jqxDraw();
  var renderer = $('#jqxDraw').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
      });
  });
  renderer.refresh();