Make a draggable HTML5 canvas curve area

Question

[ Edited: To fit OP’s additional information ]

This code uses 2 Cubic Bezier Curves and 6 control handles to let you select the eyeball in your image.

The Red handles control the curve on the top part of the eye. The Blue handles control the curve on the bottom part of the eye. The White handles let you anchor on the corners of the eye. The Orange shows the resulting path (=2 curves).

Below is a picture of the app and here is a Fiddle of it in action: http://jsfiddle.net/m1erickson/98G9F/ image of application

Here is the code:

<!doctype html>
<html>
  <head>

    <link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>

    <style>
      body { font-family: arial; }
      .anchor { background: #fff; position: absolute; display: block; height: 10px; width: 10px; border: 1px solid #333; border-radius:5px;}
      .control { background: #fff; position: absolute; display: block; height: 20px; width: 20px; border: 1px solid #333; border-radius:10px;}
      .p1, .p2 { background: red; z-index: 50; }
      .p3, .p4 { background: blue; }
      .pStart { background:white;}
      .pEnd {background:white;}
      .pStart { left: 54px; top: 166px; }
      .pEnd { left: 346px; top: 189px; }
      .p1 { left: 150px; top: 39px; }
      .p2 { left: 276px; top: 97px; }
      .p3 { left: 219px; top: 227px; }
      .p4 { left: 147px; top: 224px; }
      canvas { border: 1px solid #333;}
      #start,#end2{color:green;}
      #end1{color:purple;}
      #c1,#c3{color:red;}
      #c2,#c4{color:blue;}
    </style>

  </head>
  <body>

        <a href="#" class="anchor pStart"></a>
        <a href="#" class="control p1"></a>
        <a href="#" class="control p2"></a>
        <a href="#" class="anchor pEnd"></a>
        <a href="#" class="control p3"></a>
        <a href="#" class="control p4"></a>

        <canvas height="400" width="400" id="canvas"></canvas>

        <p>context.moveTo(
            <span id="start"></span>);
        </p>
        <p>context.bezierCurveTo(
            <span id="c1"></span>,
            <span id="c2"></span>,
            <span id="end1"></span>);
        </p>
        <p>context.bezierCurveTo(
            <span id="c3"></span>,
            <span id="c4"></span>,
            <span id="end2"></span>);
        </p>

    <script>
      var $p1,$p2,$codeMove,$codeBez1,$codeBez2;

      $(function() {
        var canvas=document.getElementById("canvas");
        var ctx = canvas.getContext("2d");

        $pStart=$(".pStart");
        $pEnd=$(".pEnd");
        $p1 = $(".p1");
        $p2 = $(".p2");
        $p3 = $(".p3");
        $p4 = $(".p4");
        $codeMove=$("code-move");
        $codeBez1=$("code-bez1");
        $codeBez2=$("code-bez2");

        $(".pStart, .pEnd, .p1, .p2, .p3, .p4").draggable({ 
          containment: 'parent',
          drag: function(event, ui) { renderWrap(ctx); },
          stop: function(){ renderWrap(ctx); }
        });

        var eyeImage=new Image();
        eyeImage.onload=function(){
            canvas.width=eyeImage.width*1.5;
            canvas.height=eyeImage.height*1.5;
            renderWrap(ctx);
        }
        eyeImage.src="http://i.stack.imgur.com/SbcL4.png";

      function renderWrap(ctx) {
        var pStart=$pStart.position();
        var pEnd=$pEnd.position();
        var p1 = $p1.position();
        var p2 = $p2.position();            
        var p3 = $p3.position();
        var p4 = $p4.position();    
        render({x:pStart.left, y:pStart.top}, {x:pEnd.left, y:pEnd.top}, {x:p1.left, y:p1.top}, {x:p2.left, y:p2.top}, {x:p3.left, y:p3.top}, {x:p4.left, y:p4.top} );
      };

      function render(start, end, p1, p2, p3, p4) {
        ctx.clearRect(0,0,canvas.width,canvas.height);
        ctx.drawImage(eyeImage,0,0,eyeImage.width,eyeImage.height,0,0,eyeImage.width*1.5,eyeImage.height*1.5);
        ctx.beginPath();
        ctx.lineWidth = 2;
        ctx.strokeStyle = "orange";
        // start-->end
        ctx.moveTo(start.x,start.y);
        ctx.bezierCurveTo(p1.x,p1.y,p2.x,p2.y,end.x,end.y);
        ctx.stroke();
        // end-->start
        ctx.bezierCurveTo(p3.x,p3.y,p4.x,p4.y,start.x,start.y);             
        ctx.stroke();
        ctx.closePath();
        // connectors
        ctx.beginPath();
        ctx.strokeStyle = "#999";
        ctx.lineWidth = 1;
        connector(start,p1);
        connector(end,p2);
        connector(end,p3);
        connector(start,p4);
        ctx.closePath();
        // display code
        $("#start").html(start.x+","+start.y);
        $("#c1").html(p1.x+","+p1.y);
        $("#c2").html(p2.x+","+p2.y);
        $("#end1").html(end.x+","+end.y);
        $("#c3").html(p3.x+","+p3.y);
        $("#c4").html(p4.x+","+p4.y);
        $("#end2").html(start.x+","+start.y);       
      }

      function connector(pt1,pt2){
          ctx.moveTo(pt1.x,pt1.y);
          ctx.lineTo(pt2.x,pt2.y);
          ctx.stroke();
      }

    });
    </script>

  </body>   
</html>