compute height and width given diagonal and aspect ratio

by greatCar

HTML

<p>m <input id="m" type="number" min="1" max="100" value="16"/> : <input id="n" type="number" min="1" max="999" value="9"> n</p>
<p>d = <input id="d" type="number" min="1" max="100" value="32"/></p>
<p>w = <span id="w"></span></p>
<p>h = <span id="h"></span></p>
<p><input id="calculate" type="submit" value="Calculate"/></p>
<canvas id="canvas" width="600" height="400"></canvas>

CSS

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

#m {
  text-align: right;
}

JavaScript

function calculate() {
  var canvas = document.getElementById("canvas")
	var m = +document.getElementById("m").value.replace(",", ".")
  var n = +document.getElementById("n").value.replace(",", ".")
  var d = +document.getElementById("d").value.replace(",", ".")
  var w = document.getElementById("w")
  var h = document.getElementById("h")
  var x = calcX(d, n, m)
  var y = calcY(d, n, m)
  w.innerHTML = x.toFixed(2)
  h.innerHTML = y.toFixed(2)
  depict(canvas, m, n, d, x, y)
}

function calcX(d, n, m) {
	return (d * m) / Math.sqrt(m * m + n * n)
}

function calcY(d, n, m) {
	return (d * n) / Math.sqrt(m * m + n * n)
}

function depict(canvas, m, n, d, x, y) {
	if (!canvas.getContext) return
	var context = canvas.getContext("2d")
	var drawWidth = context.canvas.width - 20
  var drawHeight = context.canvas.height - 20
	var scale = Math.min(drawWidth / x, drawHeight / y)
  var label
  var dim
  context.clearRect(0, 0, context.canvas.width, context.canvas.height)
  context.fillStyle = "rgb(150, 200, 250)"
  context.fillRect(0, 0, x * scale, y * scale)
  arrow(context, 0, y * scale + 10, x * scale, y * scale + 10, true, true)
  arrow(context, x * scale + 10, 0, x * scale + 10, y * scale, true, true)
  arrow(context, 10, y * scale - 10 * (y/x), x * scale - 10, 10 * (y/x), true, true)
  context.fillStyle = "black"
  context.font = "20px Arial"
  label = m + ":" + n + " = ~" + (m / n).toFixed(6)
	context.fillText(label, 10, 30)
  label = "w = " + x.toFixed(2)
  dim = context.measureText(label)
  context.fillText(label, (x * scale - dim.width) / 2, y * scale - 10)
  label = "h = " + y.toFixed(2)
  dim = context.measureText(label)
  context.fillText(label, x * scale - dim.width - 10, (y * scale) / 2)
  label = "d = " + d
  dim = context.measureText(label)
  context.save()
  context.translate((x * scale - dim.width) / 2, (y * scale) / 2)
  context.rotate(Math.atan2(-y,x))
  context.fillText(label, 0, 0)
  context.restore()
}

//...