<div class="shape-container">
  <div id="draw-shapes"></div>
</div>

body {
  margin: 20px auto;
  font-family: "Lato";
  font-weight: 300;
  overflow: hidden;
}

div#draw-shapes {
  width: 95%;
  height: 600px;
  margin: 2.5% auto;
}

var elem = document.getElementById('draw-shapes');
var two = new Two({ fitted: true }).appendTo(elem);

var styles = {
  size: 22,
  family: 'Lato'
}

var texts = [];

var rect = two.makeRectangle(150, 80, 200, 100);
rect.stroke = 'orange';
rect.linewidth = 5;

var roundRect = two.makeRoundedRectangle(500, 80, 400, 100, 10);
roundRect.stroke = 'blue';
roundRect.linewidth = 5;

var circle = two.makeCircle(400, 250, 75);
circle.fill = 'yellow';
circle.noStroke();

var ellipse = two.makeEllipse(150, 250, 100, 85);
ellipse.fill = 'pink';
ellipse.stroke = 'red';
ellipse.linewidth = 4;

var arrow = two.makeArrow(50, 400, 250, 500, 40);
arrow.stroke = 'green';
arrow.linewidth = 4;


var polygon = two.makePolygon(400, 450, 75, 8);
polygon.stroke = 'black';
polygon.linewidth = 4;

var arcSegment = two.makeArcSegment(625, 250, 50, 100, -Math.PI/2, Math.PI);
arcSegment.fill = 'violet';
arcSegment.linewidth = 5;

texts[0] = two.makeText('Rectangle', 150, 80, styles);
texts[1] = two.makeText('Rounded Rectangle', 500, 80, styles);
texts[2] = two.makeText('Circle', 400, 250, styles);
texts[3] = two.makeText('Ellipse', 150, 250, styles);
texts[4] = two.makeText('Arrow', 175, 430, styles);
texts[5] = two.makeText('Polygon', 400, 450, styles);
texts[6] = two.makeText('Arc', 625, 250, styles);

group = two.makeGroup(rect, roundRect, circle, ellipse, arrow, polygon, arcSegment, ...texts);

group.position.set(two.width / 2, two.height/ 2);
group.center();

two.update();