<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;
This Pen doesn't use any external CSS resources.