El cuadrado y el círculo no son concéntricos porque la función arc toma como posición el centro mientras que strokeRect la esquina superior izquierda.
Aprovechando para implementar funciones que dibujen a partir del centro queda así:
function cuadrado(center, size){
halfSize = { x: size.x / 2, y: size.y / 2 }
topLeftCorner = { x: center.x - halfSize.x, y: center.y - halfSize.y }
ctx.strokeRect(topLeftCorner.x, topLeftCorner.y, size.x, size.y)
}
function circulo(center, radius){
ctx.arc(center.x, center.y, radius, 0, Math.PI * 2)
}
var c = document.getElementById("myCanvas")
var ctx = c.getContext("2d")
let centro = { x: 50, y: 50 }
let tamaño = { x: 50, y: 50 }
let diámetro = Math.sqrt(tamaño.x * tamaño.x + tamaño.y * tamaño.y)
ctx.moveTo(0,0)
ctx.lineTo(200,100)
sqrt2 = Math.sqrt(2)
cuadrado(centro, tamaño)
circulo(centro, diámetro/2)
ctx.stroke()
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your#d3d3d3;">Your browser does not support the HTML canvas tag.</canvas>