<script type="text/paperscript" canvas="quad">
  tool.maxDistance = 50;
  tool.minDistance = 4;

  function onMouseDrag(event) {
    	var circle = new Path.Circle({
		      center: event.middlePoint,
		      radius: event.delta.length / 2
	    });
	    circle.fillColor = 'pink';
	    circle.strokeColor = 'black';
  }
</script>
<canvas id="quad" resize></canvas>
* {
  padding: 0;
  margin: 0;
}

canvas {
  width: 850px;
  height: 400px;
  background: lightgray;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.9.25/paper-full.min.js