html5 - Draw a line with two mouse clicks in canvas using Jquery -

I have already seen this question

< P> What I want to achieve is practically the same, but using jazzery

I have tried the present but I think I can not use two nested click events Are there.

  $ (function () {var worksheetCanvas = $ ('# worksheet-canvas'); reference = worksheetCanvas.get (0) .getContext ("2D"); context.strokeStyle = "Rgb (251, 243, 243)"; worksheetCanvas.click (function (e) {top.example.com}; WorksheetCanvas.click (function (f) {yCoordSecond = f.pageY; context.lineTo (XCoordSecond, yCoordSecond); context.closePath (); context.stroke ();}}}}}) on {var xCoordSecond = f.pageX; ???   
 In addition to this, when I put some static values ​​ lineTo () , I get, which identifies the coordinates for the second point, thus also drawing the line Although the user is not useless,  
  $ (function () {var worksheetCanvas = $ ('# worksheet-canvas') is not set;; references = worksheetCanvas.get (0) .getContext ("2d"); References .strokeStyle = "RGB (251, 243, 243)"; Worksheet Conv. (Click the function (e) {context.beginPath (); var xCoordFirst = e.pageX; var yCoordFirst = E.pageY; context.moveTo (xCoor DFirst, yCoordFirst); worksheetCanvas.click (function (f) {var xCoordSecond = f.pageX; on yCoordSecond = f.pageY; context.lineTo (20, 30); context.closePath (); Context.stroke ();} )}}}) A)    
 
 
  var mouse = {x: 1, y: -1}; $ (Document) .ready (function () {var cvs = $ ("canvas") [0] .getContext ("2d"); $ ("canvas") Click (function (e) {if (mouse. X! = -1 and mouse.i! = -1) {cvs.beginPath (c); cvs.moveTo (mouse.x, mouse.a); cvs.lineTo (e.pageX, e.pageY); CVS .closePath (); cvs.stroke (); mouse.x = -1; mouse.i = -1;} and {mouse.x = E.pagex; mouse.i = E.P.G.I.}}}}};