JS fitness #9: draggable quadratic Bézier curve

index.html

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="b">
   <canvas class='c'></canvas>
<div class="col-md-12 t">
  <div class="col-md-5">
    <table id="student-tbl" class="table table-striped">
        <thead>
        <tr>
            <td></td>
            <td></td>
            <td>Estado</td>
            <td>Nome</td>
        </tr>
        </thead>
        <tbody>
          <tr>
            <td>3</td>
            <td>Ativo</td>
            <td><img alt="avatar" src="" class="img-circle"></td>
            <td>Admin Sistema<span class="pull-right" id="aluno-pos"></span></td>
          </tr>
                </tbody>
    </table>
  </div>
  <div class="col-md-2"></div>
  <div class="col-md-5">
    <table id="student-tbl" class="table table-striped">
        <thead>
        <tr>
            <td><!--teacher avatar --></td>
            <td>Professor</td>
            <td>Estado</td>
        </tr>
        </thead>
        <tbody>
          <tr>
            <td><img  alt="avatar" src="" class="img-circle"></td>
            <td><span>Rui Pedro Fernandes</span></td>
            <td>Inscritos - Ativo</td>
          </tr>
          <tr>
            <td><img  alt="avatar" src="" class="img-circle"></td>
            <td><span>Rui Pedro Fernandes</span></td>
            <td>Inscritos - Ativo</td>
          </tr>
          <tr>
            <td><img id="professor-pos" alt="avatar" src="" class="img-circle"></td>
            <td><span></span>Rui Pedro Fernandes</td>
            <td>Inscritos - Ativo</td>
          </tr>
        </tbody>
    </table>
  </div>
  </div>
</div>

JS-fitness-#9:-draggable-quadratic-Bézier-curve.markdown

Bezier curve from one DOM Element to another with two control points!

===================================================================================================================== Forked from Ana Tudor's Pen JS fitness #9: draggable quadratic Bézier curve.

A Pen by Captain Anonymous on CodePen.

License.

script.js

/* compact way of setting PI = Math.PI, sin = Math.sin & so on... :D */
Object.getOwnPropertyNames(Math).map(function(p) { window[p] = Math[p]; });

var c = document.querySelector('.c') /* canvas element */, 
    w /* canvas width */, h /* canvas height */, 
    ctx = c.getContext('2d') /* get canvas context */, 
    
    /* start, end & control points for our quadratic Bézier curve */
    start, end, control1, control2;

/* FUNCTIONS */
var initCanvas = function() {
  /* canvas element stles that were set via CSS */
  var s = getComputedStyle(c);
  
  /*
   * get canvas dimensions as they were set via CSS
   * use them to set w & h variables and
   * canvas width & height attributes
   * (don't forget about these, 
   * canvas looks stretched if you do)
   */
  w = c.width = ~~s.width.split('px')[0];
  h = c.height = ~~s.height.split('px')[0];
  
  /* 
   * make sure the entire canvas is cleared 
   * before anything else 
   * this has no visual effect when init is called
   * for the first time
   */
  ctx.clearRect(0, 0, w, h);
  
  /* set stroke and fill styles */
  ctx.strokeStyle = '#AAE2FF';
  ctx.lineWidth=4;
  /* note that the fill is semitransparent, alpha = .2 */
  ctx.fillStyle = 'hsla(200, 25%, 7%, .2)';
  
  /* Get aluno row position*/
  var alunoPos =$("#aluno-pos").offset();
  
  /* Get professor row position*/
  var professorPos =$("#professor-pos").offset();
  
  start = {x:alunoPos.left,y:alunoPos.top+10};
  end = {x:professorPos.left,y:professorPos.top+10};
  
  /* Set control points */
  var control_offset_x = (end.x - start.x) / 2.2;
  control1 = {
    x:(start.x+control_offset_x),
    y:start.y
  };
  control2 = {
    x:(end.x-control_offset_x),
    y:end.y
  };
  
  /* call function that handles drawing stuff */
  drawOnCanvas();
};

var drawOnCanvas = function() {
  /* 
   * don't clear canvas before drawing omething new
   * just cover it with a semitransparent rectangle
   * this leaves what was drawn by previous calls
   * visible, but somehow "faded", 
   * creating the "trace effect"
   */
  ctx.rect(0, 0, w, h);
  ctx.fill();
  
  /* 
   * draw our quadratic Bézier curve 
   * for the current control point 
   */
  ctx.beginPath();
  ctx.moveTo(start.x, start.y);
  ctx.bezierCurveTo (control1.x, control1.y,control2.x, control2.y, end.x, end.y);
  ctx.fill(); /* for inside the curve */
  ctx.stroke();
};

/* START IT ALL */
/* 
 * inside the setTimeout so that 
 * the dimensions do get set via CSS before calling 
 * the init function
 */
setTimeout(function() {
  initCanvas();
  
  //c.addEventListener('mousemove', function(e) {
    /* 
     * coordinates of the control point 
     * of a quadratic Bézier curve whose midpoint
     * is at the current mouse position
     */
   // control = {
   //   'x': round(2*e.clientX - (start.x + end.x)/2),
   //   'y': round(2*e.clientY - (start.y + end.y)/2)
   // };
    
    /* draw this quadratic Bézier curve */
   // drawOnCanvas();
 // }, false);
  
  /* fix looks on resize so it doesn't look stretched */
  addEventListener('resize', initCanvas, false);
}, 15);

style.scss

@import "compass/css3";
body, html, canvas { width: 100%; height: 100%; }

html { overflow: hidden; }

body { margin: 0; }

.c { 
  background: hsla(200, 25%, 7%, .99); 
  position:absolute;
  top:0px;
  left:0px;
}