paper.js - create array of draggable shapes

I am trying to create a set of shapes in paper.js. Each shape should be draggable and the index of that shape be given during dragging.

I have tried the following code, but I just get the message "Uncaught TypeError: Cannot read property 'position' of undefined".

Any help gratefully received.

<canvas id = "canvas_1" > < /canvas>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.11/paper-full.min.js" > < /script>

<script type = "text/paperscript" canvas = "canvas_1" >
  var path = [];

  for (i = 0; i < 5; i++) {

    path[i] = new Path.Circle({
      center: view.center,
      radius: 30,
      fillColor: 'blue'
    });

    path[i].onMouseDrag = function(event) {
      path[i].position += event.delta;
      console.log("shape " + i + " is being dragged.")
    }

  }

</script>

from paper.js - create array of draggable shapes