[Stackoverflow] Canvas.arc() radius em/%=>px converter

https://stackoverflow.com/questions/43923105/2d-canvas-specify-arc-radius-units/47363654#47363654

HTML

<body onload=drawCircle()>
  <div id="container">
    <canvas id="myCanvas" width="450px" height="450px">No canvas support =(</canvas>
  </div>
</body>

CSS

#myCanvas {
  border: 3px solid red;
}

JavaScript

function percentToPixelParentBased(percent, element, width_based=true) {
	return percentToPixelElementRelative(percent, element.parentElement, width_based);
}


function emToPixelParentBased(em_value, element, width_based=true) {
	return emToPixelElementRelative(em_value, element.parentElement);
}


function percentToPixelElementRelative(percent, element=false, width_based=true) { 
  if (element) {
  	if (width_based) {
    	var dimension = element.style.width || element.offsetWidth;
    } else {
    	var dimension = element.style.height || element.offsetHeight; 
    }
  } else {
  	if (width_based) {
    		var dimension = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
    } else {
    	var dimension = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
    }
  }
  
  var pixels_in_percent = dimension / 100;
  
  return pixels_in_percent * percent;
}


function emToPixelElementRelative(em_value, element=false) {
	var font_size = getFontSize(element);
  var ppi = getPPI();
  var px_in_pt = 72 / ppi; /* 1pt is 1/72 of an inch */
  var value_in_pt = em_value * font_size;
  
  return value_in_pt * px_in_pt;
}


function getFontSize(element=false) {
	if (element) {
  	return parseFloat(getComputedStyle(element).fontSize);
  } else {
  	/* getting font size from body */
  	return parseFloat(getComputedStyle(document.body).fontSize);
  }
}


function getPPI() {
  var inch_div_html = "<div id='inch-div' style='height: 1in; left: -100%; position: absolute; top: -100%; width: 1in;'></div>";
  document.body.insertAdjacentHTML( 'afterbegin', inch_div_html);
  
  var device_pixel_ratio = window.devicePixelRatio || 1;
  var ppi_test_div = document.getElementById('inch-div');
  var ppi = ppi_test_div.offsetWidth * devicePixelRatio;

  document.body.removeChild(ppi_test_div);

  return ppi;  
}
  

function drawCircle() {
	var canvas = document.getElementById("myCanvas");
	var context = canvas.getContext("2d");
	
  var canvas_width...