Simple equilateral triangle with rounded corners in canvas 2D

Question

I can't find the right values to draw a simple equilateral triangle with rounded corners with a given radius. Thanks for your help.

var canvas = document.getElementById('arch');
var context = canvas.getContext('2d');

// Vertices of the equilateral triangle :
// (0,0) (200,0) (100, h*100)

const radius = 15
const h = Math.sqrt(3) / 2

context.beginPath();
context.moveTo(radius, 0);
context.lineTo(200 - radius, 0);
context.quadraticCurveTo(200, 0, 200, radius*h);
context.lineTo(100+radius, (h*200)-radius);
context.quadraticCurveTo(100, h*200, 100-radius, h*200);
context.lineTo(radius, radius);
context.quadraticCurveTo(0, 0, 0, 0);

context.lineWidth = 2
context.strokeStyle = 'black';
context.stroke();

<canvas id="arch" width=500px height=500px>
</canvas>

Answer 1

I don't think that quadraticCurveTo will get your expected result, try using arc instead:
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/arc

Here is a quick example:

var canvas = document.getElementById('arch');
var context = canvas.getContext('2d');

const radius = 18
context.lineWidth = 8
context.strokeStyle = 'black';

context.beginPath();
context.arc(30, 30, radius, 2.2, -1.4);
context.arc(90, 30, radius, 4.6, 1.0);
context.arc(60, 60, radius, 0.6, 2.6);
context.arc(30, 30, radius, 2.2, -1.4);
context.stroke();

<canvas id="arch"></canvas>