<link href="https://fonts.googleapis.com/css?family=Oswald:300,500,600,700" rel="stylesheet">
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/255459/fabric.js"></script>
<!--   <script src="https://unpkg.com/vue/dist/vue.js"></script> -->
<canvas id="canvas" class = "theCanvas" width="800" height="250" style=""></canvas>

body {
  background: #fcfcfc;
  font-size: 16px;
  font-family: 'Oswald', sans-serif;
  color: #444;
  border: 5px solid #444;
  width: 95%;
  height: 250px;
  margin-left: auto;
  margin-right: auto;
  text-align:center;
  
}

.container{
  position: relative;
 margin-left: auto;
    margin-right: auto;
    width: 80%;
}
#canvasTwo{
  font-family: 'Oswald', sans-serif;

}

h1 {
  font-size: 260%;
  line-height: 1.2em;
}

var poem = ["A Language", "That Can", "Be Interacted", "With"];

//I really want a simple equation that counts the number of characters and multiplies that by x where x is the number per character that a string would take up on a grid
var distances = [20, 210, 360, 590];
var canvas = new fabric.Canvas('canvas');
// var instructions = new fabric.Text("Click on any of the words to manipulate them ", {
// fontFamily:  'Oswald',
// fontSize:20,
// fill: '#444',
//   left: 10,
//   hasControls: true,
//   hasBorders: true,
//   top: 300});

// canvasTwo.add(instructions)

var yDown = 50;
var xAcross = 120;
//how to I update this so that each time a new thing is added to the array it redraws or draws the new One
//It would be the equivelant of update in D3
for (i = 0; i < poem.length; i++) {
  var text = new fabric.Text(poem[i], {
    fontFamily: 'Oswald',
    fontSize: 42,
    fill: '#444',
    left: distances[i]+40,
    // top: 50*i });
    top: yDown
  });

  // xAcross = distance[i];
  // yDown = yDown+10;

  canvas.add(text);
    //     text.hasControls = true;
    // text.hasBorder = true;
}

text.hasControls = true;
text.hasBorder = true;
canvas.selectionColor = 'rgba(0,255,0,0.3)';
canvas.selectionBorderColor = 'red';
canvas.selectionLineWidth = 5;