FamilyTree - Canvas

by rajeshpillai

HTML

<div id="wrapper" style="max-width: 100%; overflow: auto;">
  <canvas id="tree" width="1000" height="800">
  </canvas>
  </div>

CSS

#wrapper{
  width:800px;
}

#tree {
  background:black;
  
  
}

.child1 {
  position:absolute;
  width: 50px;
  height: 50px;
  background:red;
  top:50px;
  left:10px;
  
}

.child2 {
  position:absolute;
  width: 50px;
  height: 50px;
  background:red;
  top:50px;
  left:150px;  
}

JavaScript

$(function () {
  canvas = document.getElementById("tree");
  ctx = canvas.getContext("2d");
  
  var a = new Box(300,100,100,30);
  var b = new Box(150,200,100,30);
  var c = new Box(450,200,100,30);
  var c1 = new Box(580,200,100,30);
  var d = new Box(100,300,100,30);
  connect(a,b,"left");
  connect(a,c,"right");
  connect(a,c1,"right");
  connectCurve(b,d,"left");
});

function connect(o1, o2, side) {
  //draw line
  var s = (side == 'undefined') ? "left" : "right";
  var start = o1.x;
  if (side === 'right'){
    start = o1.x + o1.width;
  }
  ctx.beginPath();
  ctx.moveTo(start, o1.y + o1.height/2);
  ctx.lineTo(o2.x + o2.width/2, o2.y);
  ctx.closePath();
  //ink line
  ctx.lineWidth = 0.1;
  ctx.strokeStyle = "#fff"; //black
  ctx.stroke();
}

function connectCurve(o1, o2, side) {
  //draw line
  var s = (side == 'undefined') ? "left" : "right";
  var start = o1.x;
  if (side === 'right'){
    start = o1.x + o1.width;
  }
  ctx.moveTo(o1.x + o1.width/2, o1.y + o1.height);
  ctx.quadraticCurveTo(o1.x+50,o1.y+50,o2.x+40,o2.y);
  //ink line
  ctx.lineWidth = 0.1;
  ctx.strokeStyle = "#fff"; //black
  ctx.stroke();
}

var Box = function (x, y, width, height) {
    this.x = x;
    this.y = y;
    this.width = width;
    this.height = height;
    ctx.save();
    ctx.strokeStyle = "red";
    ctx.beginPath();
    ctx.strokeRect(x, y, width, height);
    ctx.stroke();
    ctx.closePath();
    ctx.restore();
};

var Circle = function (x, y, radius) {
    this.x = x;
    this.y = y;
    this.radius = radius;
    ctx.save();
    ctx.strokeStyle = "red";
    ctx.beginPath();
    ctx.arc(x, y, radius, 0, Math.PI * 2,false);
    ctx.stroke();
    ctx.closePath();
    ctx.restore();
};

/*
$(document).ready(function(){
    $('#wrapper').on(
    {
    mousedown: function(clicke){
        origX = clicke.pageX + $('#wrapper').scrollLeft();
        $('#wrapper').on(
        {
        mousemove : function(e){
            curX = e.pageX + $('#wrapper').scrollLeft();
         ...