Shape Geometry with Orthographic camera in threejs not displaying

Question

I'm trying to display shapes in three.js. Unfortunately nothing is displayed and I can't really figure out what I am missing. The set up is basically as in the following code snippet

let canvas = document.getElementById(this.canvasId);
this.scene = new Scene();
this.renderer = new WebGLRenderer({canvas: canvas});

//create the camera and set the viewport
let width = canvas.clientWidth;
let height = canvas.clientHeight;

canvas.width = width;
canvas.height = height;
this.renderer.setViewport(0, 0, width, height);

this.camera = new OrthographicCamera(width / -2, width/2, height/-2, height/2, -500, 1000);

//create a square as shape
let shape = new Shape();
shape.moveTo(100, 100);
shape.lineTo(200, 100);
shape.lineTo(200, 200);
shape.lineTo(100,200);
shape.lineTo(100,100);

let shapeGeom = new ShapeGeometry(shape);
let shapeMaterial = new MeshBasicMaterial({color: 0x00ff00});
let shapeMesh = new Mesh(shapeGeom, shapeMaterial);
shapeMesh.position.set(200, 200, 0);
this.scene.add(shapeMesh)

//render
this.renderer.render(this.scene, this.camera);

Thanks for any help!