Find the Radius and Center of a Circle to Fit Within a Page Element

Find the Radius and Center of a Circle to Fit Within a Page Element


Given the width and height of a page element, you need to find the center and radius of the largest circle that fits within that page element. 


Find the smaller of the width and height; divide this by 2 to find the radius:

var circleRadius = Math.min(elementWidth, elementHeight) / 2;

Given the page element’s width and height, find the center by dividing both by 2:
var x = elementWidth / 2;
var y = elementHeight / 2;

Working with graphics requires us to do things such as finding the center of an element,
or finding the radius of the largest circle that will fit into a rectangle (or largest rectangle
that can fit in a circle).

demonstrates both of the solution calculations, modifying an SVG circle
contained within an HTML document so that the circle fits within the div element that
surrounds it.

Fitting a SVG circle into a div element

<!DOCTYPE html>
<title>Using Math method to fit a circle</title>
<style type="text/css">
 width: 600px;
 height: 400px;
 border: 1px solid black;
<script type="text/javascript">
window.onload = window.onresize = function() {
 var box = document.getElementById("elem");
 var style = window.getComputedStyle(box,null);

 var height = parseInt(style.getPropertyValue("height"));
 var width = parseInt(style.getPropertyValue("width"));
 var x = width / 2;
 var y = height / 2;
 var circleRadius = Math.min(width,height) / 2;
 var circ = document.getElementById("circ");
<div id="elem">
 <svg width="100%" height="100%">
 <circle id="circ" width="10" height="10" r="10" fill="red" />
It shows the page once it’s loaded. There are techniques in SVG that can ac‐ complish the same procedure using the SVG element’s viewPort setting, but even with these, at some point in time you’ll need to dust off your basic geometry skills if you want to work with graphics. However, as the example demonstrates, most of the math you’ll need is basic.


Post a Comment