Untitled

<!doctype html>
<html>
<head>
<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
    var b=document.getElementById("canvas");
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    ctx.strokeStyle="lightgray";

    var offsetX=b.offsetLeft;
    var offsetY=b.offsetTop;

    var mouseIsDown=false;
    var lastX=0;
    var lastY=0;
    ctx.canvas.width  = window.innerWidth-40;
    ctx.canvas.height = window.innerHeight-40;
    var Boxes=[];
    makebox(20,30,50,25,"skyblue",2,2);
    makebox(20,100,30,25,"skyblue",2,2);
    makebox(20,170,50,25,"salmon",2,2);
    makebox(20,240,30,25,"salmon",2,2);
    function sidebar(){
      ctx.fillRect(0+canvas.width*.75, 0, canvas.width/4, canvas.height);
    }
    function makebox(x,y,width,height,fill,iv,ov){
        var Box={
          x:x,
          y:y,
          width:width,
          height:height,
          right:x+width,
          bottom:y+height,
          fill:fill,
          inputvals:iv,
          outputvals:ov
        }
        Boxes.push(Box);
        return(Box);
    }

    drawAllboxes();

    function drawAllboxes(){
        ctx.clearRect(0,0,canvas.width,canvas.height);
        for(var i=0;i<Boxes.length;i++){
            var Box=Boxes[i]
            drawbox(Box);
            ctx.fillStyle=Box.fill;
            ctx.fill();
            ctx.stroke();
        }
    }

    function drawbox(Box){
      var lch;
      if(Box.inputvals>Box.outputvals){
        lch=Box.inputvals;
      }else{
        if(Box.inputvals==Box.outputvals){
          lch=Box.inputvals;
        }else{
          lch=Box.outputvals;
        }
      }
      ctx.beginPath();
      ctx.fillStyle = Box.fill;
      ctx.fill();
      ctx.fillRect(Box.x,Box.y, Box.width, Box.height+lch*20);
      ctx.closePath();
      for(var i=0;i<Box.inputvals;i++){
        ctx.beginPath();
        ctx.arc(Box.x, Box.y+10+i*20, 1, 0, 2 * Math.PI, false);
        ctx.lineWidth = 5;
        ctx.strokeStyle = 'green';
        ctx.stroke();
        ctx.closePath();
      }
      for(var i=0;i<Box.outputvals;i++){
        ctx.beginPath();
        ctx.arc(Box.right, Box.y+10+i*20, 1, 0, 2 * Math.PI, false);
        ctx.lineWidth = 5;
        ctx.strokeStyle = 'blue';
        ctx.stroke();
        ctx.closePath();
      }
    }

    function handleMouseDown(e){
      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);
      lastX=mouseX;
      lastY=mouseY;
      mouseIsDown=true;
    }

    function handleMouseUp(e){
      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);
      mouseIsDown=false;
    }

    function handleMouseMove(e){
      if(!mouseIsDown){ return; }
      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);
      for(var i=0;i<Boxes.length;i++){
          var Box=Boxes[i];
          drawbox(Box);
          if(ctx.isPointInPath(lastX,lastY)){
              Box.x+=(mouseX-lastX);
              Box.y+=(mouseY-lastY);
              Box.right=Box.x+Box.width;
              Box.bottom=Box.y+Box.height;
          }
      }
      lastX=mouseX;
      lastY=mouseY;
      drawAllboxes();
    }
    b.addEventListener('mousedown',function(e){handleMouseDown(e);});
    b.addEventListener('mousemove',function(e){handleMouseMove(e);});
    b.addEventListener('mouseup',function(e){handleMouseUp(e);});

});
</script>
</head>
<body>
    <canvas id="canvas" width="640" height="480"></canvas>
</body>
</html>