Zoom to Scale in PaperJS

In a Fixed space of a particular dimension say 500px X 350px. I want the PaperJS diagram to fit such that the everything fits well by scaling itself. 

by Shishir Raven

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.0/paper-full.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>PaperJS: Scale to Fit</h1>
<p>In a Fixed space of a particular dimension say 500px X 350px. 
I want the PaperJS diagram to fit such that the everything fits well by scaling itself. </p>
<canvas id="canvas_1"></canvas><br>
<button id="zoom_to_fit">Click to Scale to Fit</button>

<hr>
Created by <a href="http://www.iamshishir.com">Shishir Raven</a> for <a href="http://www.thewebfort.com">Webfort Technologies</a>
<br>
Hire Me or hire a team for your projects at very affordable rates.

CSS

#canvas_1 {
  width: 200px;
  height: 200px;
  background-color: white;
  border: 1px solid black;
}

JavaScript

var scope = new paper.PaperScope();

var canvas_1 = document.getElementById('canvas_1');
scope.setup(canvas_1)
scope.activate();

var myCircle = new scope.Path.Circle(new scope.Point(100, 70), 50);
myCircle.fillColor = 'black';
var myCircle = new scope.Path.Circle(new scope.Point(10, 10), 50);
myCircle.fillColor = 'green';
var myCircle = new scope.Path.Circle(new scope.Point(200, 200), 50);
myCircle.fillColor = 'yellow';


$(document).ready(function()
{
	$("#zoom_to_fit").click(function()
  {
  	// Finding out the bounding boxes. 
    scope.project.activeLayer.fitBounds(scope.view.bounds);
  })
  
});