title: How do I draw a box around multiple shapes in html5 canvas
body: <p>I am trying to draw a box around multiple shapes in canvas to say that those shapes are related like a group. 
  Tried as below :</p>
  
  <pre><code>var ctx = c.getContext("2d"),
  radius = 10,
  rect = c.getBoundingClientRect(),
  
  ctx.fillText("Draw something here..", 10, 10);
  ctx.fillStyle = "red";
  ctx.beginPath();
  ctx.arc(250, 300, radius, 0, 6.28);
  ctx.fill();
  ctx.fillStyle = "yellow";
  ctx.beginPath();
  ctx.arc(200, 100, radius, 0, 10.28);
  ctx.fill();
  ctx.fillStyle = "brown";
  ctx.beginPath();
  ctx.arc(350, 210, radius, 0, 10.28);
  ctx.fill();
  
  var x = (250+200+350)/3;
  var y = (300+100+210)/3;
  
  var radius = Math.sqrt((x1*x1)+(y1*y1));
  var _minX = x - radius;
  var _minY = y - radius;
  var _maxX = x + radius;
  var _maxY = y + radius;
  
  ctx.rect(_minX,_minY,(_maxX-_minX+2),(_maxY-_minY+2));
  ctx.stroke();
  </code></pre>
  
  <p>But it is not drawing properly.
  <a href="https://stackoverflow.com/questions/46528123/how-to-get-bounding-box-coordinates-for-canvas-content?noredirect=1&amp;lq=1">How to get bounding box coordinates for canvas content?</a> this link explains only for the path not for the existing shapes.
   Below is the image how I want to draw:
  <a href="https://i.stack.imgur.com/dFYr1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dFYr1.png" alt="enter image description here"></a> </p>