three.js shape to line

shape to line seems to be missing a segment

HTML

<script src="http://threejs.org/build/three.min.js"></script>

CSS

body {
	background-color: #000;
	margin: 0px;
	overflow: hidden;
}

JavaScript

// three.js shape to line

var renderer, scene, camera;

var line;
var MAX_POINTS = 500;
var drawCount;

init();
animate();

function init() {

	// info
	var info = document.createElement( 'div' );
	info.style.position = 'absolute';
	info.style.top = '30px';
	info.style.width = '100%';
	info.style.textAlign = 'center';
	info.style.color = '#fff';
	info.style.fontWeight = 'bold';
	info.style.backgroundColor = 'transparent';
	info.style.zIndex = '1';
	info.style.fontFamily = 'Monospace';
	info.innerHTML = "three.js - shape to line seems to miss a segment";
	document.body.appendChild( info );

	// renderer
	renderer = new THREE.WebGLRenderer();
	renderer.setPixelRatio( window.devicePixelRatio );
	renderer.setSize( window.innerWidth, window.innerHeight );
	document.body.appendChild( renderer.domElement );

	// scene
	scene = new THREE.Scene();

	// camera
	camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
	camera.position.set( 0, 0, 1000 );

  // shape
  shape = new THREE.Shape();
  shape.moveTo( 0, 0 );
  shape.lineTo( 40, 0 );
  shape.lineTo( 40, 40 );
  shape.lineTo( 20, 60 );
  shape.lineTo( 0, 40 );
  
  shape.autoClose = true;
  
  var points = shape.getPoints();
  
	// geometry
	var geometry = new THREE.Geometry().setFromPoints( points );

  var bufferGeometry = new THREE.BufferGeometry().setFromPoints( points );;

	// material
	var material = new THREE.LineBasicMaterial( { color: 0xff0000, linewidth: 2 } );

	// line
	line1 = new THREE.Line( geometry,  material );
  line2 = new THREE.Line( bufferGeometry,  material );
  line2.position.y = -80;
	scene.add( line1 );
  scene.add( line2 );

}

// render
function render() {

	renderer.render( scene, camera );

}

// animate
function animate() {

	requestAnimationFrame( animate );

  render();

}